@oddkin/components 0.0.0-stage → 1.0.0-beta.1

package/dist/command-palette/command-palette.d.ts

@@ -0,0 +1,105 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import { type CommandRecord } from '../collection/collection.js';
+import { TextHints } from '../form-control/text-hints.js';
+import type { NavigationActionDetail } from '../side-nav/side-nav.js';
+export type { CommandRecord, QueryChangeDetail } from '../collection/collection.js';
+export declare const COMMAND_PALETTE_STRINGS: {
+    search: string;
+    empty: string;
+    loading: string;
+    navigate: string;
+    choose: string;
+    close: string;
+};
+/** A command was chosen; cancel it to keep the palette open. */
+export declare const commandActionEvent: import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+declare const OddkinCommandPalette_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly placeholder: import("@oddkin/core/element").PropDefinition<string>;
+    readonly items: import("@oddkin/core/element").PropDefinition<readonly CommandRecord[] | undefined>;
+    readonly open: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly loading: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly noFilter: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        search: string;
+        empty: string;
+        loading: string;
+        navigate: string;
+        choose: string;
+        close: string;
+    }> | undefined>;
+}>;
+/**
+ * A command palette: a modal dialog with a search input and the matching commands below it
+ * (APG combobox with a listbox popup that is always shown). Typing filters the commands by label
+ * and makes the first match active; Enter or a click runs it (`odd-action`) and closes the palette;
+ * Escape or a press on the backdrop closes it, and focus returns to where it was.
+ *
+ * @slot empty - Shown when no command matches and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart dialog - The `<dialog>` surface.
+ * @csspart search - The search field around the input.
+ * @csspart input - The search input (`role="combobox"`).
+ * @csspart listbox - The `role="listbox"` of commands.
+ * @csspart item - Each command row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart footer - The keyboard hints under the results.
+ * @cssprop --odd-command-palette-inline-size - Its width, within the viewport (default 40rem).
+ * @a11y A modal `dialog` named by `label`. Focus starts in the search input, a `combobox` named by `strings.search` that controls the `listbox` of commands and names the active one with `aria-activedescendant` (the active row also has `aria-selected`). Groups are named by their heading. Everything outside is inert while it is open, and closing returns focus to the element that had it.
+ * @keyboard Typing filters the commands; Up and Down move the active command (wrapping); Enter runs it. Escape closes the palette.
+ * @a11y The global `inputmode`, `enterkeyhint`, `autocapitalize`, `autocorrect`, and `spellcheck` attributes on the host are forwarded to the search input; `spellcheck` defaults to `false`, as a query is not prose.
+ * @previewRole commandPalette
+ * @useFor Finding and running any command or destination by name, from anywhere in an app (typically opened with Ctrl+K or Cmd+K).
+ * @notFor A few actions behind a button (use odd-menu); choosing a value in a form (use odd-combobox); site search results (use a page).
+ * @category Actions
+ * @customization 1 2 3
+ */
+export declare class OddkinCommandPalette extends OddkinCommandPalette_base {
+    #private;
+    static events: {
+        'odd-action': import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+        'odd-query-change': import("@oddkin/core/element").EventDefinition<import("../collection/collection.js").QueryChangeDetail>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinCommandPalette>;
+    /** @internal The host's text-entry hints for the search input. */
+    readonly _hints: TextHints;
+    /** @internal The active row's index among the shown commands. */
+    readonly _activeIndex: import("@oddkin/core/reactive").Signal<number>;
+    /** @internal The commands the results show: all, or those whose label contains the text. */
+    readonly _shown: Readable<readonly CommandRecord[]>;
+    /** The text in the search input, as the user typed it (read-only). */
+    get query(): string;
+    /** @internal Localized strings. */
+    get _strings(): typeof COMMAND_PALETTE_STRINGS;
+    /** @internal The search input. */
+    _input(): HTMLInputElement | null | undefined;
+    /** @internal The command rows, in the order of `_shown`. */
+    _rows(): HTMLElement[];
+    /** Opens it with the search input focused. */
+    show(): void;
+    /** Closes it; focus returns to where it was when it opened. */
+    close(): void;
+    /** @internal Runs the shown command at `index`: reports it and closes, unless cancelled. */
+    _choose(index: number): void;
+    /** @internal Template handler: typing filters and makes the first match active. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: Enter runs the active command (arrows are the controller's). */
+    readonly _onKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: presses on the results keep focus in the input. */
+    readonly _onResultsPointerdown: (event: PointerEvent) => void;
+    /** @internal Template handler: a click on a command runs it. */
+    readonly _onResultsClick: (event: MouseEvent) => void;
+    protected connected(scope: Scope): void;
+    protected mounted(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-command-palette': OddkinCommandPalette;
+    }
+}
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/command-palette/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAQ,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEpF,eAAO,MAAM,uBAAuB;IAClC,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,KAAK;CACN,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,kBAAkB,wEAO7B,CAAC;;;;;;;;;;;;;;;;;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,oBAAqB,SAAQ,yBAoBxC;;IACA,OAAgB,MAAM;QACpB,YAAY;QACZ,kBAAkB;MAClB;IACF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,oBAAoB,CAAC,CAAC;IAEtE,kEAAkE;IAClE,QAAQ,CAAC,MAAM,YAAuB;IAmBtC,iEAAiE;IACjE,QAAQ,CAAC,YAAY,iDAAc;IAEnC,4FAA4F;IAC5F,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,SAAS,aAAa,EAAE,CAAC,CAKhD;IAEH,sEAAsE;IACtE,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,mCAAmC;IACnC,IAAI,QAAQ,IAAI,OAAO,uBAAuB,CAE7C;IAED,kCAAkC;IAClC,MAAM,IAAI,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAE5C;IAED,4DAA4D;IAC5D,KAAK,IAAI,WAAW,EAAE,CAErB;IAED,8CAA8C;IAC9C,IAAI,IAAI,IAAI,CAEX;IAED,+DAA+D;IAC/D,KAAK,IAAI,IAAI,CAEZ;IAaD,4FAA4F;IAC5F,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAI3B;IAED,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAOtC;IAEF,+FAA+F;IAC/F,QAAQ,CAAC,UAAU,UAAW,aAAa,KAAG,IAAI,CAKhD;IAEF,kFAAkF;IAClF,QAAQ,CAAC,qBAAqB,UAAW,YAAY,KAAG,IAAI,CAE1D;IAEF,gEAAgE;IAChE,QAAQ,CAAC,eAAe,UAAW,UAAU,KAAG,IAAI,CAKlD;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAE/C;IAED,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAG7C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAUtE;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,oBAAoB,CAAC;KAC7C;CACF"}

package/dist/command-palette/command-palette.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="command-palette.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=command-palette.define.d.ts.map

package/dist/command-palette/command-palette.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.define.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.define.ts"],"names":[],"mappings":""}

package/dist/command-palette/command-palette.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./command-palette.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { commandPaletteDefinition } from './command-palette.definition.js';
+define(commandPaletteDefinition);
+//# sourceMappingURL=command-palette.define.js.map

package/dist/command-palette/command-palette.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.define.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.define.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,CAAC,wBAAwB,CAAC,CAAC"}

package/dist/command-palette/command-palette.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinCommandPalette } from './command-palette.js';
+export declare const commandPaletteDefinition: import("@oddkin/core/element").ElementDefinition<OddkinCommandPalette>;
+//# sourceMappingURL=command-palette.definition.d.ts.map

