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

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

@@ -0,0 +1,20 @@
+import type { OptionRecord } from '../collection/collection.js';
+import type { OddkinRadioControl } from './radio-control.js';
+/**
+ * One option's native radio. Every radio has the same name, so the platform groups them: one Tab
+ * stop, arrow keys move the check. Checkedness follows `value` (live: the user may have checked
+ * another radio since the last render). `describedBy` names the option's description; `title`
+ * carries it where it is not shown.
+ */
+export declare const radioInput: (control: OddkinRadioControl, option: OptionRecord, className: string, { describedBy, title, }?: {
+    describedBy?: string | null | undefined;
+    title?: string | null | undefined;
+}) => import("@oddkin/core/template").TemplateResult;
+/**
+ * A hidden, never-checked radio in the same group, rendered after the options: the validity
+ * control while no option is enabled (none given, or all disabled), so a required set still
+ * reports the browser's flag and message for an unchosen set. Hidden radios take no Tab stop and
+ * no arrow-key step.
+ */
+export declare const radioFlag: (control: OddkinRadioControl) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=radio-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-input.d.ts","sourceRoot":"","sources":["../../src/form-control/radio-input.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,UAAU,YACZ,kBAAkB,UACnB,YAAY,aACT,MAAM,4BAId;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,mDAe9E,CAAC;AAEN;;;;;GAKG;AACH,eAAO,MAAM,SAAS,YAAa,kBAAkB,mDACyC,CAAC"}

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

@@ -0,0 +1,30 @@
+import { live } from '@oddkin/core/helpers/live';
+import { html } from '@oddkin/core/template';
+/**
+ * One option's native radio. Every radio has the same name, so the platform groups them: one Tab
+ * stop, arrow keys move the check. Checkedness follows `value` (live: the user may have checked
+ * another radio since the last render). `describedBy` names the option's description; `title`
+ * carries it where it is not shown.
+ */
+export const radioInput = (control, option, className, { describedBy, title, } = {}) => html `<input
+    class=${className}
+    type="radio"
+    name="choice"
+    .value=${option.value}
+    .checked=${live(option.value === control.value)}
+    ?required=${control.required}
+    ?disabled=${option.disabled || control.disabled || control._formDisabled.value}
+    title=${title ?? null}
+    aria-describedby=${describedBy ?? null}
+    aria-invalid=${control._userInvalid.value ? 'true' : null}
+    @input=${control._onInput}
+    @change=${control._onChange}
+  />`;
+/**
+ * A hidden, never-checked radio in the same group, rendered after the options: the validity
+ * control while no option is enabled (none given, or all disabled), so a required set still
+ * reports the browser's flag and message for an unchosen set. Hidden radios take no Tab stop and
+ * no arrow-key step.
+ */
+export const radioFlag = (control) => html `<input class="flag" type="radio" name="choice" hidden ?required=${control.required} />`;
+//# sourceMappingURL=radio-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-input.js","sourceRoot":"","sources":["../../src/form-control/radio-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,OAA2B,EAC3B,MAAoB,EACpB,SAAiB,EACjB,EACE,WAAW,EACX,KAAK,GACN,GAAmF,EAAE,EACtF,EAAE,CACF,IAAI,CAAA;YACM,SAAS;;;aAGR,MAAM,CAAC,KAAK;eACV,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC;gBACnC,OAAO,CAAC,QAAQ;gBAChB,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,aAAa,CAAC,KAAK;YACtE,KAAK,IAAI,IAAI;uBACF,WAAW,IAAI,IAAI;mBACvB,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;aAChD,OAAO,CAAC,QAAQ;cACf,OAAO,CAAC,SAAS;KAC1B,CAAC;AAEN;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAA2B,EAAE,EAAE,CACvD,IAAI,CAAA,mEAAmE,OAAO,CAAC,QAAQ,KAAK,CAAC"}

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

