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

package/dist/one-time-code/one-time-code.js

@@ -0,0 +1,101 @@
+import { prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { computed } from '@oddkin/core/reactive';
+import { OddkinTextControl } from '../form-control/text-control.js';
+export { changeEvent, inputEvent } from '../form-control/text-control.js';
+export const ONE_TIME_CODE_STRINGS = {
+    hint: 'You can paste the entire code.',
+    pending: 'Verifying code…',
+    complete: 'Code accepted.',
+};
+// Keys that would move the caret off the end: entry stays one predictable run of digits.
+const CARET_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+/**
+ * A one-time code (a verification code sent by text message or email) entered into `maxlength`
+ * cells (default six). It is one native input with `autocomplete="one-time-code"` and a numeric
+ * keyboard (the global `inputmode` attribute, `numeric` unless the host sets it) behind the drawn
+ * cells, so the platform's autofill, paste, and form value
+ * work as on any field: digits only, typed or pasted, the caret always after the last digit.
+ * `status` reports the verification the page runs: `pending` keeps the code read-only with a
+ * busy line, `complete` confirms it; a failure is `error`.
+ *
+ * @csspart field - Wrapper of label, description, cells, status, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The native input over the cells.
+ * @csspart cell - One digit's cell.
+ * @csspart status - The line under the cells: `strings.hint`, or the `pending` or `complete` text with its glyph.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The code shows its error: `error` is set, or the code is missing or too short after focus left it or a validity check failed.
+ * @a11y One text input named by `label`, described by the description, the status line, and the error; the cells are drawn and hidden from assistive technology, so the code is read as one value. The status line is a `role="status"` region, so `pending` and `complete` are announced.
+ * @keyboard Typing enters digits and moves to the next cell; Backspace removes the last digit; paste enters the whole code. The arrow, Home, and End keys keep the caret after the last digit, and a click puts it there. Tab selects the code, as in any field, so typing then replaces it.
+ * @previewRole oneTimeCode
+ * @useFor A short code the user copies from a message to confirm a sign-in, an address, or a payment.
+ * @notFor Passwords and PINs the user chooses (use odd-input type="password"); long reference numbers (use odd-input).
+ * @limitation Digits only. A digit in the middle cannot be selected alone: Backspace back to it.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinOneTimeCode extends OddkinTextControl.with({
+    status: prop.enum(['idle', 'pending', 'complete'], {
+        default: 'idle',
+        reflect: true,
+        description: 'The verification the page runs: `pending` makes the code read-only and shows `strings.pending`; `complete` shows `strings.complete`.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides: `hint` (under the cells while idle), `pending`, `complete`.',
+    }),
+}) {
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(ONE_TIME_CODE_STRINGS, this.strings));
+    /** @internal How many cells: `maxlength`, default six. */
+    get _cells() {
+        return Math.max(1, Math.floor(this.maxLength ?? 6) || 6);
+    }
+    /** @internal The status line's text. */
+    get _statusText() {
+        const s = this._strings.value;
+        return this.status === 'idle' ? s.hint : s[this.status];
+    }
+    _constraints() {
+        return [...super._constraints(), this.status, this.maxLength, this.minLength];
+    }
+    // Typed text: its digits (full-width ones from an input method too), at most one per cell.
+    _sanitize(text, typed = false) {
+        return typed ? text.normalize('NFKC').replace(/\D/g, '').slice(0, this._cells) : text;
+    }
+    /**
+     * @internal Template handler (`input`, `compositionend`): the field keeps only its digits, then
+     * the shared handler. Text an input method is composing stays until the composition ends.
+     */
+    _onCodeInput = (event) => {
+        const input = event.target;
+        if (!event.isComposing) {
+            const digits = this._sanitize(input.value, true);
+            if (digits !== input.value)
+                input.value = digits;
+        }
+        this._onInput(event);
+    };
+    /** @internal Template handler: the caret stays after the last digit. */
+    _onCodeKeydown = (event) => {
+        if (CARET_KEYS.has(event.key) && !event.isComposing)
+            event.preventDefault();
+    };
+    /** @internal Template handler: a click puts the caret after the last digit. */
+    _toEnd = (event) => {
+        const input = event.target;
+        const end = input.value.length;
+        if (input.selectionStart !== end || input.selectionEnd !== end)
+            input.setSelectionRange(end, end);
+    };
+    updated() {
+        // A value set while the field has focus keeps the caret where it was: put it after the last
+        // digit. A selection of the whole code stays, and so does text an input method is composing.
+        const input = this.shadowRoot?.querySelector('.control');
+        const end = this.value.length;
+        if (input?.value === this.value && input.selectionEnd !== end)
+            input.setSelectionRange(end, end);
+    }
+}
+//# sourceMappingURL=one-time-code.js.map

