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

package/dist/input/input.js

@@ -0,0 +1,275 @@
+import { prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { keyValue, parseNumber, stepNumber } from '../form-control/range.js';
+import { OddkinTextControl, changeEvent, inputEvent } from '../form-control/text-control.js';
+export { changeEvent, inputEvent };
+export const INPUT_STRINGS = {
+    clear: 'Clear',
+    decrement: 'Decrease value',
+    increment: 'Increase value',
+    badInput: 'Enter a number.',
+};
+// Page Up and Page Down move a number field this many steps.
+const PAGE = 10;
+/**
+ * A labelled single-line text field that participates in forms like a native input.
+ *
+ * @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 `<input>`.
+ * @csspart icon - The search glyph at the start (`type="search"`).
+ * @csspart clear - The button that clears a search value (`type="search"`), shown while there is a value to clear.
+ * @csspart stepper - The segment at the end of a number field holding its two buttons (`type="number"`).
+ * @csspart decrement - The button that steps a number down, disabled where a step down cannot move the value (`type="number"`).
+ * @csspart increment - The button that steps a number up, disabled where a step up cannot move the value (`type="number"`).
+ * @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 the value is invalid after the user left the field or a validity check failed. Matches `aria-invalid` on the inner control; style it with `odd-input:state(user-invalid)`.
+ * @a11y `label` names the native input 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 an invalid value after the user leaves the field or a validity check fails (any `invalid` event, including `checkValidity()`, unlike native `:user-invalid`); reset clears it.
+ * @a11y A number field is the WAI-ARIA spinbutton: a text input with `role="spinbutton"`, the decimal input mode (unless the host sets `inputmode`), `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (and `aria-valuetext` when the text is not the plain number). Its decrement and increment buttons are named by `strings` and are not Tab stops; pressing one keeps focus in the field.
+ * @keyboard Native text-input behavior; arrow keys step a date. In a number field, Up and Down step by `step`, Page Up and Page Down by ten steps, and Home and End go to the lowest and highest values on the grid when `min` and `max` are set; each step that moves the value dispatches `input` and `change`, as a native number field's arrow keys do. In a search field, Escape clears the value (and then reaches outer handlers, such as a dialog, when empty).
+ * @previewRole textInput
+ * @useFor Short values in forms: names, email addresses, search terms, numbers, dates, and times.
+ * @notFor Multi-line text (use odd-textarea); choices from a fixed list (use odd-select or odd-radio-group).
+ * @a11y The global `inputmode`, `enterkeyhint`, `autocapitalize`, `autocorrect`, and `spellcheck` attributes on the host are forwarded to the inner input (`enterkeyhint` defaults to `search` in a search field).
+ * @limitation A number field reads HTML number syntax (a full stop before decimals, an optional exponent), not the page language's format; other text is bad input, which the value and the submission leave out, as in a native number field. Holding a stepper button steps once.
+ * @limitation Validation bubbles anchor to the inner input. `formStateRestoreCallback` restores the value; autofill depends on the inner input's `autocomplete`.
+ * @limitation Enter in the field does not submit the form (no implicit submission): the native input inside the shadow root has no form owner. Give the form a submit button.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinInput extends OddkinTextControl.with({
+    type: prop.enum([
+        'text',
+        'email',
+        'password',
+        'search',
+        'tel',
+        'url',
+        'number',
+        'date',
+        'time',
+        'datetime-local',
+        'month',
+        'week',
+    ], {
+        default: 'text',
+        reflect: true,
+        description: 'Native input type.',
+    }),
+    min: prop.string({ description: 'Lowest value (number and date types), as on native inputs.' }),
+    max: prop.string({ description: 'Highest value (number and date types), as on native inputs.' }),
+    step: prop.string({
+        description: 'Step between values (number and date types); `any` allows every value.',
+    }),
+    pattern: prop.string({
+        description: 'A regular expression the whole value must match (text types).',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    // A detached native input of this type: number validity, `valueAsNumber`, and date stepping.
+    #nativeInput;
+    // The value when the field took focus or last reported a change.
+    #reported = '';
+    _constraints() {
+        return [...super._constraints(), this.type, this.min, this.max, this.step];
+    }
+    _sanitize(text, typed = false) {
+        if (this.type !== 'number')
+            return text;
+        // Typed text may hold full-width digits from an input method, as a native number field reads
+        // them, and may end in a full stop on the way to decimals; engines read "1." as 1.
+        if (typed)
+            text = text.normalize('NFKC');
+        const number = typed && /^-?\d+\.$/.test(text) ? text.slice(0, -1) : text;
+        return parseNumber(number) === undefined ? '' : number;
+    }
+    _formOptions() {
+        const options = super._formOptions();
+        return {
+            ...options,
+            control: () => (this.type === 'number' ? this.#native() : options.control?.()),
+            // Barred, as a read-only or disabled native input is, so its text is not reported.
+            badInput: () => this.type === 'number' &&
+                !this.readonly &&
+                !this.#inactive &&
+                this._currentValue.value !== '' &&
+                this.value === ''
+                ? this.#strings.badInput
+                : '',
+            anchor: () => this.shadowRoot?.querySelector('.control'),
+        };
+    }
+    /** The value as a number (a date or time as milliseconds), as on native inputs; `NaN` when empty. */
+    get valueAsNumber() {
+        return this.#native().valueAsNumber;
+    }
+    set valueAsNumber(value) {
+        const native = this.#native();
+        native.valueAsNumber = value;
+        this.value = native.value;
+    }
+    /** Steps the value up `n` steps (default 1), as on native inputs; dispatches no events. */
+    stepUp(n) {
+        this.#stepBy(n ?? 1);
+    }
+    /** Steps the value down `n` steps (default 1), as on native inputs; dispatches no events. */
+    stepDown(n) {
+        this.#stepBy(-(n ?? 1));
+    }
+    get #inactive() {
+        return this.disabled || this._formDisabled.value;
+    }
+    get #strings() {
+        return strings(INPUT_STRINGS, this.strings);
+    }
+    #native() {
+        this.#nativeInput ??= document.createElement('input');
+        return Object.assign(this.#nativeInput, {
+            type: this.type,
+            required: this.required,
+            readOnly: this.readonly,
+            disabled: this.#inactive,
+            min: this.min ?? '',
+            max: this.max ?? '',
+            step: this.step ?? '',
+            value: this.value,
+        });
+    }
+    get #range() {
+        const min = parseNumber(this.min);
+        const step = parseNumber(this.step);
+        return {
+            min,
+            max: parseNumber(this.max),
+            step: this.step?.toLowerCase() === 'any' ? undefined : step && step > 0 ? step : 1,
+            base: min ?? parseNumber(this._sanitize(this.defaultValue)) ?? 0,
+        };
+    }
+    // The number `n` steps from the value, or undefined when the field stays empty.
+    #stepped(n, range = this.#range) {
+        return stepNumber(parseNumber(this.value), n, range);
+    }
+    #stepBy(n) {
+        if (this.type !== 'number') {
+            const native = this.#native();
+            if (n < 0)
+                native.stepDown(-n);
+            else
+                native.stepUp(n);
+            this.value = native.value;
+            return;
+        }
+        const range = this.#range;
+        if (range.step === undefined) {
+            throw new DOMException('A number field with step="any" has no step.', 'InvalidStateError');
+        }
+        const next = this.#stepped(n, range);
+        if (next !== undefined)
+            this.value = String(next);
+    }
+    // Sets the value the user stepped to; dispatches input and change when it moved.
+    #commit(next) {
+        if (next === undefined || next === parseNumber(this.value))
+            return;
+        this.value = String(next);
+        this.#reported = this.value;
+        this.emit(inputEvent);
+        this.emit(changeEvent);
+    }
+    /** @internal Template handler: the field took focus. */
+    _onFocus = () => {
+        this.#reported = this.value;
+    };
+    /**
+     * @internal Template handler: the user committed a change. As on the native number field, a
+     * number field reports a change of its value, not of text that leaves the value as it was.
+     */
+    _onChange = () => {
+        if (this.type === 'number' && this.value === this.#reported)
+            return;
+        this.#reported = this.value;
+        this.emit(changeEvent);
+    };
+    /** @internal The number field's ARIA value attributes and which stepper buttons can act. */
+    get _spin() {
+        const number = parseNumber(this.value);
+        const text = this._currentValue.value;
+        const range = this.#range;
+        const live = !this.readonly && !this.#inactive;
+        const moves = (n) => {
+            const next = this.#stepped(n, range);
+            return live && next !== undefined && next !== number;
+        };
+        const now = number === undefined ? null : String(number);
+        return {
+            now,
+            text: text !== '' && text !== now ? text : null,
+            min: range.min === undefined ? null : String(range.min),
+            max: range.max === undefined ? null : String(range.max),
+            down: moves(-1),
+            up: moves(1),
+        };
+    }
+    /** @internal The stepper buttons' names. */
+    get _stepLabels() {
+        return this.#strings;
+    }
+    /** @internal Template handler: a press on a stepper button leaves focus in the field. */
+    _onStepPress = (event) => {
+        event.preventDefault();
+    };
+    /** @internal Template handler: a stepper button (its `data-step`); disabled when it cannot act. */
+    _onStep = (event) => {
+        const n = Number(event.currentTarget.dataset.step);
+        this.shadowRoot?.querySelector('.control')?.focus({ preventScroll: true });
+        this.#commit(this.#stepped(n));
+    };
+    /** @internal The clear button shows while a search value can be cleared. */
+    get _clearable() {
+        return (this.type === 'search' && this.value !== '' && !this._formDisabled.value && !this.readonly);
+    }
+    /** @internal The clear button's name. */
+    get _clearLabel() {
+        return this.#strings.clear;
+    }
+    /** @internal Template handler: the clear button, or Escape in a search field. */
+    _onClear = () => {
+        this.value = '';
+        this.emit(inputEvent);
+        this.emit(changeEvent);
+        this.shadowRoot?.querySelector('input')?.focus();
+    };
+    /**
+     * @internal Template handler: the number field's stepping keys, and Escape, which clears a
+     * search value as native search fields do.
+     */
+    _onKeydown = (event) => {
+        // Keys an input method is composing with are its own (choosing a candidate, cancelling).
+        if (event.isComposing)
+            return;
+        if (this.type === 'number') {
+            // A disabled field takes no keys; a read-only one keeps its value.
+            if (event.altKey || event.ctrlKey || event.metaKey || this.readonly)
+                return;
+            // Left and Right stay text-editing keys, as Home and End without bounds.
+            const next = keyValue(event.key, parseNumber(this.value), this.#range, { page: PAGE });
+            if (next === undefined)
+                return;
+            event.preventDefault();
+            this.#commit(next);
+            return;
+        }
+        if (event.key !== 'Escape' || !this._clearable)
+            return;
+        event.preventDefault();
+        this._onClear();
+    };
+}
+//# sourceMappingURL=input.js.map

package/dist/input/input.js.map

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

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

@@ -0,0 +1,8 @@
+/**
+ * The input is a block; its field layout is the shared `fieldStructuralStyles`. The search
+ * field's clear button sits among the adornments, which ignore the pointer, and takes clicks. A
+ * number field's stepper is a row of two buttons over the field's end, its full height. No brand
+ * tokens.
+ */
+export declare const inputStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=input.structural.styles.d.ts.map

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

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

package/dist/input/input.structural.styles.js

@@ -0,0 +1,34 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The input is a block; its field layout is the shared `fieldStructuralStyles`. The search
+ * field's clear button sits among the adornments, which ignore the pointer, and takes clicks. A
+ * number field's stepper is a row of two buttons over the field's end, its full height. No brand
+ * tokens.
+ */
+export const inputStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .clear,
+  .step {
+    display: grid;
+    place-items: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .step:disabled {
+    cursor: not-allowed;
+  }
+  .stepper {
+    display: flex;
+    justify-self: end;
+    align-self: stretch;
+  }
+`;
+//# sourceMappingURL=input.structural.styles.js.map

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

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

package/dist/input/input.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Oddkin's default input look beyond the shared control module: the search field's clear button,
+ * a round target of the minimum size around its 1em glyph, in secondary text; and Figma
+ * `number`'s stepper, a sunken segment inside the field's border at its end, of two buttons a
+ * control height wide, the text kept clear of it by `space.xs`.
+ */
+export declare const inputStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=input.styles.d.ts.map

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

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

package/dist/input/input.styles.js

@@ -0,0 +1,49 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default input look beyond the shared control module: the search field's clear button,
+ * a round target of the minimum size around its 1em glyph, in secondary text; and Figma
+ * `number`'s stepper, a sunken segment inside the field's border at its end, of two buttons a
+ * control height wide, the text kept clear of it by `space.xs`.
+ */
+export const inputStyles = css `
+  .clear {
+    inline-size: ${token('target.min')};
+    block-size: ${token('target.min')};
+    margin: calc((1em - ${token('target.min')}) / 2);
+    border-radius: ${token('radius.full')};
+    color: ${token('color.text.secondary')};
+  }
+  @media (hover: hover) {
+    .clear:hover {
+      background: ${token('color.surface.hover')};
+      color: ${token('color.text.primary')};
+    }
+    .step:enabled:hover {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .stepper {
+    margin: ${token('border.width.default')};
+    overflow: hidden;
+    border-start-end-radius: calc(
+      var(--odd-field-radius, ${token('control.radius')}) - ${token('border.width.default')}
+    );
+    border-end-end-radius: calc(
+      var(--odd-field-radius, ${token('control.radius')}) - ${token('border.width.default')}
+    );
+    background: ${token('color.surface.sunken')};
+  }
+  .step {
+    inline-size: ${token('control.height.md')};
+  }
+  .step:disabled {
+    color: ${token('color.text.disabled')};
+  }
+  .control-box:has(> .stepper) > .control {
+    padding-inline-end: calc(
+      2 * ${token('control.height.md')} + ${token('border.width.default')} + ${token('space.xs')}
+    );
+  }
+`;
+//# sourceMappingURL=input.styles.js.map

package/dist/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sourceRoot":"","sources":["../../src/input/input.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,WAAW,GAAG,GAAG,CAAA;;mBAEX,KAAK,CAAC,YAAY,CAAC;kBACpB,KAAK,CAAC,YAAY,CAAC;0BACX,KAAK,CAAC,YAAY,CAAC;qBACxB,KAAK,CAAC,aAAa,CAAC;aAC5B,KAAK,CAAC,sBAAsB,CAAC;;;;oBAItB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;oBAGtB,KAAK,CAAC,qBAAqB,CAAC;;;;cAIlC,KAAK,CAAC,sBAAsB,CAAC;;;gCAGX,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;;gCAG3D,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;kBAEzE,KAAK,CAAC,sBAAsB,CAAC;;;mBAG5B,KAAK,CAAC,mBAAmB,CAAC;;;aAGhC,KAAK,CAAC,qBAAqB,CAAC;;;;YAI7B,KAAK,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;CAG/F,CAAC"}

package/dist/input/input.template.d.ts

@@ -0,0 +1,12 @@
+import type { OddkinInput } from './input.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input part="control">` in the same shadow
+ * root, `description` and `error` parts referenced by `aria-describedby`, and the input's
+ * `input`, `change`, and `blur` handlers. The control keeps its text through `live()`. A
+ * search field is a text input with the `searchbox` role, a search glyph (part `icon`), and a
+ * clear button (part `clear`): the engines' own cancel buttons cannot be hidden without
+ * prefixed pseudo-elements. A number field is a text input with the `spinbutton` role and a
+ * `stepper` segment of `decrement` and `increment` buttons, for the same reason (spin buttons).
+ */
+export declare const inputTemplate: (input: OddkinInput) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=input.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.template.d.ts","sourceRoot":"","sources":["../../src/input/input.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,WAAW,mDAmG/C,CAAC"}

package/dist/input/input.template.js

@@ -0,0 +1,110 @@
+import { live } from '@oddkin/core/helpers/live';
+import { html, nothing } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { closeGlyph, minusGlyph, plusGlyph, searchGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input part="control">` in the same shadow
+ * root, `description` and `error` parts referenced by `aria-describedby`, and the input's
+ * `input`, `change`, and `blur` handlers. The control keeps its text through `live()`. A
+ * search field is a text input with the `searchbox` role, a search glyph (part `icon`), and a
+ * clear button (part `clear`): the engines' own cancel buttons cannot be hidden without
+ * prefixed pseudo-elements. A number field is a text input with the `spinbutton` role and a
+ * `stepper` segment of `decrement` and `increment` buttons, for the same reason (spin buttons).
+ */
+export const inputTemplate = (input) => {
+    const search = input.type === 'search';
+    const spin = input.type === 'number' ? input._spin : undefined;
+    return html `<div part="field" class="field">
+    <label part="label" class="label" for="control" ?hidden=${!input.label}>${input.label}</label>
+    <div part="description" id="description" class="description" ?hidden=${!input.description}>
+      ${input.description}
+    </div>
+    <div class="control-box">
+      <input
+        part="control"
+        id="control"
+        class="control"
+        .value=${live(input._currentValue)}
+        type=${search || spin ? 'text' : input.type}
+        role=${search ? 'searchbox' : spin ? 'spinbutton' : null}
+        name=${input.name || null}
+        placeholder=${input.placeholder || null}
+        autocomplete=${input.autocomplete || null}
+        min=${input.min ?? null}
+        max=${input.max ?? null}
+        step=${input.step ?? null}
+        minlength=${input.minLength ?? null}
+        maxlength=${input.maxLength ?? null}
+        pattern=${input.pattern ?? null}
+        aria-valuenow=${spin?.now ?? null}
+        aria-valuetext=${spin?.text ?? null}
+        aria-valuemin=${spin?.min ?? null}
+        aria-valuemax=${spin?.max ?? null}
+        inputmode=${input._hints.get('inputmode', spin ? 'decimal' : null)}
+        enterkeyhint=${input._hints.get('enterkeyhint', search ? 'search' : null)}
+        autocapitalize=${input._hints.get('autocapitalize')}
+        autocorrect=${input._hints.get('autocorrect')}
+        spellcheck=${input._hints.get('spellcheck')}
+        ?required=${input.required}
+        ?disabled=${input.disabled || input._formDisabled.value}
+        ?readonly=${input.readonly}
+        aria-describedby=${input._describedBy}
+        aria-invalid=${input._userInvalid.value ? 'true' : null}
+        @input=${input._onInput}
+        @change=${input._onChange}
+        @focus=${input._onFocus}
+        @blur=${input._onBlur}
+        @keydown=${input._onKeydown}
+      />
+      ${search
+        ? html `<span part="icon" class="control-start" aria-hidden="true">${searchGlyph}</span>
+              <span class="control-end">
+                <button
+                  part="clear"
+                  class="clear"
+                  type="button"
+                  tabindex="-1"
+                  aria-label=${input._clearLabel}
+                  ?hidden=${!input._clearable}
+                  @click=${input._onClear}
+                >
+                  ${closeGlyph}
+                </button>
+              </span>`
+        : nothing}
+      ${spin
+        ? html `<span part="stepper" class="stepper">
+              <button
+                part="decrement"
+                class="step"
+                type="button"
+                tabindex="-1"
+                data-step="-1"
+                aria-label=${input._stepLabels.decrement}
+                ?disabled=${!spin.down}
+                @mousedown=${input._onStepPress}
+                @click=${input._onStep}
+              >
+                ${minusGlyph}
+              </button>
+              <button
+                part="increment"
+                class="step"
+                type="button"
+                tabindex="-1"
+                data-step="1"
+                aria-label=${input._stepLabels.increment}
+                ?disabled=${!spin.up}
+                @mousedown=${input._onStepPress}
+                @click=${input._onStep}
+              >
+                ${plusGlyph}
+              </button>
+            </span>`
+        : nothing}
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!input.error}>${input.error}</div>
+    ${externalDescriptionTemplate(input._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=input.template.js.map

package/dist/input/input.template.js.map

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

package/dist/layout/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `@oddkin/components/layout` — layout helpers and recipes bound to Oddkin's layout roles and
+ * named conditions. DOM-free: recipes produce CSS text and shared stylesheets. The page-author
+ * classes built from the same helpers ship as `@oddkin/components/css/layout.css`.
+ * Contract: docs/architecture/layout-recipes.md §3, §6, §7.
+ */
+import { type LayoutRecipe, type RecipeDefinition } from '@oddkin/core/layout';
+import { type CSSResult } from '@oddkin/core/styles';
+import { type ConditionName } from '@oddkin/tokens/conditions';
+export type { AutoGridOptions, GridOptions, LayoutHelper, LayoutRecipe, RecipeDefinition, RowOptions, SplitOptions, StackOptions, } from '@oddkin/core/layout';
+export type { ConditionName } from '@oddkin/tokens/conditions';
+/** Helper defaults: the theme's layout roles, so gaps and minimums follow themes and density. */
+export declare const LAYOUT_DEFAULTS: Readonly<{
+    gap: string;
+    itemMin: string;
+    sideWidth: string;
+    mainMin: string;
+}>;
+export declare const stack: (options?: import("@oddkin/core/layout").StackOptions) => import("@oddkin/core/layout").LayoutHelper, row: (options?: import("@oddkin/core/layout").RowOptions) => import("@oddkin/core/layout").LayoutHelper, grid: (options?: import("@oddkin/core/layout").GridOptions) => import("@oddkin/core/layout").LayoutHelper, autoGrid: (options?: import("@oddkin/core/layout").AutoGridOptions) => import("@oddkin/core/layout").LayoutHelper, split: (options: import("@oddkin/core/layout").SplitOptions) => import("@oddkin/core/layout").LayoutHelper, declarations: (declarations: Readonly<Record<string, string>>) => import("@oddkin/core/layout").LayoutHelper;
+/**
+ * The at-rule that opens a named condition's block, for component styles:
+ * css`${condition('page.wide')} { .content { … } }`.
+ */
+export declare function condition(name: ConditionName): CSSResult;
+/**
+ * `defineLayoutRecipe` from `@oddkin/core/layout` with Oddkin's named conditions available in
+ * `when` (merged under any `conditions` you pass) and the `odd.layout` layer prefix.
+ */
+export declare function defineLayoutRecipe(definition: RecipeDefinition): LayoutRecipe;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG3E,YAAY,EACV,eAAe,EACf,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,GACb,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,iGAAiG;AACjG,eAAO,MAAM,eAAe;;;;;EAK1B,CAAC;AAEH,eAAO,MACL,KAAK,wGACL,GAAG,sGACH,IAAI,uGACJ,QAAQ,2GACR,KAAK,uGACA,YAAY,gGACqB,CAAC;AAEzC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,CAExD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,gBAAgB,GAAG,YAAY,CAM7E"}

package/dist/layout/index.js

@@ -0,0 +1,37 @@
+/**
+ * `@oddkin/components/layout` — layout helpers and recipes bound to Oddkin's layout roles and
+ * named conditions. DOM-free: recipes produce CSS text and shared stylesheets. The page-author
+ * classes built from the same helpers ship as `@oddkin/components/css/layout.css`.
+ * Contract: docs/architecture/layout-recipes.md §3, §6, §7.
+ */
+import { createLayoutHelpers, defineLayoutRecipe as defineRecipe, } from '@oddkin/core/layout';
+import { unsafeCSS } from '@oddkin/core/styles';
+import { conditions } from '@oddkin/tokens/conditions';
+import { token } from '@oddkin/tokens/refs';
+/** Helper defaults: the theme's layout roles, so gaps and minimums follow themes and density. */
+export const LAYOUT_DEFAULTS = Object.freeze({
+    gap: token('layout.gap'),
+    itemMin: token('layout.item-min'),
+    sideWidth: token('layout.sidebar-width'),
+    mainMin: token('layout.main-min'),
+});
+export const { stack, row, grid, autoGrid, split, css: declarations, } = createLayoutHelpers(LAYOUT_DEFAULTS);
+/**
+ * The at-rule that opens a named condition's block, for component styles:
+ * css`${condition('page.wide')} { .content { … } }`.
+ */
+export function condition(name) {
+    return unsafeCSS(conditions[name].atRule);
+}
+/**
+ * `defineLayoutRecipe` from `@oddkin/core/layout` with Oddkin's named conditions available in
+ * `when` (merged under any `conditions` you pass) and the `odd.layout` layer prefix.
+ */
+export function defineLayoutRecipe(definition) {
+    return defineRecipe({
+        layer: 'odd.layout',
+        ...definition,
+        conditions: { ...conditions, ...definition.conditions },
+    });
+}
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,mBAAmB,EACnB,kBAAkB,IAAI,YAAY,GAGnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAkB,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAc5C,iGAAiG;AACjG,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3C,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,SAAS,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;CAClC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,EACX,KAAK,EACL,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,GAAG,EAAE,YAAY,GAClB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAEzC;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,IAAmB;IAC3C,OAAO,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,UAA4B;IAC7D,OAAO,YAAY,CAAC;QAClB,KAAK,EAAE,YAAY;QACnB,GAAG,UAAU;QACb,UAAU,EAAE,EAAE,GAAG,UAAU,EAAE,GAAG,UAAU,CAAC,UAAU,EAAE;KACxD,CAAC,CAAC;AACL,CAAC"}

package/dist/listbox/foundation.d.ts

@@ -0,0 +1,9 @@
+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.d.ts.map

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

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