@@ -0,0 +1,65 @@
+/**
+ * Numbers on a step grid, as HTML number and range inputs count them, and the input that moves
+ * them: the valid floating-point number syntax; the `stepUp()`/`stepDown()` algorithm, the same in
+ * every engine (the engines differ at the edges: stepping down from an empty field, a maximum off
+ * the grid); a range input's snap to the nearest value; the APG keys of sliders and spinbuttons;
+ * and a pointer drag along an area. Used by odd-input's number field and odd-slider.
+ */
+import type { Scope } from '@oddkin/core/scope';
+/** The number a valid floating-point number string holds; `undefined` for anything else. */
+export declare function parseNumber(text: string | null | undefined): number | undefined;
+/** A field's bounds and step grid; no `step` is `step="any"`. */
+export interface NumberRange {
+    readonly min: number | undefined;
+    readonly max: number | undefined;
+    readonly step: number | undefined;
+    /** Where the grid starts: `min`, else the default value, else 0. */
+    readonly base: number;
+}
+/** The lowest and highest values the grid allows within the bounds. */
+export declare function rangeEnds(range: NumberRange): {
+    low: number | undefined;
+    high: number | undefined;
+};
+/** The grid value nearest to `value` within the bounds, as a range input sanitizes its value. */
+export declare function snapNumber(value: number, range: NumberRange & {
+    readonly step: number;
+}): number;
+/**
+ * `value` (`undefined` when empty) moved `n` steps (negative: down), as `stepUp(n)` does: a value
+ * off the grid moves to the nearest grid value in that direction, the result is kept within the
+ * bounds, and a step that would move the other way leaves the value. An empty field counts from
+ * 0 and always takes the result. With `step="any"` it moves by `n` (as the engines' arrow keys).
+ * Bounds that cross leave the value.
+ */
+export declare function stepNumber(value: number | undefined, n: number, range: NumberRange): number | undefined;
+/** The keys of a range: how many steps Page Up and Page Down move, and the horizontal arrows. */
+export interface RangeKeys {
+    readonly page: number;
+    /** Right and Left step too, swapped in right-to-left text (`rtl`). */
+    readonly horizontal?: boolean;
+    readonly rtl?: boolean;
+}
+/**
+ * The value a key moves `value` to, as the WAI-ARIA slider and spinbutton patterns key them: Up
+ * and Down one step, Page Up and Page Down `page` steps, Home and End the lowest and highest
+ * values on the grid, Right and Left one step when `horizontal`. `undefined` when the key does not
+ * move a range value (another key, or Home and End without that bound).
+ */
+export declare function keyValue(key: string, value: number | undefined, range: NumberRange, keys: RangeKeys): number | undefined;
+/** What a pointer drag reports. */
+export interface PointerDrag {
+    /** Pixels at each edge that the thumb's centre stops short of (half the thumb). */
+    readonly inset: number;
+    /** The pointer's position in the area, 0 to 1: `x` from the start edge (mirrored right to left), `y` from the top. */
+    readonly move: (x: number, y: number) => void;
+    /** The pointer was released or cancelled. */
+    readonly end?: () => void;
+}
+/**
+ * Follows the pointer that `event` pressed on `area` until it is released or cancelled: reports
+ * its position for the press and every move, capturing the pointer and listening on the document
+ * in a child of `scope`, so the drag continues outside the area and ends with the scope.
+ */
+export declare function pointerDrag(scope: Scope, area: HTMLElement, event: PointerEvent, drag: PointerDrag): void;
+//# sourceMappingURL=range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/form-control/range.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAKhD,4FAA4F;AAC5F,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAI/E;AAED,iEAAiE;AACjE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,oEAAoE;IACpE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAiBD,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG;IAC7C,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAQA;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAQhG;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,WAAW,GACjB,MAAM,GAAG,SAAS,CAgBpB;AAED,iGAAiG;AACjG,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,GACd,MAAM,GAAG,SAAS,CAapB;AAED,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sHAAsH;IACtH,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,WAAW,GAChB,IAAI,CA8BN"}

package/dist/form-control/range.js

