@rak200/ui 0.2.14 → 0.2.16

package/README.md

@@ -86,9 +86,9 @@ components; `docs/` is what describes them.
 
 ## Status
 
-**v0.** Twelve components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
-`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`
-and `<ui-icon>` — the token layer
+**v0.** Fifteen components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
+`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`,
+`<ui-tooltip>`, `<ui-toaster>`, `<ui-toast>` and `<ui-icon>` — the token layer
 under them, and an adopted glyph set, 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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;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;CA0JpC;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;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;CAmLpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}

package/dist/field.js

@@ -154,7 +154,14 @@ export class UiField extends LitElement {
         // format requirement, which is exactly the error suggestion the user needs in order
         // to recover (WCAG 3.3.3) — dropping it at the moment it becomes useful is the
         // opposite of helping.
-        const described = [error, help].filter((id) => id !== undefined);
+        //
+        // And a description this field did not write survives all of it, which is the same
+        // courtesy the `id` above gets and for the same reason: something this element
+        // cannot see may have put it there. `<ui-tooltip>` is the first to do so, and it
+        // was measured being erased — not on the first association, which runs before the
+        // tooltip wires, but on the next one, when a re-render moves the help text and the
+        // list is rebuilt from what this field alone knows about.
+        const described = [error, help, ...this.#foreign(control, uid, [error, help])].filter((id) => id !== undefined);
         if (described.length > 0) {
             control.setAttribute('aria-describedby', described.join(' '));
         }
@@ -168,6 +175,20 @@ export class UiField extends LitElement {
             control.setAttribute('aria-invalid', 'true');
         }
     }
+    /**
+     * The ids already describing `control` that this field is not responsible for.
+     *
+     * Everything it could have written is excluded rather than remembered: the two ids it
+     * generates from `uid`, and whatever the help and error elements are called right now,
+     * which may be ids the host supplied. What is left belongs to somebody else and is
+     * carried forward in place rather than dropped.
+     */
+    #foreign(control, uid, mine) {
+        const written = new Set([...mine, `${uid}-help`, `${uid}-error`]);
+        return (control.getAttribute('aria-describedby') ?? '')
+            .split(' ')
+            .filter((id) => id !== '' && !written.has(id));
+    }
     /**
      * Gives the control its accessible name from whatever fills the label slot.
      *

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

@@ -7,5 +7,7 @@ export { UiIcon, register } from './icon.js';
 export { UiInput, UiTextarea } from './input.js';
 export { UiRadio, UiRadioGroup, type RadioOrientation } from './radio.js';
 export { UiSelect } from './select.js';
+export { UiToast, UiToaster, type ToastVariant } from './toast.js';
+export { UiTooltip } from './tooltip.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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,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

@@ -7,5 +7,7 @@ export { UiIcon, register } from './icon.js';
 export { UiInput, UiTextarea } from './input.js';
 export { UiRadio, UiRadioGroup } from './radio.js';
 export { UiSelect } from './select.js';
+export { UiToast, UiToaster } from './toast.js';
+export { UiTooltip } from './tooltip.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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/dist/toast.d.ts

@@ -0,0 +1,158 @@
+import { LitElement, type TemplateResult } from 'lit';
+/** What a toast is telling the reader, which decides how it looks *and* how it is announced. */
+export type ToastVariant = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * The live regions a toast is announced through, and the box the stack is drawn in.
+ *
+ * **One container, two regions, and the count is the number of politenesses rather than
+ * the number of messages.** A live region has to be in the document *before* the text is
+ * put into it — a region that arrives with its content already inside is the single most
+ * common way a toast is never announced — so the regions are rendered on connection and
+ * never removed, and a toast is added to whichever one its variant names.
+ *
+ * That is the whole reason there are two. `aria-live` cannot vary per message inside one
+ * region, and giving each toast its own `aria-live` would make every message its own
+ * region root, which is the shape this component exists to avoid. Two regions that outlive
+ * every message answer *politeness is per toast* without ever creating one.
+ *
+ * **Neither region carries `role="alert"` or `role="status"`**, and that is not a shortcut.
+ * Both roles imply `aria-atomic="true"`, so every arrival re-announces the whole stack —
+ * three toasts up means the third one reads all three. `aria-live` alone leaves
+ * `aria-atomic` at its `false` default, which announces the toast that arrived and nothing
+ * else. The semantics of `role="alert"` are `aria-live="assertive"` plus that atomicity;
+ * this keeps the half that is right for a stack.
+ *
+ * ## Where it sits
+ *
+ * A `popover`, for the reason `<ui-tooltip>` is one: the top layer escapes every stacking
+ * context and every `overflow: hidden` above it, so this package still names no `z-index`
+ * and opens no layering category — the third overlay in a row not to. `manual`, because an
+ * `auto` popover light-dismisses, and a toast that vanished on the next click somewhere
+ * else would be a notice the user never read.
+ *
+ * It is shown once, on connection, and never hidden — which costs the one thing promotion
+ * would have bought. A modal `<dialog>` opened *after* the toaster connects sits above it
+ * in the top layer, and re-promoting the stack per message would fix that ordering and
+ * break the announcement, by taking the region out of the tree and putting it back with
+ * content already in it. The trade is not close, and it is not the real limit anyway: a
+ * modal makes the rest of the document **inert**, so a toaster outside an open modal is out
+ * of the accessibility tree whichever layer it is in. `docs/toast.md` says where to put one
+ * for a page that toasts from inside a dialog.
+ *
+ * @example
+ * ```html
+ * <ui-toaster></ui-toaster>
+ * ```
+ */
+export declare class UiToaster extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+/**
+ * One message in a {@link UiToaster}.
+ *
+ * ## The variant decides three things, and that is the design
+ *
+ * `variant` is not only how the toast looks. It decides how urgently the message is
+ * announced and whether it expires, because those three answers are one answer: **an error
+ * is the message the reader has to see, hear, and keep.** So `danger` is announced
+ * assertively and never times out, and every other variant is polite and does.
+ *
+ * The alternative was a second attribute for politeness, and it was rejected for what it
+ * makes possible rather than for what it costs: two knobs can disagree, and a polite error
+ * or an assertive success is a defect nothing reports. The issue behind this component
+ * asked for `assertive` to be *reserved for errors* — a rule the API can hold is worth more
+ * than a rule the documentation states. What it gives up is stated in `docs/toast.md`:
+ * there is no way to write an assertive success.
+ *
+ * **The colour is redundant and must stay redundant.** WCAG 1.4.1 asks that colour never be
+ * the only carrier of information, and here it never is: the message says what happened and
+ * the edge agrees with it. That is also what makes the component correct under
+ * `forced-colors`, where the edge goes flat and nothing is lost.
+ *
+ * ## Dismissal
+ *
+ * Manual always, timed unless the toast is an error or `duration` is `0`. There is
+ * deliberately no way to remove the dismiss button: a toast that cannot be dismissed *and*
+ * does not expire is a permanent obstruction, and that combination is one attribute away in
+ * every kit that offers the knob.
+ *
+ * The timer stops while the pointer is over the toast or the focus is inside it, and starts
+ * again when both have left — a notice must not expire while it is being read, which is
+ * WCAG 2.2.1 aimed at the only time limit this component has.
+ *
+ * **A dismissed toast removes itself.** `ui-dismiss` is dispatched first, while the element
+ * is still in the tree so the event can reach a listener above it; a framework rendering a
+ * list of toasts drops the entry there rather than leaving the element to be put back.
+ *
+ * @example
+ * ```html
+ * <ui-toaster>
+ *   <ui-toast variant="success">Saved.</ui-toast>
+ * </ui-toaster>
+ * ```
+ */
+export declare class UiToast extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult;
+    static readonly properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        duration: {
+            type: NumberConstructor;
+        };
+        dismissLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    /**
+     * What this toast is telling the reader.
+     *
+     * Reflected, because it is what the stylesheet selects on — and because it is the
+     * attribute a host reads back to find out how the toast will behave.
+     *
+     * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+     * states beside its own.
+     */
+    variant: ToastVariant;
+    /**
+     * How long the toast waits before dismissing itself, in milliseconds; `0` never.
+     *
+     * Ignored when the variant is `danger`, which never expires. Not a token, for the
+     * reason the default carries: every duration name collapses under reduced motion, and
+     * a dwell time that collapsed would take the notice away from the reader who asked for
+     * less movement.
+     */
+    duration: number;
+    /**
+     * The accessible name of the dismiss button.
+     *
+     * This package's one user-facing string, and an attribute precisely because it is one:
+     * a page that is not in English replaces it rather than forking the component. It names
+     * the button and never appears on screen, which is why there is no way to leave it
+     * empty — an unnamed control is the failure this default exists to prevent.
+     */
+    dismissLabel: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+    /**
+     * Runs the exit, announces it, and takes the toast off the page.
+     *
+     * Bound as a field so it can be handed to a listener and called as a method without
+     * either losing `this`.
+     */
+    readonly dismiss: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-toaster': UiToaster;
+        'ui-toast': UiToast;
+    }
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,gGAAgG;AAChG,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAqBrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACrC,gBAAyB,MAAM,0BAiD7B;IAEO,iBAAiB,IAAI,IAAI;IAazB,MAAM,IAAI,cAAc;CAMpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAqH7B;IAEF,gBAAyB,UAAU;;;;;;;;;;;;MAIjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,YAAY,CAAU;IAE/B;;;;;;;OAOG;IACH,QAAQ,SAAS;IAEjB;;;;;;;OAOG;IACH,YAAY,SAAa;IAoChB,iBAAiB,IAAI,IAAI;IAwBzB,oBAAoB,IAAI,IAAI;IAO5B,UAAU,IAAI,IAAI;IAQlB,MAAM,IAAI,cAAc;IAsBjC;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,QAAO,IAAI,CAEzB;CA0DL;AAWD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;QACxB,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}

