@rak200/ui 0.2.6 → 0.2.8

package/README.md

@@ -30,13 +30,20 @@ npm install @rak200/ui
 
 <ui-field>
   <label slot="label">Amount</label>
-  <input type="number" />
+  <ui-input><input type="number" name="amount" /></ui-input>
   <span slot="help">In BRL, two decimals.</span>
 </ui-field>
 
 <ui-button>Save</ui-button>
 <ui-button variant="secondary">Cancel</ui-button>
 <ui-button disabled>Unavailable</ui-button>
+
+<ui-dialog>
+  <h2 slot="title">Delete account</h2>
+  <p>This cannot be undone.</p>
+  <ui-button slot="actions" variant="secondary">Cancel</ui-button>
+  <ui-button slot="actions">Delete</ui-button>
+</ui-dialog>
 ```
 
 Every visual decision is a CSS custom property, so a host restyles the kit without forking it:
@@ -64,8 +71,8 @@ components; `docs/` is what describes them.
 
 ## Status
 
-**v0.** Two components — `<ui-button>` and `<ui-field>` — and the token layer under them, built to
-the ecosystem's full quality bar rather than sketched: type-checked at the strictest available
+**v0.** Five components — `<ui-button>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>` and
+`<ui-textarea>` — and the token layer under them, built to the ecosystem's full quality bar rather than sketched: type-checked at the strictest available
 setting, formatted, tested in a real browser and **asserted against axe** for WCAG A/AA, 100%
 coverage and **100% mutation score**, scanned, and every public symbol documented. The v0 surface in
 RFC 0016 grows from here — see [ROADMAP.md](ROADMAP.md).

package/dist/dialog.d.ts

@@ -0,0 +1,71 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A modal dialog.
+ *
+ * It delegates to a real `<dialog>` and opens it with `showModal()`, which is what makes
+ * the top layer, the inert background, the focus trap, <kbd>Esc</kbd> and — the half
+ * everyone forgets — **focus returning to whatever opened it** the platform's job rather
+ * than this file's. What is written here is the part the platform leaves out: the scroll
+ * lock, the accessible name across the shadow boundary, and an exit that can be seen.
+ *
+ * **This is where RFC 0016 expected Zag to arrive, and it does not.** Zag was adopted for
+ * dismissable layers and focus trapping, and its dialog machine implements both over a
+ * `<div>` — which means giving up the top layer and taking a JS focus trap in exchange for
+ * one the user agent enforces. *The platform owns what the platform is good at* is the
+ * older rule and the stronger one here. Zag arrives with the first component the platform
+ * gives nothing for; `ARCHITECTURE.md` carries that decision for a consumer, and
+ * `ROADMAP.md` names the component.
+ *
+ * @example
+ * ```html
+ * <ui-dialog>
+ *   <h2 slot="title">Delete account</h2>
+ *   <p>This cannot be undone.</p>
+ *   <ui-button slot="actions" variant="secondary">Cancel</ui-button>
+ *   <ui-button slot="actions">Delete</ui-button>
+ * </ui-dialog>
+ * ```
+ */
+export declare class UiDialog extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult;
+    static readonly properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * Whether the dialog is showing.
+     *
+     * **The single source of truth, and the only one.** {@link show} and {@link close} set
+     * it, <kbd>Esc</kbd> sets it, and the component reacts to it — so an attribute, a
+     * property and a method are three ways of saying one thing rather than three paths
+     * that can disagree. Reflected, so a host stylesheet can select on it.
+     *
+     * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+     * states beside its own.
+     */
+    open: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(): void;
+    render(): TemplateResult;
+    /**
+     * Opens the dialog.
+     *
+     * Sugar over `open = true` rather than a second way in — a method that opened by its
+     * own route would be a state the attribute does not describe.
+     */
+    show(): void;
+    /** Closes the dialog, running the exit. Sugar over `open = false`, for the same reason. */
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-dialog': UiDialog;
+    }
+}
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAoGjE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,UAAU;;IACpC,gBAAyB,MAAM,0BAwG7B;IAEF,gBAAyB,UAAU;;;;;MAEjC;IAEF;;;;;;;;;;OAUG;IACH,IAAI,UAAS;;IAyCJ,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAU5B,YAAY,IAAI,IAAI;IAIpB,OAAO,IAAI,IAAI;IAiBf,MAAM,IAAI,cAAc;IAIjC;;;;;OAKG;IACH,IAAI,IAAI,IAAI;IAIZ,2FAA2F;IAC3F,KAAK,IAAI,IAAI;CA0FhB;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/dialog.js

@@ -0,0 +1,406 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/** The class the exit is carried by, on the dialog for exactly as long as the exit runs. */
+const closing = 'closing';
+/** How many dialogs are holding the page still. */
+let locks = 0;
+/**
+ * The inline values the first hold displaced, given back by the last release.
+ *
+ * No initial value, deliberately: nothing reads it before {@link hold} writes it, and an
+ * initialiser here would be a value no test could ever observe.
+ */
+let displaced;
+/**
+ * Holds the page still behind a modal, and gives it back when the last one leaves.
+ *
+ * `<dialog>` gives a modal the top layer, an inert background, a focus trap and focus
+ * restoration. It does not stop the page behind it scrolling, and that is the one piece of
+ * modality left to write.
+ *
+ * **The gutter is reserved rather than the scrollbar measured**, which is the difference
+ * between a rule and an arithmetic nothing can check. `overflow: hidden` takes the
+ * scrollbar away and the page jumps left by its width; the usual answer adds that width
+ * back as padding — and the browser this suite runs in has overlay scrollbars, so the
+ * width is `0`, every sign error in that arithmetic passes, and the check is theatre.
+ * `scrollbar-gutter: stable` asks the browser to keep the space it was already using,
+ * with no number to get wrong.
+ *
+ * Counted rather than flagged, because a dialog opening a dialog is ordinary — a confirm
+ * over a form — and the second one closing must not give the page back while the first is
+ * still up.
+ */
+function hold() {
+    locks += 1;
+    if (locks > 1) {
+        return;
+    }
+    const root = document.documentElement;
+    displaced = {
+        overflow: root.style.overflow,
+        gutter: root.style.getPropertyValue('scrollbar-gutter'),
+    };
+    // Only where there was a scrollbar to lose. `stable` on a page that never had one
+    // reserves space that was not there, which is the same layout shift in the other
+    // direction.
+    if (root.scrollHeight > root.clientHeight) {
+        root.style.setProperty('scrollbar-gutter', 'stable');
+    }
+    root.style.overflow = 'hidden';
+}
+/** Gives the page back, once the last dialog has closed. */
+function release() {
+    locks -= 1;
+    if (locks > 0) {
+        return;
+    }
+    const root = document.documentElement;
+    // What the host had, not what this module would have chosen. A page that sets its own
+    // `overflow` or reserves its own gutter gets it back rather than being cleared.
+    root.style.overflow = displaced.overflow;
+    root.style.setProperty('scrollbar-gutter', displaced.gutter);
+}
+/** One of the dialog's slots — named, or the default one when the name is empty. */
+function slot(name = '') {
+    return Object.assign(document.createElement('slot'), { name });
+}
+/**
+ * The shadow content, which is static all the way down: a `<dialog>` and three slots.
+ *
+ * Built here rather than queried out of the render root, and the reason is the floors
+ * this repository holds. `renderRoot.querySelector('dialog')` is typed `| null`, and that
+ * null is unreachable in a component that renders the element unconditionally — an
+ * unreachable branch is one no test can cover and no mutant can be killed on, against a
+ * coverage floor of 100 and a mutation floor of 100. The honest way to satisfy both is to
+ * not create the branch.
+ */
+function build() {
+    const dialog = document.createElement('dialog');
+    dialog.setAttribute('part', 'dialog');
+    dialog.append(slot('title'), slot(), slot('actions'));
+    return dialog;
+}
+/**
+ * A modal dialog.
+ *
+ * It delegates to a real `<dialog>` and opens it with `showModal()`, which is what makes
+ * the top layer, the inert background, the focus trap, <kbd>Esc</kbd> and — the half
+ * everyone forgets — **focus returning to whatever opened it** the platform's job rather
+ * than this file's. What is written here is the part the platform leaves out: the scroll
+ * lock, the accessible name across the shadow boundary, and an exit that can be seen.
+ *
+ * **This is where RFC 0016 expected Zag to arrive, and it does not.** Zag was adopted for
+ * dismissable layers and focus trapping, and its dialog machine implements both over a
+ * `<div>` — which means giving up the top layer and taking a JS focus trap in exchange for
+ * one the user agent enforces. *The platform owns what the platform is good at* is the
+ * older rule and the stronger one here. Zag arrives with the first component the platform
+ * gives nothing for; `ARCHITECTURE.md` carries that decision for a consumer, and
+ * `ROADMAP.md` names the component.
+ *
+ * @example
+ * ```html
+ * <ui-dialog>
+ *   <h2 slot="title">Delete account</h2>
+ *   <p>This cannot be undone.</p>
+ *   <ui-button slot="actions" variant="secondary">Cancel</ui-button>
+ *   <ui-button slot="actions">Delete</ui-button>
+ * </ui-dialog>
+ * ```
+ */
+export class UiDialog extends LitElement {
+    static { this.styles = css `
+        /* The dialog is promoted to the top layer, so the host must take no space of its
+           own: a <ui-dialog> laid out in the flow would leave a gap on every page where
+           the dialog is closed. */
+        :host {
+            display: contents;
+        }
+
+        /* display is named under [open] and nowhere else, and that is not a style
+           choice. The user agent closes a dialog with display: none; a rule here that
+           names display unconditionally outranks it, and the closed dialog simply stays
+           on the page. The attribute is still there through the exit below, which is what
+           lets the transition run at all. */
+        dialog[open] {
+            display: flex;
+            flex-direction: column;
+            gap: calc(${reference('--ui-space')} * 2);
+        }
+
+        dialog {
+            /* The user agent's own 2px border and white background are decisions this
+               component owns. Nothing is raised underneath: elevation arrives with the
+               component that needs to read as lifted, and a panel over a scrim is already
+               separated from the page by the scrim. */
+            border: none;
+            border-radius: ${reference('--ui-radius')};
+            padding: calc(${reference('--ui-space')} * 3);
+            background: ${reference('--ui-color-surface')};
+            color: ${reference('--ui-color-text')};
+            font-family: ${reference('--ui-font')};
+
+            /* A cap is a layout decision rather than a visual one, so it is not a token
+               and opens no category. A host that wants another size reaches
+               ::part(dialog), which is the surface for what the token set does not name.
+
+               border-box, and the mutation floor is what found this: a dialog is
+               content-box by default, so the cap applied to the content alone and the
+               padding was added on top of it — the panel then ran wider than the cap by
+               six spacing steps, and the clearance the calc promises was not the
+               clearance it left. */
+            box-sizing: border-box;
+            max-inline-size: min(32rem, calc(100% - ${reference('--ui-space')} * 8));
+
+            opacity: 1;
+            transition: opacity ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-enter')};
+        }
+
+        /* Where the entrance comes *from*. Without it there is nothing to transition out
+           of: the dialog goes from display: none to laid out in a single frame, and a
+           transition needs a before-change style that an unrendered element does not
+           have. */
+        @starting-style {
+            dialog[open] {
+                opacity: 0;
+            }
+        }
+
+        dialog::backdrop {
+            background: ${reference('--ui-color-scrim')};
+            opacity: 1;
+            transition: opacity ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-enter')};
+        }
+
+        @starting-style {
+            dialog[open]::backdrop {
+                opacity: 0;
+            }
+        }
+
+        /* The exit, driven from the class rather than from [open] going away: the
+           platform removes a closed dialog in the same frame it is closed, so an exit
+           waiting on the attribute would never be seen. Both halves are declared together
+           because moving together is what lets #exit await one of them. */
+        dialog.closing,
+        dialog.closing::backdrop {
+            opacity: 0;
+            transition-timing-function: ${reference('--ui-easing-exit')};
+        }
+
+        /* showModal() focuses the dialog itself when nothing inside it can take focus,
+           and a focused thing with no ring is the most common way a component stops being
+           usable by keyboard. */
+        dialog:focus-visible {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: 2px;
+        }
+
+        /* A heading's own margin would add to the padding and to the gap above it. This
+           resets the user agent's default and yields to a decision: for slotted content
+           the outer tree wins, so a host's own rule for the element still beats this. */
+        slot[name='title']::slotted(*) {
+            margin: 0;
+        }
+
+        /* A slot is display: contents until something says otherwise, which is what
+           makes this the line that turns three buttons into a row. */
+        slot[name='actions'] {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            gap: ${reference('--ui-space')};
+        }
+    `; }
+    static { this.properties = {
+        open: { type: Boolean, reflect: true },
+    }; }
+    /** The real `<dialog>` this component is a shell around. */
+    #dialog;
+    /**
+     * Watches the light DOM for a title that changed without the element changing.
+     *
+     * Built here rather than on connection so it is never absent: a disconnect that has to
+     * ask whether the observer exists is a branch no test can reach.
+     */
+    #observer;
+    constructor() {
+        super();
+        /**
+         * Whether the dialog is showing.
+         *
+         * **The single source of truth, and the only one.** {@link show} and {@link close} set
+         * it, <kbd>Esc</kbd> sets it, and the component reacts to it — so an attribute, a
+         * property and a method are three ways of saying one thing rather than three paths
+         * that can disagree. Reflected, so a host stylesheet can select on it.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * states beside its own.
+         */
+        this.open = false;
+        /** The real `<dialog>` this component is a shell around. */
+        this.#dialog = build();
+        /**
+         * Watches the light DOM for a title that changed without the element changing.
+         *
+         * Built here rather than on connection so it is never absent: a disconnect that has to
+         * ask whether the observer exists is a branch no test can reach.
+         */
+        this.#observer = new MutationObserver(() => {
+            this.#label();
+        });
+        this.#dialog.addEventListener('cancel', (event) => {
+            // Esc reaches a modal as `cancel`, and letting it through closes in the same
+            // frame — the exit this component just gained would never be seen. Prevented
+            // and routed back through `open`, so however a close was asked for it leaves
+            // by the one door.
+            event.preventDefault();
+            this.open = false;
+        });
+        this.#dialog.addEventListener('close', () => {
+            // The announcement only. The platform fires `close` as a *queued task* rather
+            // than synchronously, so this runs a turn after the dialog actually closed —
+            // which is fine for telling a host, and was wrong for giving the page back:
+            // the lock outlived the dialog by a task, and a second dialog opening inside
+            // that window counted against a page nobody was holding any more. Measured on
+            // Node 22 in CI and not on Node 24, which is what a timing dependency looks
+            // like from the outside. {@link UiDialog.#shut} owns the release instead, at
+            // both of the synchronous points where this element closes the dialog.
+            this.open = false;
+            this.dispatchEvent(new Event('ui-close', { bubbles: true, composed: true }));
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // The title may be replaced, or its text rewritten in place without any element
+        // changing, which is what a host's re-render looks like from here — so
+        // characterData matters as much as childList, and both can happen below a wrapper.
+        this.#observer.observe(this, { childList: true, characterData: true, subtree: true });
+    }
+    disconnectedCallback() {
+        this.#observer.disconnect();
+        // Removing an open dialog takes it out of the top layer and announces nothing, so
+        // the page would stay held by a dialog that is no longer anywhere.
+        this.#shut();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.#label();
+    }
+    updated() {
+        // Compared against the platform's own state rather than against Lit's changed
+        // properties, and it has to be: on the first update Lit reports every initialised
+        // property as changed, so a dialog that has never been open would run the closing
+        // path and announce a close that never happened. It is also what makes a re-render
+        // for any other reason a no-op instead of a second `showModal()`, which throws.
+        if (this.open === this.#dialog.open) {
+            return;
+        }
+        if (this.open) {
+            this.#enter();
+        }
+        else {
+            void this.#exit();
+        }
+    }
+    render() {
+        return html `${this.#dialog}`;
+    }
+    /**
+     * Opens the dialog.
+     *
+     * Sugar over `open = true` rather than a second way in — a method that opened by its
+     * own route would be a state the attribute does not describe.
+     */
+    show() {
+        this.open = true;
+    }
+    /** Closes the dialog, running the exit. Sugar over `open = false`, for the same reason. */
+    close() {
+        this.open = false;
+    }
+    /**
+     * Puts the dialog in the top layer.
+     *
+     * `showModal()` rather than the `open` attribute, and the distance between the two is
+     * the whole component: the attribute opens a dialog *in the flow*, with no top layer,
+     * no inert background, no focus trap and no focus restoration. It is the one way to
+     * get something that looks modal and traps nobody — which is why this host's `open` is
+     * never bound onto the inner element's.
+     */
+    #enter() {
+        this.#dialog.showModal();
+        hold();
+    }
+    /** Runs the exit, and closes once it has finished. */
+    async #exit() {
+        const dialog = this.#dialog;
+        dialog.classList.add(closing);
+        // `finished` rejects when an animation is cancelled, which is exactly what
+        // reopening mid-exit does — so what this waits for is settlement rather than
+        // fulfilment. `getAnimations` flushes the pending style change before it answers,
+        // so the transition the line above started is already in the list.
+        //
+        // The backdrop is not in that list: a pseudo-element needs `subtree: true`,
+        // measured. It does not need to be — the panel and the scrim move the same
+        // property over the same duration token, so they start together and end together,
+        // and awaiting one is awaiting both. `tests/dialog.test.ts` asserts that shared
+        // duration rather than leaving it to this paragraph.
+        await Promise.allSettled(dialog.getAnimations().map((animation) => animation.finished));
+        dialog.classList.remove(closing);
+        // Reopened while the exit was running. The dialog never left the top layer, so
+        // there is nothing to close, and taking the class back off is the whole of the
+        // way back.
+        if (this.open) {
+            return;
+        }
+        this.#shut();
+    }
+    /**
+     * Closes the dialog and gives the page back, in that order and in one place.
+     *
+     * Both ways out run through here — the exit above and the disconnect below — so the
+     * release is paired with the close rather than with the event the close will later
+     * fire. The guard is the platform's own state rather than a flag this element keeps:
+     * a dialog that is not open is holding nothing, so calling this twice gives the page
+     * back once.
+     */
+    #shut() {
+        if (!this.#dialog.open) {
+            return;
+        }
+        this.#dialog.close();
+        release();
+    }
+    /**
+     * Names the dialog after its own title.
+     *
+     * **A copy of the text rather than a reference to the element, and that is forced.**
+     * APG names a modal with `aria-labelledby` pointing at its heading, and an IDREF does
+     * not cross a shadow boundary — so a `<dialog>` in this shadow root cannot point at a
+     * heading in the host's tree. `ui-field` answers the same constraint by leaving every
+     * associated element in the light DOM; a dialog cannot, because the element that has
+     * to reach the top layer is the one this component renders. What does cross is a
+     * string, so the name is copied and the observer above keeps the copy honest.
+     */
+    #label() {
+        const title = this.querySelector(':scope > [slot="title"]');
+        const label = title?.textContent.trim() ?? '';
+        // A dialog with no title has no accessible name, and a blank `aria-label` would be
+        // worse than none: a screen reader announces "dialog" either way, and an attribute
+        // that is present and empty is the shape that makes an audit read as handled.
+        if (label === '') {
+            this.#dialog.removeAttribute('aria-label');
+        }
+        else {
+            this.#dialog.setAttribute('aria-label', label);
+        }
+    }
+}
+// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
+// the warm process Stryker switches mutants in — so by the time a mutant on this line is
+// active the element is already defined under the original name, and no test can observe
+// the change. Outside the runner's reach, not an equivalent mutant.
+customElements.define('ui-dialog', UiDialog);
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

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