@@ -0,0 +1,123 @@
+// HTML's valid floating-point number: no leading `+`, no trailing `.`, no spaces.
+const FLOAT = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:[eE][-+]?\d+)?$/;
+/** The number a valid floating-point number string holds; `undefined` for anything else. */
+export function parseNumber(text) {
+    if (!text || !FLOAT.test(text))
+        return undefined;
+    const number = Number(text);
+    return Number.isFinite(number) ? number : undefined;
+}
+// Rounds away binary noise (0.1 + 0.2) at the precision of the base and the step.
+const places = (value) => {
+    const [mantissa = '', exponent = '0'] = String(value).split('e');
+    return Math.max(0, (mantissa.split('.')[1] ?? '').length - Number(exponent));
+};
+const onGrid = (range, step, k) => Number((range.base + k * step).toFixed(Math.min(100, Math.max(places(range.base), places(step)))));
+// The grid indexes of the lowest and highest values within the bounds (infinite when unbounded).
+const endIndexes = (range, step) => [
+    range.min === undefined ? -Infinity : Math.ceil((range.min - range.base) / step - 1e-9),
+    range.max === undefined ? Infinity : Math.floor((range.max - range.base) / step + 1e-9),
+];
+/** The lowest and highest values the grid allows within the bounds. */
+export function rangeEnds(range) {
+    const { min, max, step } = range;
+    if (step === undefined)
+        return { low: min, high: max };
+    const [low, high] = endIndexes(range, step);
+    return {
+        low: min === undefined ? undefined : onGrid(range, step, low),
+        high: max === undefined ? undefined : onGrid(range, step, high),
+    };
+}
+/** The grid value nearest to `value` within the bounds, as a range input sanitizes its value. */
+export function snapNumber(value, range) {
+    const { step } = range;
+    const [low, high] = endIndexes(range, step);
+    return onGrid(range, step, Math.min(Math.max(Math.round((value - range.base) / step), low), high));
+}
+/**
+ * `value` (`undefined` when empty) moved `n` steps (negative: down), as `stepUp(n)` does: a value
+ * off the grid moves to the nearest grid value in that direction, the result is kept within the
+ * bounds, and a step that would move the other way leaves the value. An empty field counts from
+ * 0 and always takes the result. With `step="any"` it moves by `n` (as the engines' arrow keys).
+ * Bounds that cross leave the value.
+ */
+export function stepNumber(value, n, range) {
+    const { min, max, step } = range;
+    if (min !== undefined && max !== undefined && max < min)
+        return value;
+    const from = value ?? 0;
+    let next;
+    if (step === undefined) {
+        next = Math.min(Math.max(from + n, min ?? -Infinity), max ?? Infinity);
+    }
+    else {
+        const k = (from - range.base) / step;
+        const aligned = Math.abs(k - Math.round(k)) < 1e-9;
+        const target = aligned ? Math.round(k) + n : n > 0 ? Math.ceil(k) : Math.floor(k);
+        const [low, high] = endIndexes(range, step);
+        next = onGrid(range, step, Math.min(Math.max(target, low), high));
+    }
+    if (value !== undefined && (n > 0 ? next < value : next > value))
+        return value;
+    return next;
+}
+/**
+ * The value a key moves `value` to, as the WAI-ARIA slider and spinbutton patterns key them: Up
+ * and Down one step, Page Up and Page Down `page` steps, Home and End the lowest and highest
+ * values on the grid, Right and Left one step when `horizontal`. `undefined` when the key does not
+ * move a range value (another key, or Home and End without that bound).
+ */
+export function keyValue(key, value, range, keys) {
+    const forward = keys.rtl ? -1 : 1;
+    const steps = {
+        ArrowUp: 1,
+        ArrowDown: -1,
+        PageUp: keys.page,
+        PageDown: -keys.page,
+        ...(keys.horizontal ? { ArrowRight: forward, ArrowLeft: -forward } : {}),
+    };
+    if (key in steps)
+        return stepNumber(value, steps[key], range);
+    if (key === 'Home')
+        return rangeEnds(range).low;
+    if (key === 'End')
+        return rangeEnds(range).high;
+    return undefined;
+}
+/**
+ * Follows the pointer that `event` pressed on `area` until it is released or cancelled: reports
+ * its position for the press and every move, capturing the pointer and listening on the document
+ * in a child of `scope`, so the drag continues outside the area and ends with the scope.
+ */
+export function pointerDrag(scope, area, event, drag) {
+    const at = (e) => {
+        const rect = area.getBoundingClientRect();
+        const fraction = (offset, size) => {
+            const usable = size - 2 * drag.inset;
+            return usable > 0 ? Math.min(Math.max((offset - drag.inset) / usable, 0), 1) : 0;
+        };
+        const x = fraction(e.clientX - rect.left, rect.width);
+        drag.move(getComputedStyle(area).direction === 'rtl' ? 1 - x : x, fraction(e.clientY - rect.top, rect.height));
+    };
+    at(event);
+    try {
+        area.setPointerCapture(event.pointerId);
+    }
+    catch {
+        // Synthetic or already released pointers cannot be captured; the document still sees them.
+    }
+    const child = scope.child({ name: 'pointer drag' });
+    const ours = (e) => e.pointerId === event.pointerId;
+    const doc = area.ownerDocument;
+    child.listen(doc, 'pointermove', (e) => ours(e) && at(e));
+    const end = (e) => {
+        if (!ours(e))
+            return;
+        child.dispose();
+        drag.end?.();
+    };
+    child.listen(doc, 'pointerup', end);
+    child.listen(doc, 'pointercancel', end);
+}
+//# sourceMappingURL=range.js.map

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

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

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

