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

package/dist/listbox/foundation.js

@@ -0,0 +1,11 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { optionRowStructuralStyles } from '../styles/option-row.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { spinnerStyles } from '../styles/spinner.styles.js';
+export { OddkinListbox } from './listbox.js';
+export { listboxTemplate } from './listbox.template.js';
+export { listboxStructuralStyles } from './listbox.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/listbox/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/listbox/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/listbox/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinListbox } from './listbox.js';
+export { listboxTemplate } from './listbox.template.js';
+export { listboxStructuralStyles } from './listbox.structural.styles.js';
+export { listboxStyles } from './listbox.styles.js';
+export { listboxDefinition } from './listbox.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/listbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/listbox/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/listbox/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/listbox`.
+export { OddkinListbox } from './listbox.js';
+export { listboxTemplate } from './listbox.template.js';
+export { listboxStructuralStyles } from './listbox.structural.styles.js';
+export { listboxStyles } from './listbox.styles.js';
+export { listboxDefinition } from './listbox.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/listbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/listbox/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/listbox/listbox.d.ts

@@ -0,0 +1,78 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+import { OddkinOptionControl } from '../collection/option-control.js';
+export type { OptionRecord } from '../collection/collection.js';
+export declare const LISTBOX_STRINGS: {
+    loading: string;
+    empty: string;
+};
+/** The user changed the selection. */
+export declare const listboxInputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Dispatched after `input` for each user change (native `change` is not composed). */
+export declare const listboxChangeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinListbox_base: import("@oddkin/core/element").WithProps<typeof OddkinOptionControl, {
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        loading: string;
+        empty: string;
+    }> | undefined>;
+}>;
+/**
+ * Persistent choices in a form (APG listbox): the listbox keeps focus and the active option is its
+ * `aria-activedescendant`. Options come from `<option>` and `<optgroup>` children, written as for a
+ * native select (`selected` marks the default), or from `options`.
+ *
+ * @slot empty - Shown when there are no options and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart field - Wrapper of label, description, surface, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart base - The surface holding the options and the states.
+ * @csspart listbox - The `role="listbox"` element, which takes focus.
+ * @csspart option - Each option row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssprop --odd-listbox-max-height - Height beyond which the options scroll (default: none).
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is selected while `required` after the user left the listbox or a validity check failed.
+ * @a11y A `listbox` named by `label`, with `aria-multiselectable`, `aria-required`, `aria-invalid`, and `aria-busy` while loading; options carry `aria-selected`, and groups are named by their heading. The selection is marked by a check and a surface, not colour alone.
+ * @keyboard Tab focuses the listbox. Up and Down move the active option; Home and End go to the first and last. Typing moves to the next option whose label starts with the typed characters. Single: the selection follows the active option. Multiple: Space toggles the active option, Shift with Up or Down extends the selection, Ctrl+A selects every option.
+ * @previewRole listbox
+ * @useFor A visible list of a few to a few dozen choices, one or several, in a form.
+ * @notFor A compact choice (use odd-select); a long list to search (use odd-combobox); actions (use odd-menu).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinListbox extends OddkinListbox_base {
+    #private;
+    readonly _events?: ElementEvents<typeof OddkinListbox>;
+    /** @internal The active option's index, for the visual focus. */
+    readonly _activeIndex: import("@oddkin/core/reactive").Signal<number>;
+    /** @internal Localized strings. */
+    get _strings(): typeof LISTBOX_STRINGS;
+    /** @internal The focus target. */
+    _listbox(): HTMLElement | null | undefined;
+    /** @internal The option rows, in the order of `_options`. */
+    _optionElements(): HTMLElement[];
+    protected _anchor(): HTMLElement | null | undefined;
+    /** @internal Selects the option (single) or toggles it (multiple). */
+    _choose(index: number): void;
+    /** @internal Adds the usable options from the range's anchor to `index` (multiple). */
+    _extend(index: number): void;
+    /** @internal Template handler: a click selects (single) or toggles (multiple) the option. */
+    readonly _onClick: (event: MouseEvent) => void;
+    /** @internal Template handler: selection keys beyond the active option's arrows. */
+    readonly _onKeydown: (event: KeyboardEvent) => void;
+    /** @internal Template handler: focus shows the selected (or first usable) option as active. */
+    readonly _onFocus: () => void;
+    /** @internal Template handler: leaving hides the active option and marks the field touched. */
+    readonly _onListboxBlur: () => void;
+    protected mounted(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-listbox': OddkinListbox;
+    }
+}
+//# sourceMappingURL=listbox.d.ts.map