package/dist/one-time-code/one-time-code.js.map

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

package/dist/one-time-code/one-time-code.structural.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The code is a block; its label, description, and error use the shared field layout. The
+ * native input and the row of cells share one grid cell: the input covers the cells, takes the
+ * pointer and the keys, and is transparent (`opacity: 0`, which also paints it above the cells);
+ * each cell centres its digit and, after the last digit, the caret. While focused, the active
+ * cell carries the focus ring. No brand tokens.
+ */
+export declare const oneTimeCodeStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=one-time-code.structural.styles.d.ts.map

package/dist/one-time-code/one-time-code.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.structural.styles.d.ts","sourceRoot":"","sources":["../../src/one-time-code/one-time-code.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,yCAqCvC,CAAC"}

package/dist/one-time-code/one-time-code.structural.styles.js

@@ -0,0 +1,47 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The code is a block; its label, description, and error use the shared field layout. The
+ * native input and the row of cells share one grid cell: the input covers the cells, takes the
+ * pointer and the keys, and is transparent (`opacity: 0`, which also paints it above the cells);
+ * each cell centres its digit and, after the last digit, the caret. While focused, the active
+ * cell carries the focus ring. No brand tokens.
+ */
+export const oneTimeCodeStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .box {
+    display: inline-grid;
+  }
+  .box > * {
+    grid-area: 1 / 1;
+  }
+  .code {
+    block-size: 100%;
+    min-block-size: 0;
+    opacity: 0;
+  }
+  .cells {
+    display: flex;
+  }
+  .cell {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .caret {
+    display: none;
+    inline-size: 1px;
+    block-size: 1em;
+  }
+  .code:focus + .cells .caret {
+    display: block;
+  }
+  .status {
+    display: flex;
+    align-items: center;
+  }
+`;
+//# sourceMappingURL=one-time-code.structural.styles.js.map

package/dist/one-time-code/one-time-code.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.structural.styles.js","sourceRoot":"","sources":["../../src/one-time-code/one-time-code.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC7C,CAAC"}

package/dist/one-time-code/one-time-code.styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Oddkin's default one-time code (Figma `oneTimeCode`, `oneTimeCode/Cell`): `space.sm` between
+ * the field's rows; `control.height.md` by `control.height.lg` cells, `space.xs` apart, with the
+ * control radius and the strong border on the default surface, the digit in the body type role;
+ * the focus ring on the active cell while focused, and the caret in the primary text colour.
+ * The danger border marks an invalid code, the success border a `complete` one; a disabled or
+ * `pending` code takes the sunken surface and the disabled text colour. The status line is in
+ * the small type role: the secondary text colour, the success colour once `complete`.
+ */
+export declare const oneTimeCodeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=one-time-code.styles.d.ts.map

package/dist/one-time-code/one-time-code.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.styles.d.ts","sourceRoot":"","sources":["../../src/one-time-code/one-time-code.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,yCA+C7B,CAAC"}

package/dist/one-time-code/one-time-code.styles.js

@@ -0,0 +1,60 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default one-time code (Figma `oneTimeCode`, `oneTimeCode/Cell`): `space.sm` between
+ * the field's rows; `control.height.md` by `control.height.lg` cells, `space.xs` apart, with the
+ * control radius and the strong border on the default surface, the digit in the body type role;
+ * the focus ring on the active cell while focused, and the caret in the primary text colour.
+ * The danger border marks an invalid code, the success border a `complete` one; a disabled or
+ * `pending` code takes the sunken surface and the disabled text colour. The status line is in
+ * the small type role: the secondary text colour, the success colour once `complete`.
+ */
+export const oneTimeCodeStyles = css `
+  .field {
+    gap: ${token('space.sm')};
+  }
+  .cells {
+    gap: ${token('space.xs')};
+  }
+  .cell {
+    inline-size: ${token('control.height.md')};
+    block-size: ${token('control.height.lg')};
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.default')};
+    color: ${token('color.text.primary')};
+    font-size: ${token('type.body.size')};
+    line-height: ${token('type.body.line-height')};
+  }
+  .code:focus-visible + .cells .cell[data-active] {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
+  .caret {
+    background: ${token('color.text.primary')};
+  }
+  :host(:state(user-invalid)) .cell {
+    border-color: ${token('color.danger.foreground')};
+  }
+  :host([status='complete']) .cell {
+    border-color: ${token('color.success.foreground')};
+  }
+  :host(:disabled) .cell,
+  :host([status='pending']) .cell {
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.disabled')};
+  }
+  .status {
+    gap: ${token('space.xs')};
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  :host([status='complete']) .status {
+    color: ${token('color.success.foreground')};
+  }
+  .status > :is(.glyph, .spinner) {
+    font-size: ${token('icon.size.sm')};
+  }
+`;
+//# sourceMappingURL=one-time-code.styles.js.map

package/dist/one-time-code/one-time-code.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.styles.js","sourceRoot":"","sources":["../../src/one-time-code/one-time-code.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;WAEzB,KAAK,CAAC,UAAU,CAAC;;;WAGjB,KAAK,CAAC,UAAU,CAAC;;;mBAGT,KAAK,CAAC,mBAAmB,CAAC;kBAC3B,KAAK,CAAC,mBAAmB,CAAC;cAC9B,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;iBACvB,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,uBAAuB,CAAC;;;eAGlC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;kBAGzB,KAAK,CAAC,oBAAoB,CAAC;;;oBAGzB,KAAK,CAAC,yBAAyB,CAAC;;;oBAGhC,KAAK,CAAC,0BAA0B,CAAC;;;;kBAInC,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;WAG9B,KAAK,CAAC,UAAU,CAAC;aACf,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;aAGrC,KAAK,CAAC,0BAA0B,CAAC;;;iBAG7B,KAAK,CAAC,cAAc,CAAC;;CAErC,CAAC"}

package/dist/one-time-code/one-time-code.template.d.ts

@@ -0,0 +1,10 @@
+import type { OddkinOneTimeCode } from './one-time-code.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input part="control">`, which covers the drawn
+ * cells (`cell` parts, hidden from assistive technology) and is itself transparent. The cell
+ * after the last digit is `data-active` (the caret while focused); a full code makes the last
+ * cell active. The `status` line under the cells (`role="status"`) shows the hint, or the
+ * `pending` or `complete` text with its glyph; `error` replaces it.
+ */
+export declare const oneTimeCodeTemplate: (code: OddkinOneTimeCode) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=one-time-code.template.d.ts.map

package/dist/one-time-code/one-time-code.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.template.d.ts","sourceRoot":"","sources":["../../src/one-time-code/one-time-code.template.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,SAAU,iBAAiB,mDA+D1D,CAAC"}

package/dist/one-time-code/one-time-code.template.js

@@ -0,0 +1,69 @@
+import { live } from '@oddkin/core/helpers/live';
+import { html, nothing } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { checkGlyph } from '../styles/glyphs.js';
+import { spinnerTemplate } from '../styles/spinner.styles.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input part="control">`, which covers the drawn
+ * cells (`cell` parts, hidden from assistive technology) and is itself transparent. The cell
+ * after the last digit is `data-active` (the caret while focused); a full code makes the last
+ * cell active. The `status` line under the cells (`role="status"`) shows the hint, or the
+ * `pending` or `complete` text with its glyph; `error` replaces it.
+ */
+export const oneTimeCodeTemplate = (code) => {
+    const value = code.value;
+    const cells = code._cells;
+    const active = Math.min(value.length, cells - 1);
+    const status = code.error ? null : 'status';
+    const describedBy = [code._describedBy, status].filter(Boolean).join(' ') || null;
+    return html `<div part="field" class="field">
+    <label part="label" class="label" for="control" ?hidden=${!code.label}>${code.label}</label>
+    <div part="description" id="description" class="description" ?hidden=${!code.description}>
+      ${code.description}
+    </div>
+    <div class="box">
+      <input
+        part="control"
+        id="control"
+        class="control code"
+        .value=${live(code._currentValue)}
+        type="text"
+        name=${code.name || null}
+        autocomplete=${code.autocomplete || 'one-time-code'}
+        inputmode=${code._hints.get('inputmode', 'numeric')}
+        enterkeyhint=${code._hints.get('enterkeyhint')}
+        autocapitalize=${code._hints.get('autocapitalize')}
+        autocorrect=${code._hints.get('autocorrect')}
+        spellcheck=${code._hints.get('spellcheck', 'false')}
+        maxlength=${cells}
+        minlength=${code.minLength ?? cells}
+        ?required=${code.required}
+        ?disabled=${code.disabled || code._formDisabled.value}
+        ?readonly=${code.readonly || code.status === 'pending'}
+        aria-describedby=${describedBy}
+        aria-invalid=${code._userInvalid.value ? 'true' : null}
+        @input=${code._onCodeInput}
+        @compositionend=${code._onCodeInput}
+        @change=${code._onChange}
+        @blur=${code._onBlur}
+        @keydown=${code._onCodeKeydown}
+        @click=${code._toEnd}
+      />
+      <span class="cells" aria-hidden="true">
+        ${Array.from({ length: cells }, (_, index) => html `<span
+              part="cell"
+              class="cell"
+              data-state=${value[index] ? 'filled' : 'empty'}
+              ?data-active=${index === active}
+              >${value[index] ?? ''}${index === value.length ? html `<span class="caret"></span>` : nothing}</span
+            >`)}
+      </span>
+    </div>
+    <div part="status" id="status" class="status" role="status" ?hidden=${!status}>
+      ${code.status === 'pending' ? spinnerTemplate : nothing}${code.status === 'complete' ? checkGlyph : nothing}<span>${code._statusText}</span>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!code.error}>${code.error}</div>
+    ${externalDescriptionTemplate(code._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=one-time-code.template.js.map

package/dist/one-time-code/one-time-code.template.js.map

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

package/dist/overlay/dialog.d.ts

@@ -0,0 +1,44 @@
+import { type Readable } from '@oddkin/core/reactive';
+import type { Controller, Scope } from '@oddkin/core/scope';
+/**
+ * The wiring every modal overlay shares (component-contracts.md §2.6, §3.5; ADR 0044): a native
+ * `<dialog>` in the owner's shadow root opened with `showModal()`, so the rest of the page is inert
+ * (or with `show()`, non-modal, for `modal: false`); initial focus and focus return; `close` and
+ * `cancel` re-dispatched at the owner; `closedby`, native where supported and emulated elsewhere;
+ * and a `<form method="dialog">` in the owner's light DOM, which the native lookup cannot connect
+ * to a dialog in a shadow root. Internal to `@oddkin/components`: import it relatively.
+ */
+export type ClosedBy = 'any' | 'closerequest' | 'none';
+export interface ModalDialogOptions {
+    /** The element that owns the dialog; `close` and `cancel` are re-dispatched at it. */
+    readonly host: HTMLElement;
+    /** The `<dialog>`, rendered in the host's shadow root before `connect`. */
+    readonly dialog: () => HTMLDialogElement | null | undefined;
+    /** Opens it with `showModal()` (true, the default) or `show()` (false: no backdrop, and the page stays usable). Read at each opening. */
+    readonly modal?: boolean;
+    /** What closes it besides script: Escape (`closerequest`, the default), also a press on the backdrop (`any`), or neither (`none`). Read at each opening, so a getter follows a live property. */
+    readonly closedBy?: ClosedBy;
+    /** Where focus goes when it opens. Default: `[autofocus]` in the host's light DOM, then the first control there, then what the browser chose (the dialog's own first control). */
+    readonly initialFocus?: () => HTMLElement | null | undefined;
+    /** Where focus returns on close. Default: where it was when it opened. */
+    readonly returnFocus?: () => HTMLElement | null | undefined;
+    /** After each open (focus placed) and close (the browser has returned focus to the opener; `returnFocus` has not run). */
+    readonly onToggle?: (open: boolean) => void;
+}
+/** The first element in `root`'s light DOM that takes focus, including focus-delegating hosts. */
+export declare function firstFocusable(root: ParentNode): HTMLElement | null;
+export declare class ModalDialog implements Controller {
+    #private;
+    /** Whether the dialog is open. */
+    readonly open: Readable<boolean>;
+    constructor(options: ModalDialogOptions);
+    /** The dialog's return value: the `close()` argument or the submitting button's value. */
+    get returnValue(): string;
+    set returnValue(value: string);
+    connect(scope: Scope): void;
+    /** Opens it, modally unless `modal` is false, unless it is open or not connected. */
+    show(): void;
+    /** Closes it; `returnValue` becomes the argument when there is one. */
+    close(returnValue?: string): void;
+}
+//# sourceMappingURL=dialog.d.ts.map

package/dist/overlay/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/overlay/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG5D;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,kBAAkB;IACjC,sFAAsF;IACtF,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,MAAM,EAAE,MAAM,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5D,yIAAyI;IACzI,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,iMAAiM;IACjM,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAC7B,kLAAkL;IAClL,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7D,0EAA0E;IAC1E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5D,0HAA0H;IAC1H,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAKD,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,CAOnE;AAKD,qBAAa,WAAY,YAAW,UAAU;;IAK5C,kCAAkC;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAc;IAE9C,YAAY,OAAO,EAAE,kBAAkB,EAEtC;IAED,0FAA0F;IAC1F,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAG5B;IAED,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAuD1B;IAED,qFAAqF;IACrF,IAAI,IAAI,IAAI,CAeX;IAED,uEAAuE;IACvE,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAKhC;CA8BF"}

package/dist/overlay/dialog.js

@@ -0,0 +1,157 @@
+import { signal } from '@oddkin/core/reactive';
+import { composedContains, deepActiveElement } from './overlay.js';
+const FOCUSABLE = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
+/** The first element in `root`'s light DOM that takes focus, including focus-delegating hosts. */
+export function firstFocusable(root) {
+    for (const el of root.querySelectorAll('*')) {
+        if (!(el.matches(FOCUSABLE) || el.shadowRoot?.delegatesFocus))
+            continue;
+        if (el.matches(':disabled') || !el.checkVisibility())
+            continue;
+        return el;
+    }
+    return null;
+}
+/** Whether the browser handles `closedby` itself (above the floor: ADR 0044). */
+const nativeClosedBy = () => 'closedBy' in HTMLDialogElement.prototype;
+export class ModalDialog {
+    #options;
+    #open = signal(false);
+    #opener = null;
+    /** Whether the dialog is open. */
+    open = this.#open;
+    constructor(options) {
+        this.#options = options;
+    }
+    /** The dialog's return value: the `close()` argument or the submitting button's value. */
+    get returnValue() {
+        return this.#options.dialog()?.returnValue ?? '';
+    }
+    set returnValue(value) {
+        const dialog = this.#options.dialog();
+        if (dialog)
+            dialog.returnValue = value;
+    }
+    connect(scope) {
+        const dialog = this.#options.dialog();
+        if (!dialog)
+            return;
+        const host = this.#options.host;
+        const closedBy = () => this.#options.closedBy ?? 'closerequest';
+        scope.listen(dialog, 'close', () => {
+            this.#closed(dialog);
+            host.dispatchEvent(new Event('close'));
+        });
+        scope.listen(dialog, 'cancel', (event) => {
+            if (!nativeClosedBy() && closedBy() === 'none') {
+                event.preventDefault();
+                return;
+            }
+            if (!this.#cancel(event.cancelable))
+                event.preventDefault();
+        });
+        // `closedby="any"` where the browser lacks it: a press on the backdrop is a press on the
+        // dialog outside its box.
+        scope.listen(dialog, 'click', (event) => {
+            if (nativeClosedBy() || closedBy() !== 'any' || event.target !== dialog)
+                return;
+            const box = dialog.getBoundingClientRect();
+            const inside = event.clientX >= box.left &&
+                event.clientX <= box.right &&
+                event.clientY >= box.top &&
+                event.clientY <= box.bottom;
+            if (!inside && this.#cancel(true))
+                this.close();
+        });
+        // A non-modal dialog where the browser lacks `closedby`, which would otherwise ignore Escape:
+        // Escape, and with `any` a press outside it, close it as the browser would.
+        const emulated = () => !nativeClosedBy() && dialog.open && !dialog.matches(':modal');
+        scope.listen(document, 'keydown', (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented || closedBy() === 'none')
+                return;
+            if (emulated() && this.#cancel(true))
+                this.close();
+        });
+        scope.listen(document, 'pointerdown', (event) => {
+            if (closedBy() !== 'any' || !emulated() || event.composedPath().includes(dialog))
+                return;
+            if (this.#cancel(true))
+                this.close();
+        });
+        scope.listen(host, 'submit', (event) => {
+            const submitter = event.submitter;
+            const form = event.target;
+            const method = submitter?.hasAttribute('formmethod') ? submitter.formMethod : form.method;
+            if (method !== 'dialog' || !dialog.open)
+                return;
+            event.preventDefault();
+            this.close(submitter ? submitter.value : undefined);
+        });
+        scope.add(() => {
+            // Removed while open: a dialog outside the document is no longer modal, so close it.
+            if (!dialog.open)
+                return;
+            dialog.close();
+            this.#open.value = false;
+            this.#options.onToggle?.(false);
+        }, 'modal dialog');
+        this.#open.value = dialog.open;
+    }
+    /** Opens it, modally unless `modal` is false, unless it is open or not connected. */
+    show() {
+        const dialog = this.#options.dialog();
+        if (!dialog?.isConnected || dialog.open)
+            return;
+        this.#opener = deepActiveElement();
+        if (nativeClosedBy())
+            dialog.setAttribute('closedby', this.#options.closedBy ?? 'closerequest');
+        if (this.#options.modal === false)
+            dialog.show();
+        else
+            dialog.showModal();
+        this.#open.value = true;
+        const host = this.#options.host;
+        const target = this.#options.initialFocus?.() ??
+            host.querySelector('[autofocus]') ??
+            firstFocusable(host);
+        target?.focus();
+        this.#options.onToggle?.(true);
+    }
+    /** Closes it; `returnValue` becomes the argument when there is one. */
+    close(returnValue) {
+        const dialog = this.#options.dialog();
+        if (!dialog?.open)
+            return;
+        dialog.close(returnValue);
+        this.#closed(dialog);
+    }
+    /** Dispatches a cancelable `cancel` at the host; true unless it was cancelled. */
+    #cancel(cancelable) {
+        const relay = new Event('cancel', { cancelable });
+        this.#options.host.dispatchEvent(relay);
+        return !relay.defaultPrevented;
+    }
+    /** Closed by `close()`, or by the browser, whose `close` event comes a task later. */
+    #closed(dialog) {
+        if (!this.#open.value || dialog.open)
+            return;
+        this.#open.value = false;
+        this.#options.onToggle?.(false);
+        const active = deepActiveElement();
+        // The browser has usually returned focus to the opener already; it may not have, or the owner
+        // may want it elsewhere.
+        if (!active ||
+            active === document.body ||
+            active === this.#opener ||
+            composedContains(dialog, active)) {
+            const target = this.#options.returnFocus?.() ?? this.#opener;
+            // Safari does not focus a button on a press, so there may be no opener: leave the closed
+            // dialog rather than keep focus in it.
+            if (target && target !== document.body)
+                target.focus();
+            else if (active && composedContains(dialog, active))
+                active.blur();
+        }
+    }
+}
+//# sourceMappingURL=dialog.js.map

package/dist/overlay/dialog.js.map

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

package/dist/overlay/overlay.d.ts

@@ -0,0 +1,56 @@
+import { type Align, type Placement, type Side } from '@oddkin/core/controllers/position';
+import { type Readable } from '@oddkin/core/reactive';
+import type { Controller, Scope } from '@oddkin/core/scope';
+/**
+ * The wiring every anchored overlay shares (component-contracts.md §2.6, ADR 0044): the top layer
+ * through `popover`, placement by `@oddkin/core/controllers/position` while open, focus return,
+ * the native toggle events re-dispatched at the owning element, and optional dismissal for manual
+ * surfaces. Internal to `@oddkin/components`: import it relatively.
+ */
+export interface OverlayOptions {
+    /** The element that owns the overlay; toggle events are re-dispatched at it when the surface is another element. */
+    readonly host: HTMLElement;
+    /** The `[popover]` element: the host itself, or an element rendered in its shadow root before `connect`. */
+    readonly surface: () => HTMLElement | null | undefined;
+    /** What the surface is placed against; without one it keeps the browser's centred placement. */
+    readonly anchor?: () => Element | null | undefined;
+    /** Read at each placement, so a getter follows a live property. Default `'block-end'`. */
+    readonly side?: Side;
+    /** Read at each placement. Default `'start'`. */
+    readonly align?: Align;
+    /** Distance from the anchor, in CSS pixels. Default 4. */
+    readonly offset?: number;
+    /** The `popover` state set when the surface has none. Default `'auto'`: light dismiss and Escape. */
+    readonly mode?: 'auto' | 'manual';
+    /** A manual surface also closes on Escape within the host, and on a press outside the host and the surface. */
+    readonly dismiss?: boolean;
+    /** Re-dispatch the surface's toggle events at the host. Default true; false for a nested surface, such as a submenu. */
+    readonly relay?: boolean;
+    /** Where focus returns on close when it was inside the surface. Default: where it was at open. */
+    readonly returnFocus?: () => HTMLElement | null | undefined;
+    /** After each open (once shown and placed) or close (before focus returns). */
+    readonly onToggle?: (open: boolean) => void;
+    /** After each placement. */
+    readonly onPlace?: (placement: Placement) => void;
+}
+/** The focused element, through open shadow roots. */
+export declare function deepActiveElement(): Element | null;
+/** Whether `node` is `container` or inside it in the composed tree (slots and shadow roots). */
+export declare function composedContains(container: Node, node: Node | null): boolean;
+export declare class Overlay implements Controller {
+    #private;
+    /** Whether the surface is open; bind a trigger's `aria-expanded` to it. */
+    readonly open: Readable<boolean>;
+    constructor(options: OverlayOptions);
+    /** The last placement, or undefined before the first. */
+    get placement(): Placement | undefined;
+    connect(scope: Scope): void;
+    show(): void;
+    hide(): void;
+    toggle(force?: boolean): void;
+    /** Place again now, e.g. after the content changed size; does nothing while closed. */
+    update(): void;
+}
+/** The explicit close control every dismissible surface carries (iOS floor exception, §2.6). */
+export declare const closeButton: (label: string | Readable<string>, onClose: () => void) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=overlay.d.ts.map

package/dist/overlay/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI5D;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,oHAAoH;IACpH,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,4GAA4G;IAC5G,QAAQ,CAAC,OAAO,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,gGAAgG;IAChG,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,0FAA0F;IAC1F,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,qGAAqG;IACrG,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,+GAA+G;IAC/G,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,wHAAwH;IACxH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,kGAAkG;IAClG,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5D,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,4BAA4B;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CACnD;AAED,sDAAsD;AACtD,wBAAgB,iBAAiB,IAAI,OAAO,GAAG,IAAI,CAIlD;AASD,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAI5E;AAED,qBAAa,OAAQ,YAAW,UAAU;;IAYxC,2EAA2E;IAC3E,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAc;IAE9C,YAAY,OAAO,EAAE,cAAc,EA4BlC;IAED,yDAAyD;IACzD,IAAI,SAAS,IAAI,SAAS,GAAG,SAAS,CAErC;IAED,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CA+B1B;IAED,IAAI,IAAI,IAAI,CAGX;IAED,IAAI,IAAI,IAAI,CAGX;IAED,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAM5B;IAED,uFAAuF;IACvF,MAAM,IAAI,IAAI,CAEb;CAiGF;AAED,gGAAgG;AAChG,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,MAAM,IAAI,mDASrE,CAAC"}