@@ -0,0 +1,60 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import { OddkinFormControl, type FormControlOptions } from './form-control.js';
+import { TextHints } from './text-hints.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 commits a change (native `change` is not composed). */
+export declare const changeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinTextControl_base: import("@oddkin/core/element").WithProps<typeof OddkinFormControl, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly defaultValue: import("@oddkin/core/element").PropDefinition<string>;
+    readonly minLength: import("@oddkin/core/element").PropDefinition<number | undefined>;
+    readonly maxLength: import("@oddkin/core/element").PropDefinition<number | undefined>;
+    readonly placeholder: import("@oddkin/core/element").PropDefinition<string>;
+    readonly autocomplete: import("@oddkin/core/element").PropDefinition<string>;
+    readonly required: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly readonly: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * A form control over a native text field (`odd-input`, `odd-textarea`): a visible label,
+ * `value` as native (the attribute is the default), placeholder, autofill hint, length limits,
+ * `required`, and `readonly`. Subclasses render the native field with class `control` and bind
+ * `_currentValue`, `_onInput`, `_onChange`, `_onBlur`, and the `_hints` the host was given on it.
+ */
+export declare class OddkinTextControl extends OddkinTextControl_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 OddkinTextControl>;
+    /** @internal The host's text-entry hints (`inputmode`, `spellcheck`, …) for the native field. */
+    readonly _hints: TextHints;
+    /**
+     * @internal The text in the native field, for the template's live binding: what the user typed,
+     * even when the value cannot hold it (a number field's letters), else the value.
+     */
+    readonly _currentValue: Readable<string>;
+    constructor();
+    /** The current value. Setting it (or typing) detaches it from `defaultValue`. */
+    get value(): string;
+    set value(value: string);
+    /**
+     * @internal The value a text stands for, as a native input's value sanitization: the text
+     * itself here. `typed` text came from the user and may be read more loosely.
+     */
+    protected _sanitize(text: string, _typed?: boolean): string;
+    protected connected(scope: Scope): void;
+    /** @internal Properties that change validity without a change of value. */
+    protected _constraints(): unknown[];
+    protected _formOptions(): FormControlOptions;
+    /** @internal Template handler: the user typed. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the user committed a change. */
+    readonly _onChange: () => void;
+}
+export {};
+//# sourceMappingURL=text-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../src/form-control/text-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,iGAAiG;AACjG,eAAO,MAAM,UAAU,sDAMrB,CAAC;AACH,kGAAkG;AAClG,eAAO,MAAM,WAAW,sDAKtB,CAAC;;;;;;;;;;;AAEH;;;;;GAKG;AACH,qBAAa,iBAAkB,SAAQ,sBAmBrC;;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,KAAK;QAAc,MAAM;MAAgB;IACpE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAKnE,iGAAiG;IACjG,QAAQ,CAAC,MAAM,YAAuB;IAEtC;;;OAGG;IACH,QAAQ,CAAC,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,CAEtC;IAEF,cAQC;IAED,iFAAiF;IACjF,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,MAAM,CAExD;IAED,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAG/C;IAED,2EAA2E;IAC3E,SAAS,CAAC,YAAY,IAAI,OAAO,EAAE,CAElC;IAED,UAAmB,YAAY,IAAI,kBAAkB,CAYpD;IAED,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAEtC;IACF,+DAA+D;IAC/D,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;CACH"}

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

