@rak200/ui 0.2.12 → 0.2.13

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.** Eleven components — `<ui-button>`, `<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/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":"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"}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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,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

@@ -4,6 +4,7 @@ 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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "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"