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

package/dist/file-input/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/file-input/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,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/file-input/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+export { fileInputStyles } from './file-input.styles.js';
+export { fileInputDefinition } from './file-input.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/file-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/file-input/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/file-input`.
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+export { fileInputStyles } from './file-input.styles.js';
+export { fileInputDefinition } from './file-input.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/file-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/form-control/checkable.d.ts

@@ -0,0 +1,41 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import { OddkinFormControl, type FormControlOptions } from './form-control.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export declare const inputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Re-dispatched at the host when the user toggles (native `change` is not composed). */
+export declare const changeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinCheckable_base: import("@oddkin/core/element").WithProps<typeof OddkinFormControl, {
+    readonly defaultChecked: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly required: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * A form control over a native checkbox (`odd-checkbox`, `odd-switch`): `checked` as native (the
+ * attribute is the default), `value` submitted while checked, `required`. Subclasses bind
+ * `_currentChecked`, `_onInput`, `_onChange`, and `_onBlur` on their inner checkbox.
+ */
+export declare class OddkinCheckable extends OddkinCheckable_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 OddkinCheckable>;
+    /** @internal Checkedness as a readable for the template's live binding. */
+    readonly _currentChecked: Readable<boolean>;
+    constructor();
+    /** The current checkedness. Setting it (or toggling) detaches it from `defaultChecked`. */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    protected _formOptions(): FormControlOptions;
+    /** @internal Called after the user toggled, before `input` reaches listeners at the host. */
+    protected _toggled(): void;
+    /** @internal Template handler: the user toggled. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the user committed the toggle. */
+    readonly _onChange: () => void;
+}
+export {};
+//# sourceMappingURL=checkable.d.ts.map

package/dist/form-control/checkable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkable.d.ts","sourceRoot":"","sources":["../../src/form-control/checkable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,iGAAiG;AACjG,eAAO,MAAM,UAAU,sDAMrB,CAAC;AACH,yFAAyF;AACzF,eAAO,MAAM,WAAW,sDAKtB,CAAC;;;;;;AAEH;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,oBAOnC;;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,KAAK;QAAc,MAAM;MAAgB;IACpE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,eAAe,CAAC,CAAC;IAKjE,2EAA2E;IAC3E,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAgC;IAE3E,cAQC;IAED,2FAA2F;IAC3F,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAE3B;IAED,UAAmB,YAAY,IAAI,kBAAkB,CAapD;IAED,6FAA6F;IAC7F,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAG;IAE7B,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAGtC;IACF,iEAAiE;IACjE,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;CACH"}

package/dist/form-control/checkable.js