@@ -0,0 +1,112 @@
+import { event, prop } from '@oddkin/core/element';
+import { computed, signal } from '@oddkin/core/reactive';
+import { OddkinFormControl } from './form-control.js';
+import { TextHints } from './text-hints.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 commits a change (native `change` is not composed). */
+export const changeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A form control over a native text field (`odd-input`, `odd-textarea`): a visible label,
+ * `value` as native (the attribute is the default), placeholder, autofill hint, length limits,
+ * `required`, and `readonly`. Subclasses render the native field with class `control` and bind
+ * `_currentValue`, `_onInput`, `_onChange`, `_onBlur`, and the `_hints` the host was given on it.
+ */
+export class OddkinTextControl extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the control.' }),
+    defaultValue: prop.string({
+        default: '',
+        attribute: 'value',
+        description: 'Initial value; the `value` attribute, as on native inputs.',
+    }),
+    minLength: prop.number({ attribute: 'minlength', description: 'Fewest characters.' }),
+    maxLength: prop.number({
+        attribute: 'maxlength',
+        description: 'Most characters; typing stops there.',
+    }),
+    placeholder: prop.string({
+        default: '',
+        description: 'Placeholder; never a substitute for a label.',
+    }),
+    autocomplete: prop.string({ default: '', description: 'Autofill hint for the native field.' }),
+    required: prop.boolean({ reflect: true, description: 'A value is required to submit.' }),
+    readonly: prop.boolean({ reflect: true, description: 'Prevents editing; still submitted.' }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: inputEvent, change: changeEvent };
+    // undefined until the value is set or typed ("dirty"), then independent of `defaultValue`.
+    #value = signal(undefined);
+    /** @internal The host's text-entry hints (`inputmode`, `spellcheck`, …) for the native field. */
+    _hints = new TextHints(this);
+    /**
+     * @internal The text in the native field, for the template's live binding: what the user typed,
+     * even when the value cannot hold it (a number field's letters), else the value.
+     */
+    _currentValue = computed(() => this.#value.value ?? this._sanitize(this.defaultValue));
+    constructor() {
+        super();
+        // A value assigned before the element was defined becomes the dirty value.
+        if (Object.hasOwn(this, 'value')) {
+            const early = this.value;
+            delete this.value;
+            this.value = String(early ?? '');
+        }
+    }
+    /** The current value. Setting it (or typing) detaches it from `defaultValue`. */
+    get value() {
+        const typed = this.#value.value;
+        return typed === undefined ? this._sanitize(this.defaultValue) : this._sanitize(typed, true);
+    }
+    set value(value) {
+        this.#value.value = this._sanitize(String(value ?? ''));
+    }
+    /**
+     * @internal The value a text stands for, as a native input's value sanitization: the text
+     * itself here. `typed` text came from the user and may be read more loosely.
+     */
+    _sanitize(text, _typed = false) {
+        return text;
+    }
+    connected(scope) {
+        super.connected(scope);
+        scope.use(this._hints);
+    }
+    /** @internal Properties that change validity without a change of value. */
+    _constraints() {
+        return [this.required, this.readonly];
+    }
+    _formOptions() {
+        return {
+            value: () => this.value,
+            control: () => this.shadowRoot?.querySelector('.control'),
+            watch: () => this._constraints(),
+            onReset: () => {
+                this.#value.value = undefined;
+            },
+            onRestore: (state) => {
+                if (typeof state === 'string')
+                    this.value = state;
+            },
+        };
+    }
+    /** @internal Template handler: the user typed. */
+    _onInput = (event) => {
+        this.#value.value = event.target.value;
+    };
+    /** @internal Template handler: the user committed a change. */
+    _onChange = () => {
+        this.emit(changeEvent);
+    };
+}
+//# sourceMappingURL=text-control.js.map

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

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

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

