@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities; /* CommandItem styles live in their own sidecar. Pull them in here so that * importing `cinder/command-palette` brings in CommandItem styles. */ @import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/command-item/command-item.css'; @layer cinder.components { /* ======================================== * COMMAND PALETTE * ======================================== */ .cinder-command-palette { /* Reset browser defaults */ margin: 0 auto; padding: 0; border: none; background: transparent; color: var(--cinder-text-default); /* `overflow: visible`, not `hidden` — the panel (below) is the clipping boundary, matching modal.css's `.cinder-modal`/`.cinder-modal__panel` split (see OVERLAY-POLICY.md's "Portal root" section: "its content panel remains the clipping boundary for ordinary modal content"). The panel already clips its own children via its own `overflow: hidden` and `border-radius`, so nothing bleeds past the rounded corners. Keeping `overflow: hidden` here instead would clip the panel's own enter/exit `translate` motion at the dialog's box — round 1 review caught this exact regression once the enter/exit motion moved from the dialog itself (this element) onto the panel. */ overflow: visible; border-radius: var(--cinder-radius-lg); /* Anchor near the top of the viewport — top-layer elements use fixed positioning relative to the viewport. z-index is intentionally absent: showModal() places the dialog in the top layer, which is above all stacking contexts. */ position: fixed; inset-block-start: max(4rem, 20vh); inset-inline: 0; max-width: min(90vw, 40rem); width: 100%; } .cinder-command-palette::backdrop { background: var(--cinder-overlay-backdrop); } @supports (backdrop-filter: blur(1px)) { .cinder-command-palette::backdrop { backdrop-filter: blur(var(--cinder-overlay-blur)); } } /* ---------------------------------------- * Panel * ---------------------------------------- */ .cinder-command-palette__panel { display: flex; flex-direction: column; background: var(--cinder-surface-raised); border: 1px solid var(--cinder-border); border-radius: var(--cinder-radius-lg); overflow: hidden; max-height: 60vh; box-shadow: 0 4px 6px -1px color-mix(in oklch, var(--cinder-text-default) 8%, transparent), 0 10px 15px -3px color-mix(in oklch, var(--cinder-text-default) 12%, transparent); /* Symmetric enter/exit motion — see "Reduced motion — panel enter/exit transition" below for the exit half and the OVERLAY-POLICY.md citation. No resting `translate` here (matching modal.css's panel): a non-`none` transform value, even a no-op `0 0`, establishes a CSS containing block, which would break `position: fixed` for any descendant portaled surface for the whole time the palette is open. `none` transitions to/from a real value fine. */ opacity: 1; transition: opacity var(--cinder-duration-normal) var(--cinder-ease-standard), translate var(--cinder-duration-normal) var(--cinder-ease-spring); } /* ---------------------------------------- * Search row * ---------------------------------------- */ .cinder-command-palette__search { display: flex; align-items: center; gap: var(--cinder-space-3); min-block-size: 4.5rem; padding-inline: var(--cinder-space-5); background: var(--cinder-surface-raised); flex-shrink: 0; } .cinder-command-palette__search-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--cinder-text-muted); } .cinder-command-palette__input { flex: 1; border: none; background: transparent; color: var(--cinder-text-default); font-size: var(--cinder-text-base); line-height: var(--cinder-leading-normal); padding-block: var(--cinder-space-2-5); border-radius: var(--cinder-radius-md); } /* Focus ring — the library's standard "transparent outline + two-stop box-shadow" recipe (see input.css `.cinder-input:focus-visible` and the shared `--_cinder-focus-ring-shadow` formula in foundation.css). :focus-visible so the ring does not appear on mouse/pointer click. */ .cinder-command-palette__input:focus-visible { outline: var(--cinder-ring-width) solid transparent; box-shadow: var(--_cinder-focus-ring-shadow); } @media (forced-colors: active) { .cinder-command-palette__input:focus-visible { outline: var(--cinder-ring-width) solid Highlight; /* Matches input.css. Without the offset the Highlight outline sits flush against the field's own border, which renders in the same colour family in forced-colors mode, so the focus indicator visually merges with the control's edge. */ outline-offset: 1px; } } .cinder-command-palette__input::placeholder { color: var(--cinder-text-muted); } /* ---------------------------------------- * Listbox (scrollable items area) * ---------------------------------------- */ .cinder-command-palette__listbox { list-style: none; margin: 0; padding: var(--cinder-space-2) 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; flex: 1; } /* ---------------------------------------- * Empty state * ---------------------------------------- */ .cinder-command-palette__empty { padding: var(--cinder-space-8) var(--cinder-space-4); text-align: center; color: var(--cinder-text-muted); font-size: var(--cinder-text-sm); flex-shrink: 0; } /* ---------------------------------------- * Consumer-rendered groups * ---------------------------------------- */ .cinder-command-group { margin: 0; padding-block: var(--cinder-space-1); list-style: none; } .cinder-command-group ul { margin: 0; padding: 0; list-style: none; } .cinder-command-group__label { display: block; padding: var(--cinder-space-1-5) var(--cinder-space-5); color: var(--cinder-text-muted); font-size: var(--cinder-text-xs); font-weight: var(--cinder-font-medium); letter-spacing: 0.04em; text-transform: uppercase; } /* ---------------------------------------- * Footer * ---------------------------------------- */ .cinder-command-palette__footer { display: flex; align-items: center; gap: var(--cinder-space-3); padding: var(--cinder-space-2) var(--cinder-space-4); border-block-start: 1px solid var(--cinder-border-muted); background: var(--cinder-surface); flex-shrink: 0; font-size: var(--cinder-text-xs); color: var(--cinder-text-muted); } /* CommandItem styles have been extracted to command-item/command-item.css * so both CommandPalette and CommandMenu can @import them without * duplicating rules. The import is placed outside the @layer block above. */ /* ---------------------------------------- * Panel enter/exit transition * ---------------------------------------- * OVERLAY-POLICY.md, "Transition lifecycle" > "Awaiting completion vs. * destroy-on-close": every overlay that animates in must animate out * symmetrically and await transition completion before unmount. This * replaces the former `animation`/`@keyframes` enter (and the * `dialog.close()`-immediately exit asymmetry that named Command Palette in * "Known deviations") with `transition`-driven styles the shared * `waitForTransitionCompletion` helper can actually detect — * `transitionend` never fires for a CSS `animation`. Transition properties * are named explicitly (never `all`) per that section's "Only after that * callback..." clause: with `all`, the helper cannot enumerate tracked * properties and would resolve on whichever property's `transitionend` * happens to fire first, even if others are still transitioning. Reduced * motion needs no separate override here — `--cinder-duration-*` tokens * already collapse to `0ms` under both the media query and the * `data-cinder-reduced-motion`/`data-reduced-motion` attribute overrides * (tokens-base.css), which is exactly what * `waitForTransitionCompletion` reads to resolve immediately. */ .cinder-command-palette__panel[data-cinder-closing] { opacity: 0; translate: 0 -0.75rem; pointer-events: none; } @starting-style { .cinder-command-palette__panel { opacity: 0; translate: 0 -0.75rem; } } }