@rak200/ui 0.2.12 → 0.2.14

package/README.md

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

@@ -0,0 +1,41 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A container: a surface with a boundary, a corner and a lift.
+ *
+ * **Presentational, and deliberately not interactive.** A card that reacts to a click is a
+ * button or a link, and both already exist — here and in the platform. This element grows
+ * no `clickable` attribute, because the first thing such an attribute has to do is
+ * reimplement keyboard activation, the accessible name and the disabled semantics that
+ * `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
+ * leaving them to find out.
+ *
+ * **It claims no role either.** There is no card element and no APG pattern for one, so
+ * the shadow root renders slots and nothing else: what a card *means* is the host's, and
+ * they say it by slotting a heading, or by writing `<article>` around this element when
+ * the content really is self-contained. A `role` invented here would be one every consumer
+ * inherits and none of them chose.
+ *
+ * **Three regions, ordered here rather than in the host's markup.** The slots are declared
+ * header, body, footer, so that is the order they render in whatever order the host wrote
+ * them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
+ * contributes no box to lay out or to space.
+ *
+ * @example
+ * ```html
+ * <ui-card>
+ *   <h3 slot="header">Monthly plan</h3>
+ *   <p>Everything in the free tier, plus priority support.</p>
+ *   <div slot="footer"><ui-button>Choose</ui-button></div>
+ * </ui-card>
+ * ```
+ */
+export declare class UiCard extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-card': UiCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IAClC,gBAAyB,MAAM,0BAwC7B;IAEO,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,SAAS,EAAE,MAAM,CAAC;KACrB;CACJ"}

package/dist/card.js

@@ -0,0 +1,88 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * A container: a surface with a boundary, a corner and a lift.
+ *
+ * **Presentational, and deliberately not interactive.** A card that reacts to a click is a
+ * button or a link, and both already exist — here and in the platform. This element grows
+ * no `clickable` attribute, because the first thing such an attribute has to do is
+ * reimplement keyboard activation, the accessible name and the disabled semantics that
+ * `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
+ * leaving them to find out.
+ *
+ * **It claims no role either.** There is no card element and no APG pattern for one, so
+ * the shadow root renders slots and nothing else: what a card *means* is the host's, and
+ * they say it by slotting a heading, or by writing `<article>` around this element when
+ * the content really is self-contained. A `role` invented here would be one every consumer
+ * inherits and none of them chose.
+ *
+ * **Three regions, ordered here rather than in the host's markup.** The slots are declared
+ * header, body, footer, so that is the order they render in whatever order the host wrote
+ * them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
+ * contributes no box to lay out or to space.
+ *
+ * @example
+ * ```html
+ * <ui-card>
+ *   <h3 slot="header">Monthly plan</h3>
+ *   <p>Everything in the free tier, plus priority support.</p>
+ *   <div slot="footer"><ui-button>Choose</ui-button></div>
+ * </ui-card>
+ * ```
+ */
+export class UiCard extends LitElement {
+    static { this.styles = css `
+        /* A column rather than a block, and the footer below is why: margin-block-start:
+           auto needs a flex line to push against. That is what makes a row of cards in a
+           grid line their footers up when the bodies are different lengths — the one thing
+           a footer slot buys that writing the element last does not.
+
+           The slots are left at their default display: contents, so the flex items are
+           the host's own elements. An empty region is then absent rather than
+           zero-height — gap never spaces a card that has no footer. */
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: calc(${reference('--ui-space')} * 2);
+            box-sizing: border-box;
+            padding: calc(${reference('--ui-space')} * 2);
+            font-family: ${reference('--ui-font')};
+            /* The pair, never half of it: a surface declared without the text colour that
+               was chosen against it inherits whatever the page set, and the contrast the
+               token layer measured stops holding at the one place it was measured for. */
+            color: ${reference('--ui-color-text')};
+            background: ${reference('--ui-color-surface')};
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            /* The boundary and the shadow are one decision made twice, because each covers
+               where the other cannot. The shadow is what says *raised* on a light page and
+               nearly nothing on a dark one — it is black at a low alpha, and light-dark()
+               cannot carry a second value for it, since it takes colours and a shadow is
+               not one. The boundary is derived, so it mixes toward the text and is correct
+               in both schemes by construction. Drop either and the card loses its edge in
+               one scheme: measured, a bordered card on the dark surface is the only thing
+               separating it from the page behind it. */
+            box-shadow: ${reference('--ui-elevation-raised')};
+        }
+
+        /* Pushed to the bottom of whatever height the card ended up with. Written on the
+           slotted element rather than on a wrapper, because a wrapper would be a flex item
+           of its own — present, and therefore spaced by gap, even with nothing in it. */
+        slot[name='footer']::slotted(*) {
+            margin-block-start: auto;
+        }
+    `; }
+    render() {
+        return html `
+            <slot name="header"></slot>
+            <slot></slot>
+            <slot name="footer"></slot>
+        `;
+    }
+}
+// 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-card', UiCard);
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;aACT,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wBAYjB,SAAS,CAAC,YAAY,CAAC;;4BAEnB,SAAS,CAAC,YAAY,CAAC;2BACxB,SAAS,CAAC,WAAW,CAAC;;;;qBAI5B,SAAS,CAAC,iBAAiB,CAAC;0BACvB,SAAS,CAAC,oBAAoB,CAAC;gCACzB,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;;;;;;;;;0BAS3B,SAAS,CAAC,uBAAuB,CAAC;;;;;;;;;KASvD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA;;;;SAIV,CAAC;IACN,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC"}