package/dist/toast.js

@@ -0,0 +1,494 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/** The class the exit is carried by, on the toast for exactly as long as the exit runs. */
+const closing = 'closing';
+/**
+ * How long a toast that is not an error stays, in milliseconds.
+ *
+ * **Deliberately not a token, and that is the sharpest thing in this file.** Every
+ * `--ui-duration-*` name is collapsed to `0.01ms` by `tokenStyleSheet()` when the reader
+ * has asked for less motion — which is right for a transition and catastrophic for a dwell
+ * time: a notice would vanish before it could be read, and only for the people least able
+ * to chase it. A duration a component *waits* is not motion, so it is an attribute with a
+ * default rather than a name in the scale.
+ *
+ * Five seconds is read off a rate rather than chosen: a short notice is eight or ten words,
+ * and 180 words a minute is the unhurried end of silent reading — about three seconds — with
+ * the rest of it spent noticing that something arrived at all.
+ */
+const dwell = 5000;
+/**
+ * The live regions a toast is announced through, and the box the stack is drawn in.
+ *
+ * **One container, two regions, and the count is the number of politenesses rather than
+ * the number of messages.** A live region has to be in the document *before* the text is
+ * put into it — a region that arrives with its content already inside is the single most
+ * common way a toast is never announced — so the regions are rendered on connection and
+ * never removed, and a toast is added to whichever one its variant names.
+ *
+ * That is the whole reason there are two. `aria-live` cannot vary per message inside one
+ * region, and giving each toast its own `aria-live` would make every message its own
+ * region root, which is the shape this component exists to avoid. Two regions that outlive
+ * every message answer *politeness is per toast* without ever creating one.
+ *
+ * **Neither region carries `role="alert"` or `role="status"`**, and that is not a shortcut.
+ * Both roles imply `aria-atomic="true"`, so every arrival re-announces the whole stack —
+ * three toasts up means the third one reads all three. `aria-live` alone leaves
+ * `aria-atomic` at its `false` default, which announces the toast that arrived and nothing
+ * else. The semantics of `role="alert"` are `aria-live="assertive"` plus that atomicity;
+ * this keeps the half that is right for a stack.
+ *
+ * ## Where it sits
+ *
+ * A `popover`, for the reason `<ui-tooltip>` is one: the top layer escapes every stacking
+ * context and every `overflow: hidden` above it, so this package still names no `z-index`
+ * and opens no layering category — the third overlay in a row not to. `manual`, because an
+ * `auto` popover light-dismisses, and a toast that vanished on the next click somewhere
+ * else would be a notice the user never read.
+ *
+ * It is shown once, on connection, and never hidden — which costs the one thing promotion
+ * would have bought. A modal `<dialog>` opened *after* the toaster connects sits above it
+ * in the top layer, and re-promoting the stack per message would fix that ordering and
+ * break the announcement, by taking the region out of the tree and putting it back with
+ * content already in it. The trade is not close, and it is not the real limit anyway: a
+ * modal makes the rest of the document **inert**, so a toaster outside an open modal is out
+ * of the accessibility tree whichever layer it is in. `docs/toast.md` says where to put one
+ * for a page that toasts from inside a dialog.
+ *
+ * @example
+ * ```html
+ * <ui-toaster></ui-toaster>
+ * ```
+ */
+export class UiToaster extends LitElement {
+    static { this.styles = css `
+        :host {
+            /* The user agent's own popover box is a centred panel with a border and a
+               padding of its own. All of it is displaced, because what this is is a
+               corner of the viewport rather than a dialog. */
+            position: fixed;
+            inset-block: auto 0;
+            inset-inline: auto 0;
+            margin: 0;
+            border: none;
+            background: none;
+            /* The stack is wider than a phrase and narrower than the page. Capped in the
+               space token so it scales with everything else a host retunes, and floored
+               against the viewport so a narrow screen gets the margin rather than a
+               horizontal scrollbar. */
+            box-sizing: border-box;
+            inline-size: min(100%, calc(${reference('--ui-space')} * 44));
+            padding: calc(${reference('--ui-space')} * 2);
+            /* The box covers a corner of the page whether or not it holds anything, so it
+               takes no clicks; a toast puts them back on itself. Without this a page has a
+               dead zone in the corner for as long as a toaster is on it. */
+            pointer-events: none;
+        }
+
+        /* display is named under :popover-open and nowhere else, and that is the rule
+           src/dialog.ts states beside its own: the user agent hides a closed popover with
+           display: none, and a rule here that names display unconditionally outranks it —
+           so a toaster whose popover never opened would render in the page flow instead of
+           being invisible. */
+        :host(:popover-open) {
+            display: flex;
+            flex-direction: column;
+            gap: ${reference('--ui-space')};
+        }
+
+        /* The polite region is first and the assertive one second, so an error sits nearest
+           the corner the stack grows from — which is where the eye already is. The order is
+           a rendering decision and nothing else: what a screen reader does with either
+           region is decided by its aria-live, not by which came first. */
+        div {
+            display: flex;
+            flex-direction: column;
+            gap: ${reference('--ui-space')};
+            min-inline-size: 0;
+        }
+
+        slot::slotted(*) {
+            pointer-events: auto;
+        }
+    `; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Written here rather than in the template, because it is the host's own attribute
+        // and Lit renders into the shadow root. Set before it is shown, which is the order
+        // showPopover() requires: it throws on an element carrying no popover attribute.
+        this.setAttribute('popover', 'manual');
+        // No guard, and none is reachable: removing a showing popover from the document
+        // hides it, so an element arriving at connectedCallback is never already open.
+        this.showPopover();
+    }
+    render() {
+        return html `
+            <div aria-live="polite" part="polite"><slot name="polite"></slot></div>
+            <div aria-live="assertive" part="assertive"><slot name="assertive"></slot></div>
+        `;
+    }
+}
+/**
+ * One message in a {@link UiToaster}.
+ *
+ * ## The variant decides three things, and that is the design
+ *
+ * `variant` is not only how the toast looks. It decides how urgently the message is
+ * announced and whether it expires, because those three answers are one answer: **an error
+ * is the message the reader has to see, hear, and keep.** So `danger` is announced
+ * assertively and never times out, and every other variant is polite and does.
+ *
+ * The alternative was a second attribute for politeness, and it was rejected for what it
+ * makes possible rather than for what it costs: two knobs can disagree, and a polite error
+ * or an assertive success is a defect nothing reports. The issue behind this component
+ * asked for `assertive` to be *reserved for errors* — a rule the API can hold is worth more
+ * than a rule the documentation states. What it gives up is stated in `docs/toast.md`:
+ * there is no way to write an assertive success.
+ *
+ * **The colour is redundant and must stay redundant.** WCAG 1.4.1 asks that colour never be
+ * the only carrier of information, and here it never is: the message says what happened and
+ * the edge agrees with it. That is also what makes the component correct under
+ * `forced-colors`, where the edge goes flat and nothing is lost.
+ *
+ * ## Dismissal
+ *
+ * Manual always, timed unless the toast is an error or `duration` is `0`. There is
+ * deliberately no way to remove the dismiss button: a toast that cannot be dismissed *and*
+ * does not expire is a permanent obstruction, and that combination is one attribute away in
+ * every kit that offers the knob.
+ *
+ * The timer stops while the pointer is over the toast or the focus is inside it, and starts
+ * again when both have left — a notice must not expire while it is being read, which is
+ * WCAG 2.2.1 aimed at the only time limit this component has.
+ *
+ * **A dismissed toast removes itself.** `ui-dismiss` is dispatched first, while the element
+ * is still in the tree so the event can reach a listener above it; a framework rendering a
+ * list of toasts drops the entry there rather than leaving the element to be put back.
+ *
+ * @example
+ * ```html
+ * <ui-toaster>
+ *   <ui-toast variant="success">Saved.</ui-toast>
+ * </ui-toaster>
+ * ```
+ */
+export class UiToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What this toast is telling the reader.
+         *
+         * Reflected, because it is what the stylesheet selects on — and because it is the
+         * attribute a host reads back to find out how the toast will behave.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * states beside its own.
+         */
+        this.variant = 'info';
+        /**
+         * How long the toast waits before dismissing itself, in milliseconds; `0` never.
+         *
+         * Ignored when the variant is `danger`, which never expires. Not a token, for the
+         * reason the default carries: every duration name collapses under reduced motion, and
+         * a dwell time that collapsed would take the notice away from the reader who asked for
+         * less movement.
+         */
+        this.duration = dwell;
+        /**
+         * The accessible name of the dismiss button.
+         *
+         * This package's one user-facing string, and an attribute precisely because it is one:
+         * a page that is not in English replaces it rather than forking the component. It names
+         * the button and never appears on screen, which is why there is no way to leave it
+         * empty — an unnamed control is the failure this default exists to prevent.
+         */
+        this.dismissLabel = 'Dismiss';
+        /** The pending auto-dismissal; `0` when there is none, which is what `clearTimeout` reads. */
+        this.#timer = 0;
+        /**
+         * Takes every listener off at once, for the reason `src/tooltip.ts` gives beside its
+         * own: half of these leak invisibly if they are removed by name, and one `abort()` is
+         * one thing to get right.
+         */
+        this.#listeners = new AbortController();
+        /** Holds the clock while the toast is being read, which is the whole of WCAG 2.2.1 here. */
+        this.#hold = () => {
+            this.#stop();
+        };
+        /** Starts it again once the pointer and the focus have both left. */
+        this.#resume = () => {
+            this.#start();
+        };
+        /**
+         * Dismisses on Escape.
+         *
+         * Bound to this element rather than to the document, which is the opposite of what
+         * `<ui-tooltip>` needed and for the opposite reason: a tooltip is shown by a pointer
+         * that leaves the focus elsewhere, and a toast is only reached by putting focus in it.
+         * A document listener here would dismiss a toast the reader was not looking at.
+         */
+        this.#onKey = (event) => {
+            if (event.key === 'Escape') {
+                this.dismiss();
+            }
+        };
+        /**
+         * Runs the exit, announces it, and takes the toast off the page.
+         *
+         * Bound as a field so it can be handed to a listener and called as a method without
+         * either losing `this`.
+         */
+        this.dismiss = () => {
+            void this.#exit();
+        };
+    }
+    static { this.styles = css `
+        :host {
+            display: flex;
+            align-items: flex-start;
+            gap: ${reference('--ui-space')};
+            box-sizing: border-box;
+            padding: ${reference('--ui-space')} calc(${reference('--ui-space')} * 1.5);
+            border: 1px solid ${reference('--ui-color-border')};
+            /* The edge, and the shorthand after the border above rather than a colour
+               beside it: the width and the style are this rule's as much as the hue is.
+               info reads the accent, which is the colour a page already answers with. */
+            border-inline-start: calc(${reference('--ui-space')} / 2) solid
+                ${reference('--ui-color-accent')};
+            border-radius: ${reference('--ui-radius')};
+            background: ${reference('--ui-color-surface')};
+            color: ${reference('--ui-color-text')};
+            font-family: ${reference('--ui-font')};
+            /* Lifted, because it sits over the page rather than in it — and bounded as
+               well as lifted, for the reason src/card.ts gives: a shadow is one value in
+               both schemes and does almost nothing on a dark page, where the derived
+               boundary is what separates the surface from what is under it. */
+            box-shadow: ${reference('--ui-elevation-raised')};
+            /* The toaster takes no clicks so it does not steal a corner of the page. This
+               is the part that is not the corner. */
+            pointer-events: auto;
+
+            opacity: 1;
+            translate: 0 0;
+            transition:
+                opacity ${reference('--ui-duration-state')} ${reference('--ui-easing-enter')},
+                translate ${reference('--ui-duration-state')} ${reference('--ui-easing-enter')};
+        }
+
+        :host([variant='success']) {
+            border-inline-start-color: ${reference('--ui-color-success')};
+        }
+
+        :host([variant='warning']) {
+            border-inline-start-color: ${reference('--ui-color-warning')};
+        }
+
+        :host([variant='danger']) {
+            border-inline-start-color: ${reference('--ui-color-danger')};
+        }
+
+        /* Where the entrance comes from. Without it there is nothing to transition out of:
+           a toast goes from not rendered to laid out in one frame, and a transition needs a
+           before-change style that an unrendered element does not have. */
+        @starting-style {
+            :host {
+                opacity: 0;
+                translate: 0 calc(${reference('--ui-space')} * 2);
+            }
+        }
+
+        /* The exit, driven from a class rather than from the element leaving: the removal
+           is what this is waiting for, so an exit keyed on it would never run. */
+        :host(.closing) {
+            opacity: 0;
+            translate: 0 calc(${reference('--ui-space')} * 2);
+            transition-timing-function: ${reference('--ui-easing-exit')};
+        }
+
+        div {
+            /* The message takes the room the button does not, and may wrap inside it — a
+               flex item refuses to shrink below its content without this. */
+            flex: 1;
+            min-inline-size: 0;
+        }
+
+        button {
+            flex: none;
+            display: grid;
+            place-items: center;
+            /* WCAG 2.2 2.5.8 asks 24 by 24, and an icon-only button is the shape that
+               lands under it: the glyph is drawn at 1.25em, which is 20 pixels at the
+               default text size. The platform floors nothing, so this does. */
+            min-inline-size: 24px;
+            min-block-size: 24px;
+            margin: 0;
+            padding: 0;
+            border: none;
+            border-radius: ${reference('--ui-radius')};
+            background: none;
+            /* Inherited so the glyph, sized in em, is the size of the text beside it. */
+            font: inherit;
+            color: ${reference('--ui-color-text-muted')};
+            cursor: pointer;
+            transition: background-color ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-state')};
+        }
+
+        /* A hover and a focus ring, and no pressed step — which is where every component
+           here stops except ui-button. Pressing a button *is* the action, so its own
+           pressed colour is the feedback for the thing being done; dismissing a notice is
+           secondary, and a third colour for it would be a rule the suite cannot reach.
+           Measured: a scripted pointer cannot be driven onto a box in the top layer from
+           inside the frame the suite runs in, so an :active here would ship unmeasured. */
+        button:hover {
+            background: ${reference('--ui-color-hover')};
+        }
+
+        /* A visible focus ring is not decoration: removing it is the single most common way
+           a component stops being usable by keyboard. */
+        button:focus-visible {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: 2px;
+        }
+
+        /* One dimension, not two, and the mutation floor is what proved it: an svg carrying
+           a viewBox is a replaced element with an intrinsic ratio, so a square glyph given
+           a width takes the same height from the ratio. Writing both was the same fact
+           twice — and a fact written twice is a rule whose removal nothing can observe. */
+        svg {
+            inline-size: ${reference('--ui-icon-size')};
+            stroke-width: ${reference('--ui-icon-stroke')};
+        }
+    `; }
+    static { this.properties = {
+        variant: { type: String, reflect: true },
+        duration: { type: Number },
+        dismissLabel: { type: String, attribute: 'dismiss-label' },
+    }; }
+    /** The pending auto-dismissal; `0` when there is none, which is what `clearTimeout` reads. */
+    #timer;
+    /**
+     * Takes every listener off at once, for the reason `src/tooltip.ts` gives beside its
+     * own: half of these leak invisibly if they are removed by name, and one `abort()` is
+     * one thing to get right.
+     */
+    #listeners;
+    /** Holds the clock while the toast is being read, which is the whole of WCAG 2.2.1 here. */
+    #hold;
+    /** Starts it again once the pointer and the focus have both left. */
+    #resume;
+    /**
+     * Dismisses on Escape.
+     *
+     * Bound to this element rather than to the document, which is the opposite of what
+     * `<ui-tooltip>` needed and for the opposite reason: a tooltip is shown by a pointer
+     * that leaves the focus elsewhere, and a toast is only reached by putting focus in it.
+     * A document listener here would dismiss a toast the reader was not looking at.
+     */
+    #onKey;
+    connectedCallback() {
+        super.connectedCallback();
+        // Synchronously, and that is the point of doing it here as well as on update: a
+        // custom element upgrades with its attributes already read, so the toast is in the
+        // region its variant names in the same task it was inserted — nothing ever observes
+        // it in the other one, and no message is announced twice by being moved.
+        this.#route();
+        // A fresh one per connection: an aborted signal stays aborted, so a toast a
+        // framework moved in the tree would come back deaf.
+        this.#listeners = new AbortController();
+        const watched = { signal: this.#listeners.signal };
+        this.addEventListener('pointerenter', this.#hold, watched);
+        this.addEventListener('pointerleave', this.#resume, watched);
+        this.addEventListener('focusin', this.#hold, watched);
+        this.addEventListener('focusout', this.#resume, watched);
+        this.addEventListener('keydown', this.#onKey, watched);
+        this.#start();
+    }
+    disconnectedCallback() {
+        this.#stop();
+        this.#listeners.abort();
+        super.disconnectedCallback();
+    }
+    willUpdate() {
+        // Unconditionally rather than on a change to `variant`: routing is writing the
+        // value the variant already implies, so doing it every update and doing it only
+        // when the variant moved are the same write — and the guard would be a branch no
+        // input can tell apart from its absence.
+        this.#route();
+    }
+    render() {
+        return html `
+            <div part="message"><slot></slot></div>
+            <button
+                type="button"
+                part="dismiss"
+                aria-label=${this.dismissLabel}
+                @click=${this.dismiss}
+            >
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    aria-hidden="true"
+                >
+                    <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+            </button>
+        `;
+    }
+    /**
+     * Puts the toast in the region its variant names.
+     *
+     * The `slot` attribute is the routing, which is what makes it observable: a host can
+     * read back which region a toast landed in without this component exporting a second
+     * name for it. The regions are `<ui-toaster>`'s, and a toast outside one simply carries
+     * an attribute that assigns it to nothing.
+     */
+    #route() {
+        this.slot = this.variant === 'danger' ? 'assertive' : 'polite';
+    }
+    /** Starts the clock, unless this toast has none to start. */
+    #start() {
+        // An error is never taken away from the reader, and `0` is how a host asks for the
+        // same thing on any other variant.
+        if (this.variant === 'danger' || this.duration === 0) {
+            return;
+        }
+        this.#stop();
+        this.#timer = window.setTimeout(this.dismiss, this.duration);
+    }
+    /** Stops it, whether or not one was running. */
+    #stop() {
+        window.clearTimeout(this.#timer);
+        this.#timer = 0;
+    }
+    /** Fades the toast out, tells whoever is listening, and then removes it. */
+    async #exit() {
+        // Dismissed twice — the button clicked while the clock was already up, say — is one
+        // dismissal. Without this the second pass fires a second `ui-dismiss` for a toast
+        // that has already left.
+        if (this.classList.contains(closing)) {
+            return;
+        }
+        this.#stop();
+        this.classList.add(closing);
+        // `finished` rejects when an animation is cancelled, 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 in the list.
+        await Promise.allSettled(this.getAnimations().map((animation) => animation.finished));
+        // Before the removal, and that order is forced rather than preferred: a listener on
+        // the toaster or on anything above it hears a bubbling event only while the element
+        // is still in the tree.
+        this.dispatchEvent(new Event('ui-dismiss', { bubbles: true, composed: true }));
+        this.remove();
+    }
+}
+// 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-toaster', UiToaster);
+// Stryker disable next-line StringLiteral: as above.
+customElements.define('ui-toast', UiToast);
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,2FAA2F;AAC3F,MAAM,OAAO,GAAG,SAAS,CAAC;AAE1B;;;;;;;;;;;;;GAaG;AACH,MAAM,KAAK,GAAG,IAAI,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;aACZ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;0CAgBC,SAAS,CAAC,YAAY,CAAC;4BACrC,SAAS,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;mBAehC,SAAS,CAAC,YAAY,CAAC;;;;;;;;;;mBAUvB,SAAS,CAAC,YAAY,CAAC;;;;;;;KAOrC,CAAC;IAEO,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,mFAAmF;QACnF,mFAAmF;QACnF,iFAAiF;QACjF,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEvC,gFAAgF;QAChF,+EAA+E;QAC/E,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;;SAGV,CAAC;IACN,CAAC;;AAGL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAAvC;;QA8HI;;;;;;;;WAQG;QACH,YAAO,GAAiB,MAAM,CAAC;QAE/B;;;;;;;WAOG;QACH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;;WAOG;QACH,iBAAY,GAAG,SAAS,CAAC;QAEzB,8FAA8F;QAC9F,WAAM,GAAG,CAAC,CAAC;QAEX;;;;WAIG;QACH,eAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEnC,4FAA4F;QACnF,UAAK,GAAG,GAAS,EAAE;YACxB,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC,CAAC;QAEF,qEAAqE;QAC5D,YAAO,GAAG,GAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;QAClB,CAAC,CAAC;QAEF;;;;;;;WAOG;QACM,WAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,CAAC;QACL,CAAC,CAAC;QA+DF;;;;;WAKG;QACM,YAAO,GAAG,GAAS,EAAE;YAC1B,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC,CAAC;IA0DN,CAAC;aA7T4B,WAAM,GAAG,GAAG,CAAA;;;;mBAItB,SAAS,CAAC,YAAY,CAAC;;uBAEnB,SAAS,CAAC,YAAY,CAAC,SAAS,SAAS,CAAC,YAAY,CAAC;gCAC9C,SAAS,CAAC,mBAAmB,CAAC;;;;wCAItB,SAAS,CAAC,YAAY,CAAC;kBAC7C,SAAS,CAAC,mBAAmB,CAAC;6BACnB,SAAS,CAAC,aAAa,CAAC;0BAC3B,SAAS,CAAC,oBAAoB,CAAC;qBACpC,SAAS,CAAC,iBAAiB,CAAC;2BACtB,SAAS,CAAC,WAAW,CAAC;;;;;0BAKvB,SAAS,CAAC,uBAAuB,CAAC;;;;;;;;0BAQlC,SAAS,CAAC,qBAAqB,CAAC,IAAI,SAAS,CAAC,mBAAmB,CAAC;4BAChE,SAAS,CAAC,qBAAqB,CAAC,IAAI,SAAS,CAAC,mBAAmB,CAAC;;;;yCAIrD,SAAS,CAAC,oBAAoB,CAAC;;;;yCAI/B,SAAS,CAAC,oBAAoB,CAAC;;;;yCAI/B,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;oCASnC,SAAS,CAAC,YAAY,CAAC;;;;;;;;gCAQ3B,SAAS,CAAC,YAAY,CAAC;0CACb,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;6BAsB1C,SAAS,CAAC,aAAa,CAAC;;;;qBAIhC,SAAS,CAAC,uBAAuB,CAAC;;2CAEZ,SAAS,CAAC,qBAAqB,CAAC;kBACzD,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;;0BAUtB,SAAS,CAAC,kBAAkB,CAAC;;;;;;iCAMtB,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;2BASnC,SAAS,CAAC,gBAAgB,CAAC;4BAC1B,SAAS,CAAC,kBAAkB,CAAC;;KAEpD,AArH8B,CAqH7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;QAC1B,YAAY,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;KAC7D,AAJkC,CAIjC;IAiCF,8FAA8F;IAC9F,MAAM,CAAK;IAEX;;;;OAIG;IACH,UAAU,CAAyB;IAEnC,4FAA4F;IACnF,KAAK,CAEZ;IAEF,qEAAqE;IAC5D,OAAO,CAEd;IAEF;;;;;;;OAOG;IACM,MAAM,CAIb;IAEO,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,gFAAgF;QAChF,mFAAmF;QACnF,oFAAoF;QACpF,yEAAyE;QACzE,IAAI,CAAC,MAAM,EAAE,CAAC;QAEd,4EAA4E;QAC5E,oDAAoD;QACpD,IAAI,CAAC,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAExC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC7D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEQ,oBAAoB;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAExB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAEQ,UAAU;QACf,+EAA+E;QAC/E,gFAAgF;QAChF,iFAAiF;QACjF,yCAAyC;QACzC,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;;;;6BAKU,IAAI,CAAC,YAAY;yBACrB,IAAI,CAAC,OAAO;;;;;;;;;;;;SAY5B,CAAC;IACN,CAAC;IAYD;;;;;;;OAOG;IACH,MAAM;QACF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;IACnE,CAAC;IAED,6DAA6D;IAC7D,MAAM;QACF,mFAAmF;QACnF,mCAAmC;QACnC,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;YACnD,OAAO;QACX,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC;IAED,gDAAgD;IAChD,KAAK;QACD,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IACpB,CAAC;IAED,4EAA4E;IAC5E,KAAK,CAAC,KAAK;QACP,oFAAoF;QACpF,kFAAkF;QAClF,yBAAyB;QACzB,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,OAAO;QACX,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAE5B,+EAA+E;QAC/E,+EAA+E;QAC/E,qFAAqF;QACrF,MAAM,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEtF,oFAAoF;QACpF,oFAAoF;QACpF,wBAAwB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE/E,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAE/C,qDAAqD;AACrD,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,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-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100"];
+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-success", "--ui-color-warning", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100"];
 /** 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,6VA4ET,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2MAwBhB,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,CA+CpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAwB3D,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,yYAsFT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2MAwBhB,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,CA2DpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAwB3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAgB/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}

package/dist/tokens.js

@@ -38,6 +38,16 @@ export const tokens = [
     '--ui-color-text',
     '--ui-color-focus',
     '--ui-color-danger',
+    // The other two outcomes, arriving with `ui-toast` — the component `ROADMAP.md` said
+    // would bring them. They complete a set `--ui-color-danger` has been half of since the
+    // first field: a form told you what went wrong and had no way to say that anything
+    // went right.
+    //
+    // Grounds rather than derivations, and for the reason `--ui-color-danger` is one: a
+    // hue cannot be mixed out of the grounds that exist. Both are values a host is
+    // expected to replace with their own brand's, which is what a ground is for.
+    '--ui-color-success',
+    '--ui-color-warning',
     // 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
@@ -164,6 +174,18 @@ export const defaults = {
     // because no axe rule does.
     '--ui-color-focus': '#b45309',
     '--ui-color-danger': '#b91c1c',
+    // Green-700 and amber-700, each the darkest step of its hue that still reads as that
+    // hue. Both clear **4.5:1** against the surface rather than the 3:1 a coloured edge
+    // would owe, because the floor a value has to clear is the strictest use it is put to
+    // and nothing stops a host using one as text — `--ui-color-danger` was chosen the same
+    // way and is text in `ui-field` today.
+    //
+    // The warning is the same amber as `--ui-color-focus`, and the two arrived at it
+    // independently: both are *the darkest amber that clears its floor in both schemes*,
+    // and that question has one answer. They stay separate names because they are separate
+    // knobs — a host who retunes the focus ring has said nothing about warnings.
+    '--ui-color-success': '#15803d',
+    '--ui-color-warning': '#b45309',
     // 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
@@ -295,6 +317,11 @@ export const darkScheme = {
     // Red-700 is 2.74:1 on the dark surface — under the 4.5:1 floor for text, and error
     // text is the one thing in this set that must never be hard to read. Red-400 is 6.41.
     '--ui-color-danger': '#f87171',
+    // The same inversion, for the same reason: green-700 is 3.54:1 on the dark surface and
+    // amber-700 is 3.53, so both would clear a coloured edge and fail as text — which is
+    // the half of the pair a reader is most likely to need.
+    '--ui-color-success': '#4ade80',
+    '--ui-color-warning': '#fbbf24',
 };
 /** The category every duration name shares, which is what reduced motion collapses. */
 const duration = '--ui-duration-';

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":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,qFAAqF;IACrF,uFAAuF;IACvF,mFAAmF;IACnF,cAAc;IACd,EAAE;IACF,oFAAoF;IACpF,+EAA+E;IAC/E,6EAA6E;IAC7E,oBAAoB;IACpB,oBAAoB;IACpB,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;IAClB,oFAAoF;IACpF,mFAAmF;IACnF,mFAAmF;IACnF,2BAA2B;IAC3B,EAAE;IACF,mFAAmF;IACnF,kFAAkF;IAClF,6EAA6E;IAC7E,EAAE;IACF,8EAA8E;IAC9E,sFAAsF;IACtF,yDAAyD;IACzD,gBAAgB;IAChB,kBAAkB;IAClB,uFAAuF;IACvF,0CAA0C;IAC1C,EAAE;IACF,sFAAsF;IACtF,sFAAsF;IACtF,+EAA+E;IAC/E,qFAAqF;IACrF,mFAAmF;IACnF,qCAAqC;IACrC,EAAE;IACF,4EAA4E;IAC5E,qFAAqF;IACrF,sFAAsF;IACtF,sFAAsF;IACtF,mFAAmF;IACnF,uBAAuB;IACvB,oBAAoB;CACd,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;IAC3B,qFAAqF;IACrF,qFAAqF;IACrF,kFAAkF;IAClF,iDAAiD;IACjD,uBAAuB;CACjB,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,qFAAqF;IACrF,oFAAoF;IACpF,sFAAsF;IACtF,uFAAuF;IACvF,uCAAuC;IACvC,EAAE;IACF,iFAAiF;IACjF,qFAAqF;IACrF,uFAAuF;IACvF,6EAA6E;IAC7E,oBAAoB,EAAE,SAAS;IAC/B,oBAAoB,EAAE,SAAS;IAC/B,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;IAC7B,gBAAgB,EAAE,QAAQ;IAC1B,kBAAkB,EAAE,GAAG;IACvB,qFAAqF;IACrF,sFAAsF;IACtF,oFAAoF;IACpF,qFAAqF;IACrF,gDAAgD;IAChD,oBAAoB,EAAE,kEAAkE;CAC3F,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;IACzE,mFAAmF;IACnF,+EAA+E;IAC/E,iDAAiD;IACjD,uBAAuB,EAAE,MAAM,CAAC,oBAAoB,CAAC;CACxD,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;IAC9B,uFAAuF;IACvF,qFAAqF;IACrF,wDAAwD;IACxD,oBAAoB,EAAE,SAAS;IAC/B,oBAAoB,EAAE,SAAS;CAClC,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/dist/tooltip.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Supplementary text on hover and on keyboard focus.
+ *
+ * **Everything is slotted**, the way `<ui-field>` slots everything and for the same
+ * measured reason: an IDREF does not cross a shadow boundary, so a tip rendered in here
+ * could not be the target of the trigger's `aria-describedby`. The trigger is the child
+ * with no `slot`; the tip is `slot="tip"`.
+ *
+ * ## What the platform does, and what is left
+ *
+ * The tip is a **popover**, which buys the two things a hand-rolled overlay gets wrong:
+ * it is promoted to the top layer, so it escapes `overflow: hidden` and every stacking
+ * context above it — measured — and it needs no `z-index`, which is why the second overlay
+ * in this package brings no layering category either.
+ *
+ * `popover="manual"` rather than `auto`, and the difference is the point: an `auto`
+ * popover light-dismisses, and dismissing one closes the others — so a tooltip appearing
+ * over an open menu would close the menu. What `manual` costs is Escape, which it does not
+ * handle: measured, a manual popover stays open on Escape. So this element wires it, which
+ * WCAG 2.2's **1.4.13 Content on Hover or Focus** requires anyway.
+ *
+ * ## Why the placement is written here
+ *
+ * The issue asked whether a clipping tooltip is solved with CSS anchor positioning or with
+ * a dependency. Measured in this engine, anchor positioning is **entirely present** —
+ * `anchor-name`, `position-anchor`, `position-area` and `position-try-fallbacks` all
+ * parse, and an anchored popover really is placed against its anchor rather than merely
+ * accepting the rule. It is still not adopted, and the reason is the one `docs/select.md`
+ * gives about `appearance: base-select`: a feature one engine has makes a kit look like
+ * two kits.
+ *
+ * **Here that is not a cosmetic difference but a broken component.** Measured: a popover
+ * whose anchor rules are ignored does not fall back to somewhere near the trigger — it is
+ * `position: fixed` at `inset: 0`, which is the corner of the screen. And the flip at a
+ * viewport edge is `position-try-fallbacks`, so an engine without it needs the script
+ * anyway. Adopting the CSS would mean writing the placement *and* a second code path for
+ * it, which is two answers to one problem.
+ *
+ * A positioning dependency was the other option the issue named. It solves scroll
+ * containers, virtual anchors and continuous auto-update, none of which a tooltip against
+ * a real element needs — and it would be this package's second runtime dependency, where
+ * RFC 0016's adoption was a *behaviour* library and not a layout one.
+ *
+ * So the placement is thirty lines here, measured at the edges by a suite that runs in a
+ * real browser. When anchor positioning is available broadly it replaces them and the
+ * tests stay: they assert where the tip lands, not who put it there.
+ *
+ * @example
+ * ```html
+ * <ui-tooltip>
+ *   <button type="button">Save</button>
+ *   <span slot="tip">Saves without closing the dialog.</span>
+ * </ui-tooltip>
+ * ```
+ */
+export declare class UiTooltip extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-tooltip': UiTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AASjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBAAa,SAAU,SAAQ,UAAU;;IACrC,gBAAyB,MAAM,0BAkD7B;IAiDO,iBAAiB,IAAI,IAAI;IAqBzB,oBAAoB,IAAI,IAAI;IAU5B,MAAM,IAAI,cAAc;CAqKpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}

package/dist/tooltip.js

@@ -0,0 +1,317 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/** Distinguishes one tooltip's generated id from another's. */
+let sequence = 0;
+/** How far the tip sits from the trigger, and which way the script placed it. */
+const side = 'data-side';
+/**
+ * Supplementary text on hover and on keyboard focus.
+ *
+ * **Everything is slotted**, the way `<ui-field>` slots everything and for the same
+ * measured reason: an IDREF does not cross a shadow boundary, so a tip rendered in here
+ * could not be the target of the trigger's `aria-describedby`. The trigger is the child
+ * with no `slot`; the tip is `slot="tip"`.
+ *
+ * ## What the platform does, and what is left
+ *
+ * The tip is a **popover**, which buys the two things a hand-rolled overlay gets wrong:
+ * it is promoted to the top layer, so it escapes `overflow: hidden` and every stacking
+ * context above it — measured — and it needs no `z-index`, which is why the second overlay
+ * in this package brings no layering category either.
+ *
+ * `popover="manual"` rather than `auto`, and the difference is the point: an `auto`
+ * popover light-dismisses, and dismissing one closes the others — so a tooltip appearing
+ * over an open menu would close the menu. What `manual` costs is Escape, which it does not
+ * handle: measured, a manual popover stays open on Escape. So this element wires it, which
+ * WCAG 2.2's **1.4.13 Content on Hover or Focus** requires anyway.
+ *
+ * ## Why the placement is written here
+ *
+ * The issue asked whether a clipping tooltip is solved with CSS anchor positioning or with
+ * a dependency. Measured in this engine, anchor positioning is **entirely present** —
+ * `anchor-name`, `position-anchor`, `position-area` and `position-try-fallbacks` all
+ * parse, and an anchored popover really is placed against its anchor rather than merely
+ * accepting the rule. It is still not adopted, and the reason is the one `docs/select.md`
+ * gives about `appearance: base-select`: a feature one engine has makes a kit look like
+ * two kits.
+ *
+ * **Here that is not a cosmetic difference but a broken component.** Measured: a popover
+ * whose anchor rules are ignored does not fall back to somewhere near the trigger — it is
+ * `position: fixed` at `inset: 0`, which is the corner of the screen. And the flip at a
+ * viewport edge is `position-try-fallbacks`, so an engine without it needs the script
+ * anyway. Adopting the CSS would mean writing the placement *and* a second code path for
+ * it, which is two answers to one problem.
+ *
+ * A positioning dependency was the other option the issue named. It solves scroll
+ * containers, virtual anchors and continuous auto-update, none of which a tooltip against
+ * a real element needs — and it would be this package's second runtime dependency, where
+ * RFC 0016's adoption was a *behaviour* library and not a layout one.
+ *
+ * So the placement is thirty lines here, measured at the edges by a suite that runs in a
+ * real browser. When anchor positioning is available broadly it replaces them and the
+ * tests stay: they assert where the tip lands, not who put it there.
+ *
+ * @example
+ * ```html
+ * <ui-tooltip>
+ *   <button type="button">Save</button>
+ *   <span slot="tip">Saves without closing the dialog.</span>
+ * </ui-tooltip>
+ * ```
+ */
+export class UiTooltip extends LitElement {
+    static { this.styles = css `
+        /* No box of its own: a wrapper that laid something out would move the trigger it
+           wraps, and every call site would have to undo it. */
+        :host {
+            display: contents;
+        }
+
+        /* The tip is the host's own element, reached through ::slotted — the shape every
+           component in this kit has. position: fixed is what the popover already is;
+           it is restated because the script writes inset-block-start and
+           inset-inline-start against the viewport, and a reader of those two lines
+           should not have to know which stylesheet made them mean that.
+
+           max-content up to a ceiling: a tip is a phrase, and a phrase that wraps at the
+           width of whatever it happens to sit near is unreadable. The ceiling is in the
+           space token so it scales with everything else a host retunes. */
+        slot[name='tip']::slotted(*) {
+            position: fixed;
+            margin: 0;
+            inline-size: max-content;
+            max-inline-size: calc(${reference('--ui-space')} * 40);
+            padding: calc(${reference('--ui-space')} / 2) ${reference('--ui-space')};
+            font-family: ${reference('--ui-font')};
+            font-size: 0.875em;
+            /* The pair, never half of it: a surface without the colour chosen against it
+               inherits whatever the page set, and the contrast measured for that pair
+               stops holding. */
+            color: ${reference('--ui-color-text')};
+            background: ${reference('--ui-color-surface')};
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            box-shadow: ${reference('--ui-elevation-raised')};
+        }
+
+        /* The gap between the tip and its trigger, in CSS because it is a token and the
+           script has no way to resolve one: a custom property reads back as it was
+           written, so 0.5rem would arrive at a function that needs pixels.
+
+           It is deliberately small. WCAG 2.2's 1.4.13 asks that a pointer be able to
+           travel onto the tip without it vanishing, and it travels across this gap — the
+           tip stays open because it is a DOM child of this element, so entering it never
+           leaves the host, but only if the pointer does not leave through the gap on the
+           way. */
+        slot[name='tip']::slotted([data-side='block-start']) {
+            translate: 0 calc(${reference('--ui-space')} / -2);
+        }
+
+        slot[name='tip']::slotted([data-side='block-end']) {
+            translate: 0 calc(${reference('--ui-space')} / 2);
+        }
+    `; }
+    /** Whether the tip is currently shown, which decides what the listeners cost. */
+    #shown = false;
+    /**
+     * What is watching while the tip is open, dropped in one call when it closes.
+     *
+     * These three are added on show rather than on connection because two of them are
+     * per-frame: a page holding fifty tooltips would run fifty no-op scroll handlers for
+     * every frame of every scroll, and at most one tooltip is ever open.
+     *
+     * Built here rather than on the first show so it is never absent — the reason
+     * `src/field.ts` builds its observer the same way: a close that has to ask whether the
+     * controller exists is a branch no test can reach, because nothing closes what was
+     * never opened.
+     */
+    #watching = new AbortController();
+    /** Re-places the tip under anything that moves the trigger while it is open. */
+    #reflow = () => {
+        this.#place();
+    };
+    /**
+     * Dismisses on Escape, which is 1.4.13's first requirement and `manual`'s one gap.
+     *
+     * On the document rather than on this element: a tip shown by the pointer leaves the
+     * focus wherever it was, so a key listener bound here would never hear the key that is
+     * supposed to dismiss it.
+     */
+    #dismiss = (event) => {
+        if (event.key === 'Escape') {
+            this.#hide();
+        }
+    };
+    /**
+     * Takes every listener off at once, and the reason is not brevity.
+     *
+     * Removing them one by one needs the event name repeated at both ends, and half of
+     * those repetitions cannot be checked: a leaked `pointerenter` is caught the moment it
+     * fires, because it opens a popover that is no longer in a document and that throws —
+     * but a leaked `pointerleave` reaches `#hide`, which returns at its own guard, and
+     * nothing anywhere can tell it happened. One `abort()` is one thing to get right, and
+     * a leak of it is observable through the half that is.
+     */
+    #listeners = new AbortController();
+    connectedCallback() {
+        super.connectedCallback();
+        // A fresh one per connection: an aborted signal stays aborted, so a tooltip a
+        // framework moves in the tree would come back deaf.
+        this.#listeners = new AbortController();
+        // One options object for the four, and that is the same argument as the controller
+        // itself: written per call, each `{ signal }` is its own thing to get right, and
+        // half of them cannot be checked — a leaked `pointerleave` reaches `#hide`, which
+        // returns at its own guard, and nothing can tell. Shared, all four ride on the one
+        // that does report: a leaked `pointerenter` opens a popover that is no longer in a
+        // document, which throws.
+        const watched = { signal: this.#listeners.signal };
+        this.addEventListener('pointerenter', this.#onPointer, watched);
+        this.addEventListener('pointerleave', this.#onLeave, watched);
+        this.addEventListener('focusin', this.#onFocus, watched);
+        this.addEventListener('focusout', this.#onLeave, watched);
+    }
+    disconnectedCallback() {
+        // Removed while shown, the tip takes the window listeners with it. A tooltip that
+        // a framework unmounted mid-hover would otherwise keep re-placing an element that
+        // is no longer in a document.
+        this.#hide();
+        this.#listeners.abort();
+        super.disconnectedCallback();
+    }
+    render() {
+        return html `
+            <slot></slot>
+            <slot name="tip" @slotchange=${this.#associate}></slot>
+        `;
+    }
+    /** The element the tip is about: the one child carrying no `slot` attribute. */
+    #trigger() {
+        const found = this.querySelector(':scope > :not([slot])');
+        return found instanceof HTMLElement ? found : undefined;
+    }
+    /** The tip itself, which is the host's own element and stays in their tree. */
+    #tip() {
+        const found = this.querySelector(":scope > [slot='tip']");
+        return found instanceof HTMLElement ? found : undefined;
+    }
+    /**
+     * Makes the tip a popover, names it, and points the trigger at it.
+     *
+     * On `slotchange` as well as at first render, because a framework re-render replaces
+     * the element rather than mutating it — and a tip that is only wired the first time is
+     * one that stops being announced at a moment nothing reports.
+     *
+     * A `role` or an `id` the host wrote is never overwritten, the same courtesy
+     * `<ui-field>` and `<ui-switch>` extend. `aria-describedby` is **added to** rather than
+     * replaced: the trigger may already be described by a field's help text, and a
+     * description that silently replaced another is the failure nobody sees.
+     */
+    #associate = () => {
+        const trigger = this.#trigger();
+        const tip = this.#tip();
+        if (trigger === undefined || tip === undefined) {
+            return;
+        }
+        if (tip.id === '') {
+            // Stryker disable next-line UpdateOperator: two tooltips on one page must get
+            // different ids, and a decrementing counter delivers that as well as an
+            // incrementing one. No input distinguishes them — an equivalent mutant, the
+            // same one `src/field.ts` carries beside its own counter.
+            tip.id = `ui-tooltip-${String(++sequence)}`;
+        }
+        if (!tip.hasAttribute('role')) {
+            tip.setAttribute('role', 'tooltip');
+        }
+        tip.setAttribute('popover', 'manual');
+        const described = (trigger.getAttribute('aria-describedby') ?? '')
+            .split(' ')
+            .filter((id) => id !== '');
+        if (!described.includes(tip.id)) {
+            trigger.setAttribute('aria-describedby', [...described, tip.id].join(' '));
+        }
+    };
+    /**
+     * Shows on the pointer, except the pointer a touch screen reports.
+     *
+     * There is no hover on a touch screen, so a tap fires `pointerenter` and then focus —
+     * and showing on both means the tip arrives, is dismissed by the tap that follows, and
+     * arrives again. Focus is the one that survives, so this defers to it.
+     */
+    #onPointer = (event) => {
+        if (event.pointerType !== 'touch') {
+            this.#show();
+        }
+    };
+    #onFocus = () => {
+        this.#show();
+    };
+    #onLeave = () => {
+        this.#hide();
+    };
+    /** Opens the tip and starts watching whatever can move its trigger. */
+    #show() {
+        const tip = this.#tip();
+        if (tip === undefined || this.#shown) {
+            return;
+        }
+        this.#shown = true;
+        tip.showPopover();
+        this.#place();
+        this.#watching = new AbortController();
+        // Shared for the same reason the four above are, and it pays off in the same
+        // direction: a leaked `keydown` is invisible — every later Escape returns at
+        // `#hide`'s guard — while a leaked `resize` re-places a tip that is not on screen,
+        // which a test reads straight off the written inset.
+        const watched = { signal: this.#watching.signal };
+        // Capturing, because the thing that scrolls is rarely the window: a scroll inside
+        // any ancestor moves the trigger and no event reaches the window from it.
+        //
+        // Not `passive`, and its absence is deliberate rather than an omission: `scroll` is
+        // not cancelable, so the flag changes nothing a test could observe — and an option
+        // no input can distinguish is one the mutation floor has to be told to ignore. The
+        // cheaper answer is not to write it.
+        window.addEventListener('scroll', this.#reflow, { capture: true, ...watched });
+        window.addEventListener('resize', this.#reflow, watched);
+        document.addEventListener('keydown', this.#dismiss, watched);
+    }
+    /** Closes the tip and stops watching. */
+    #hide() {
+        if (!this.#shown) {
+            return;
+        }
+        this.#shown = false;
+        this.#tip()?.hidePopover();
+        this.#watching.abort();
+    }
+    /**
+     * Puts the tip above its trigger, below it when there is no room, and inside the
+     * viewport either way.
+     *
+     * Read rather than assumed: the tip's own box is measured after it is shown, because
+     * its height depends on how its text wrapped at this width in this font — a number
+     * this file cannot know and must not guess.
+     */
+    #place() {
+        const trigger = this.#trigger();
+        const tip = this.#tip();
+        if (trigger === undefined || tip === undefined) {
+            return;
+        }
+        const anchor = trigger.getBoundingClientRect();
+        const box = tip.getBoundingClientRect();
+        const above = anchor.top >= box.height;
+        tip.setAttribute(side, above ? 'block-start' : 'block-end');
+        tip.style.insetBlockStart = `${String(above ? anchor.top - box.height : anchor.bottom)}px`;
+        // Centred on the trigger, then pulled back inside the viewport — in that order,
+        // because a tip centred on a trigger near the edge is a tip half off the screen.
+        // `Math.max` last so a tip wider than the viewport starts at the leading edge
+        // rather than at a negative one.
+        tip.style.insetInlineStart = `${String(Math.max(0, Math.min(anchor.left + anchor.width / 2 - box.width / 2, document.documentElement.clientWidth - box.width)))}px`;
+    }
+}
+// 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-tooltip', UiTooltip);
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

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

package/package.json

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