package/dist/command-palette/command-palette.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.definition.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.definition.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAK5D,eAAO,MAAM,wBAAwB,wEAkBnC,CAAC"}

package/dist/command-palette/command-palette.definition.js

@@ -0,0 +1,34 @@
+import { compose } from '@oddkin/core/element';
+import { iconDefinition } from '../icon/icon.definition.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { glyphStyles } from '../styles/glyphs.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { optionRowStructuralStyles } from '../styles/option-row.structural.styles.js';
+import { optionRowStyles } from '../styles/option-row.styles.js';
+import { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+import { overlaySurfaceStyles } from '../styles/overlay-surface.styles.js';
+import { spinnerStyles } from '../styles/spinner.styles.js';
+import { OddkinCommandPalette } from './command-palette.js';
+import { commandPaletteStructuralStyles } from './command-palette.structural.styles.js';
+import { commandPaletteStyles } from './command-palette.styles.js';
+import { commandPaletteTemplate } from './command-palette.template.js';
+export const commandPaletteDefinition = compose({
+    name: 'odd-command-palette',
+    element: OddkinCommandPalette,
+    template: commandPaletteTemplate,
+    styles: [
+        hostStyles,
+        overlaySurfaceStructuralStyles,
+        optionRowStructuralStyles,
+        commandPaletteStructuralStyles,
+        glyphStyles,
+        spinnerStyles,
+        focusRingStyles,
+        overlaySurfaceStyles,
+        optionRowStyles,
+        commandPaletteStyles,
+    ],
+    // Command icons are drawn by odd-icon, as menu item icons are.
+    dependencies: { icon: iconDefinition },
+});
+//# sourceMappingURL=command-palette.definition.js.map

package/dist/command-palette/command-palette.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.definition.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,CAAC,MAAM,wBAAwB,GAAG,OAAO,CAAC;IAC9C,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,oBAAoB;IAC7B,QAAQ,EAAE,sBAAsB;IAChC,MAAM,EAAE;QACN,UAAU;QACV,8BAA8B;QAC9B,yBAAyB;QACzB,8BAA8B;QAC9B,WAAW;QACX,aAAa;QACb,eAAe;QACf,oBAAoB;QACpB,eAAe;QACf,oBAAoB;KACrB;IACD,+DAA+D;IAC/D,YAAY,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;CACvC,CAAC,CAAC"}

package/dist/command-palette/command-palette.js

@@ -0,0 +1,196 @@
+import { ActiveDescendant } from '@oddkin/core/controllers/active-descendant';
+import { event, OddkinElement, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { computed, signal } from '@oddkin/core/reactive';
+import { queryChangeEvent } from '../collection/collection.js';
+import { TextHints } from '../form-control/text-hints.js';
+import { ModalDialog } from '../overlay/dialog.js';
+export const COMMAND_PALETTE_STRINGS = {
+    search: 'Search commands',
+    empty: 'No matching commands',
+    loading: 'Loading…',
+    navigate: 'Navigate',
+    choose: 'Open',
+    close: 'Close',
+};
+/** A command was chosen; cancel it to keep the palette open. */
+export const commandActionEvent = event('odd-action', {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+    intent: 'user',
+    description: 'A command was chosen: `detail.id` is its `id` and `detail.action` is `select`. Cancel it to keep the palette open.',
+});
+/**
+ * A command palette: a modal dialog with a search input and the matching commands below it
+ * (APG combobox with a listbox popup that is always shown). Typing filters the commands by label
+ * and makes the first match active; Enter or a click runs it (`odd-action`) and closes the palette;
+ * Escape or a press on the backdrop closes it, and focus returns to where it was.
+ *
+ * @slot empty - Shown when no command matches and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart dialog - The `<dialog>` surface.
+ * @csspart search - The search field around the input.
+ * @csspart input - The search input (`role="combobox"`).
+ * @csspart listbox - The `role="listbox"` of commands.
+ * @csspart item - Each command row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart footer - The keyboard hints under the results.
+ * @cssprop --odd-command-palette-inline-size - Its width, within the viewport (default 40rem).
+ * @a11y A modal `dialog` named by `label`. Focus starts in the search input, a `combobox` named by `strings.search` that controls the `listbox` of commands and names the active one with `aria-activedescendant` (the active row also has `aria-selected`). Groups are named by their heading. Everything outside is inert while it is open, and closing returns focus to the element that had it.
+ * @keyboard Typing filters the commands; Up and Down move the active command (wrapping); Enter runs it. Escape closes the palette.
+ * @a11y The global `inputmode`, `enterkeyhint`, `autocapitalize`, `autocorrect`, and `spellcheck` attributes on the host are forwarded to the search input; `spellcheck` defaults to `false`, as a query is not prose.
+ * @previewRole commandPalette
+ * @useFor Finding and running any command or destination by name, from anywhere in an app (typically opened with Ctrl+K or Cmd+K).
+ * @notFor A few actions behind a button (use odd-menu); choosing a value in a form (use odd-combobox); site search results (use a page).
+ * @category Actions
+ * @customization 1 2 3
+ */
+export class OddkinCommandPalette extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'Names the dialog. Required.' }),
+    placeholder: prop.string({ default: '', description: 'Text shown in the empty search input.' }),
+    items: prop.object({
+        description: 'The commands: `{ id, label, description?, icon?, shortcut?, group?, disabled? }`.',
+    }),
+    open: prop.boolean({ reflect: true, description: 'Whether it is open.' }),
+    loading: prop.boolean({
+        reflect: true,
+        description: 'Shows a busy row and marks the results busy.',
+    }),
+    noFilter: prop.boolean({
+        reflect: true,
+        description: 'The element does not filter: listen to `odd-query-change` and replace `items` with the matches.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static events = {
+        'odd-action': commandActionEvent,
+        'odd-query-change': queryChangeEvent,
+    };
+    /** @internal The host's text-entry hints for the search input. */
+    _hints = new TextHints(this);
+    #query = signal('');
+    #dialog = new ModalDialog({
+        host: this,
+        dialog: () => this.shadowRoot?.querySelector('dialog'),
+        closedBy: 'any',
+        initialFocus: () => this._input(),
+        onToggle: (open) => this.#onToggle(open),
+    });
+    #active = new ActiveDescendant({
+        target: () => this._input(),
+        items: () => this._rows(),
+        homeEnd: false,
+        wrap: true,
+        onActiveChange: (index) => (this._activeIndex.value = index),
+    });
+    // Activate the first match once the filtered rows have rendered.
+    #activateFirst = false;
+    /** @internal The active row's index among the shown commands. */
+    _activeIndex = signal(-1);
+    /** @internal The commands the results show: all, or those whose label contains the text. */
+    _shown = computed(() => {
+        const items = this.items ?? [];
+        const query = this.#query.value.trim().toLocaleLowerCase();
+        if (this.noFilter || !query)
+            return items;
+        return items.filter((item) => item.label.toLocaleLowerCase().includes(query));
+    });
+    /** The text in the search input, as the user typed it (read-only). */
+    get query() {
+        return this.#query.value;
+    }
+    /** @internal Localized strings. */
+    get _strings() {
+        return strings(COMMAND_PALETTE_STRINGS, this.strings);
+    }
+    /** @internal The search input. */
+    _input() {
+        return this.shadowRoot?.querySelector('[part~="input"]');
+    }
+    /** @internal The command rows, in the order of `_shown`. */
+    _rows() {
+        return [...(this.shadowRoot?.querySelectorAll('[role="option"]') ?? [])];
+    }
+    /** Opens it with the search input focused. */
+    show() {
+        this.#dialog.show();
+    }
+    /** Closes it; focus returns to where it was when it opened. */
+    close() {
+        this.#dialog.close();
+    }
+    #onToggle(open) {
+        this.open = open;
+        if (open) {
+            this.#activateFirst = true;
+            return;
+        }
+        // Each opening starts from an empty search.
+        this.#query.value = '';
+        this.#active.setActive(-1);
+    }
+    /** @internal Runs the shown command at `index`: reports it and closes, unless cancelled. */
+    _choose(index) {
+        const item = this._shown.peek()[index];
+        if (!item || item.disabled)
+            return;
+        if (this.emit(commandActionEvent, { id: item.id, action: 'select' }))
+            this.close();
+    }
+    /** @internal Template handler: typing filters and makes the first match active. */
+    _onInput = (event) => {
+        // The search text is not a value of the element.
+        event.stopPropagation();
+        const query = event.target.value;
+        this.#query.value = query;
+        this.#activateFirst = true;
+        this.emit(queryChangeEvent, { query });
+    };
+    /** @internal Template handler: Enter runs the active command (arrows are the controller's). */
+    _onKeydown = (event) => {
+        if (event.key !== 'Enter' || event.defaultPrevented || event.isComposing)
+            return;
+        event.preventDefault();
+        const index = this.#active.activeIndex;
+        if (index >= 0)
+            this._choose(index);
+    };
+    /** @internal Template handler: presses on the results keep focus in the input. */
+    _onResultsPointerdown = (event) => {
+        event.preventDefault();
+    };
+    /** @internal Template handler: a click on a command runs it. */
+    _onResultsClick = (event) => {
+        const index = this._rows().findIndex((row) => event.composedPath().includes(row));
+        if (index < 0)
+            return;
+        this.#active.setActive(index, { scroll: false });
+        this._choose(index);
+    };
+    connected(scope) {
+        scope.use(this._hints);
+    }
+    mounted(scope) {
+        scope.use(this.#dialog);
+        scope.use(this.#active);
+    }
+    updated(changes) {
+        if (changes.has('open')) {
+            if (this.open)
+                this.#dialog.show();
+            else
+                this.#dialog.close();
+        }
+        this.#active.sync();
+        if (this.#activateFirst && this.open) {
+            this.#activateFirst = false;
+            this.#active.setActive(this._shown.peek().findIndex((item) => !item.disabled));
+        }
+    }
+}
+//# sourceMappingURL=command-palette.js.map

package/dist/command-palette/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAsB,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAiB,MAAM,uBAAuB,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAsB,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,gEAAgE;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAyB,YAAY,EAAE;IAC5E,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,MAAM;IACd,WAAW,EACT,oHAAoH;CACvH,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,oBAAqB,SAAQ,aAAa,CAAC,IAAI,CAAC;IAC3D,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,6BAA6B,EAAE,CAAC;IAC/E,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,uCAAuC,EAAE,CAAC;IAC/F,KAAK,EAAE,IAAI,CAAC,MAAM,CAA2B;QAC3C,WAAW,EACT,mFAAmF;KACtF,CAAC;IACF,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC;IACzE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;QACpB,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,8CAA8C;KAC5D,CAAC;IACF,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,WAAW,EACT,iGAAiG;KACpG,CAAC;IACF,OAAO,EAAE,IAAI,CAAC,MAAM,CAA0C;QAC5D,WAAW,EAAE,6BAA6B;KAC3C,CAAC;CACH,CAAC;IACA,MAAM,CAAU,MAAM,GAAG;QACvB,YAAY,EAAE,kBAAkB;QAChC,kBAAkB,EAAE,gBAAgB;KACrC,CAAC;IAGF,kEAAkE;IACzD,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IACpB,OAAO,GAAG,IAAI,WAAW,CAAC;QACjC,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QACtD,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KACzC,CAAC,CAAC;IACM,OAAO,GAAG,IAAI,gBAAgB,CAAC;QACtC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC3B,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;QACzB,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,IAAI;QACV,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC7D,CAAC,CAAC;IACH,iEAAiE;IACjE,cAAc,GAAG,KAAK,CAAC;IAEvB,iEAAiE;IACxD,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnC,4FAA4F;IACnF,MAAM,GAAuC,QAAQ,CAAC,GAAG,EAAE;QAClE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAC;QAC3D,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAC1C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,sEAAsE;IACtE,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,CAAC;IAED,mCAAmC;IACnC,IAAI,QAAQ;QACV,OAAO,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC;IAED,kCAAkC;IAClC,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAmB,iBAAiB,CAAC,CAAC;IAC7E,CAAC;IAED,4DAA4D;IAC5D,KAAK;QACH,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAc,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,8CAA8C;IAC9C,IAAI;QACF,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,+DAA+D;IAC/D,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,IAAa;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,4CAA4C;QAC5C,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,4FAA4F;IAC5F,OAAO,CAAC,KAAa;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACnC,IAAI,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;IACrF,CAAC;IAED,mFAAmF;IAC1E,QAAQ,GAAG,CAAC,KAAY,EAAQ,EAAE;QACzC,iDAAiD;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,+FAA+F;IACtF,UAAU,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACnD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,WAAW;YAAE,OAAO;QACjF,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,KAAK,IAAI,CAAC;YAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,kFAAkF;IACzE,qBAAqB,GAAG,CAAC,KAAmB,EAAQ,EAAE;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,gEAAgE;IACvD,eAAe,GAAG,CAAC,KAAiB,EAAQ,EAAE;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;QAClF,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO;QACtB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEiB,SAAS,CAAC,KAAY;QACvC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC;IAEkB,OAAO,CAAC,KAAY;QACrC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACxB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAEkB,OAAO,CAAC,OAAqC;QAC9D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;;gBAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;CACF"}

package/dist/command-palette/command-palette.recipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Arrangement of the command palette (layout-recipes.md §14): the search field's row (glyph,
+ * input, hint), the busy and empty rows, and the keyboard hints in a row that wraps.
+ */
+export declare const commandPaletteRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=command-palette.recipe.d.ts.map