package/dist/listbox/listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EACL,mBAAmB,EAGpB,MAAM,iCAAiC,CAAC;AAEzC,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,eAAO,MAAM,eAAe;IAAK,OAAO;IAAc,KAAK;CAA0B,CAAC;AAEtF,sCAAsC;AACtC,eAAO,MAAM,iBAAiB,sDAAmB,CAAC;AAClD,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,sDAAoB,CAAC;;;;;;;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,aAAc,SAAQ,kBAIjC;;IACA,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,aAAa,CAAC,CAAC;IAqB/D,iEAAiE;IACjE,QAAQ,CAAC,YAAY,iDAAc;IAEnC,mCAAmC;IACnC,IAAI,QAAQ,IAAI,OAAO,eAAe,CAErC;IAED,kCAAkC;IAClC,QAAQ,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAEzC;IAED,6DAA6D;IAC7D,eAAe,IAAI,WAAW,EAAE,CAE/B;IAED,UAAmB,OAAO,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAE3D;IAED,sEAAsE;IACtE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK3B;IAED,uFAAuF;IACvF,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAS3B;IASD,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,UAAW,UAAU,KAAG,IAAI,CAM3C;IAEF,oFAAoF;IACpF,QAAQ,CAAC,UAAU,UAAW,aAAa,KAAG,IAAI,CAiBhD;IAEF,+FAA+F;IAC/F,QAAQ,CAAC,QAAQ,QAAO,IAAI,CAS1B;IAEF,+FAA+F;IAC/F,QAAQ,CAAC,cAAc,QAAO,IAAI,CAIhC;IAEF,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAI7C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAItE;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}

package/dist/listbox/listbox.define.d.ts

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

package/dist/listbox/listbox.define.d.ts.map

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

package/dist/listbox/listbox.define.js

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

package/dist/listbox/listbox.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.define.js","sourceRoot":"","sources":["../../src/listbox/listbox.define.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/listbox/listbox.definition.d.ts

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

package/dist/listbox/listbox.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.definition.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,eAAO,MAAM,iBAAiB,iEAgB5B,CAAC"}

package/dist/listbox/listbox.definition.js

@@ -0,0 +1,31 @@
+import { compose } from '@oddkin/core/element';
+import { controlStyles } from '../styles/control.styles.js';
+import { fieldStructuralStyles } from '../styles/field.structural.styles.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 { spinnerStyles } from '../styles/spinner.styles.js';
+import { OddkinListbox } from './listbox.js';
+import { listboxStructuralStyles } from './listbox.structural.styles.js';
+import { listboxStyles } from './listbox.styles.js';
+import { listboxTemplate } from './listbox.template.js';
+export const listboxDefinition = compose({
+    name: 'odd-listbox',
+    element: OddkinListbox,
+    template: listboxTemplate,
+    styles: [
+        hostStyles,
+        fieldStructuralStyles,
+        optionRowStructuralStyles,
+        listboxStructuralStyles,
+        glyphStyles,
+        spinnerStyles,
+        focusRingStyles,
+        controlStyles,
+        optionRowStyles,
+        listboxStyles,
+    ],
+});
+//# sourceMappingURL=listbox.definition.js.map

package/dist/listbox/listbox.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.definition.js","sourceRoot":"","sources":["../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,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,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE;QACN,UAAU;QACV,qBAAqB;QACrB,yBAAyB;QACzB,uBAAuB;QACvB,WAAW;QACX,aAAa;QACb,eAAe;QACf,aAAa;QACb,eAAe;QACf,aAAa;KACd;CACF,CAAC,CAAC"}

package/dist/listbox/listbox.js