package/dist/field.d.ts

@@ -15,7 +15,12 @@ import { LitElement, type TemplateResult } from 'lit';
  *
  * **The control may sit below a wrapper**, and the same constraint is why: `<ui-input>` is
  * a box around a control that had to stay in the light DOM, so this element looks through
- * it. See {@link UiField.#control}.
+ * it. See {@link UiField.#control} — and the one wrapper it does *not* look through, which
+ * is a wrapper carrying a `role`, because a group is the control rather than a box for one.
+ *
+ * **Not every control can be labelled the platform's way**, and `<ui-radio-group>` is the
+ * first that cannot: `<label for>` reaches a labelable element and nothing else, so the
+ * name arrives as `aria-labelledby` there. See {@link UiField.#name}.
  *
  * @example
  * ```html

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;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CA2GpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}
+{"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"}

package/dist/field.js

@@ -18,7 +18,12 @@ let sequence = 0;
  *
  * **The control may sit below a wrapper**, and the same constraint is why: `<ui-input>` is
  * a box around a control that had to stay in the light DOM, so this element looks through
- * it. See {@link UiField.#control}.
+ * it. See {@link UiField.#control} — and the one wrapper it does *not* look through, which
+ * is a wrapper carrying a `role`, because a group is the control rather than a box for one.
+ *
+ * **Not every control can be labelled the platform's way**, and `<ui-radio-group>` is the
+ * first that cannot: `<label for>` reaches a labelable element and nothing else, so the
+ * name arrives as `aria-labelledby` there. See {@link UiField.#name}.
  *
  * @example
  * ```html
@@ -110,6 +115,14 @@ export class UiField extends LitElement {
      */
     #control() {
         const slotted = this.#slotted(null);
+        // A wrapper carrying a `role` is claiming to *be* the widget rather than to box
+        // one, and the descent stops there. `<ui-radio-group>` is the first: it sets
+        // `role="radiogroup"` on itself, and the thing this field names is that group —
+        // looking through it would reach the first radio, which names one option and
+        // leaves the group anonymous.
+        if (slotted?.hasAttribute('role') === true) {
+            return slotted;
+        }
         return slotted?.querySelector('input, textarea, select') ?? slotted;
     }
     /**
@@ -131,10 +144,7 @@ export class UiField extends LitElement {
         if (control.id === '') {
             control.id = `${uid}-control`;
         }
-        const label = this.#slotted('label');
-        if (label instanceof HTMLLabelElement) {
-            label.htmlFor = control.id;
-        }
+        this.#name(control, this.#slotted('label'), `${uid}-label`);
         const help = this.#describer(this.#slotted('help'), `${uid}-help`);
         const error = this.#describer(this.#slotted('error'), `${uid}-error`);
         // The error comes first: a screen reader announces descriptions in order, and the
@@ -158,6 +168,42 @@ export class UiField extends LitElement {
             control.setAttribute('aria-invalid', 'true');
         }
     }
+    /**
+     * Gives the control its accessible name from whatever fills the label slot.
+     *
+     * **`<label for>` is preferred wherever it reaches**, because it is the platform's own
+     * association and it does two things `aria-labelledby` does not: it names the control
+     * and it makes the label a click target for it. It only reaches a **labelable**
+     * element, though, and `<ui-radio-group>` is not one — a `<label for>` aimed at a
+     * custom element labels nothing, which axe reports at critical impact.
+     *
+     * Which elements are labelable is asked of the platform rather than listed here: those
+     * are exactly the ones it gives a `labels` collection to. A list kept in this file
+     * would be one the next labelable element ages out of, silently.
+     *
+     * The name is dropped when the slot empties, the way `aria-describedby` is: a group
+     * left pointing at a label that is no longer there has a dangling IDREF, which is the
+     * one failure mode nobody sees — the group simply stops having a name.
+     *
+     * @param fallbackId - Given to the label only on the path that needs one to point at.
+     * A host-supplied id survives, the same way the control's and the describers' do.
+     */
+    #name(control, label, fallbackId) {
+        if ('labels' in control) {
+            if (label instanceof HTMLLabelElement) {
+                label.htmlFor = control.id;
+            }
+            return;
+        }
+        if (label === undefined) {
+            control.removeAttribute('aria-labelledby');
+            return;
+        }
+        if (label.id === '') {
+            label.id = fallbackId;
+        }
+        control.setAttribute('aria-labelledby', label.id);
+    }
     /**
      * The id to describe the control by, or `undefined` when the element is absent or has
      * nothing to say. An element rendered empty — the shape a framework produces for

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,8DAA8D;AAC9D,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;aACV,WAAM,GAAG,GAAG,CAAA;;;2BAGd,SAAS,CAAC,WAAW,CAAC;;;;;;wBAMzB,SAAS,CAAC,YAAY,CAAC;;;;qBAI1B,SAAS,CAAC,iBAAiB,CAAC;;;;;;;qBAO5B,SAAS,CAAC,mBAAmB,CAAC;;;KAG9C,CAAC;IAEF,oFAAoF;IACpF,IAAI,CAAU;IAEd;;;;;OAKG;IACM,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,mFAAmF;QACnF,8EAA8E;QAC9E,kDAAkD;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEQ,oBAAoB;QACzB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAEQ,YAAY;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;SAOV,CAAC;IACN,CAAC;IAED,4EAA4E;IAC5E,QAAQ,CAAC,IAAmB;QACxB,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBAAmB,IAAI,IAAI,CAAC;QACvF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE3C,OAAO,KAAK,YAAY,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,CAAC;IAED;;;;;;;;;;;OAWG;IACH,QAAQ;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,OAAO,OAAO,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,OAAO,CAAC;IACxE,CAAC;IAED;;;;;OAKG;IACH,UAAU;QACN,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,mFAAmF;QACnF,iFAAiF;QACjF,+EAA+E;QAC/E,kFAAkF;QAClF,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAE7D,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,UAAU,CAAC;QAClC,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAErC,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;YACpC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;QAC/B,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAEtE,kFAAkF;QAClF,6EAA6E;QAC7E,EAAE;QACF,oFAAoF;QACpF,oFAAoF;QACpF,+EAA+E;QAC/E,uBAAuB;QACvB,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;QAEjE,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QACjD,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,OAAgC,EAAE,UAAkB;QAC3D,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC7D,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC;QAC5B,CAAC;QAED,OAAO,OAAO,CAAC,EAAE,CAAC;IACtB,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { UiButton, type ButtonVariant } from './button.js';
+export { UiCard } from './card.js';
 export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
 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 { 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,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,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,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,9 +1,11 @@
 export { UiButton } from './button.js';
+export { UiCard } from './card.js';
 export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
 export { UiIcon, register } from './icon.js';
 export { UiInput, UiTextarea } from './input.js';
+export { UiRadio, UiRadioGroup } from './radio.js';
 export { UiSelect } from './select.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,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,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,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/dist/radio.d.ts

@@ -0,0 +1,107 @@
+import { LitElement, type TemplateResult } from 'lit';
+/** Which way a group lays its options out, and announces that it did. */
+export type RadioOrientation = 'vertical' | 'horizontal';
+/**
+ * One option's control, drawn from the token layer rather than replaced.
+ *
+ * **The `<input type="radio">` is yours.** You write it, you set its `name`, `value`,
+ * `checked` and `disabled`, and it stays in the light DOM — the shape every control in
+ * this kit has, and forced by the same constraint: an ARIA relationship by IDREF does not
+ * cross a shadow boundary, so a control rendered in here could not be labelled by the
+ * `<label>` around it.
+ *
+ * **This element carries no state and no name.** It is a drawing, and everything that
+ * makes a set of radios *a group* — one tab stop, arrow keys that move and select, one
+ * value out of the set — is the platform's, because they are native radios sharing a
+ * `name`. Wrapping each one changes none of that: measured in this suite, a group whose
+ * radios sit inside custom elements is still one group.
+ *
+ * @example
+ * ```html
+ * <label>
+ *   <ui-radio><input type="radio" name="plan" value="free" /></ui-radio>
+ *   Free
+ * </label>
+ * ```
+ */
+export declare class UiRadio extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+/**
+ * A set of radios, laid out and named as one thing.
+ *
+ * **It hand-rolls no roving tabindex and it brings no state machine**, and that is this
+ * element's whole claim rather than a gap in it. Issue #15 asked which of the two it would
+ * be, because the APG **Radio Group** pattern — one tab stop, arrow keys that move *and*
+ * select, wrapping at the ends — is the first behaviour in the v0 cut that could have
+ * justified Zag. Neither was needed: native radios sharing a `name` **are** that pattern,
+ * and this suite measures it here rather than trusting it, wrappers and all.
+ *
+ * That is the test `ROADMAP.md` states, applied: Zag arrives where the platform has **no
+ * element** for the pattern, not merely where the pattern has state. `ui-menu` is where
+ * that question is open; a radio group is not.
+ *
+ * **What is left for this element is what the platform leaves out**: the layout, the
+ * `role` that makes a set of radios a group to a screen reader, and the group-level name,
+ * description and error state — which {@link UiField} wires onto *this* element rather
+ * than onto an option, because a `<label for>` naming one radio names one option and
+ * leaves the group anonymous.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Plan</label>
+ *   <ui-radio-group>
+ *     <label><ui-radio><input type="radio" name="plan" value="free" /></ui-radio> Free</label>
+ *     <label><ui-radio><input type="radio" name="plan" value="pro" /></ui-radio> Pro</label>
+ *   </ui-radio-group>
+ * </ui-field>
+ * ```
+ */
+export declare class UiRadioGroup extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    static readonly properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * Which way the options are laid out.
+     *
+     * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+     * gives beside its own: the browser this suite runs in does not implement
+     * auto-accessors, and the module would fail to parse.
+     */
+    orientation: RadioOrientation;
+    /**
+     * Marks the element a group before anything asks what it is.
+     *
+     * In `connectedCallback` rather than at first render, and the timing is the point:
+     * {@link UiField} reads this attribute to decide that the group — and not the first
+     * radio inside it — is the thing to name, and it does so on its own first update,
+     * which lands before this element's. Set a microtask later, the role would arrive
+     * after the only reader that needs it.
+     *
+     * A `role` the host wrote is never overwritten, the same way `<ui-switch>` never
+     * overwrites one on the control it announces.
+     */
+    connectedCallback(): void;
+    /**
+     * Keeps the announced orientation on the drawn one.
+     *
+     * Written unconditionally rather than only for the horizontal case: the default a
+     * screen reader assumes for a `radiogroup` is not something a component should have an
+     * opinion about, and the attribute costs nothing to state.
+     */
+    willUpdate(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-radio': UiRadio;
+        'ui-radio-group': UiRadioGroup;
+    }
+}
+//# sourceMappingURL=radio.d.ts.map

package/dist/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../src/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAC;AAmCzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACnC,gBAAyB,MAAM,0BA8G7B;IAEO,MAAM,IAAI,cAAc;CAGpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,YAAa,SAAQ,UAAU;IACxC,gBAAyB,MAAM,0BAiC7B;IAEF,gBAAyB,UAAU;;;;;MAEjC;IAEF;;;;;;OAMG;IACH,WAAW,EAAE,gBAAgB,CAAc;IAE3C;;;;;;;;;;;OAWG;IACM,iBAAiB,IAAI,IAAI;IAQlC;;;;;;OAMG;IACM,UAAU,IAAI,IAAI;IAIlB,MAAM,IAAI,cAAc;CAGpC;AAWD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;QACpB,gBAAgB,EAAE,YAAY,CAAC;KAClC;CACJ"}

package/dist/radio.js

@@ -0,0 +1,291 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * The size the control is drawn at, and a floor rather than a preference.
+ *
+ * The same measurement `src/checkbox.ts` carries, taken again on this element: a native
+ * radio is 13x13 in this engine, which is under WCAG 2.2's **2.5.8 Target Size (Minimum)**
+ * of 24x24 and escapes it only through that criterion's *user agent control* exception.
+ * Drawing it ourselves gives the exception up, so the floor becomes ours to hold, and
+ * `max()` is what holds it: a host who shrinks `--ui-space` cannot take this control below
+ * the floor without saying so in their own CSS.
+ *
+ * Written out rather than imported from the checkbox, for the reason `src/select.ts` gives
+ * about the box it shares with `src/input.ts` — and answered the same way, on the same
+ * terms: `tests/radio.test.ts` mounts both controls and asserts they agree on the size,
+ * the boundary, the fill and the focus ring, so something compares them and it fails when
+ * they drift.
+ */
+const size = css `max(24px, calc(${reference('--ui-space')} * 3))`;
+/** A mask layer covering the whole control, which the mark is then subtracted from. */
+const whole = css `linear-gradient(#000, #000)`;
+/**
+ * The mark, as a hole rather than a dot — the same decision `src/checkbox.ts` explains at
+ * length, reached here without a picture at all.
+ *
+ * A checkbox's tick needs a path and therefore a `data:` URI; a radio's mark is a circle,
+ * which is a gradient with a size. What both share is that the mark is **absent** rather
+ * than coloured: `mask-composite: exclude` punches it out of the accent fill, so what
+ * shows through is whatever the control sits on, and no colour is frozen anywhere a host
+ * could not override it.
+ */
+const mark = css `radial-gradient(circle closest-side, #000 100%, transparent 100%)`;
+/**
+ * One option's control, drawn from the token layer rather than replaced.
+ *
+ * **The `<input type="radio">` is yours.** You write it, you set its `name`, `value`,
+ * `checked` and `disabled`, and it stays in the light DOM — the shape every control in
+ * this kit has, and forced by the same constraint: an ARIA relationship by IDREF does not
+ * cross a shadow boundary, so a control rendered in here could not be labelled by the
+ * `<label>` around it.
+ *
+ * **This element carries no state and no name.** It is a drawing, and everything that
+ * makes a set of radios *a group* — one tab stop, arrow keys that move and select, one
+ * value out of the set — is the platform's, because they are native radios sharing a
+ * `name`. Wrapping each one changes none of that: measured in this suite, a group whose
+ * radios sit inside custom elements is still one group.
+ *
+ * @example
+ * ```html
+ * <label>
+ *   <ui-radio><input type="radio" name="plan" value="free" /></ui-radio>
+ *   Free
+ * </label>
+ * ```
+ */
+export class UiRadio extends LitElement {
+    static { this.styles = css `
+        :host {
+            display: inline-flex;
+        }
+
+        /* Everything below reaches a control the *host* wrote, through ::slotted — the
+           whole shape of this component, and the same one ui-checkbox has.
+
+           appearance: none is its whole cost, and it is taken for the reason
+           ARCHITECTURE.md states as a debt rather than a free hand: it removes the
+           platform's dot, its target size and its behaviour under forced colors in one
+           declaration, and each of those is answered below. What it buys is a radio that
+           belongs beside the checkbox this kit already draws — a native 13px radio next to
+           a drawn 24px checkbox would argue cosmetically for a difference that is
+           semantic. */
+        ::slotted(input) {
+            appearance: none;
+            box-sizing: border-box;
+            /* The user agent puts 3px around a radio. Left in, it would sit inside the
+               host box and put the control off centre in any layout that aligns to it. */
+            margin: 0;
+            inline-size: ${size};
+            block-size: ${size};
+            /* A circle, and the one measurement here that is not a token: the shape is
+               what tells a radio from a checkbox before either is read, so it cannot
+               follow --ui-radius without a square radio becoming possible. */
+            border-radius: 50%;
+            background-color: ${reference('--ui-color-surface')};
+            background-repeat: no-repeat;
+            border: 1px solid ${reference('--ui-color-border')};
+            cursor: pointer;
+            /* The focus ring is deliberately not in this list, for the reason
+               src/button.ts gives beside its own: delaying the affordance that says *this
+               is where you are* is the opposite of what it exists to do. */
+            transition:
+                background-color ${reference('--ui-duration-state')}
+                    ${reference('--ui-easing-state')},
+                border-color ${reference('--ui-duration-state')} ${reference('--ui-easing-state')};
+        }
+
+        /* The mark is a hole: the whole control, minus the circle, so what shows through
+           is whatever the control sits on. The docblock on the mask constant says why a
+           hole rather than a colour. */
+        ::slotted(input:checked) {
+            background-color: ${reference('--ui-color-accent')};
+            border-color: ${reference('--ui-color-accent')};
+            mask-image: ${whole}, ${mark};
+            mask-composite: exclude;
+            mask-size:
+                100% 100%,
+                calc(${size} / 2);
+            mask-position: center;
+            mask-repeat: no-repeat;
+        }
+
+        /* Unselected, the boundary finishes the mix it already started — the same hover
+           ui-input and ui-checkbox have, because it is the same boundary. Selected, the
+           boundary is not what the eye is on, so the fill moves instead, the way
+           ui-button's does.
+
+           The disabled guard is measured rather than assumed: a disabled control still
+           matches :hover. */
+        ::slotted(input:hover:not(:disabled)) {
+            border-color: ${reference('--ui-color-text')};
+        }
+
+        ::slotted(input:checked:hover:not(:disabled)) {
+            background-color: ${reference('--ui-color-accent-hover')};
+            border-color: ${reference('--ui-color-accent-hover')};
+        }
+
+        /* A visible focus ring is not decoration: removing it is the single most common
+           way a component stops being usable by keyboard — and on a radio group it is the
+           only thing that says which option an arrow key just moved to. */
+        ::slotted(input:focus-visible) {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: 2px;
+        }
+
+        ::slotted(input:disabled) {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        /* There is no error rule here, and its absence is the decision: what a radio group
+           gets wrong is the *choice*, not one option, so ui-radio-group paints the state
+           for the whole set. It does it by retargeting the boundary token over its own
+           subtree, which this rule reads without knowing anything about it. */
+
+        /* Forced colors replaces every author colour with one from the user's palette, so
+           the accent that says *selected* becomes the same Canvas as the surface that says
+           *not* — the state disappears, silently, for the people who turned the mode on to
+           see states more clearly. System colours are the ones forced colors keeps, so the
+           selected state names Highlight and the difference survives; the mark keeps
+           working untouched, because a mask has no colour to force.
+
+           Opacity is not a colour and is not forced, so the disabled control would still
+           be half-transparent against a palette chosen for contrast. GrayText is what that
+           mode has for *unavailable*, and it is a colour rather than a veil. */
+        @media (forced-colors: active) {
+            ::slotted(input:checked) {
+                background-color: Highlight;
+                border-color: Highlight;
+            }
+
+            ::slotted(input:disabled) {
+                border-color: GrayText;
+                opacity: 1;
+            }
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+/**
+ * A set of radios, laid out and named as one thing.
+ *
+ * **It hand-rolls no roving tabindex and it brings no state machine**, and that is this
+ * element's whole claim rather than a gap in it. Issue #15 asked which of the two it would
+ * be, because the APG **Radio Group** pattern — one tab stop, arrow keys that move *and*
+ * select, wrapping at the ends — is the first behaviour in the v0 cut that could have
+ * justified Zag. Neither was needed: native radios sharing a `name` **are** that pattern,
+ * and this suite measures it here rather than trusting it, wrappers and all.
+ *
+ * That is the test `ROADMAP.md` states, applied: Zag arrives where the platform has **no
+ * element** for the pattern, not merely where the pattern has state. `ui-menu` is where
+ * that question is open; a radio group is not.
+ *
+ * **What is left for this element is what the platform leaves out**: the layout, the
+ * `role` that makes a set of radios a group to a screen reader, and the group-level name,
+ * description and error state — which {@link UiField} wires onto *this* element rather
+ * than onto an option, because a `<label for>` naming one radio names one option and
+ * leaves the group anonymous.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Plan</label>
+ *   <ui-radio-group>
+ *     <label><ui-radio><input type="radio" name="plan" value="free" /></ui-radio> Free</label>
+ *     <label><ui-radio><input type="radio" name="plan" value="pro" /></ui-radio> Pro</label>
+ *   </ui-radio-group>
+ * </ui-field>
+ * ```
+ */
+export class UiRadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Which way the options are laid out.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * gives beside its own: the browser this suite runs in does not implement
+         * auto-accessors, and the module would fail to parse.
+         */
+        this.orientation = 'vertical';
+    }
+    static { this.styles = css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: calc(${reference('--ui-space')} / 2);
+        }
+
+        /* Laid out by the attribute rather than by the host's own CSS, so the drawing and
+           the announcement cannot disagree: orientation sets both this rule and
+           aria-orientation, and a host who reached for flex-direction instead would
+           change one of the two. */
+        :host([orientation='horizontal']) {
+            flex-direction: row;
+            flex-wrap: wrap;
+            column-gap: calc(${reference('--ui-space')} * 2);
+        }
+
+        /* The error, painted for the whole set by retargeting the boundary token over this
+           subtree — which is the override surface the token layer already publishes,
+           pointed at the group's own descendants instead of at a page.
+
+           A custom property inherits through a shadow boundary and a selector does not, so
+           this is what reaches a control two elements down that this sheet cannot name:
+           ::slotted() stops at the group's own children, :host-context() is not
+           cross-engine, and :host(:has(...)) is invalid in this engine. The value still
+           arrives as a token reference, so a host who retunes danger retunes this too.
+
+           aria-invalid is not written here: ui-field sets it as part of the wiring it
+           already owns, so the message under the group and the boundary around its options
+           cannot disagree about whether there is an error. */
+        :host([aria-invalid='true']) {
+            --ui-color-border: ${reference('--ui-color-danger')};
+        }
+    `; }
+    static { this.properties = {
+        orientation: { type: String, reflect: true },
+    }; }
+    /**
+     * Marks the element a group before anything asks what it is.
+     *
+     * In `connectedCallback` rather than at first render, and the timing is the point:
+     * {@link UiField} reads this attribute to decide that the group — and not the first
+     * radio inside it — is the thing to name, and it does so on its own first update,
+     * which lands before this element's. Set a microtask later, the role would arrive
+     * after the only reader that needs it.
+     *
+     * A `role` the host wrote is never overwritten, the same way `<ui-switch>` never
+     * overwrites one on the control it announces.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'radiogroup');
+        }
+    }
+    /**
+     * Keeps the announced orientation on the drawn one.
+     *
+     * Written unconditionally rather than only for the horizontal case: the default a
+     * screen reader assumes for a `radiogroup` is not something a component should have an
+     * opinion about, and the attribute costs nothing to state.
+     */
+    willUpdate() {
+        this.setAttribute('aria-orientation', this.orientation);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+// 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-radio', UiRadio);
+// Stryker disable next-line StringLiteral: the same, for the same reason.
+customElements.define('ui-radio-group', UiRadioGroup);
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../src/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,IAAI,GAAG,GAAG,CAAA,kBAAkB,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC;AAElE,uFAAuF;AACvF,MAAM,KAAK,GAAG,GAAG,CAAA,6BAA6B,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,IAAI,GAAG,GAAG,CAAA,mEAAmE,CAAC;AAEpF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;aACV,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;2BAqBd,IAAI;0BACL,IAAI;;;;;gCAKE,SAAS,CAAC,oBAAoB,CAAC;;gCAE/B,SAAS,CAAC,mBAAmB,CAAC;;;;;;mCAM3B,SAAS,CAAC,qBAAqB,CAAC;sBAC7C,SAAS,CAAC,mBAAmB,CAAC;+BACrB,SAAS,CAAC,qBAAqB,CAAC,IAAI,SAAS,CAAC,mBAAmB,CAAC;;;;;;;gCAOjE,SAAS,CAAC,mBAAmB,CAAC;4BAClC,SAAS,CAAC,mBAAmB,CAAC;0BAChC,KAAK,KAAK,IAAI;;;;uBAIjB,IAAI;;;;;;;;;;;;;4BAaC,SAAS,CAAC,iBAAiB,CAAC;;;;gCAIxB,SAAS,CAAC,yBAAyB,CAAC;4BACxC,SAAS,CAAC,yBAAyB,CAAC;;;;;;;iCAO/B,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCzD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;;AAGL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAwCI;;;;;;WAMG;QACH,gBAAW,GAAqB,UAAU,CAAC;IAoC/C,CAAC;aAlF4B,WAAM,GAAG,GAAG,CAAA;;;;wBAIjB,SAAS,CAAC,YAAY,CAAC;;;;;;;;;;+BAUhB,SAAS,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;iCAiBrB,SAAS,CAAC,mBAAmB,CAAC;;KAE1D,AAjC8B,CAiC7B;aAEuB,eAAU,GAAG;QAClC,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;KAC/C,AAFkC,CAEjC;IAWF;;;;;;;;;;;OAWG;IACM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACM,UAAU;QACf,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAE3C,0EAA0E;AAC1E,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,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"];
+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"];
 /** A CSS custom property this package defines and gives a default. */
 export type Token = (typeof tokens)[number];
 /**
@@ -44,7 +44,7 @@ export type Token = (typeof tokens)[number];
  * what it buys is an override surface a host can hold in their head: change the accent and
  * the hover and pressed colours follow, rather than being one more name each.
  */
-export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed"];
+export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed", "--ui-elevation-raised"];
 /** A CSS custom property this package computes rather than declares. */
 export type DerivedToken = (typeof derivedTokens)[number];
 /**

package/dist/tokens.d.ts.map

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

package/dist/tokens.js

@@ -90,6 +90,23 @@ export const tokens = [
     // size, and 2 is the weight the adopted set is drawn at.
     '--ui-icon-size',
     '--ui-icon-stroke',
+    // Elevation, arriving with `ui-card` — the category `ROADMAP.md` said would, after the
+    // first overlay arrived and brought none.
+    //
+    // A step in a scale, named by an ordinal with gaps, for the reason the duration scale
+    // gives above: elevation is *relative* by nature — a card sits above the page, a menu
+    // above the card — so the names have to be able to grow between each other. No
+    // component reads this one; they read `--ui-elevation-raised`, which points in here.
+    // No second step comes with it: a tooltip and a menu are the components that would
+    // judge one, and neither is written.
+    //
+    // **It carries no dark value, and cannot.** `darkScheme` is emitted through
+    // `light-dark()`, which takes colours — and a shadow is not a colour. So this is one
+    // value in both schemes, and on a dark page it does almost nothing: black on charcoal
+    // is black. What separates a raised surface there is the *boundary*, which is derived
+    // and therefore already scheme-correct — which is why `src/card.ts` draws both and
+    // says so beside them.
+    '--ui-elevation-100',
 ];
 /**
  * The roles computed from the grounds rather than declared beside them.
@@ -120,6 +137,11 @@ export const derivedTokens = [
     '--ui-color-pressed',
     '--ui-color-accent-hover',
     '--ui-color-accent-pressed',
+    // The purpose the elevation scale is read through, arriving with `ui-card`. `raised`
+    // is a role rather than a component: a card is the first surface lifted off the page
+    // and will not be the last, and the name a host retunes should not be the name of
+    // whichever component happened to need it first.
+    '--ui-elevation-raised',
 ];
 /**
  * The default value of every ground token, applied at `:root` by {@link tokenStyleSheet}.
@@ -168,6 +190,12 @@ export const defaults = {
     '--ui-easing-exit': 'ease-in',
     '--ui-icon-size': '1.25em',
     '--ui-icon-stroke': '2',
+    // Two layers rather than one, which is what makes a shadow read as *lift* instead of
+    // as a smudge: a tight, nearly opaque one draws the contact edge, and a wider, softer
+    // one is the cast. Both are black at a low alpha, so the shadow darkens whatever it
+    // falls on rather than tinting it — a coloured shadow is a decision this layer would
+    // have to defend at every hue a host might set.
+    '--ui-elevation-100': '0 1px 2px -1px rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1)',
 };
 /**
  * A ground as it is written inside a formula: the name, with its own default behind it.
@@ -232,6 +260,10 @@ export const formulas = {
     // is 4.52 in light, a rounding error from failing, and a default nobody could then
     // retune without breaking a floor they were not thinking about.
     '--ui-color-text-muted': mix('--ui-color-text', 65, '--ui-color-surface'),
+    // A plain reference, like the duration purpose above: the scale is where the value
+    // lives, and a host who wants flatter cards moves the role rather than reverse
+    // engineering which step a card happens to read.
+    '--ui-elevation-raised': ground('--ui-elevation-100'),
 };
 /**
  * The grounds whose value differs when the page is rendered dark.

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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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,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,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;CACjC,CAAC;AAEF,uFAAuF;AACvF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,MAAM;SACjB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC;IAC9G,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,kFAAkF;IAClF,qFAAqF;IACrF,sFAAsF;IACtF,gFAAgF;IAChF,MAAM,SAAS,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,aAAa,CAAC;SAC1C,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC;SACvC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,OAAO;QACH,yCAAyC,OAAO,KAAK;QACrD,yDAAyD,SAAS,UAAU;KAC/E,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",
@@ -45,7 +45,7 @@
     "test": "vitest run",
     "coverage": "coverage-floor",
     "scan": "rak200-scan",
-    "mutation": "stryker run",
+    "mutation": "node tests/tooling/mutate-changed.mjs",
     "build": "tsc -p tsconfig.icons.json && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"