@rak200/ui 0.2.15 → 0.2.16

package/README.md

@@ -86,9 +86,9 @@ components; `docs/` is what describes them.
 
 ## Status
 
-**v0.** Thirteen components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
+**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>` and `<ui-icon>` — the token layer
+`<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/index.d.ts

@@ -7,6 +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,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"}
+{"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,6 +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,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,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":"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"}

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/package.json

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