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

package/dist/select/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinSelect } from './select.js';
+export { selectTemplate } from './select.template.js';
+export { selectStructuralStyles } from './select.structural.styles.js';
+export { selectStyles } from './select.styles.js';
+export { selectDefinition } from './select.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/select/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/select/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/select`.
+export { OddkinSelect } from './select.js';
+export { selectTemplate } from './select.template.js';
+export { selectStructuralStyles } from './select.structural.styles.js';
+export { selectStyles } from './select.styles.js';
+export { selectDefinition } from './select.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/select/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/select/select.d.ts

@@ -0,0 +1,68 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import type { Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import { type OptionRecord } from '../collection/collection.js';
+import { OddkinFormControl, type FormControlOptions } from '../form-control/form-control.js';
+export type { OptionRecord } from '../collection/collection.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export declare const selectInputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Re-dispatched at the host when the user commits a change (native `change` is not composed). */
+export declare const selectChangeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinSelect_base: import("@oddkin/core/element").WithProps<typeof OddkinFormControl, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly options: import("@oddkin/core/element").PropDefinition<readonly OptionRecord[] | undefined>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly placeholder: import("@oddkin/core/element").PropDefinition<string>;
+    readonly required: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * A compact choice of one option in a form: a styled native `<select>`, so the engine's own picker,
+ * keyboard, and assistive-technology support come with it. Options come from `<option>` and
+ * `<optgroup>` children, written as for a native select (`selected` marks the default), or from
+ * `options`. Where `appearance: base-select` is supported, the open picker is drawn as Oddkin's
+ * raised listbox surface with option rows; elsewhere the engine draws it.
+ *
+ * @csspart field - Wrapper of label, description, control, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The native `<select>`.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssprop --odd-field-height - Minimum height (never below the target-size token). Shared by every form control and the field recipe.
+ * @cssprop --odd-field-radius - Corner radius. Shared by every form control and the field recipe.
+ * @cssprop --odd-field-border-color - Border colour. Shared by every form control and the field recipe.
+ * @cssprop --odd-field-background - Background colour. Shared by every form control and the field recipe.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is chosen while `required` after the user left the select or a validity check failed. Matches `aria-invalid` on the inner select; style it with `odd-select:state(user-invalid)`.
+ * @a11y `label` names the native select inside the shadow root; a `<label for>` outside it cannot. Description and error are announced through `aria-describedby`; `aria-invalid` is set for `error`, or for a missing choice after the user leaves the select or a validity check fails. The placeholder is a disabled first option, never a substitute for the label.
+ * @keyboard Native select behavior: Space, Enter, or Alt+Down opens the picker; Up and Down move; typing jumps to a matching option; Escape closes the picker.
+ * @previewRole select
+ * @useFor One choice from a short, known list in a form: a role, a region, a sort order.
+ * @notFor Several choices, or a list that should stay visible (use odd-listbox); a long list to search (use odd-combobox); actions (use odd-menu).
+ * @limitation Option descriptions are each option's tooltip (`title`); the closed select shows the label only.
+ * @limitation Under a strict `style-src` Content Security Policy, WebKit reports a `style-src-attr` violation for each native `<select>` from its own rendering; nothing visible is blocked. Allow for it where violations are collected.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export declare class OddkinSelect extends OddkinSelect_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static events: {
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinSelect>;
+    /** @internal The options in use. */
+    readonly _options: Readable<readonly OptionRecord[]>;
+    protected _formOptions(): FormControlOptions;
+    /** @internal Template handler: the user chose an option. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the user committed a change. */
+    readonly _onChange: () => void;
+    protected connected(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-select': OddkinSelect;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAiC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAE7F,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,sDAM3B,CAAC;AACH,kGAAkG;AAClG,eAAO,MAAM,iBAAiB,sDAK5B,CAAC;;;;;;;;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,YAAa,SAAQ,iBAehC;;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,KAAK;QAAoB,MAAM;MAAsB;IAChF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,YAAY,CAAC,CAAC;IAY9D,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,YAAY,EAAE,CAAC,CAAwB;IAE5E,UAAmB,YAAY,IAAI,kBAAkB,CAapD;IAaD,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAEtC;IACF,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAU/C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAGtE;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}

package/dist/select/select.define.d.ts

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

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

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

package/dist/select/select.define.js

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

package/dist/select/select.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.define.js","sourceRoot":"","sources":["../../src/select/select.define.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/select/select.definition.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.definition.d.ts","sourceRoot":"","sources":["../../src/select/select.definition.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3C,eAAO,MAAM,gBAAgB,gEAe3B,CAAC"}

package/dist/select/select.definition.js

@@ -0,0 +1,29 @@
+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 { optionRowPickerStyles } from '../styles/option-row.styles.js';
+import { overlayPickerStyles } from '../styles/overlay-surface.styles.js';
+import { OddkinSelect } from './select.js';
+import { selectStructuralStyles } from './select.structural.styles.js';
+import { selectStyles } from './select.styles.js';
+import { selectTemplate } from './select.template.js';
+export const selectDefinition = compose({
+    name: 'odd-select',
+    element: OddkinSelect,
+    template: selectTemplate,
+    styles: [
+        hostStyles,
+        fieldStructuralStyles,
+        selectStructuralStyles,
+        glyphStyles,
+        focusRingStyles,
+        controlStyles,
+        overlayPickerStyles,
+        optionRowPickerStyles,
+        selectStyles,
+    ],
+});
+//# sourceMappingURL=select.definition.js.map

package/dist/select/select.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.definition.js","sourceRoot":"","sources":["../../src/select/select.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,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACtC,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,YAAY;IACrB,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE;QACN,UAAU;QACV,qBAAqB;QACrB,sBAAsB;QACtB,WAAW;QACX,eAAe;QACf,aAAa;QACb,mBAAmB;QACnB,qBAAqB;QACrB,YAAY;KACb;CACF,CAAC,CAAC"}

package/dist/select/select.js

@@ -0,0 +1,126 @@
+import { event, prop } from '@oddkin/core/element';
+import { CollectionSource, readOptions } from '../collection/collection.js';
+import { OddkinFormControl } from '../form-control/form-control.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export const selectInputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'value',
+    intent: 'user',
+});
+/** Re-dispatched at the host when the user commits a change (native `change` is not composed). */
+export const selectChangeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A compact choice of one option in a form: a styled native `<select>`, so the engine's own picker,
+ * keyboard, and assistive-technology support come with it. Options come from `<option>` and
+ * `<optgroup>` children, written as for a native select (`selected` marks the default), or from
+ * `options`. Where `appearance: base-select` is supported, the open picker is drawn as Oddkin's
+ * raised listbox surface with option rows; elsewhere the engine draws it.
+ *
+ * @csspart field - Wrapper of label, description, control, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The native `<select>`.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssprop --odd-field-height - Minimum height (never below the target-size token). Shared by every form control and the field recipe.
+ * @cssprop --odd-field-radius - Corner radius. Shared by every form control and the field recipe.
+ * @cssprop --odd-field-border-color - Border colour. Shared by every form control and the field recipe.
+ * @cssprop --odd-field-background - Background colour. Shared by every form control and the field recipe.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is chosen while `required` after the user left the select or a validity check failed. Matches `aria-invalid` on the inner select; style it with `odd-select:state(user-invalid)`.
+ * @a11y `label` names the native select inside the shadow root; a `<label for>` outside it cannot. Description and error are announced through `aria-describedby`; `aria-invalid` is set for `error`, or for a missing choice after the user leaves the select or a validity check fails. The placeholder is a disabled first option, never a substitute for the label.
+ * @keyboard Native select behavior: Space, Enter, or Alt+Down opens the picker; Up and Down move; typing jumps to a matching option; Escape closes the picker.
+ * @previewRole select
+ * @useFor One choice from a short, known list in a form: a role, a region, a sort order.
+ * @notFor Several choices, or a list that should stay visible (use odd-listbox); a long list to search (use odd-combobox); actions (use odd-menu).
+ * @limitation Option descriptions are each option's tooltip (`title`); the closed select shows the label only.
+ * @limitation Under a strict `style-src` Content Security Policy, WebKit reports a `style-src-attr` violation for each native `<select>` from its own rendering; nothing visible is blocked. Allow for it where violations are collected.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinSelect extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the select.' }),
+    options: prop.object({
+        description: 'The choices; when set, `<option>` children are ignored.',
+    }),
+    value: prop.string({
+        default: '',
+        description: 'Value of the chosen option; the `value` attribute sets the default.',
+    }),
+    placeholder: prop.string({
+        default: '',
+        description: 'Shown, and submitted as an empty value, until an option is chosen; with `required`, it blocks submission. Never a substitute for a label.',
+    }),
+    required: prop.boolean({ reflect: true, description: 'An option must be chosen to submit.' }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: selectInputEvent, change: selectChangeEvent };
+    #source = new CollectionSource({
+        host: this,
+        name: 'options',
+        property: () => this.options,
+        read: readOptions,
+    });
+    // The declared default holds until the user or a script chooses.
+    #chosen = false;
+    #applied;
+    /** @internal The options in use. */
+    _options = this.#source.records;
+    _formOptions() {
+        return {
+            value: () => this.value,
+            control: () => this.shadowRoot?.querySelector('select'),
+            watch: () => [this.required, this.placeholder, this._options.value],
+            onReset: () => {
+                this.#chosen = false;
+                this.#applyDeclared();
+            },
+            onRestore: (state) => {
+                if (typeof state === 'string')
+                    this.value = state;
+            },
+        };
+    }
+    // The `value` attribute, else the last `<option selected>`, else (without a placeholder) the
+    // first usable option, as a native select shows.
+    #applyDeclared() {
+        if (this.#chosen)
+            return;
+        const first = this.placeholder
+            ? ''
+            : (this._options.peek().find((option) => !option.disabled)?.value ?? '');
+        this.#applied = this.value =
+            this.getAttribute('value') ?? this.#source.selected.peek().at(-1) ?? first;
+    }
+    /** @internal Template handler: the user chose an option. */
+    _onInput = (event) => {
+        this.value = event.target.value;
+    };
+    /** @internal Template handler: the user committed a change. */
+    _onChange = () => {
+        this.emit(selectChangeEvent);
+    };
+    connected(scope) {
+        super.connected(scope);
+        scope.use(this.#source);
+        // A value set as a property before connecting is the author's, not a default.
+        if (this.value && !this.hasAttribute('value'))
+            this.#chosen = true;
+        scope.effect(() => {
+            void this._options.value;
+            void this.placeholder;
+            this.#applyDeclared();
+        });
+    }
+    updated(changes) {
+        // A value the user, a script, or a restore set, unlike the declared default, stays.
+        if (changes.has('value') && this.value !== this.#applied)
+            this.#chosen = true;
+    }
+}
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

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

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

@@ -0,0 +1,10 @@
+/**
+ * The select is a block; its field layout is the shared `fieldStructuralStyles`. Where
+ * `appearance: base-select` and `::picker(select)` are supported, the select and its picker opt
+ * into the customizable select: the engine's arrow gives way to the element's chevron and each
+ * option's check moves to the row's end, as on the option rows. Rows size their borders in; a
+ * placeholder stays out of the open picker; in forced colours the chosen option and disabled text
+ * keep system colours, as on the option rows. No brand tokens.
+ */
+export declare const selectStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=select.structural.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.structural.styles.d.ts","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yCAoClC,CAAC"}

package/dist/select/select.structural.styles.js

@@ -0,0 +1,47 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The select is a block; its field layout is the shared `fieldStructuralStyles`. Where
+ * `appearance: base-select` and `::picker(select)` are supported, the select and its picker opt
+ * into the customizable select: the engine's arrow gives way to the element's chevron and each
+ * option's check moves to the row's end, as on the option rows. Rows size their borders in; a
+ * placeholder stays out of the open picker; in forced colours the chosen option and disabled text
+ * keep system colours, as on the option rows. No brand tokens.
+ */
+export const selectStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  @supports (appearance: base-select) and selector(::picker(select)) {
+    .control-box > select.control,
+    .control::picker(select) {
+      appearance: base-select;
+    }
+    .control option {
+      box-sizing: border-box;
+    }
+    .control > .placeholder {
+      display: none;
+    }
+    @supports selector(::picker-icon) {
+      .control::picker-icon {
+        display: none;
+      }
+    }
+    @supports selector(::checkmark) {
+      .control option::checkmark {
+        order: 1;
+        margin-inline-start: auto;
+      }
+    }
+    @media (forced-colors: active) {
+      :host .control option:checked {
+        background: Highlight;
+        color: HighlightText;
+      }
+      :host .control option:disabled {
+        color: GrayText;
+      }
+    }
+  }
+`;
+//# sourceMappingURL=select.structural.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.structural.styles.js","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxC,CAAC"}

package/dist/select/select.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Oddkin's default select look beyond the shared control module: the placeholder in secondary text
+ * (the options keep primary text in the engine's picker). In the customizable select's open
+ * picker, Figma `select`'s open state: the raised listbox surface (the overlay module's
+ * `overlayPickerStyles`), with square option rows (the option-row module's `optionRowPickerStyles`)
+ * between dividers.
+ */
+export declare const selectStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=select.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../src/select/select.styles.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,yCAexB,CAAC"}

package/dist/select/select.styles.js

@@ -0,0 +1,26 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default select look beyond the shared control module: the placeholder in secondary text
+ * (the options keep primary text in the engine's picker). In the customizable select's open
+ * picker, Figma `select`'s open state: the raised listbox surface (the overlay module's
+ * `overlayPickerStyles`), with square option rows (the option-row module's `optionRowPickerStyles`)
+ * between dividers.
+ */
+export const selectStyles = css `
+  .control:has(> .placeholder:checked) {
+    color: ${token('color.text.secondary')};
+  }
+  .control:has(> .placeholder:checked) > :not(.placeholder):not(:disabled) {
+    color: ${token('color.text.primary')};
+  }
+  @supports (appearance: base-select) and selector(::picker(select)) {
+    .control option {
+      border-radius: 0;
+    }
+    .control :is(option:not(.placeholder), optgroup) + :is(option, optgroup) {
+      border-block-start: ${token('border.width.default')} solid ${token('color.border.default')};
+    }
+  }
+`;
+//# sourceMappingURL=select.styles.js.map

package/dist/select/select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../src/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;aAElB,KAAK,CAAC,sBAAsB,CAAC;;;aAG7B,KAAK,CAAC,oBAAoB,CAAC;;;;;;;4BAOZ,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;;;CAG/F,CAAC"}

package/dist/select/select.template.d.ts

@@ -0,0 +1,11 @@
+import type { OddkinSelect } from './select.js';
+/**
+ * Anatomy: a `label` part labelling the native `<select part="control">` in the same shadow root,
+ * `description` and `error` parts referenced by `aria-describedby`, and the select's `input`,
+ * `change`, and `blur` handlers. A placeholder is a disabled first option with an empty value
+ * (the native placeholder option, so `required` works); grouped options sit in `<optgroup>`. Each
+ * option's `selected` property follows `value`, so the selection is set before validity is read.
+ * The chevron (`.control-end`) replaces the engine's arrow.
+ */
+export declare const selectTemplate: (select: OddkinSelect) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=select.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.template.d.ts","sourceRoot":"","sources":["../../src/select/select.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,WAAY,YAAY,mDAgDlD,CAAC"}

package/dist/select/select.template.js

@@ -0,0 +1,57 @@
+import { html, nothing } from '@oddkin/core/template';
+import { groupsOf } from '../collection/collection.js';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { chevronDownGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: a `label` part labelling the native `<select part="control">` in the same shadow root,
+ * `description` and `error` parts referenced by `aria-describedby`, and the select's `input`,
+ * `change`, and `blur` handlers. A placeholder is a disabled first option with an empty value
+ * (the native placeholder option, so `required` works); grouped options sit in `<optgroup>`. Each
+ * option's `selected` property follows `value`, so the selection is set before validity is read.
+ * The chevron (`.control-end`) replaces the engine's arrow.
+ */
+export const selectTemplate = (select) => {
+    const value = select.value;
+    const option = ({ option }) => html `<option
+      .value=${option.value}
+      .selected=${option.value === value}
+      ?disabled=${option.disabled}
+      title=${option.description ?? null}
+    >
+      ${option.label}
+    </option>`;
+    return html `<div part="field" class="field">
+    <label part="label" class="label" for="control" ?hidden=${!select.label}>${select.label}</label>
+    <div part="description" id="description" class="description" ?hidden=${!select.description}>
+      ${select.description}
+    </div>
+    <div class="control-box">
+      <select
+        part="control"
+        id="control"
+        class="control"
+        name=${select.name || null}
+        ?required=${select.required}
+        ?disabled=${select.disabled || select._formDisabled.value}
+        aria-describedby=${select._describedBy}
+        aria-invalid=${select._userInvalid.value ? 'true' : null}
+        @input=${select._onInput}
+        @change=${select._onChange}
+        @blur=${select._onBlur}
+      >
+        ${select.placeholder
+        ? html `<option class="placeholder" value="" disabled .selected=${value === ''}>
+                ${select.placeholder}
+              </option>`
+        : nothing}
+        ${groupsOf(select._options.value).map((group) => group.label === undefined
+        ? group.rows.map(option)
+        : html `<optgroup label=${group.label}>${group.rows.map(option)}</optgroup>`)}
+      </select>
+      <span class="control-end" aria-hidden="true">${chevronDownGlyph}</span>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!select.error}>${select.error}</div>
+    ${externalDescriptionTemplate(select._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=select.template.js.map

package/dist/select/select.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../src/select/select.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAqB,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoB,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAC3B,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAA4B,EAAE,EAAE,CACtD,IAAI,CAAA;eACO,MAAM,CAAC,KAAK;kBACT,MAAM,CAAC,KAAK,KAAK,KAAK;kBACtB,MAAM,CAAC,QAAQ;cACnB,MAAM,CAAC,WAAW,IAAI,IAAI;;QAEhC,MAAM,CAAC,KAAK;cACN,CAAC;IACb,OAAO,IAAI,CAAA;8DACiD,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;2EAChB,CAAC,MAAM,CAAC,WAAW;QACtF,MAAM,CAAC,WAAW;;;;;;;eAOX,MAAM,CAAC,IAAI,IAAI,IAAI;oBACd,MAAM,CAAC,QAAQ;oBACf,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK;2BACtC,MAAM,CAAC,YAAY;uBACvB,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;iBAC/C,MAAM,CAAC,QAAQ;kBACd,MAAM,CAAC,SAAS;gBAClB,MAAM,CAAC,OAAO;;UAGpB,MAAM,CAAC,WAAW;QAChB,CAAC,CAAC,IAAI,CAAA,2DAA2D,KAAK,KAAK,EAAE;kBACvE,MAAM,CAAC,WAAW;wBACZ;QACZ,CAAC,CAAC,OACN;UACE,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAC9C,KAAK,CAAC,KAAK,KAAK,SAAS;QACvB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;QACxB,CAAC,CAAC,IAAI,CAAA,mBAAmB,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,aAAa,CAC9E;;qDAE4C,gBAAgB;;yDAEZ,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;MAChF,2BAA2B,CAAC,MAAM,CAAC,oBAAoB,CAAC;SACrD,CAAC;AACV,CAAC,CAAC"}

package/dist/side-nav/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { navRowStructuralStyles } from '../styles/nav-row.structural.styles.js';
+export { OddkinSideNav } from './side-nav.js';
+export { sideNavTemplate } from './side-nav.template.js';
+export { sideNavRecipeStyles } from './side-nav.recipe.styles.js';
+export { sideNavStructuralStyles } from './side-nav.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/side-nav/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/side-nav/foundation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/side-nav/foundation.js

@@ -0,0 +1,11 @@
+// Skin-free foundation: behavior, anatomy, the extracted layout recipe styles, and structural
+// styles (shared host defaults first). Loads no default visual styles, no recipe engine, and
+// registers nothing (multi-product.md §4). Import `sideNavRecipe` from `@oddkin/components/side-nav`
+// to `extend()` the arrangement.
+export { hostStyles } from '../styles/host.styles.js';
+export { navRowStructuralStyles } from '../styles/nav-row.structural.styles.js';
+export { OddkinSideNav } from './side-nav.js';
+export { sideNavTemplate } from './side-nav.template.js';
+export { sideNavRecipeStyles } from './side-nav.recipe.styles.js';
+export { sideNavStructuralStyles } from './side-nav.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/side-nav/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/side-nav/foundation.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,6FAA6F;AAC7F,qGAAqG;AACrG,iCAAiC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/side-nav/index.d.ts

@@ -0,0 +1,9 @@
+export { OddkinSideNav, actionEvent, toggleEvent, type NavigationActionDetail, type NavigationLabelContext, type NavigationLabelRenderer, type NavigationToggleDetail, } from './side-nav.js';
+export { sideNavTemplate } from './side-nav.template.js';
+export { sideNavRecipeStyles } from './side-nav.recipe.styles.js';
+export { sideNavStructuralStyles } from './side-nav.structural.styles.js';
+export { sideNavStyles } from './side-nav.styles.js';
+export { sideNavDefinition } from './side-nav.definition.js';
+export { navigationKinds, type CustomNavigationItem, type NavigationEntry, type NavigationKind, type NavigationKinds, } from './kinds.js';
+export type { Navigation, NavigationItem } from '../models/navigation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/side-nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/side-nav/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EACb,WAAW,EACX,WAAW,EACX,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,GAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/side-nav/index.js

@@ -0,0 +1,9 @@
+// Side-effect free. Register with `@oddkin/components/define/side-nav`.
+export { OddkinSideNav, actionEvent, toggleEvent, } from './side-nav.js';
+export { sideNavTemplate } from './side-nav.template.js';
+export { sideNavRecipeStyles } from './side-nav.recipe.styles.js';
+export { sideNavStructuralStyles } from './side-nav.structural.styles.js';
+export { sideNavStyles } from './side-nav.styles.js';
+export { sideNavDefinition } from './side-nav.definition.js';
+export { navigationKinds, } from './kinds.js';
+//# sourceMappingURL=index.js.map

package/dist/side-nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/side-nav/index.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,OAAO,EACL,aAAa,EACb,WAAW,EACX,WAAW,GAKZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,eAAe,GAKhB,MAAM,YAAY,CAAC"}

package/dist/side-nav/kinds.d.ts

@@ -0,0 +1,51 @@
+import type { ObjectNode } from '@oddkin/core/model';
+import type { NavigationItem } from '../models/navigation.js';
+/** What a label renderer knows about the entry besides its data. */
+export interface NavigationLabelContext {
+    /** The entry is the current link. */
+    readonly current: boolean;
+    /** Nesting depth: 0 for top-level entries. */
+    readonly depth: number;
+}
+/**
+ * An entry of a project kind. Project kind names contain a hyphen, like custom element names, so
+ * they never collide with a built-in kind (`link`, `action`, `group`) or a future one.
+ */
+export interface CustomNavigationItem {
+    readonly id: string;
+    readonly kind: `${string}-${string}`;
+    readonly label: string;
+    readonly disabled?: boolean | undefined;
+    readonly [field: string]: unknown;
+}
+/** A built-in entry or an entry of a registered project kind. */
+export type NavigationEntry = NavigationItem | CustomNavigationItem;
+/**
+ * A project kind: the model of its entries (an `m.object` with `id` and `label`, plus `href`
+ * for links or `action` for actions), the built-in wrapper it reuses, and its label content. A
+ * `link` entry is a native link with the wrapper's `href`, `target`, `rel`, `disabled`, and
+ * `aria-current` handling; an `action` entry is a button that emits `odd-action` with its
+ * `action`. The element keeps the wrapper, its ARIA, and keyboard behavior, so the content
+ * cannot remove them.
+ */
+export interface NavigationKind {
+    readonly semantics: 'link' | 'action';
+    readonly model: ObjectNode;
+    readonly render: (item: CustomNavigationItem, context: NavigationLabelContext) => unknown;
+}
+/** An immutable set of project kinds, passed to one element as `.kinds`. */
+export interface NavigationKinds {
+    /** Registered project kind names, in registration order. */
+    readonly names: readonly string[];
+    get(kind: string): NavigationKind | undefined;
+    /** A new registry with these kinds added; this one is unchanged. */
+    extend(kinds: Readonly<Record<string, NavigationKind>>): NavigationKinds;
+}
+/** True for registries made by `navigationKinds` and its `extend()`. */
+export declare const isNavigationKinds: (value: unknown) => value is NavigationKinds;
+/**
+ * The navigation's built-in kinds (`link`, `action`, `group`) need no registration. Extend this
+ * registry with project kinds and pass the result to one element as `.kinds`; nothing is global.
+ */
+export declare const navigationKinds: NavigationKinds;
+//# sourceMappingURL=kinds.d.ts.map

package/dist/side-nav/kinds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinds.d.ts","sourceRoot":"","sources":["../../src/side-nav/kinds.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,oEAAoE;AACpE,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC;AACD,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC;AAEpE;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,OAAO,EAAE,sBAAsB,KAAK,OAAO,CAAC;CAC3F;AAED,4EAA4E;AAC5E,MAAM,WAAW,eAAe;IAC9B,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAAC;IAC9C,oEAAoE;IACpE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,GAAG,eAAe,CAAC;CAC1E;AAKD,wEAAwE;AACxE,eAAO,MAAM,iBAAiB,UAAW,OAAO,KAAG,KAAK,IAAI,eAC6B,CAAC;AAiC1F;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,eAAqC,CAAC"}