@@ -0,0 +1,173 @@
+import { ActiveDescendant } from '@oddkin/core/controllers/active-descendant';
+import { Typeahead } from '@oddkin/core/controllers/typeahead';
+import { prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { signal } from '@oddkin/core/reactive';
+import { OddkinOptionControl, optionChangeEvent, optionInputEvent, } from '../collection/option-control.js';
+export const LISTBOX_STRINGS = { loading: 'Loading…', empty: 'No options available' };
+/** The user changed the selection. */
+export const listboxInputEvent = optionInputEvent;
+/** Dispatched after `input` for each user change (native `change` is not composed). */
+export const listboxChangeEvent = optionChangeEvent;
+/**
+ * Persistent choices in a form (APG listbox): the listbox keeps focus and the active option is its
+ * `aria-activedescendant`. Options come from `<option>` and `<optgroup>` children, written as for a
+ * native select (`selected` marks the default), or from `options`.
+ *
+ * @slot empty - Shown when there are no options and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart field - Wrapper of label, description, surface, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart base - The surface holding the options and the states.
+ * @csspart listbox - The `role="listbox"` element, which takes focus.
+ * @csspart option - Each option row.
+ * @csspart group - Each group's heading.
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssprop --odd-listbox-max-height - Height beyond which the options scroll (default: none).
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is selected while `required` after the user left the listbox or a validity check failed.
+ * @a11y A `listbox` named by `label`, with `aria-multiselectable`, `aria-required`, `aria-invalid`, and `aria-busy` while loading; options carry `aria-selected`, and groups are named by their heading. The selection is marked by a check and a surface, not colour alone.
+ * @keyboard Tab focuses the listbox. Up and Down move the active option; Home and End go to the first and last. Typing moves to the next option whose label starts with the typed characters. Single: the selection follows the active option. Multiple: Space toggles the active option, Shift with Up or Down extends the selection, Ctrl+A selects every option.
+ * @previewRole listbox
+ * @useFor A visible list of a few to a few dozen choices, one or several, in a form.
+ * @notFor A compact choice (use odd-select); a long list to search (use odd-combobox); actions (use odd-menu).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinListbox extends OddkinOptionControl.with({
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    #active = new ActiveDescendant({
+        target: () => this._listbox(),
+        items: () => this._optionElements(),
+        onActiveChange: (index, _item, event) => this.#onActive(index, event),
+    });
+    #typeahead = new Typeahead({
+        items: () => this._optionElements(),
+        active: () => this.#active.activeIndex,
+        text: (row) => row.querySelector('.option-text')?.textContent ?? '',
+        onMatch: (index) => {
+            this.#active.setActive(index);
+            if (!this.multiple)
+                this._choose(index);
+        },
+    });
+    // Shift+arrow ranges grow from here.
+    #anchor = -1;
+    // The active option shows only while the listbox has focus.
+    #focused = false;
+    /** @internal The active option's index, for the visual focus. */
+    _activeIndex = signal(-1);
+    /** @internal Localized strings. */
+    get _strings() {
+        return strings(LISTBOX_STRINGS, this.strings);
+    }
+    /** @internal The focus target. */
+    _listbox() {
+        return this.shadowRoot?.querySelector('[part~="listbox"]');
+    }
+    /** @internal The option rows, in the order of `_options`. */
+    _optionElements() {
+        return [...(this.shadowRoot?.querySelectorAll('[role="option"]') ?? [])];
+    }
+    _anchor() {
+        return this._listbox();
+    }
+    /** @internal Selects the option (single) or toggles it (multiple). */
+    _choose(index) {
+        const option = this._usable(this._options.peek()[index]);
+        if (!option)
+            return;
+        this.#anchor = index;
+        this._toggle(option);
+    }
+    /** @internal Adds the usable options from the range's anchor to `index` (multiple). */
+    _extend(index) {
+        if (!this._usable(this._options.peek()[index]))
+            return;
+        const from = this.#anchor < 0 ? index : this.#anchor;
+        const range = this._options
+            .peek()
+            .slice(Math.min(from, index), Math.max(from, index) + 1)
+            .filter((option) => !option.disabled)
+            .map((option) => option.value);
+        this._commit([...new Set([...this._selected.peek(), ...range])]);
+    }
+    #onActive(index, event) {
+        this._activeIndex.value = this.#focused ? index : -1;
+        if (!event || index < 0)
+            return;
+        if (!this.multiple)
+            this._choose(index);
+        else if (event.shiftKey)
+            this._extend(index);
+    }
+    /** @internal Template handler: a click selects (single) or toggles (multiple) the option. */
+    _onClick = (event) => {
+        const index = this._optionElements().findIndex((row) => event.composedPath().includes(row));
+        if (!this._usable(this._options.peek()[index]))
+            return;
+        this.#active.setActive(index, { scroll: false });
+        if (this.multiple && event.shiftKey)
+            this._extend(index);
+        else
+            this._choose(index);
+    };
+    /** @internal Template handler: selection keys beyond the active option's arrows. */
+    _onKeydown = (event) => {
+        if (event.defaultPrevented || event.altKey || event.metaKey || event.isComposing)
+            return;
+        const index = this.#active.activeIndex;
+        if (event.ctrlKey) {
+            if (event.key !== 'a' || !this.multiple || this._formDisabled.peek())
+                return;
+            this._commit(this._options
+                .peek()
+                .filter((option) => !option.disabled)
+                .map((option) => option.value));
+        }
+        else if (event.key === ' ' && !this.#typeahead.query) {
+            if (index >= 0)
+                this._choose(index);
+        }
+        else if (event.key === 'Enter' && this.multiple) {
+            if (index >= 0)
+                this._choose(index);
+        }
+        else if (!this.#typeahead.type(event.key))
+            return;
+        event.preventDefault();
+    };
+    /** @internal Template handler: focus shows the selected (or first usable) option as active. */
+    _onFocus = () => {
+        this.#focused = true;
+        if (this.#active.activeIndex < 0) {
+            const selected = this._selected.peek();
+            const options = this._options.peek();
+            const at = options.findIndex((option) => selected.includes(option.value));
+            this.#active.setActive(at >= 0 ? at : options.findIndex((option) => !option.disabled));
+        }
+        this._activeIndex.value = this.#active.activeIndex;
+    };
+    /** @internal Template handler: leaving hides the active option and marks the field touched. */
+    _onListboxBlur = () => {
+        this.#focused = false;
+        this._activeIndex.value = -1;
+        this._onBlur();
+    };
+    mounted(scope) {
+        super.mounted(scope);
+        scope.use(this.#typeahead);
+        scope.use(this.#active);
+    }
+    updated(changes) {
+        super.updated(changes);
+        this.#active.sync();
+        this._activeIndex.value = this.#focused ? this.#active.activeIndex : -1;
+    }
+}
+//# sourceMappingURL=listbox.js.map

package/dist/listbox/listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.js","sourceRoot":"","sources":["../../src/listbox/listbox.ts"],"names":[],"mappings":"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"}

package/dist/listbox/listbox.recipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Arrangement of the listbox's busy and empty rows: the glyph beside the text (layout-recipes.md
+ * §14). odd-combobox and odd-picker share them through the listbox's structural sheet.
+ */
+export declare const listboxRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=listbox.recipe.d.ts.map

package/dist/listbox/listbox.recipe.d.ts.map

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

package/dist/listbox/listbox.recipe.js

@@ -0,0 +1,11 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row } from '../layout/index.js';
+/**
+ * Arrangement of the listbox's busy and empty rows: the glyph beside the text (layout-recipes.md
+ * §14). odd-combobox and odd-picker share them through the listbox's structural sheet.
+ */
+export const listboxRecipe = defineLayoutRecipe({
+    name: 'listbox',
+    regions: { state: row({ gap: token('space.sm') }) },
+});
+//# sourceMappingURL=listbox.recipe.js.map