package/dist/field.d.ts

@@ -13,6 +13,10 @@ import { LitElement, type TemplateResult } from 'lit';
  * where the association is the platform's job — and this element only generates the ids
  * and points them at each other.
  *
+ * **The control may sit below a wrapper**, and the same constraint is why: `<ui-input>` is
+ * a box around a control that had to stay in the light DOM, so this element looks through
+ * it. See {@link UiField.#control}.
+ *
  * @example
  * ```html
  * <ui-field>

package/dist/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CAyFpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CA2GpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}

package/dist/field.js

@@ -16,6 +16,10 @@ let sequence = 0;
  * where the association is the platform's job — and this element only generates the ids
  * and points them at each other.
  *
+ * **The control may sit below a wrapper**, and the same constraint is why: `<ui-input>` is
+ * a box around a control that had to stay in the light DOM, so this element looks through
+ * it. See {@link UiField.#control}.
+ *
  * @example
  * ```html
  * <ui-field>
@@ -92,6 +96,22 @@ export class UiField extends LitElement {
         const found = this.querySelector(selector);
         return found instanceof HTMLElement ? found : undefined;
     }
+    /**
+     * The control this field is about, which a wrapper may stand in front of.
+     *
+     * `<ui-input>` is such a wrapper, and it is one because the control has to stay in the
+     * light DOM for the IDREFs below to resolve at all — so the box that styles it can
+     * only ever sit around it, never instead of it. The label points at the control and
+     * never at the box: `<label for>` aimed at a custom element labels nothing, which axe
+     * reports at critical impact.
+     *
+     * A control written as a direct child, which is every call site that predates the
+     * wrapper, matches nothing to descend into and is returned as it is.
+     */
+    #control() {
+        const slotted = this.#slotted(null);
+        return slotted?.querySelector('input, textarea, select') ?? slotted;
+    }
     /**
      * Points the label, the help and the error at the control.
      *
@@ -99,7 +119,7 @@ export class UiField extends LitElement {
      * this element cannot see.
      */
     #associate() {