@@ -0,0 +1,81 @@
+import { event, prop } from '@oddkin/core/element';
+import { computed, signal } from '@oddkin/core/reactive';
+import { OddkinFormControl } from './form-control.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export const inputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'checked',
+    intent: 'user',
+});
+/** Re-dispatched at the host when the user toggles (native `change` is not composed). */
+export const changeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A form control over a native checkbox (`odd-checkbox`, `odd-switch`): `checked` as native (the
+ * attribute is the default), `value` submitted while checked, `required`. Subclasses bind
+ * `_currentChecked`, `_onInput`, `_onChange`, and `_onBlur` on their inner checkbox.
+ */
+export class OddkinCheckable extends OddkinFormControl.with({
+    defaultChecked: prop.boolean({
+        attribute: 'checked',
+        description: 'Initial checkedness; the `checked` attribute, as on native checkboxes.',
+    }),
+    value: prop.string({ default: 'on', description: 'Submitted with the form while checked.' }),
+    required: prop.boolean({ reflect: true, description: 'Must be checked to submit.' }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: inputEvent, change: changeEvent };
+    // undefined until set or toggled ("dirty"), then independent of `defaultChecked`.
+    #checked = signal(undefined);
+    /** @internal Checkedness as a readable for the template's live binding. */
+    _currentChecked = computed(() => this.checked);
+    constructor() {
+        super();
+        // Checkedness assigned before the element was defined becomes the dirty state.
+        if (Object.hasOwn(this, 'checked')) {
+            const early = this.checked;
+            delete this.checked;
+            this.checked = !!early;
+        }
+    }
+    /** The current checkedness. Setting it (or toggling) detaches it from `defaultChecked`. */
+    get checked() {
+        return this.#checked.value ?? this.defaultChecked;
+    }
+    set checked(checked) {
+        this.#checked.value = !!checked;
+    }
+    _formOptions() {
+        return {
+            value: () => (this.checked ? this.value : null),
+            state: () => (this.checked ? 'checked' : 'unchecked'),
+            control: () => this.shadowRoot?.querySelector('input'),
+            watch: () => this.required,
+            onReset: () => {
+                this.#checked.value = undefined;
+            },
+            onRestore: (state) => {
+                if (state === 'checked' || state === 'unchecked')
+                    this.checked = state === 'checked';
+            },
+        };
+    }
+    /** @internal Called after the user toggled, before `input` reaches listeners at the host. */
+    _toggled() { }
+    /** @internal Template handler: the user toggled. */
+    _onInput = (event) => {
+        this.#checked.value = event.target.checked;
+        this._toggled();
+    };
+    /** @internal Template handler: the user committed the toggle. */
+    _onChange = () => {
+        this.emit(changeEvent);
+    };
+}
+//# sourceMappingURL=checkable.js.map

package/dist/form-control/checkable.js.map

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

package/dist/form-control/description.d.ts

@@ -0,0 +1,17 @@
+import { type Readable } from '@oddkin/core/reactive';
+/**
+ * Texts other elements give a control whose focus target sits in its shadow root, such as a
+ * tooltip anchored to it: `aria-describedby` cannot reach across the shadow boundary, so the
+ * control renders the texts itself (component-contracts.md §2.4). One text per source, in the
+ * order the sources first described it.
+ */
+export declare class ExternalDescriptions {
+    #private;
+    /** The texts joined by spaces; empty when there are none. */
+    readonly text: Readable<string>;
+    /** Sets the source's text; `null` or an empty string removes it. */
+    set(source: object, text: string | null): void;
+}
+/** The hidden element the inner control's `aria-describedby` lists as `external-description`. */
+export declare const externalDescriptionTemplate: (text: string) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=description.d.ts.map

package/dist/form-control/description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/form-control/description.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGxE;;;;;GAKG;AACH,qBAAa,oBAAoB;;IAG/B,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAA+D;IAE9F,oEAAoE;IACpE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAK7C;CACF;AAED,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,SAAU,MAAM,mDACK,CAAC"}

package/dist/form-control/description.js

@@ -0,0 +1,25 @@
+import { computed, signal } from '@oddkin/core/reactive';
+import { html } from '@oddkin/core/template';
+/**
+ * Texts other elements give a control whose focus target sits in its shadow root, such as a
+ * tooltip anchored to it: `aria-describedby` cannot reach across the shadow boundary, so the
+ * control renders the texts itself (component-contracts.md §2.4). One text per source, in the
+ * order the sources first described it.
+ */
+export class ExternalDescriptions {
+    #entries = signal(new Map());
+    /** The texts joined by spaces; empty when there are none. */
+    text = computed(() => [...this.#entries.value.values()].join(' '));
+    /** Sets the source's text; `null` or an empty string removes it. */
+    set(source, text) {
+        const entries = new Map(this.#entries.value);
+        if (text)
+            entries.set(source, text);
+        else if (!entries.delete(source))
+            return;
+        this.#entries.value = entries;
+    }
+}
+/** The hidden element the inner control's `aria-describedby` lists as `external-description`. */
+export const externalDescriptionTemplate = (text) => html `<span id="external-description" hidden>${text}</span>`;
+//# sourceMappingURL=description.js.map

package/dist/form-control/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","sourceRoot":"","sources":["../../src/form-control/description.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAiB,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,OAAO,oBAAoB;IACtB,QAAQ,GAAG,MAAM,CAA8B,IAAI,GAAG,EAAE,CAAC,CAAC;IAEnE,6DAA6D;IACpD,IAAI,GAAqB,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAE9F,oEAAoE;IACpE,GAAG,CAAC,MAAc,EAAE,IAAmB;QACrC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,IAAI;YAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;aAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;YAAE,OAAO;QACzC,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC;IAChC,CAAC;CACF;AAED,iGAAiG;AACjG,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,IAAY,EAAE,EAAE,CAC1D,IAAI,CAAA,0CAA0C,IAAI,SAAS,CAAC"}

package/dist/form-control/form-control.d.ts

@@ -0,0 +1,77 @@
+import { type FormValueOptions } from '@oddkin/core/controllers/form';
+import { OddkinElement } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+/** What a form control adds to the shared participation: its value, inner control, reset, restore. */
+export type FormControlOptions = Omit<FormValueOptions, 'internals' | 'error'>;
+declare const OddkinFormControl_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly name: import("@oddkin/core/element").PropDefinition<string | undefined>;
+    readonly disabled: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly description: import("@oddkin/core/element").PropDefinition<string>;
+    readonly error: import("@oddkin/core/element").PropDefinition<string>;
+}>;
+/**
+ * Form participation every Oddkin form control shares (component-contracts.md §2.4): name,
+ * disabled (also by a disabled fieldset), help and error text, the form owner, validity and the
+ * constraint-validation methods, reset, state restore, and the `user-invalid` custom state.
+ * Subclasses describe their value in `_formOptions()`, call `super` in `connected` and `mounted`,
+ * and bind `_onBlur` on their inner control.
+ */
+export declare class OddkinFormControl extends OddkinFormControl_base {
+    #private;
+    static formAssociated: boolean;
+    /**
+     * @internal Disabled by its `disabled` attribute or an ancestor `<fieldset disabled>`: both reach
+     * `formDisabledCallback`, which also re-reads validity, since a disabled control is barred.
+     */
+    readonly _formDisabled: Readable<boolean>;
+    /** @internal The user left the field or a submission was attempted. */
+    readonly _touched: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal The current value failed validation. */
+    readonly _invalid: Readable<boolean>;
+    /**
+     * @internal The field shows its error: `error` is set, or the value is invalid after the user
+     * left the field or a validity check failed. One source for `aria-invalid` and the
+     * `user-invalid` custom state.
+     */
+    readonly _userInvalid: Readable<boolean>;
+    /**
+     * @internal Another element (a tooltip) describes this control; `null` removes its text. Works
+     * before the first render and keeps the texts across renders.
+     */
+    _describe(source: object, text: string | null): void;
+    /** @internal The texts other elements gave, rendered hidden by the template. */
+    get _externalDescription(): string;
+    /** @internal The ids for `aria-describedby`: description, error, and external descriptions. */
+    get _describedBy(): string | null;
+    /** @internal The subclass's value, inner control, reset, and restore (closures only). */
+    protected _formOptions(): FormControlOptions;
+    /** The form this field belongs to, if any. */
+    get form(): HTMLFormElement | null;
+    /** The field's validity, as on a native form control. */
+    get validity(): ValidityState;
+    /** The message the browser would show for the field's invalid state, or empty. */
+    get validationMessage(): string;
+    /** Whether the field takes part in constraint validation (false while disabled or read-only). */
+    get willValidate(): boolean;
+    /** Whether the field is valid; when not, fires `invalid` at it, as on native controls. */
+    checkValidity(): boolean;
+    /** As `checkValidity()`, and an invalid field also shows its error to the user. */
+    reportValidity(): boolean;
+    /** As on native controls; the message is also shown, since it sets `error`. An empty string clears it. */
+    setCustomValidity(message: string): void;
+    /** @internal Template handler: the user left the control. */
+    readonly _onBlur: () => void;
+    protected connected(scope: Scope): void;
+    protected mounted(scope: Scope): void;
+    /** Native callback: the owning form was reset. */
+    formResetCallback(): void;
+    /** Native callback: restore after navigation or autofill restore. */
+    formStateRestoreCallback(state: string | File | FormData | null, mode: 'restore' | 'autocomplete'): void;
+    /** Native callback: an ancestor fieldset's disabled state changed. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Native callback: the form owner changed (moved, `form` attribute, or the named form). */
+    formAssociatedCallback(form: HTMLFormElement | null): void;
+}
+export {};
+//# sourceMappingURL=form-control.d.ts.map

package/dist/form-control/form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../src/form-control/form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAGhD,sGAAsG;AACtG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC;;;;;;;AAE/E;;;;;;GAMG;AACH,qBAAa,iBAAkB,SAAQ,sBAYrC;;IACA,MAAM,CAAC,cAAc,UAAQ;IAM7B;;;OAGG;IACH,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAuB;IAChE,uEAAuE;IACvE,QAAQ,CAAC,QAAQ,kDAAiB;IAClC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAsB;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,OAAO,CAAC,CAEtC;IAIF;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAEnD;IAED,gFAAgF;IAChF,IAAI,oBAAoB,IAAI,MAAM,CAEjC;IAED,+FAA+F;IAC/F,IAAI,YAAY,IAAI,MAAM,GAAG,IAAI,CAUhC;IAeD,yFAAyF;IACzF,SAAS,CAAC,YAAY,IAAI,kBAAkB,CAE3C;IAED,8CAA8C;IAC9C,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IACD,yDAAyD;IACzD,IAAI,QAAQ,IAAI,aAAa,CAE5B;IACD,kFAAkF;IAClF,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IACD,iGAAiG;IACjG,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,0FAA0F;IAC1F,aAAa,IAAI,OAAO,CAEvB;IACD,mFAAmF;IACnF,cAAc,IAAI,OAAO,CAExB;IACD,0GAA0G;IAC1G,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAEvC;IAED,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,QAAO,IAAI,CAEzB;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAG/C;IAED,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAQ7C;IAED,kDAAkD;IAClD,iBAAiB,IAAI,IAAI,CAExB;IACD,qEAAqE;IACrE,wBAAwB,CACtB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EACtC,IAAI,EAAE,SAAS,GAAG,cAAc,GAC/B,IAAI,CAEN;IACD,sEAAsE;IACtE,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IACD,4FAA4F;IAC5F,sBAAsB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI,CAEzD;CACF"}

package/dist/form-control/form-control.js

@@ -0,0 +1,143 @@
+import { FormValue } from '@oddkin/core/controllers/form';
+import { OddkinElement, prop } from '@oddkin/core/element';
+import { computed, signal } from '@oddkin/core/reactive';
+import { ExternalDescriptions } from './description.js';
+/**
+ * Form participation every Oddkin form control shares (component-contracts.md §2.4): name,
+ * disabled (also by a disabled fieldset), help and error text, the form owner, validity and the
+ * constraint-validation methods, reset, state restore, and the `user-invalid` custom state.
+ * Subclasses describe their value in `_formOptions()`, call `super` in `connected` and `mounted`,
+ * and bind `_onBlur` on their inner control.
+ */
+export class OddkinFormControl extends OddkinElement.with({
+    name: prop.string({
+        reflect: true,
+        description: 'Name submitted with the form. Reflected: a form-associated element submits under its name attribute.',
+    }),
+    disabled: prop.boolean({ reflect: true, description: 'Prevents interaction and submission.' }),
+    description: prop.string({ default: '', description: 'Help text below the label.' }),
+    error: prop.string({
+        default: '',
+        description: 'Error message; marks the field invalid (custom validity) while set.',
+    }),
+}) {
+    static formAssociated = true;
+    // Created first: the readables below come from it. `_formOptions()` returns closures only, so
+    // the subclass's own fields are read after construction.
+    #form = this.#createForm();
+    /**
+     * @internal Disabled by its `disabled` attribute or an ancestor `<fieldset disabled>`: both reach
+     * `formDisabledCallback`, which also re-reads validity, since a disabled control is barred.
+     */
+    _formDisabled = this.#form.disabled;
+    /** @internal The user left the field or a submission was attempted. */
+    _touched = signal(false);
+    /** @internal The current value failed validation. */
+    _invalid = this.#form.invalid;
+    /**
+     * @internal The field shows its error: `error` is set, or the value is invalid after the user
+     * left the field or a validity check failed. One source for `aria-invalid` and the
+     * `user-invalid` custom state.
+     */
+    _userInvalid = computed(() => !!this.error || (this._touched.value && this._invalid.value));
+    #described = new ExternalDescriptions();
+    /**
+     * @internal Another element (a tooltip) describes this control; `null` removes its text. Works
+     * before the first render and keeps the texts across renders.
+     */
+    _describe(source, text) {
+        this.#described.set(source, text);
+    }
+    /** @internal The texts other elements gave, rendered hidden by the template. */
+    get _externalDescription() {
+        return this.#described.text.value;
+    }
+    /** @internal The ids for `aria-describedby`: description, error, and external descriptions. */
+    get _describedBy() {
+        return ([
+            this.description && 'description',
+            this.error && 'error',
+            this._externalDescription && 'external-description',
+        ]
+            .filter(Boolean)
+            .join(' ') || null);
+    }
+    #createForm() {
+        const options = this._formOptions();
+        return new FormValue({
+            ...options,
+            internals: () => this.internals,
+            error: () => this.error,
+            onReset: () => {
+                options.onReset?.();
+                this._touched.value = false;
+            },
+        });
+    }
+    /** @internal The subclass's value, inner control, reset, and restore (closures only). */
+    _formOptions() {
+        return { value: () => null };
+    }
+    /** The form this field belongs to, if any. */
+    get form() {
+        return this.internals.form;
+    }
+    /** The field's validity, as on a native form control. */
+    get validity() {
+        return this.internals.validity;
+    }
+    /** The message the browser would show for the field's invalid state, or empty. */
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** Whether the field takes part in constraint validation (false while disabled or read-only). */
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** Whether the field is valid; when not, fires `invalid` at it, as on native controls. */
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity()`, and an invalid field also shows its error to the user. */
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** As on native controls; the message is also shown, since it sets `error`. An empty string clears it. */
+    setCustomValidity(message) {
+        this.error = message;
+    }
+    /** @internal Template handler: the user left the control. */
+    _onBlur = () => {
+        this._touched.value = true;
+    };
+    connected(scope) {
+        // A failed form submission marks the field touched, so errors become visible.
+        scope.listen(this, 'invalid', () => (this._touched.value = true));
+    }
+    mounted(scope) {
+        // After the commit that wrote the inner control, so its validity is current.
+        scope.use(this.#form);
+        // Styling hook (`:state(user-invalid)`) derived from the same state as aria-invalid.
+        scope.effect(() => this.setState('user-invalid', this._userInvalid.value), {
+            phase: 'post',
+            name: 'user-invalid state',
+        });
+    }
+    /** Native callback: the owning form was reset. */
+    formResetCallback() {
+        this.#form.formResetCallback();
+    }
+    /** Native callback: restore after navigation or autofill restore. */
+    formStateRestoreCallback(state, mode) {
+        this.#form.formStateRestoreCallback(state, mode);
+    }
+    /** Native callback: an ancestor fieldset's disabled state changed. */
+    formDisabledCallback(disabled) {
+        this.#form.formDisabledCallback(disabled);
+    }
+    /** Native callback: the form owner changed (moved, `form` attribute, or the named form). */
+    formAssociatedCallback(form) {
+        this.#form.formAssociatedCallback(form);
+    }
+}
+//# sourceMappingURL=form-control.js.map

package/dist/form-control/form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../src/form-control/form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAiB,MAAM,uBAAuB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAKxD;;;;;;GAMG;AACH,MAAM,OAAO,iBAAkB,SAAQ,aAAa,CAAC,IAAI,CAAC;IACxD,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC;QAChB,OAAO,EAAE,IAAI;QACb,WAAW,EACT,sGAAsG;KACzG,CAAC;IACF,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,sCAAsC,EAAE,CAAC;IAC9F,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,4BAA4B,EAAE,CAAC;IACpF,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,qEAAqE;KACnF,CAAC;CACH,CAAC;IACA,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;IAE7B,8FAA8F;IAC9F,yDAAyD;IAChD,KAAK,GAAc,IAAI,CAAC,WAAW,EAAE,CAAC;IAE/C;;;OAGG;IACM,aAAa,GAAsB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAChE,uEAAuE;IAC9D,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,qDAAqD;IAC5C,QAAQ,GAAsB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IAC1D;;;;OAIG;IACM,YAAY,GAAsB,QAAQ,CACjD,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CACnE,CAAC;IAEO,UAAU,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAEjD;;;OAGG;IACH,SAAS,CAAC,MAAc,EAAE,IAAmB;QAC3C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,gFAAgF;IAChF,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IACpC,CAAC;IAED,+FAA+F;IAC/F,IAAI,YAAY;QACd,OAAO,CACL;YACE,IAAI,CAAC,WAAW,IAAI,aAAa;YACjC,IAAI,CAAC,KAAK,IAAI,OAAO;YACrB,IAAI,CAAC,oBAAoB,IAAI,sBAAsB;SACpD;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CACrB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACpC,OAAO,IAAI,SAAS,CAAC;YACnB,GAAG,OAAO;YACV,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS;YAC/B,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;YACvB,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;YAC9B,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED,yFAAyF;IAC/E,YAAY;QACpB,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,8CAA8C;IAC9C,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IACD,yDAAyD;IACzD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IACD,kFAAkF;IAClF,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IACD,iGAAiG;IACjG,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IACD,0FAA0F;IAC1F,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IACD,mFAAmF;IACnF,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IACD,0GAA0G;IAC1G,iBAAiB,CAAC,OAAe;QAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IACvB,CAAC;IAED,6DAA6D;IACpD,OAAO,GAAG,GAAS,EAAE;QAC5B,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;IAEiB,SAAS,CAAC,KAAY;QACvC,8EAA8E;QAC9E,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;IACpE,CAAC;IAEkB,OAAO,CAAC,KAAY;QACrC,6EAA6E;QAC7E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtB,qFAAqF;QACrF,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YACzE,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,oBAAoB;SAC3B,CAAC,CAAC;IACL,CAAC;IAED,kDAAkD;IAClD,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IACjC,CAAC;IACD,qEAAqE;IACrE,wBAAwB,CACtB,KAAsC,EACtC,IAAgC;QAEhC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IACD,sEAAsE;IACtE,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IACD,4FAA4F;IAC5F,sBAAsB,CAAC,IAA4B;QACjD,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;CACF"}

package/dist/form-control/radio-control.d.ts

@@ -0,0 +1,46 @@
+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.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 inputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Re-dispatched at the host when the user checks an option (native `change` is not composed). */
+export declare const changeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinRadioControl_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 required: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * One value from a set of options, drawn as native radios in one shadow tree
+ * (`odd-radio-group`, `odd-segmented-control`): the platform gives the set one Tab stop and
+ * arrow-key selection. Options come from `<option>` and `<optgroup>` children or from `options`
+ * (component-contracts.md §2.2). `value` is the checked option's value; the `value` attribute,
+ * else the last `<option selected>`, is the default, and without either nothing is checked.
+ * Subclasses render each option with `radioInput`, then `radioFlag`, and bind `_onFocusOut`
+ * around the radios.
+ */
+export declare class OddkinRadioControl extends OddkinRadioControl_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 OddkinRadioControl>;
+    /** @internal The options in use. */
+    readonly _options: Readable<readonly OptionRecord[]>;
+    protected _formOptions(): FormControlOptions;
+    /** @internal Template handler: the user checked an option. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the user committed a change. */
+    readonly _onChange: () => void;
+    /** @internal Template handler: focus left the set, not just moved between its radios. */
+    readonly _onFocusOut: (event: FocusEvent) => void;
+    protected connected(scope: Scope): void;
+    protected updated(changes: ReadonlyMap<string, unknown>): void;
+}
+//# sourceMappingURL=radio-control.d.ts.map

package/dist/form-control/radio-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../src/form-control/radio-control.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,mBAAmB,CAAC;AAE/E,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,iGAAiG;AACjG,eAAO,MAAM,UAAU,sDAMrB,CAAC;AACH,kGAAkG;AAClG,eAAO,MAAM,WAAW,sDAKtB,CAAC;;;;;;;AAEH;;;;;;;;GAQG;AACH,qBAAa,kBAAmB,SAAQ,uBAUtC;;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,KAAK;QAAc,MAAM;MAAgB;IACpE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,kBAAkB,CAAC,CAAC;IAYpE,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,YAAY,EAAE,CAAC,CAAwB;IAE5E,UAAmB,YAAY,IAAI,kBAAkB,CAiBpD;IAQD,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAEtC;IACF,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;IACF,yFAAyF;IACzF,QAAQ,CAAC,WAAW,UAAW,UAAU,KAAG,IAAI,CAG9C;IAEF,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAS/C;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAGtE;CACF"}

package/dist/form-control/radio-control.js

@@ -0,0 +1,106 @@
+import { event, prop } from '@oddkin/core/element';
+import { CollectionSource, readOptions } from '../collection/collection.js';
+import { OddkinFormControl } from './form-control.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export const inputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'value',
+    intent: 'user',
+});
+/** Re-dispatched at the host when the user checks an option (native `change` is not composed). */
+export const changeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * One value from a set of options, drawn as native radios in one shadow tree
+ * (`odd-radio-group`, `odd-segmented-control`): the platform gives the set one Tab stop and
+ * arrow-key selection. Options come from `<option>` and `<optgroup>` children or from `options`
+ * (component-contracts.md §2.2). `value` is the checked option's value; the `value` attribute,
+ * else the last `<option selected>`, is the default, and without either nothing is checked.
+ * Subclasses render each option with `radioInput`, then `radioFlag`, and bind `_onFocusOut`
+ * around the radios.
+ */
+export class OddkinRadioControl extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the group.' }),
+    options: prop.object({
+        description: 'The choices; when set, `<option>` children are ignored.',
+    }),
+    value: prop.string({
+        default: '',
+        description: 'Value of the checked option; the `value` attribute sets the default.',
+    }),
+    required: prop.boolean({ reflect: true, description: 'An option must be checked to submit.' }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: inputEvent, change: changeEvent };
+    #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 {
+            // As a native radio group, nothing is submitted while no option is checked.
+            value: () => this._options.value.some((option) => option.value === this.value) ? this.value : null,
+            // Every radio reports the set's validity; a disabled one is barred, so ask an enabled one:
+            // the first option's, else the hidden flag after them (`radioFlag`).
+            control: () => this.shadowRoot?.querySelector('input:enabled'),
+            watch: () => [this.required, this._options.value],
+            onReset: () => {
+                this.#chosen = false;
+                this.#applyDeclared();
+            },
+            onRestore: (state) => {
+                if (typeof state === 'string')
+                    this.value = state;
+            },
+        };
+    }
+    #applyDeclared() {
+        if (this.#chosen)
+            return;
+        this.#applied = this.value =
+            this.getAttribute('value') ?? this.#source.selected.peek().at(-1) ?? '';
+    }
+    /** @internal Template handler: the user checked an option. */
+    _onInput = (event) => {
+        this.value = event.target.value;
+    };
+    /** @internal Template handler: the user committed a change. */
+    _onChange = () => {
+        this.emit(changeEvent);
+    };
+    /** @internal Template handler: focus left the set, not just moved between its radios. */
+    _onFocusOut = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+            this._onBlur();
+    };
+    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;
+            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=radio-control.js.map

package/dist/form-control/radio-control.js.map

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