@@ -0,0 +1,18 @@
+import type { Controller, Scope } from '@oddkin/core/scope';
+declare const HINTS: readonly ['inputmode', 'enterkeyhint', 'autocapitalize', 'autocorrect', 'spellcheck'];
+/** A global attribute that tunes text entry (virtual keyboard, capitals, correction, spelling). */
+export type TextHint = (typeof HINTS)[number];
+/**
+ * The text-entry hints written on a host as on any HTML element (`inputmode`, `enterkeyhint`,
+ * `autocapitalize`, `autocorrect`, `spellcheck`), followed while connected, for the element's
+ * inner text field: `get(name, fallback)` gives the host's value, else the element's default.
+ * Connect it in `connected(scope)`, so hints present at upgrade are in the first render.
+ */
+export declare class TextHints implements Controller {
+    #private;
+    constructor(host: Element);
+    get(name: TextHint, fallback?: string | null): string | null;
+    connect(scope: Scope): void;
+}
+export {};
+//# sourceMappingURL=text-hints.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-hints.d.ts","sourceRoot":"","sources":["../../src/form-control/text-hints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE5D,QAAA,MAAM,KAAK,YAAI,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,YAAY,CAAU,CAAC;AAEpG,mGAAmG;AACnG,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C;;;;;GAKG;AACH,qBAAa,SAAU,YAAW,UAAU;;IAI1C,YAAY,IAAI,EAAE,OAAO,EAExB;IAED,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAE,MAAM,GAAG,IAAW,GAAG,MAAM,GAAG,IAAI,CAEjE;IAED,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAa1B;CACF"}

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