-        const control = this.#slotted(null);
+        const control = this.#control();
         if (control === undefined) {
             return;
         }

package/dist/field.js.map

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

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { UiButton, type ButtonVariant } from './button.js';
+export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
+export { UiInput, UiTextarea } from './input.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, type Token, type DerivedToken, } from './tokens.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,4 +1,6 @@
 export { UiButton } from './button.js';
+export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
+export { UiInput, UiTextarea } from './input.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, } from './tokens.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/dist/input.d.ts

@@ -0,0 +1,63 @@
+import { LitElement, type CSSResult, type TemplateResult } from 'lit';
+/**
+ * A styled native form control.
+ *
+ * The control is the host's own, slotted in rather than rendered here, and that is the
+ * single decision this component is made of. {@link UiInput} and {@link UiTextarea} carry
+ * the appearance; the element inside carries everything else.
+ */
+declare class UiControl extends LitElement {
+    render(): TemplateResult;
+}
+/**
+ * A text input, styled by the token layer rather than replaced.
+ *
+ * **The `<input>` is yours.** You write it, you set its attributes, and it stays in the
+ * light DOM — so `type`, `required`, `readonly`, `name` and `value` are the platform's
+ * business and there is no pass-through layer to fall out of step with them. It reaches a
+ * form submit for the same reason: a native control inside a `<form>` participates
+ * because it is a native control inside a `<form>`, with no `ElementInternals` and no
+ * value mirroring. That was the open question on the issue, and the answer is that the
+ * shape the accessibility rule forced happens to be the shape that answers it.
+ *
+ * Composes with {@link UiField}, which finds the control through this wrapper and wires
+ * the label, the help, the error and `aria-invalid` to it.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Amount</label>
+ *   <ui-input><input type="number" name="amount" /></ui-input>
+ *   <span slot="help">In BRL, two decimals.</span>
+ * </ui-field>
+ * ```
+ */
+export declare class UiInput extends UiControl {
+    static readonly styles: CSSResult;
+}
+/**
+ * A multi-line text control, styled by the token layer rather than replaced.
+ *
+ * Everything {@link UiInput} says applies. What differs is two rules: a height to start
+ * at, and resizing left on the vertical axis — a control that cannot grow is one people
+ * fight, and one that grows sideways breaks the layout around it.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Notes</label>
+ *   <ui-textarea><textarea name="notes" rows="4"></textarea></ui-textarea>
+ * </ui-field>
+ * ```
+ */
+export declare class UiTextarea extends UiControl {
+    static readonly styles: CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-input': UiInput;
+        'ui-textarea': UiTextarea;
+    }
+}
+export {};
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAyFjF;;;;;;GAMG;AACH,cAAM,SAAU,SAAQ,UAAU;IACrB,MAAM,IAAI,cAAc;CAGpC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IAClC,gBAAyB,MAAM,EAAE,SAAS,CAAW;CACxD;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACrC,gBAAyB,MAAM,EAAE,SAAS,EAAE,CAQ1C;CACL;AAWD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;QACpB,aAAa,EAAE,UAAU,CAAC;KAC7B;CACJ"}