package/dist/command-palette/command-palette.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.recipe.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.recipe.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,2CAO/B,CAAC"}

package/dist/command-palette/command-palette.recipe.js

@@ -0,0 +1,15 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row } from '../layout/index.js';
+/**
+ * Arrangement of the command palette (layout-recipes.md §14): the search field's row (glyph,
+ * input, hint), the busy and empty rows, and the keyboard hints in a row that wraps.
+ */
+export const commandPaletteRecipe = defineLayoutRecipe({
+    name: 'command-palette',
+    regions: {
+        search: row({ gap: token('space.sm') }),
+        state: row({ gap: token('space.sm') }),
+        footer: row({ gap: token('space.md'), align: 'stretch', wrap: true }),
+    },
+});
+//# sourceMappingURL=command-palette.recipe.js.map

package/dist/command-palette/command-palette.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.recipe.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,kBAAkB,CAAC;IACrD,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE;QACP,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACvC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACtC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KACtE;CACF,CAAC,CAAC"}

package/dist/command-palette/command-palette.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const commandPaletteRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=command-palette.recipe.styles.d.ts.map

package/dist/command-palette/command-palette.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B,yCAEtC,CAAC"}

package/dist/command-palette/command-palette.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./command-palette.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const commandPaletteRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .search {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-sm);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .state {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-sm);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .footer {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    gap: var(--odd-space-md);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=command-palette.recipe.styles.js.map

package/dist/command-palette/command-palette.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.recipe.styles.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.recipe.styles.ts"],"names":[],"mappings":"AAAA,8GAA8G;AAC9G,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,0BAA0B,GAAG,SAAS,CACjD,8lBAA8lB,CAC/lB,CAAC"}

package/dist/command-palette/command-palette.structural.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What the command palette depends on beyond the overlay surface and the option rows: the dialog
+ * placed in the upper part of the viewport at `--odd-command-palette-inline-size`, the search
+ * field's row (glyph, input, hint), the results scrolling below it, and the hints in a row. No
+ * brand tokens.
+ */
+export declare const commandPaletteStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=command-palette.structural.styles.d.ts.map

package/dist/command-palette/command-palette.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.structural.styles.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.structural.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,8BAA8B,yCAuD1C,CAAC"}

package/dist/command-palette/command-palette.structural.styles.js

@@ -0,0 +1,65 @@
+import { css } from '@oddkin/core/styles';
+import { commandPaletteRecipeStyles } from './command-palette.recipe.styles.js';
+/**
+ * What the command palette depends on beyond the overlay surface and the option rows: the dialog
+ * placed in the upper part of the viewport at `--odd-command-palette-inline-size`, the search
+ * field's row (glyph, input, hint), the results scrolling below it, and the hints in a row. No
+ * brand tokens.
+ */
+export const commandPaletteStructuralStyles = css `
+  ${commandPaletteRecipeStyles}
+  :host {
+    display: contents;
+  }
+  .palette {
+    inline-size: min(var(--odd-command-palette-inline-size, 40rem), 100% - 2rem);
+    max-block-size: min(36rem, 100% - 4rem);
+    margin-block-start: 12vh;
+  }
+  .palette[open] {
+    display: flex;
+    flex-direction: column;
+  }
+  .search {
+    flex: none;
+  }
+  .search-glyph {
+    display: inline-flex;
+  }
+  .input {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+  }
+  .input:focus-visible {
+    outline: none;
+  }
+  .results {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+  .listbox,
+  .group {
+    display: flex;
+    flex-direction: column;
+  }
+  .option:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+  .footer {
+    flex: none;
+  }
+  @media (forced-colors: active) {
+    :host .listbox .option.active {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+`;
+//# sourceMappingURL=command-palette.structural.styles.js.map

package/dist/command-palette/command-palette.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.structural.styles.js","sourceRoot":"","sources":["../../src/command-palette/command-palette.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,CAAA;IAC7C,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD7B,CAAC"}

package/dist/command-palette/command-palette.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Oddkin's default command palette (Figma `CommandPalette`, `CommandItem`) beyond the shared
+ * modules (the surface is the overlay look, the rows the option-row look): `radius.lg` and `space.lg`
+ * around content `space.md` apart; the search field on the default surface, `control.height.lg`
+ * high, ringed in the focus colour while it has focus (the input always has it); group headings
+ * in the eyebrow role; the active command in the selection colours with its shortcut in the code
+ * role; the empty state's title in the section role; the hints in the small role.
+ */
+export declare const commandPaletteStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=command-palette.styles.d.ts.map

package/dist/command-palette/command-palette.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.styles.d.ts","sourceRoot":"","sources":["../../src/command-palette/command-palette.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,yCAyFhC,CAAC"}

package/dist/command-palette/command-palette.styles.js

@@ -0,0 +1,101 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default command palette (Figma `CommandPalette`, `CommandItem`) beyond the shared
+ * modules (the surface is the overlay look, the rows the option-row look): `radius.lg` and `space.lg`
+ * around content `space.md` apart; the search field on the default surface, `control.height.lg`
+ * high, ringed in the focus colour while it has focus (the input always has it); group headings
+ * in the eyebrow role; the active command in the selection colours with its shortcut in the code
+ * role; the empty state's title in the section role; the hints in the small role.
+ */
+export const commandPaletteStyles = css `
+  /* The modal sheet (scrim, elevation) with Figma's raised surface and large radius. */
+  .overlay-surface.palette {
+    gap: ${token('space.md')};
+    padding: ${token('space.lg')};
+    border-radius: ${token('radius.lg')};
+    background: ${token('color.surface.raised')};
+  }
+  .search {
+    min-block-size: ${token('control.height.lg')};
+    padding: ${token('space.sm')};
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.default')};
+    font-family: ${token('type.body.family')};
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+  }
+  .search:focus-within {
+    border-color: ${token('color.focus.ring')};
+    box-shadow: 0 0 0 calc(${token('focus.width')} - ${token('border.width.default')})
+      ${token('color.focus.ring')};
+  }
+  kbd {
+    font: inherit;
+  }
+  .search-glyph,
+  .input::placeholder {
+    color: ${token('color.text.secondary')};
+    opacity: 1;
+  }
+  .hint,
+  .footer {
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.small.family')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .group + .group,
+  .group + .option,
+  .option + .group {
+    margin-block-start: ${token('space.sm')};
+  }
+  .group-label {
+    padding: ${token('space.xs')} ${token('space.sm')};
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.eyebrow.family')};
+    font-size: ${token('type.eyebrow.size')};
+    font-weight: ${token('type.eyebrow.weight')};
+    line-height: ${token('type.eyebrow.line-height')};
+    letter-spacing: ${token('type.eyebrow.letter-spacing')};
+  }
+  /* Figma CommandItem: rows on the default surface, space.sm around their content. */
+  .option {
+    gap: ${token('space.sm')};
+    padding: ${token('space.sm')};
+    background: ${token('color.surface.default')};
+  }
+  .shortcut {
+    font-family: ${token('type.code.family')};
+    font-size: ${token('type.code.size')};
+    font-weight: ${token('type.code.weight')};
+    line-height: ${token('type.code.line-height')};
+  }
+  /* Also under the pointer: the active command keeps the selection colours. */
+  .listbox .option.active {
+    outline: none;
+    background: ${token('color.selection.background')};
+    color: ${token('color.selection.foreground')};
+  }
+  .option.active .option-description,
+  .option.active .option-end {
+    color: ${token('color.selection.foreground')};
+  }
+  .state {
+    padding-block: ${token('space.sm')};
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.body.family')};
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+  }
+  .state.empty {
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.section.family')};
+    font-size: ${token('type.section.size')};
+    font-weight: ${token('type.section.weight')};
+    line-height: ${token('type.section.line-height')};
+    letter-spacing: ${token('type.section.letter-spacing')};
+  }
+`;
+//# sourceMappingURL=command-palette.styles.js.map