@@ -0,0 +1,34 @@
+import { signal } from '@oddkin/core/reactive';
+const HINTS = ['inputmode', 'enterkeyhint', 'autocapitalize', 'autocorrect', 'spellcheck'];
+/**
+ * The text-entry hints written on a host as on any HTML element (`inputmode`, `enterkeyhint`,
+ * `autocapitalize`, `autocorrect`, `spellcheck`), followed while connected, for the element's
+ * inner text field: `get(name, fallback)` gives the host's value, else the element's default.
+ * Connect it in `connected(scope)`, so hints present at upgrade are in the first render.
+ */
+export class TextHints {
+    #host;
+    #values = signal({});
+    constructor(host) {
+        this.#host = host;
+    }
+    get(name, fallback = null) {
+        return this.#values.value[name] ?? fallback;
+    }
+    connect(scope) {
+        const read = () => {
+            const values = {};
+            for (const name of HINTS) {
+                const value = this.#host.getAttribute(name);
+                if (value !== null)
+                    values[name] = value;
+            }
+            this.#values.value = values;
+        };
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(this.#host, { attributes: true, attributeFilter: [...HINTS] });
+        scope.add(() => observer.disconnect(), 'text hints');
+    }
+}
+//# sourceMappingURL=text-hints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-hints.js","sourceRoot":"","sources":["../../src/form-control/text-hints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,YAAY,CAAU,CAAC;AAKpG;;;;;GAKG;AACH,MAAM,OAAO,SAAS;IACX,KAAK,CAAU;IACf,OAAO,GAAG,MAAM,CAA8C,EAAE,CAAC,CAAC;IAE3E,YAAY,IAAa;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,GAAG,CAAC,IAAc,EAAE,QAAQ,GAAkB,IAAI;QAChD,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC;IAC9C,CAAC;IAED,OAAO,CAAC,KAAY;QAClB,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,MAAM,MAAM,GAAsC,EAAE,CAAC;YACrD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC5C,IAAI,KAAK,KAAK,IAAI;oBAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;YAC3C,CAAC;YACD,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC;QAC9B,CAAC,CAAC;QACF,IAAI,EAAE,CAAC;QACP,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;QAChF,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,YAAY,CAAC,CAAC;IACvD,CAAC;CACF"}

package/dist/frameworks/react.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Opt-in React 19 JSX typings for every `odd-*` element whose package types are loaded:
+ * `import type {} from '@oddkin/components/frameworks/react'`. Types only; nothing runs. Properties
+ * come from each element class (`ElementProperties`); `on<event>` props from its `static events`
+ * (React 19 adds a lowercase `on<name>` prop on a custom element as a listener for `<name>`).
+ * React's own `onInput` and `onChange` stay available. React sets a property only once the
+ * element is defined.
+ */
+import type { ElementEventMap, ElementProperties } from '@oddkin/core/element';
+import type { HTMLAttributes, RefAttributes } from 'react';
+export type OddkinReactProps<E extends HTMLElement> = Omit<HTMLAttributes<E>, keyof ElementProperties<E>> & RefAttributes<E> & ElementProperties<E> & {
+    [K in keyof ElementEventMap<E> & string as `on${K}`]?: (event: ElementEventMap<E>[K]) => void;
+};
+type OddkinReactElements = {
+    [T in keyof HTMLElementTagNameMap as T extends `odd-${string}` ? T : never]: OddkinReactProps<HTMLElementTagNameMap[T]>;
+};
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends OddkinReactElements {
+        }
+    }
+}
+export {};
+//# sourceMappingURL=react.d.ts.map

package/dist/frameworks/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/frameworks/react.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CACxD,cAAc,CAAC,CAAC,CAAC,EACjB,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAC3B,GACC,aAAa,CAAC,CAAC,CAAC,GAChB,iBAAiB,CAAC,CAAC,CAAC,GAAG;KACpB,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI;CAC9F,CAAC;AAEJ,KAAK,mBAAmB,GAAG;KACxB,CAAC,IAAI,MAAM,qBAAqB,IAAI,CAAC,SAAS,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,GAAG,gBAAgB,CAC3F,qBAAqB,CAAC,CAAC,CAAC,CACzB;CACF,CAAC;AAEF,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAkB,SAAQ,mBAAmB;SAAG;KAC3D;CACF"}

package/dist/frameworks/react.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=react.js.map

package/dist/frameworks/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/frameworks/react.ts"],"names":[],"mappings":""}

package/dist/frameworks/svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Opt-in Svelte 5 markup typings (checked by svelte-check) for every `odd-*` element whose package
+ * types are loaded: `import type {} from '@oddkin/components/frameworks/svelte'`. Types only;
+ * nothing runs. Properties come from each element class (`ElementProperties`); events from its
+ * `static events`, as `on<event>` handler attributes. Svelte 5 accepts `bind:value` only on native
+ * controls: bind `value` and handle `oninput` on `odd-input`.
+ */
+import type { ElementEventMap, ElementProperties } from '@oddkin/core/element';
+import type { HTMLAttributes } from 'svelte/elements';
+export type OddkinSvelteAttributes<E extends HTMLElement> = Omit<HTMLAttributes<E>, keyof ElementProperties<E> | `on${keyof ElementEventMap<E> & string}`> & ElementProperties<E> & {
+    [K in keyof ElementEventMap<E> & string as `on${K}`]?: (event: ElementEventMap<E>[K] & {
+        currentTarget: E;
+    }) => void;
+};
+type OddkinSvelteElements = {
+    [T in keyof HTMLElementTagNameMap as T extends `odd-${string}` ? T : never]: OddkinSvelteAttributes<HTMLElementTagNameMap[T]>;
+};
+declare module 'svelte/elements' {
+    interface SvelteHTMLElements extends OddkinSvelteElements {
+    }
+}
+export {};
+//# sourceMappingURL=svelte.d.ts.map