package/dist/input.js

@@ -0,0 +1,159 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * What a styled native control looks like, which both elements share.
+ *
+ * One stylesheet naming both `input` and `textarea` rather than one per element: the two
+ * differ in what they accept and in one rule about resizing, and duplicating the whole
+ * box to express that would be two copies of a contract with nothing comparing them.
+ */
+const control = css `
+    :host {
+        display: block;
+    }
+
+    /* Everything below reaches a control the *host* wrote, through ::slotted. That is the
+       whole shape of this component and it is forced rather than preferred — the control
+       has to stay in the light DOM, where the label and the description ui-field writes
+       can resolve against it. Measured, in this suite's own instrument: the same control
+       rendered into a shadow root is an axe label violation at critical impact, and the
+       aria-describedby pointing at it dangles.
+
+       ::slotted reaches a pseudo-element of a slotted node too, which is what makes the
+       placeholder rule below possible — measured, because the selector looks like it
+       should not work. */
+    ::slotted(input),
+    ::slotted(textarea) {
+        box-sizing: border-box;
+        inline-size: 100%;
+        font: inherit;
+        font-family: ${reference('--ui-font')};
+        color: ${reference('--ui-color-text')};
+        background: ${reference('--ui-color-surface')};
+        border: 1px solid ${reference('--ui-color-border')};
+        border-radius: ${reference('--ui-radius')};
+        padding: ${reference('--ui-space')};
+        /* Only the boundary moves. The focus ring is deliberately not in this list, for
+           the reason src/button.ts gives beside its own: delaying the affordance that
+           says *this is where you are* is the opposite of what it exists to do. */
+        transition: border-color ${reference('--ui-duration-state')}
+            ${reference('--ui-easing-state')};
+    }
+
+    ::slotted(input)::placeholder,
+    ::slotted(textarea)::placeholder {
+        color: ${reference('--ui-color-text-muted')};
+        /* Firefox lowers a placeholder's opacity by default, which would take the colour
+           below the 4.5:1 it was chosen to clear — a contrast floor undone by a rule
+           nobody wrote. */
+        opacity: 1;
+    }
+
+    /* The boundary completes the mix it already started: the resting border is the
+       surface half way to the text, and hovering finishes the trip. A hover colour of its
+       own would be a fourth name for a point on a line the token layer already draws.
+
+       The guards are measured rather than assumed, the same way ui-button's are: a
+       disabled control still matches :hover, and a readonly one accepts a pointer it will
+       do nothing with. */
+    ::slotted(input:hover:not(:disabled):not([readonly])),
+    ::slotted(textarea:hover:not(:disabled):not([readonly])) {
+        border-color: ${reference('--ui-color-text')};
+    }
+
+    /* A visible focus ring is not decoration: removing it is the single most common way a
+       component stops being usable by keyboard. */
+    ::slotted(input:focus-visible),
+    ::slotted(textarea:focus-visible) {
+        outline: 2px solid ${reference('--ui-color-focus')};
+        outline-offset: 2px;
+    }
+
+    ::slotted(input:disabled),
+    ::slotted(textarea:disabled) {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    /* The error state is not this component's to decide, and it does not decide it:
+       ui-field sets aria-invalid on the control as part of the wiring it already
+       owns, and this rule reads it. So the message under the field and the box around it
+       cannot disagree about whether there is an error — there is one source and it is the
+       one a screen reader is already using. */
+    ::slotted(input[aria-invalid='true']),
+    ::slotted(textarea[aria-invalid='true']) {
+        border-color: ${reference('--ui-color-danger')};
+    }
+`;
+/**
+ * A styled native form control.
+ *
+ * The control is the host's own, slotted in rather than rendered here, and that is the
+ * single decision this component is made of. {@link UiInput} and {@link UiTextarea} carry
+ * the appearance; the element inside carries everything else.
+ */
+class UiControl extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+/**
+ * A text input, styled by the token layer rather than replaced.
+ *
+ * **The `<input>` is yours.** You write it, you set its attributes, and it stays in the
+ * light DOM — so `type`, `required`, `readonly`, `name` and `value` are the platform's
+ * business and there is no pass-through layer to fall out of step with them. It reaches a
+ * form submit for the same reason: a native control inside a `<form>` participates
+ * because it is a native control inside a `<form>`, with no `ElementInternals` and no
+ * value mirroring. That was the open question on the issue, and the answer is that the
+ * shape the accessibility rule forced happens to be the shape that answers it.
+ *
+ * Composes with {@link UiField}, which finds the control through this wrapper and wires
+ * the label, the help, the error and `aria-invalid` to it.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Amount</label>
+ *   <ui-input><input type="number" name="amount" /></ui-input>
+ *   <span slot="help">In BRL, two decimals.</span>
+ * </ui-field>
+ * ```
+ */
+export class UiInput extends UiControl {
+    static { this.styles = control; }
+}
+/**
+ * A multi-line text control, styled by the token layer rather than replaced.
+ *
+ * Everything {@link UiInput} says applies. What differs is two rules: a height to start
+ * at, and resizing left on the vertical axis — a control that cannot grow is one people
+ * fight, and one that grows sideways breaks the layout around it.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Notes</label>
+ *   <ui-textarea><textarea name="notes" rows="4"></textarea></ui-textarea>
+ * </ui-field>
+ * ```
+ */
+export class UiTextarea extends UiControl {
+    static { this.styles = [
+        control,
+        css `
+            ::slotted(textarea) {
+                min-block-size: calc(${reference('--ui-space')} * 10);
+                resize: vertical;
+            }
+        `,
+    ]; }
+}
+// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
+// the warm process Stryker switches mutants in — so by the time a mutant on this line is
+// active the element is already defined under the original name, and no test can observe
+// the change. Outside the runner's reach, not an equivalent mutant.
+customElements.define('ui-input', UiInput);
+// Stryker disable next-line StringLiteral: the same, for the same reason.
+customElements.define('ui-textarea', UiTextarea);
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuC,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBI,SAAS,CAAC,WAAW,CAAC;iBAC5B,SAAS,CAAC,iBAAiB,CAAC;sBACvB,SAAS,CAAC,oBAAoB,CAAC;4BACzB,SAAS,CAAC,mBAAmB,CAAC;yBACjC,SAAS,CAAC,aAAa,CAAC;mBAC9B,SAAS,CAAC,YAAY,CAAC;;;;mCAIP,SAAS,CAAC,qBAAqB,CAAC;cACrD,SAAS,CAAC,mBAAmB,CAAC;;;;;iBAK3B,SAAS,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;wBAgB3B,SAAS,CAAC,iBAAiB,CAAC;;;;;;;6BAOvB,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;wBAiBlC,SAAS,CAAC,mBAAmB,CAAC;;CAErD,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,SAAU,SAAQ,UAAU;IACrB,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;CACJ;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,OAAQ,SAAQ,SAAS;aACT,WAAM,GAAc,OAAO,CAAC;;AAGzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,UAAW,SAAQ,SAAS;aACZ,WAAM,GAAgB;QAC3C,OAAO;QACP,GAAG,CAAA;;uCAE4B,SAAS,CAAC,YAAY,CAAC;;;SAGrD;KACJ,CAAC;;AAGN,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAE3C,0EAA0E;AAC1E,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