package/dist/listbox/listbox.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.recipe.js","sourceRoot":"","sources":["../../src/listbox/listbox.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,aAAa,GAAG,kBAAkB,CAAC;IAC9C,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;CACpD,CAAC,CAAC"}

package/dist/listbox/listbox.recipe.styles.d.ts

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

package/dist/listbox/listbox.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yCAE/B,CAAC"}

package/dist/listbox/listbox.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./listbox.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 listboxRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\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}\n');
+//# sourceMappingURL=listbox.recipe.styles.js.map

package/dist/listbox/listbox.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.recipe.styles.js","sourceRoot":"","sources":["../../src/listbox/listbox.recipe.styles.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAC1C,2QAA2Q,CAC5Q,CAAC"}

package/dist/listbox/listbox.structural.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What the listbox's behaviour depends on beyond the field layout and the option rows: the surface
+ * stacking the listbox and its states, the listbox scrolling within `--odd-listbox-max-height`
+ * (so the active option can be scrolled into view), and groups as columns. No visual tokens.
+ */
+export declare const listboxStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=listbox.structural.styles.d.ts.map

package/dist/listbox/listbox.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.structural.styles.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.structural.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,yCAenC,CAAC"}

package/dist/listbox/listbox.structural.styles.js

@@ -0,0 +1,24 @@
+import { css } from '@oddkin/core/styles';
+import { listboxRecipeStyles } from './listbox.recipe.styles.js';
+/**
+ * What the listbox's behaviour depends on beyond the field layout and the option rows: the surface
+ * stacking the listbox and its states, the listbox scrolling within `--odd-listbox-max-height`
+ * (so the active option can be scrolled into view), and groups as columns. No visual tokens.
+ */
+export const listboxStructuralStyles = css `
+  ${listboxRecipeStyles}
+  :host {
+    display: block;
+  }
+  .surface,
+  .listbox,
+  .group {
+    display: flex;
+    flex-direction: column;
+  }
+  .listbox {
+    max-block-size: var(--odd-listbox-max-height, none);
+    overflow-y: auto;
+  }
+`;
+//# sourceMappingURL=listbox.structural.styles.js.map