package/dist/frameworks/svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.d.ts","sourceRoot":"","sources":["../../src/frameworks/svelte.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC9D,cAAc,CAAC,CAAC,CAAC,EACjB,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,CACtE,GACC,iBAAiB,CAAC,CAAC,CAAC,GAAG;KACpB,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CACrD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,aAAa,EAAE,CAAC,CAAA;KAAE,KAChD,IAAI;CACV,CAAC;AAEJ,KAAK,oBAAoB,GAAG;KAExB,CAAC,IAAI,MAAM,qBAAqB,IAAI,CAAC,SAAS,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,GACxE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;CACpD,CAAC;AAEF,OAAO,QAAQ,iBAAiB,CAAC;IAC/B,UAAU,kBAAmB,SAAQ,oBAAoB;KAAG;CAC7D"}

package/dist/frameworks/svelte.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=svelte.js.map

package/dist/frameworks/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.js","sourceRoot":"","sources":["../../src/frameworks/svelte.ts"],"names":[],"mappings":""}

package/dist/frameworks/vue.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Opt-in Vue 3 template typings (checked by vue-tsc) for every `odd-*` element whose package
+ * types are loaded: `import type {} from '@oddkin/components/frameworks/vue'`. Types only; nothing
+ * runs. Properties come from each element class (`ElementProperties`); events from its
+ * `static events`, as `@<event>` listeners and `on<Event>` props. Bind object values with `.prop`
+ * (`:items.prop`) when the element may render before its definition loads; `v-model` binds
+ * `value` and `input`.
+ */
+import type { ElementEventMap, ElementProperties } from '@oddkin/core/element';
+import type { AllowedComponentProps, HTMLAttributes, VNodeProps } from 'vue';
+type Camel<S extends string> = S extends `${infer H}-${infer T}` ? `${H}${Capitalize<Camel<T>>}` : S;
+type Listeners<E> = {
+    [K in keyof ElementEventMap<E> & string as `on${Capitalize<Camel<K>>}`]?: (event: ElementEventMap<E>[K]) => void;
+};
+type Model<E> = E extends {
+    value: infer V;
+} ? {
+    modelValue?: V;
+} : {};
+/** A component-like constructor for `GlobalComponents`, as Vue's guide types custom elements. */
+export type OddkinVueElement<E extends HTMLElement> = new () => E & {
+    $props: Omit<HTMLAttributes, keyof ElementProperties<E>> & ElementProperties<E> & Listeners<E> & Model<E> & VNodeProps & AllowedComponentProps;
+};
+type OddkinVueElements = {
+    [T in keyof HTMLElementTagNameMap as T extends `odd-${string}` ? T : never]: OddkinVueElement<HTMLElementTagNameMap[T]>;
+};
+declare module 'vue' {
+    interface GlobalComponents extends OddkinVueElements {
+    }
+}
+export {};
+//# sourceMappingURL=vue.d.ts.map

package/dist/frameworks/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAE7E,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GAC5D,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GAC7B,CAAC,CAAC;AAGN,KAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CACxE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KACzB,IAAI;CACV,CAAC;AAGF,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,CAAA;CAAE,GAAG,EAAE,CAAC;AAEvE,iGAAiG;AACjG,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,UAAU,CAAC,GAAG;IAClE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtD,iBAAiB,CAAC,CAAC,CAAC,GACpB,SAAS,CAAC,CAAC,CAAC,GACZ,KAAK,CAAC,CAAC,CAAC,GACR,UAAU,GACV,qBAAqB,CAAC;CACzB,CAAC;AAEF,KAAK,iBAAiB,GAAG;KACtB,CAAC,IAAI,MAAM,qBAAqB,IAAI,CAAC,SAAS,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,GAAG,gBAAgB,CAC3F,qBAAqB,CAAC,CAAC,CAAC,CACzB;CACF,CAAC;AAEF,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,gBAAiB,SAAQ,iBAAiB;KAAG;CACxD"}