package/dist/tokens.d.ts

@@ -31,7 +31,7 @@
  * it does break is code that **enumerates** the set, an exhaustive `Record<Token, string>`
  * above all. The supported shape is the partial map, which is what a theme is anyway.
  */
-export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state"];
+export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit"];
 /** A CSS custom property this package defines and gives a default. */
 export type Token = (typeof tokens)[number];
 /**
@@ -44,7 +44,7 @@ export type Token = (typeof tokens)[number];
  * what it buys is an override surface a host can hold in their head: change the accent and
  * the hover and pressed colours follow, rather than being one more name each.
  */
-export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed"];
+export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed"];
 /** A CSS custom property this package computes rather than declares. */
 export type DerivedToken = (typeof derivedTokens)[number];
 /**

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,oOAqBT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,oIAShB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CA6BpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAY3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,iSA6CT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,kLAmBhB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAuCpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAoB3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}

package/dist/tokens.js

@@ -38,6 +38,19 @@ export const tokens = [
     '--ui-color-text',
     '--ui-color-focus',
     '--ui-color-danger',
+    // The dim behind a modal, and a *ground* rather than a derivation even though every
+    // other neutral here is derived. A derived neutral mixes toward the text, which is
+    // what makes one formula right in both schemes — and it is exactly wrong for this
+    // one: on a dark page the text is the light pole, so the mix would *lighten* the
+    // page behind the dialog instead of dimming it. A scrim dims in both schemes, so it
+    // carries a literal and appears in neither `darkScheme` nor `formulas`.
+    //
+    // **This departs from RFC 0002**, whose survey of the queued components answered
+    // *text at an alpha* for this role. That table asks whether a role needs a new hue,
+    // and the answer to that question is still no — what it could not weigh, with no
+    // overlay yet written to judge against, is which pole the mix should run toward. The
+    // proposal says so in the same breath: read as a judgement, not a measurement.
+    '--ui-color-scrim',
     '--ui-radius',
     '--ui-space',
     '--ui-font',
@@ -52,6 +65,17 @@ export const tokens = [
     // ground and a component reads it directly.
     '--ui-duration-100',
     '--ui-easing-state',
+    // The pair `--ui-easing-state` promised, arriving with the overlay that has an enter
+    // and an exit to name — `ui-dialog`. A state change reverses mid-flight and wants a
+    // symmetric curve; an overlay does not reverse, it arrives and it leaves, and the two
+    // directions are asked to feel different on purpose.
+    //
+    // No duration steps come with them. The scale is ordinal with gaps precisely so a step
+    // can be inserted when something needs one, and the dialog needs no duration the state
+    // step does not already give it — inventing `--ui-duration-200` before a component
+    // judges it against something is the claim ROADMAP.md declines to make about Zag.
+    '--ui-easing-enter',
+    '--ui-easing-exit',
 ];
 /**
  * The roles computed from the grounds rather than declared beside them.
@@ -65,6 +89,16 @@ export const tokens = [
  */
 export const derivedTokens = [
     '--ui-duration-state',
+    // The boundary of a control, and the text inside one that is not a value yet. Both
+    // arrive with `ui-input`, and both are the same mix at different strengths — which is
+    // what makes them one category rather than two: a border and a placeholder are the
+    // surface travelling toward the text, stopped at the contrast each one owes.
+    //
+    // The percentages are read off a measurement rather than chosen. A control's boundary
+    // is what identifies the component, so WCAG 1.4.11 asks 3:1 against the surface, and
+    // a placeholder is text, so 1.4.3 asks 4.5:1. `tests/tokens.test.ts` holds both.
+    '--ui-color-border',
+    '--ui-color-text-muted',
     // `hover` matches the pseudo-class it answers to; `pressed` deliberately does not —
     // `--ui-color-active` would read as *the active item* as readily as *the pressed
     // control*, and the role this implements was named `accent hover / pressed`.
@@ -94,6 +128,11 @@ export const defaults = {
     // because no axe rule does.
     '--ui-color-focus': '#b45309',
     '--ui-color-danger': '#b91c1c',
+    // Half black. Enough to push the page behind a modal out of the reading order for the
+    // eye as well as for the accessibility tree, and not so much that the context a modal
+    // is *about* stops being visible. The alpha is the whole point, so this is the one
+    // default that is not an opaque hex.
+    '--ui-color-scrim': 'rgb(0 0 0 / 0.5)',
     '--ui-radius': '0.375rem',
     '--ui-space': '0.5rem',
     '--ui-font': 'system-ui, sans-serif',
@@ -108,6 +147,11 @@ export const defaults = {
     // for. `enter` will want an ease-out and `exit` an ease-in, and they arrive with the
     // overlays that have an enter and an exit to name.
     '--ui-easing-state': 'ease-in-out',
+    // Fast out of the gate and settling at the end, which is what makes an arriving
+    // overlay feel like it was already on its way. The exit is its mirror: slow to let go
+    // and quick to be gone, so a dismissal does not linger over a decision already made.
+    '--ui-easing-enter': 'ease-out',
+    '--ui-easing-exit': 'ease-in',
 };
 /**
  * A ground as it is written inside a formula: the name, with its own default behind it.
@@ -164,6 +208,14 @@ export const formulas = {
     '--ui-color-pressed': mix('--ui-color-text', 14, '--ui-color-surface'),
     '--ui-color-accent-hover': mix('--ui-color-text', 12, '--ui-color-accent'),
     '--ui-color-accent-pressed': mix('--ui-color-text', 22, '--ui-color-accent'),
+    // 3.39:1 on the light surface and 3.96:1 on the dark one, against a floor of 3. The
+    // step below clears neither — 45% is 2.94 in light, which is what a value chosen by
+    // eye would have shipped.
+    '--ui-color-border': mix('--ui-color-text', 50, '--ui-color-surface'),
+    // 5.24:1 and 6.07:1, against a floor of 4.5. Not the 60% that first cleared it: that
+    // is 4.52 in light, a rounding error from failing, and a default nobody could then
+    // retune without breaking a floor they were not thinking about.
+    '--ui-color-text-muted': mix('--ui-color-text', 65, '--ui-color-surface'),
 };
 /**
  * The grounds whose value differs when the page is rendered dark.

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,WAAW;IACX,kFAAkF;IAClF,sFAAsF;IACtF,+CAA+C;IAC/C,EAAE;IACF,uFAAuF;IACvF,sFAAsF;IACtF,uFAAuF;IACvF,oFAAoF;IACpF,4CAA4C;IAC5C,mBAAmB;IACnB,mBAAmB;CACb,CAAC;AAKX;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,qBAAqB;IACrB,oFAAoF;IACpF,iFAAiF;IACjF,6EAA6E;IAC7E,kBAAkB;IAClB,oBAAoB;IACpB,yBAAyB;IACzB,2BAA2B;CACrB,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,mFAAmF;IACnF,qFAAqF;IACrF,gFAAgF;IAChF,mFAAmF;IACnF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,4BAA4B;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;IACpC,sFAAsF;IACtF,iFAAiF;IACjF,yEAAyE;IACzE,mBAAmB,EAAE,OAAO;IAC5B,kFAAkF;IAClF,qFAAqF;IACrF,4EAA4E;IAC5E,qFAAqF;IACrF,qFAAqF;IACrF,mDAAmD;IACnD,mBAAmB,EAAE,aAAa;CACrC,CAAC;AAEF;;;;;;;;;GASG;AACH,SAAS,MAAM,CAAC,IAAW;IACvB,OAAO,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;AAC7C,CAAC;AAED,gFAAgF;AAChF,SAAS,GAAG,CAAC,UAAiB,EAAE,MAAc,EAAE,UAAiB;IAC7D,OAAO,uBAAuB,MAAM,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC;AAClG,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C;IAC5D,oFAAoF;IACpF,oFAAoF;IACpF,qBAAqB,EAAE,MAAM,CAAC,mBAAmB,CAAC;IAClD,qFAAqF;IACrF,sFAAsF;IACtF,uFAAuF;IACvF,qEAAqE;IACrE,kBAAkB,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC,EAAE,oBAAoB,CAAC;IACnE,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,oBAAoB,CAAC;IACtE,yBAAyB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,mBAAmB,CAAC;IAC1E,2BAA2B,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,mBAAmB,CAAC;CAC/E,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6C;IAChE,qFAAqF;IACrF,iFAAiF;IACjF,oCAAoC;IACpC,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,oFAAoF;IACpF,sFAAsF;IACtF,mBAAmB,EAAE,SAAS;CACjC,CAAC;AAEF,uFAAuF;AACvF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,MAAM;SACjB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC;IAC9G,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,kFAAkF;IAClF,qFAAqF;IACrF,sFAAsF;IACtF,gFAAgF;IAChF,MAAM,SAAS,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,aAAa,CAAC;SAC1C,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC;SACvC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,OAAO;QACH,yCAAyC,OAAO,KAAK;QACrD,yDAAyD,SAAS,UAAU;KAC/E,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACnB,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,oFAAoF;IACpF,mFAAmF;IACnF,kFAAkF;IAClF,iFAAiF;IACjF,oFAAoF;IACpF,wEAAwE;IACxE,EAAE;IACF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,qFAAqF;IACrF,+EAA+E;IAC/E,kBAAkB;IAClB,aAAa;IACb,YAAY;IACZ,WAAW;IACX,kFAAkF;IAClF,sFAAsF;IACtF,+CAA+C;IAC/C,EAAE;IACF,uFAAuF;IACvF,sFAAsF;IACtF,uFAAuF;IACvF,oFAAoF;IACpF,4CAA4C;IAC5C,mBAAmB;IACnB,mBAAmB;IACnB,qFAAqF;IACrF,oFAAoF;IACpF,sFAAsF;IACtF,qDAAqD;IACrD,EAAE;IACF,uFAAuF;IACvF,uFAAuF;IACvF,mFAAmF;IACnF,kFAAkF;IAClF,mBAAmB;IACnB,kBAAkB;CACZ,CAAC;AAKX;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,qBAAqB;IACrB,mFAAmF;IACnF,sFAAsF;IACtF,mFAAmF;IACnF,6EAA6E;IAC7E,EAAE;IACF,sFAAsF;IACtF,qFAAqF;IACrF,iFAAiF;IACjF,mBAAmB;IACnB,uBAAuB;IACvB,oFAAoF;IACpF,iFAAiF;IACjF,6EAA6E;IAC7E,kBAAkB;IAClB,oBAAoB;IACpB,yBAAyB;IACzB,2BAA2B;CACrB,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,mFAAmF;IACnF,qFAAqF;IACrF,gFAAgF;IAChF,mFAAmF;IACnF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,4BAA4B;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,sFAAsF;IACtF,sFAAsF;IACtF,mFAAmF;IACnF,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB;IACtC,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;IACpC,sFAAsF;IACtF,iFAAiF;IACjF,yEAAyE;IACzE,mBAAmB,EAAE,OAAO;IAC5B,kFAAkF;IAClF,qFAAqF;IACrF,4EAA4E;IAC5E,qFAAqF;IACrF,qFAAqF;IACrF,mDAAmD;IACnD,mBAAmB,EAAE,aAAa;IAClC,gFAAgF;IAChF,sFAAsF;IACtF,qFAAqF;IACrF,mBAAmB,EAAE,UAAU;IAC/B,kBAAkB,EAAE,SAAS;CAChC,CAAC;AAEF;;;;;;;;;GASG;AACH,SAAS,MAAM,CAAC,IAAW;IACvB,OAAO,OAAO,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;AAC7C,CAAC;AAED,gFAAgF;AAChF,SAAS,GAAG,CAAC,UAAiB,EAAE,MAAc,EAAE,UAAiB;IAC7D,OAAO,uBAAuB,MAAM,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC;AAClG,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C;IAC5D,oFAAoF;IACpF,oFAAoF;IACpF,qBAAqB,EAAE,MAAM,CAAC,mBAAmB,CAAC;IAClD,qFAAqF;IACrF,sFAAsF;IACtF,uFAAuF;IACvF,qEAAqE;IACrE,kBAAkB,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC,EAAE,oBAAoB,CAAC;IACnE,oBAAoB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,oBAAoB,CAAC;IACtE,yBAAyB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,mBAAmB,CAAC;IAC1E,2BAA2B,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,mBAAmB,CAAC;IAC5E,oFAAoF;IACpF,oFAAoF;IACpF,0BAA0B;IAC1B,mBAAmB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,oBAAoB,CAAC;IACrE,qFAAqF;IACrF,mFAAmF;IACnF,gEAAgE;IAChE,uBAAuB,EAAE,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,oBAAoB,CAAC;CAC5E,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6C;IAChE,qFAAqF;IACrF,iFAAiF;IACjF,oCAAoC;IACpC,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,oFAAoF;IACpF,sFAAsF;IACtF,mBAAmB,EAAE,SAAS;CACjC,CAAC;AAEF,uFAAuF;AACvF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,MAAM;SACjB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC;IAC9G,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,kFAAkF;IAClF,qFAAqF;IACrF,sFAAsF;IACtF,gFAAgF;IAChF,MAAM,SAAS,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,aAAa,CAAC;SAC1C,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC;SACvC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,OAAO;QACH,yCAAyC,OAAO,KAAK;QACrD,yDAAyD,SAAS,UAAU;KAC/E,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",