package/dist/listbox/listbox.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.structural.styles.js","sourceRoot":"","sources":["../../src/listbox/listbox.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;IACtC,mBAAmB;;;;;;;;;;;;;;CActB,CAAC"}

package/dist/listbox/listbox.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default visual styles for the listbox: Figma `listbox`'s raised surface (default
+ * border, `control.radius`, `elevation.md`), square option rows between dividers, group headings
+ * in the small type role, and the empty and loading states in secondary text. The rows' look is
+ * `optionRowStyles`; the label, help, and error are `controlStyles`.
+ */
+export declare const listboxStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=listbox.styles.d.ts.map

package/dist/listbox/listbox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.styles.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,yCA2CzB,CAAC"}

package/dist/listbox/listbox.styles.js

@@ -0,0 +1,53 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default visual styles for the listbox: Figma `listbox`'s raised surface (default
+ * border, `control.radius`, `elevation.md`), square option rows between dividers, group headings
+ * in the small type role, and the empty and loading states in secondary text. The rows' look is
+ * `optionRowStyles`; the label, help, and error are `controlStyles`.
+ */
+export const listboxStyles = css `
+  .surface {
+    border: ${token('border.width.default')} solid ${token('color.border.default')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.raised')};
+    box-shadow: ${token('elevation.md')};
+  }
+  /* The active option's ring is the visible focus (Figma Keyboard focus); the listbox scrolls
+     and clips its square rows to the surface's inner corners. */
+  .listbox {
+    border-radius: calc(${token('control.radius')} - ${token('border.width.default')});
+  }
+  .listbox:focus-visible {
+    outline: none;
+  }
+  .option {
+    border-radius: 0;
+  }
+  .option + .option,
+  .group + .option,
+  .option + .group,
+  .group + .group {
+    border-block-start: ${token('border.width.default')} solid ${token('color.border.default')};
+  }
+  .group-label {
+    padding: ${token('space.xs')} ${token('control.padding.inline.md')};
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .state {
+    padding: ${token('space.md')};
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  .field:has(.listbox[aria-disabled='true']) .label,
+  .listbox[aria-disabled='true'] .option {
+    color: ${token('color.text.disabled')};
+  }
+`;
+//# sourceMappingURL=listbox.styles.js.map

package/dist/listbox/listbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;cAElB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,sBAAsB,CAAC;kBAC7B,KAAK,CAAC,cAAc,CAAC;;;;;0BAKb,KAAK,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,sBAAsB,CAAC;;;;;;;;;;;;0BAY1D,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;;;eAG/E,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,2BAA2B,CAAC;aACzD,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;eAGnC,KAAK,CAAC,UAAU,CAAC;aACnB,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;aAIxC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}

package/dist/listbox/listbox.template.d.ts

@@ -0,0 +1,10 @@
+import type { OddkinListbox } from './listbox.js';
+/**
+ * Anatomy: the field (`label`, `description`, and `error` parts) around `part="base"`, the surface
+ * holding the `part="listbox"` focus target with its option rows (option-row module; a group's
+ * options in a `role="group"` named by its `part="group"` heading), the `part="loading"` busy
+ * row, the `part="empty"` state, and the `status` slot. Rows are keyed by value, so the active
+ * option stays the same element when options change.
+ */
+export declare const listboxTemplate: (listbox: OddkinListbox) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=listbox.template.d.ts.map

