@rak200/ui 0.2.5 → 0.2.7

package/README.md

@@ -37,6 +37,13 @@ npm install @rak200/ui
 <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.** One component and the token layer, 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).
+**v0.** Three components — `<ui-button>`, `<ui-field>` and `<ui-dialog>` — 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/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACpC,gBAAyB,MAAM,0BAoE7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACpC,gBAAyB,MAAM,0BA6E7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/button.js

@@ -42,6 +42,15 @@ export class UiButton extends LitElement {
             border-radius: ${reference('--ui-radius')};
             padding: ${reference('--ui-space')} calc(${reference('--ui-space')} * 2);
             cursor: pointer;
+            /* Measured in WebKit and in Chromium under a phone viewport: the platform
+           paints its own wash on tap — 40% black in WebKit, the Android blue in
+           Chromium — over whatever the component decided, so the pressed colour below
+           arrives underneath it and is not what a finger sees.
+
+           Removing it is only correct because the pressed state exists. Until it did,
+           this wash was the ONLY response a touch got, and turning it off would have
+           left a button that answers a finger with nothing. */
+            -webkit-tap-highlight-color: transparent;
             /* Only the colour moves. The focus ring is deliberately not in this list:
            delaying the affordance that says *this is where you are* is the opposite of
            what it exists to do. */

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QA4EI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAhG4B,WAAM,GAAG,GAAG,CAAA;;;;;;;2BAOd,SAAS,CAAC,WAAW,CAAC;;6BAEpB,SAAS,CAAC,aAAa,CAAC;uBAC9B,SAAS,CAAC,YAAY,CAAC,SAAS,SAAS,CAAC,YAAY,CAAC;;;;;2CAKnC,SAAS,CAAC,qBAAqB,CAAC;kBACzD,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;;;iCAWf,SAAS,CAAC,kBAAkB,CAAC;;;;;0BAKpC,SAAS,CAAC,mBAAmB,CAAC;qBACnC,SAAS,CAAC,4BAA4B,CAAC;;;;0BAIlC,SAAS,CAAC,oBAAoB,CAAC;qBACpC,SAAS,CAAC,iBAAiB,CAAC;;;;;;;;;0BASvB,SAAS,CAAC,yBAAyB,CAAC;;;;0BAIpC,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;0BAS7B,SAAS,CAAC,2BAA2B,CAAC;;;;;0BAKtC,SAAS,CAAC,oBAAoB,CAAC;;;KAGpD,AApE8B,CAoE7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAqFI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAzG4B,WAAM,GAAG,GAAG,CAAA;;;;;;;2BAOd,SAAS,CAAC,WAAW,CAAC;;6BAEpB,SAAS,CAAC,aAAa,CAAC;uBAC9B,SAAS,CAAC,YAAY,CAAC,SAAS,SAAS,CAAC,YAAY,CAAC;;;;;;;;;;;;;;2CAcnC,SAAS,CAAC,qBAAqB,CAAC;kBACzD,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;;;iCAWf,SAAS,CAAC,kBAAkB,CAAC;;;;;0BAKpC,SAAS,CAAC,mBAAmB,CAAC;qBACnC,SAAS,CAAC,4BAA4B,CAAC;;;;0BAIlC,SAAS,CAAC,oBAAoB,CAAC;qBACpC,SAAS,CAAC,iBAAiB,CAAC;;;;;;;;;0BASvB,SAAS,CAAC,yBAAyB,CAAC;;;;0BAIpC,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;0BAS7B,SAAS,CAAC,2BAA2B,CAAC;;;;;0BAKtC,SAAS,CAAC,oBAAoB,CAAC;;;KAGpD,AA7E8B,CA6E7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

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/index.d.ts

@@ -1,4 +1,5 @@
 export { UiButton, type ButtonVariant } from './button.js';
+export { UiDialog } from './dialog.js';
 export { UiField } from './field.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,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,5 @@
 export { UiButton } from './button.js';
+export { UiDialog } from './dialog.js';
 export { UiField } from './field.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,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,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];
 /**

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,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,CAuCpD,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"}

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.
@@ -94,6 +118,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 +137,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.

package/dist/tokens.js.map

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

package/package.json

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