package/dist/listbox/listbox.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.template.d.ts","sourceRoot":"","sources":["../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,YAAa,aAAa,mDAyCrD,CAAC"}

package/dist/listbox/listbox.template.js

@@ -0,0 +1,54 @@
+import { html } from '@oddkin/core/template';
+import { optionListTemplate } from '../collection/option-rows.template.js';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { spinnerTemplate } from '../styles/spinner.styles.js';
+/**
+ * Anatomy: the field (`label`, `description`, and `error` parts) around `part="base"`, the surface
+ * holding the `part="listbox"` focus target with its option rows (option-row module; a group's
+ * options in a `role="group"` named by its `part="group"` heading), the `part="loading"` busy
+ * row, the `part="empty"` state, and the `status` slot. Rows are keyed by value, so the active
+ * option stays the same element when options change.
+ */
+export const listboxTemplate = (listbox) => {
+    const options = listbox._options.value;
+    const disabled = listbox.disabled || listbox._formDisabled.value;
+    const strings = listbox._strings;
+    return html `<div part="field" class="field">
+    <span part="label" id="label" class="label">${listbox.label}</span>
+    <div part="description" id="description" class="description" ?hidden=${!listbox.description}>
+      ${listbox.description}
+    </div>
+    <div part="base" class="surface">
+      <div
+        part="listbox"
+        class="listbox"
+        role="listbox"
+        tabindex=${disabled ? null : '0'}
+        aria-labelledby="label"
+        aria-describedby=${listbox._describedBy}
+        aria-multiselectable=${listbox.multiple ? 'true' : null}
+        aria-required=${listbox.required ? 'true' : null}
+        aria-invalid=${listbox._userInvalid.value ? 'true' : null}
+        aria-disabled=${disabled ? 'true' : null}
+        aria-busy=${listbox.loading ? 'true' : null}
+        ?hidden=${!options.length}
+        @keydown=${listbox._onKeydown}
+        @click=${listbox._onClick}
+        @focus=${listbox._onFocus}
+        @blur=${listbox._onListboxBlur}
+      >
+        ${optionListTemplate(options, listbox._selected.value, listbox._activeIndex.value)}
+      </div>
+      <div part="loading" class="state" ?hidden=${!listbox.loading}>
+        ${spinnerTemplate}${strings.loading}
+      </div>
+      <div part="empty" class="state" ?hidden=${options.length > 0 || listbox.loading}>
+        <slot name="empty">${strings.empty}</slot>
+      </div>
+      <slot name="status"></slot>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!listbox.error}>${listbox.error}</div>
+    ${externalDescriptionTemplate(listbox._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=listbox.template.js.map

package/dist/listbox/listbox.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAsB,EAAE,EAAE;IACxD,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC;IACjE,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC;IACjC,OAAO,IAAI,CAAA;kDACqC,OAAO,CAAC,KAAK;2EACY,CAAC,OAAO,CAAC,WAAW;QACvF,OAAO,CAAC,WAAW;;;;;;;mBAOR,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;;2BAEb,OAAO,CAAC,YAAY;+BAChB,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;wBACvC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;uBACjC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;wBACzC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;oBAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;kBACjC,CAAC,OAAO,CAAC,MAAM;mBACd,OAAO,CAAC,UAAU;iBACpB,OAAO,CAAC,QAAQ;iBAChB,OAAO,CAAC,QAAQ;gBACjB,OAAO,CAAC,cAAc;;UAE5B,kBAAkB,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC;;kDAExC,CAAC,OAAO,CAAC,OAAO;UACxD,eAAe,GAAG,OAAO,CAAC,OAAO;;gDAEK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,OAAO;6BACxD,OAAO,CAAC,KAAK;;;;yDAIe,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK;MAClF,2BAA2B,CAAC,OAAO,CAAC,oBAAoB,CAAC;SACtD,CAAC;AACV,CAAC,CAAC"}

package/dist/menu/foundation.d.ts

@@ -0,0 +1,8 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { overlaySurfaceStructuralStyles } from '../styles/overlay-surface.structural.styles.js';
+export { optionRowStructuralStyles } from '../styles/option-row.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinMenu } from './menu.js';
+export { menuTemplate } from './menu.template.js';
+export { menuStructuralStyles } from './menu.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map