@rak200/ui 0.2.18 → 0.3.0

package/README.md

@@ -45,10 +45,7 @@ npm install @rak200/ui
   </ui-select>
 </ui-field>
 
-<ui-field>
-  <label slot="label">Email notifications</label>
-  <ui-switch><input type="checkbox" name="notify" checked /></ui-switch>
-</ui-field>
+<ui-switch label="Email notifications" name="notify" checked></ui-switch>
 
 <ui-button><ui-icon name="check"></ui-icon> Save</ui-button>
 <ui-button variant="secondary">Cancel</ui-button>
@@ -83,7 +80,9 @@ which one you are looking at.
 ## Documentation
 
 The reference lives in [docs/](docs/README.md) — one page per unit. The playground shows the
-components; `docs/` is what describes them.
+components; `docs/` is what describes them. It renders under the token sheet a host inserts, and
+its toolbar switches the colour scheme — so what the site shows is what a page gets, in both
+schemes rather than one.
 
 ## Status
 

package/dist/checkbox.d.ts

@@ -2,20 +2,202 @@ import { LitElement, type CSSResult, type TemplateResult } from 'lit';
 /**
  * A boolean control, drawn from the token layer rather than replaced.
  *
- * The `<input type="checkbox">` is the host's own and stays in the light DOM; this element
- * is the box around it. {@link UiCheckbox} and {@link UiSwitch} differ in what they draw
- * and in what they announce, never in what they are made of.
+ * {@link UiCheckbox} and {@link UiSwitch} differ in what they draw and in what they
+ * announce, never in what they are made of. Both render a native `<input type="checkbox">`
+ * inside a `<label>` in this element's shadow root, so every behaviour a boolean control
+ * has stays the platform's — see the docblock on the shared styles above.
+ *
+ * **The element is the form control**, through `ElementInternals`. An `<input>` inside a
+ * shadow root has no form owner, so the value reaches a submit because this element passes
+ * it on and never because the input did.
+ *
+ * That is the entire price, and it is worth listing because it is smaller than it looks:
+ * `setFormValue`, `setValidity`, the three form lifecycle callbacks a form can no longer
+ * perform directly, and a re-dispatch of `change`, which is non-composed. **None of it is
+ * accessibility** — the role, the checked state, the tab stop and what `disabled` does to
+ * it are all still the platform's, because the control really is one.
+ *
+ * The same object pays the other half, which is a cost of the control being *in here*
+ * rather than of the form: two states a host stylesheet could no longer see. See
+ * {@link UiToggle.expose}.
  */
 declare class UiToggle extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    /**
+     * Focus is delegated, so `focus()` and `reportValidity()` reach the control.
+     *
+     * Neither is optional: the host is not a focusable element, so without this a call to
+     * either lands on something that cannot take focus and does nothing — and the second
+     * one is what the browser does on its own when a form with an invalid control is
+     * submitted.
+     */
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static readonly properties: {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * The short road to a label. `slot="label"` overrides it where markup is needed.
+     *
+     * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+     * gives beside its own — and so for every property below.
+     */
+    label: string;
+    /**
+     * The name the value is submitted under.
+     *
+     * **Reflected, and that is a requirement rather than a convenience.** A form reads a
+     * form-associated custom element's name from the content attribute, so a host who sets
+     * only the property would submit nothing at all — silently, with a value published and
+     * no entry to carry it.
+     */
+    name: string;
+    /** What a checked control submits, which the platform spells `on` by default. */
+    value: string;
+    /**
+     * Whether the control is on.
+     *
+     * **Not reflected, which is the platform's own answer rather than an omission.** A
+     * native checkbox's `checked` IDL attribute does not reflect either: the content
+     * attribute is the *default*, which is what a form reset returns to, and an attribute
+     * that followed every click would make the default whatever the user last did.
+     *
+     * A host stylesheet reaches the live state through `:state(checked)` — see
+     * {@link UiToggle.expose}, and the measurement there for why it is not `::part()`.
+     */
+    checked: boolean;
+    /** Whether the control rejects interaction. Reflected, the way the platform's is. */
+    disabled: boolean;
+    /** Whether a form is invalid while this control is off. Reflected, likewise. */
+    required: boolean;
+    /** The error message, which paints the boundary and is announced with the control. */
+    error: string;
+    /**
+     * Published after every render, and after the first one too — Lit calls this on the
+     * initial update as well, which is why there is no `firstUpdated` beside it. A second
+     * call from there would be a statement no test could distinguish from its own absence.
+     */
+    updated(): void;
+    /**
+     * Puts one internal state where a host stylesheet can select on it.
+     *
+     * **This is what replaces the attribute `checked` deliberately does not reflect**, and
+     * the alternative was measured rather than assumed: `::part(box):checked` does not
+     * match. A `::part()` may be followed by user-action pseudo-classes and not by state
+     * ones, so a host had no way at all to reach a state this element keeps in its shadow
+     * root — which would have made *not reflecting* a decision that costs the host
+     * something, rather than one that costs nothing.
+     *
+     * Only the two states with no other route are exposed. `:valid`, `:invalid` and
+     * `:disabled` already match on this element, measured, because a form-associated
+     * custom element takes part in them; `required` reflects, so `[required]` reaches it.
+     *
+     * @param state - The name, as `:state(name)` spells it.
+     */
+    protected expose(state: string, on: boolean): void;
+    /**
+     * What the inner control announces itself as, where the platform needs telling.
+     *
+     * Empty here, and the attribute is then omitted rather than written blank: an
+     * `<input type="checkbox">` already announces `checkbox`, and restating it would be
+     * this component overriding the platform with the platform. {@link UiSwitch} is the
+     * one that has something to add.
+     */
+    protected readonly controlRole: string;
+    /**
+     * The listener, as a field rather than a method, which is this repository's shape for
+     * one — `src/toast.ts` carries the same. What it delegates to is a method, so a
+     * subclass can extend the mirroring without restating the binding.
+     *
+     * **The `change` is re-dispatched rather than left to bubble**, because it does not:
+     * `change` is one of the events the platform marks non-composed, so the one the inner
+     * control fires stops at the shadow boundary and a host listening on the tag would
+     * hear nothing. `input` needs no such help — it is composed, and arrives retargeted to
+     * this element on its own.
+     */
+    protected readonly changed: (event: Event) => void;
+    /**
+     * Mirrors the platform's own state back into the properties it came from.
+     *
+     * Read off the control rather than inverted from what was there: the platform is what
+     * just changed it, and asking is the only way to stay right about a state this element
+     * did not decide.
+     */
+    protected sync(control: HTMLInputElement): void;
+    /**
+     * A form reset, which the platform calls and this element cannot see any other way.
+     *
+     * The content attribute is what it returns to, which is exactly `defaultChecked` on a
+     * native control — and it stays a usable default only because `checked` is not
+     * reflected onto it.
+     */
+    formResetCallback(): void;
+    /** A `<fieldset disabled>` above this element, which reaches it and nothing below. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restoring after a back-navigation, where the browser hands the value back. */
+    formStateRestoreCallback(state: string | null): void;
+    /** The form this element participates in, for a host that needs it. */
+    get form(): HTMLFormElement | null;
+    /** Whether the control currently satisfies its constraints. */
+    get validity(): ValidityState;
+    /** The message a form would report for it, empty while the control is valid. */
+    get validationMessage(): string;
     render(): TemplateResult;
+    /**
+     * The whole drawing, with the one thing the two elements disagree on passed in.
+     *
+     * **A parameter rather than an overridable hook**, and the difference is one the
+     * mutation floor found: a hook returning `false` is indistinguishable from a hook
+     * returning nothing, because `input.indeterminate` coerces `undefined` to `false` — so
+     * no test could tell the base implementation from its own absence. Passed at the call
+     * site it is a value, and `<ui-switch>` reading back an unmixed control is what checks
+     * it.
+     *
+     * The mixed state is bound rather than written onto the control after render, which is
+     * what keeps this element free of a query whose null branch nothing could reach.
+     */
+    protected template(mixed: boolean): TemplateResult;
 }
 /**
  * A checkbox, styled by the token layer rather than replaced.
  *
- * **The `<input>` is yours.** You write it, you set its attributes, and it stays in the
- * light DOM — so `name`, `checked`, `required` and `disabled` are the platform's business,
- * and it reaches a form submit because it is a native control inside a `<form>`. The same
- * shape `<ui-input>` has, for the same reason.
+ * **The control is this element's**, which RFC 0005 decided and reversed an earlier rule to
+ * do: the `<input>` and its `<label>` are rendered together in one shadow root, so `name`,
+ * `checked`, `required` and `disabled` are properties here rather than attributes a host
+ * writes on a control it supplies.
  *
  * **The indeterminate state is drawn, and that is not a feature being added.**
  * `appearance: none` takes the platform's dash away with the rest of the drawing, so a
@@ -23,19 +205,68 @@ declare class UiToggle extends LitElement {
  * rather than a missing one. The dash below is what stops that, and nothing here invites
  * a tri-state that APG says is rare.
  *
- * Composes with {@link UiField}, which finds the control through this wrapper and wires
- * the label, the help, the error and `aria-invalid` to it.
- *
  * @example
  * ```html
- * <ui-field>
- *   <label slot="label">Send a receipt</label>
- *   <ui-checkbox><input type="checkbox" name="receipt" /></ui-checkbox>
- * </ui-field>
+ * <ui-checkbox label="Send a receipt" name="receipt"></ui-checkbox>
+ * ```
+ *
+ * @example A label an attribute cannot hold.
+ * ```html
+ * <ui-checkbox name="terms">
+ *   <span slot="label">I accept the <a href="/terms">terms</a></span>
+ * </ui-checkbox>
  * ```
  */
 export declare class UiCheckbox extends UiToggle {
+    static readonly properties: {
+        indeterminate: {
+            type: BooleanConstructor;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    /**
+     * The mixed state, which the platform stopped drawing once `appearance` was removed.
+     *
+     * It takes an attribute where the platform offers none, which is this element having
+     * become the control rather than a box around one — and it is not reflected, for the
+     * reason `checked` is not.
+     */
+    indeterminate: boolean;
     static readonly styles: CSSResult[];
+    render(): TemplateResult;
+    updated(): void;
+    /**
+     * A toggle answers the question the mixed state was asking, and the platform has
+     * already cleared it on the control — so this reads it back rather than assuming.
+     * Without it the next render would put the mixed state straight back.
+     */
+    protected sync(control: HTMLInputElement): void;
 }
 /**
  * A switch, which is a checkbox that says *on* and *off* rather than *checked*.
@@ -43,28 +274,22 @@ export declare class UiCheckbox extends UiToggle {
  * **The difference is semantic and the drawing follows it**, which is the order that
  * matters: a switch takes effect immediately and a checkbox is a value you submit, so the
  * two are not one component with two skins. `role="switch"` is what carries that to a
- * screen reader, and this element sets it on the slotted control rather than asking the
- * host to remember — forgetting it would leave a control that looks like a switch and
- * announces as a checkbox, with nothing anywhere to read. A role the host wrote is never
- * overwritten, the same way {@link UiField} never overwrites an `id` it did not generate.
+ * screen reader, and this element writes it on the control it renders — so a host has
+ * nothing to remember and nothing to forget.
  *
  * There is no native switch to delegate to: `<input type="checkbox" switch>` is
  * unsupported in the engine this suite measures, so the element is a checkbox with a role
  * and a drawing. A host who wants the mixed state wants {@link UiCheckbox} — `switch` has
- * no third value, so this element does not draw one.
+ * no third value, so this element does not draw one and offers no property for one.
  *
  * @example
  * ```html
- * <ui-field>
- *   <label slot="label">Email notifications</label>
- *   <ui-switch><input type="checkbox" name="notify" checked /></ui-switch>
- * </ui-field>
+ * <ui-switch label="Email notifications" name="notify" checked></ui-switch>
  * ```
  */
 export declare class UiSwitch extends UiToggle {
-    #private;
     static readonly styles: CSSResult[];
-    render(): TemplateResult;
+    protected readonly controlRole: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AA6IjF;;;;;;GAMG;AACH,cAAM,QAAS,SAAQ,UAAU;IACpB,MAAM,IAAI,cAAc;CAGpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,UAAW,SAAQ,QAAQ;IACpC,gBAAyB,MAAM,EAAE,SAAS,EAAE,CA+B1C;CACL;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,QAAS,SAAQ,QAAQ;;IAClC,gBAAyB,MAAM,EAAE,SAAS,EAAE,CAuC1C;IAEO,MAAM,IAAI,cAAc;CAmBpC;AAWD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAC;QAC1B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAqL1F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,cAAM,QAAS,SAAQ,UAAU;;IAC7B,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC;;;;;;;OAOG;IACH,gBAAyB,iBAAiB;;;;;;;MAGxC;IAEF,gBAAyB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQjC;IAEF;;;;;OAKG;IACH,KAAK,SAAM;IAEX;;;;;;;OAOG;IACH,IAAI,SAAM;IAEV,iFAAiF;IACjF,KAAK,SAAQ;IAEb;;;;;;;;;;OAUG;IACH,OAAO,UAAS;IAEhB,qFAAqF;IACrF,QAAQ,UAAS;IAEjB,gFAAgF;IAChF,QAAQ,UAAS;IAEjB,sFAAsF;IACtF,KAAK,SAAM;IAoBX;;;;OAIG;IACM,OAAO,IAAI,IAAI;IAKxB;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI;IAQlD;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAM;IAE5C;;;;;;;;;;OAUG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,GAAI,OAAO,KAAK,KAAG,IAAI,CAG/C;IAEF;;;;;;OAMG;IACH,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI/C;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAIzB,sFAAsF;IACtF,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,iFAAiF;IACjF,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIpD,uEAAuE;IACvE,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,+DAA+D;IAC/D,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,gFAAgF;IAChF,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAEQ,MAAM,IAAI,cAAc;IAIjC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,cAAc;CAwBrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,UAAW,SAAQ,QAAQ;IACpC,gBAAyB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAGjC;IAEF;;;;;;OAMG;IACH,aAAa,UAAS;IAEtB,gBAAyB,MAAM,EAAE,SAAS,EAAE,CA6C1C;IAEO,MAAM,IAAI,cAAc;IAIxB,OAAO,IAAI,IAAI;IAKxB;;;;OAIG;cACgB,IAAI,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAI3D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAClC,gBAAyB,MAAM,EAAE,SAAS,EAAE,CAuC1C;IAEF,mBAA4B,WAAW,EAAE,MAAM,CAAY;CAC9D;AAWD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAC;QAC1B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 import { reference } from './reference.js';
 /**
  * The size both controls are drawn at, and a floor rather than a preference.
@@ -19,12 +19,6 @@ const size = css `max(24px, calc(${reference('--ui-space')} * 3))`;
  * decision. **A mask has no colour**: only its alpha is read, so the black below is a
  * shape and never a value. What the tick shows is the surface behind the control, punched
  * out of the accent fill by `mask-composite: exclude`.
- *
- * The alternative was a mark rendered into the shadow root, and it is not available:
- * `:host(:has(input:checked))` is invalid in this engine — `CSS.supports` says so, so it
- * is a selector that does not exist rather than one that fails to update — and shadow CSS
- * has no other way to read a slotted control's state. Only `::slotted(input:checked)`
- * does, which means the control has to paint its own mark.
  */
 const tick = css `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")`;
 /** A mask layer covering the whole control, which the mark is then subtracted from. */
@@ -32,10 +26,20 @@ const whole = css `linear-gradient(#000, #000)`;
 /**
  * What a drawn boolean control looks like, which both elements share.
  *
- * The control is the host's own `<input type="checkbox">`, slotted, for the reason
- * `src/input.ts` gives at length: an IDREF does not cross a shadow boundary, so a control
- * rendered in here could not be labelled by the `<label>` beside it. Everything below
- * reaches it through `::slotted`.
+ * **The control and its label are rendered together, in this element's shadow root.** RFC
+ * 0005 settled that and measured why: an ARIA relationship needs every end of it inside one
+ * tree scope, and the arrangement that strands a control is the one that puts the control on
+ * one side of a shadow boundary and its label on the other — not the fact that the control
+ * is rendered. With the `<label>` and the `<input>` in the same root the association is the
+ * platform's, and so is everything that follows from it: the toggle, the <kbd>Space</kbd>
+ * key, the click target over the label text, and the rule that a link inside a label
+ * follows the link rather than toggling. None of that is written in this file, which is the
+ * point of the shape.
+ *
+ * The state is this element's own, so these rules read `input:checked` directly. The
+ * `::slotted(input:checked)` this file used to be built on was forced by
+ * `:host(:has(input:checked))` being invalid in this engine, and that constraint went with
+ * the slotted control.
  *
  * **`appearance: none` is the whole cost of this component**, and it is taken knowingly.
  * It buys one drawing for the pair — the same border, radius, focus ring and accent the
@@ -48,21 +52,43 @@ const whole = css `linear-gradient(#000, #000)`;
  * target-size floor at {@link size}, and the forced-colors block at the end.
  */
 const toggle = css `
+    /* A column, because the error sits under the control rather than beside it — and
+       flex-start rather than the default stretch, so a message wider than the label does
+       not widen the label, which is the click target. */
     :host {
         display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: calc(${reference('--ui-space')} / 2);
+        font-family: ${reference('--ui-font')};
+    }
+
+    /* The label is the whole pair's worth of click target, which a host used to have to
+       build by wrapping the component in a <label> of their own.
+
+       flex rather than inline-flex, and the difference is one the platform erases: a flex
+       item's display is blockified, so inline-flex here would compute to flex anyway — a
+       declaration no rendering could tell from this one. */
+    label {
+        display: flex;
+        align-items: center;
+        gap: ${reference('--ui-space')};
+        cursor: pointer;
+        color: ${reference('--ui-color-text')};
     }
 
-    ::slotted(input) {
+    input {
         appearance: none;
         box-sizing: border-box;
         /* The user agent puts 3px around a checkbox. Left in, it would sit inside the
            host box and put the control off centre in any layout that aligns to it. */
         margin: 0;
+        flex: none;
         block-size: ${size};
         background-color: ${reference('--ui-color-surface')};
         background-repeat: no-repeat;
         border: 1px solid ${reference('--ui-color-border')};
-        cursor: pointer;
+        cursor: inherit;
         /* 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. */
@@ -71,7 +97,7 @@ const toggle = css `
             border-color ${reference('--ui-duration-state')} ${reference('--ui-easing-state')};
     }
 
-    ::slotted(input:checked) {
+    input:checked {
         background-color: ${reference('--ui-color-accent')};
         border-color: ${reference('--ui-color-accent')};
     }
@@ -82,35 +108,50 @@ const toggle = css `
 
        The disabled guard is measured rather than assumed: a disabled control still
        matches :hover. */
-    ::slotted(input:hover:not(:disabled)) {
+    input:hover:not(:disabled) {
         border-color: ${reference('--ui-color-text')};
     }
 
-    ::slotted(input:checked:hover:not(:disabled)) {
+    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. */
-    ::slotted(input:focus-visible) {
+    input:focus-visible {
         outline: 2px solid ${reference('--ui-color-focus')};
         outline-offset: 2px;
     }
 
-    ::slotted(input:disabled) {
-        cursor: not-allowed;
+    input:disabled {
         opacity: 0.5;
     }
 
-    /* The error state is not this component's to decide: ui-field sets aria-invalid on
-       the control as part of the wiring it already owns, and this rule reads it — so the
-       message under the field and the control cannot disagree about whether there is an
-       error. Only the boundary moves; a red fill on a switch would read as *on*. */
-    ::slotted(input[aria-invalid='true']) {
+    /* Read off the host rather than through :has(), because the property is reflected and
+       the host attribute is therefore the same fact one selector earlier. */
+    :host([disabled]) label {
+        cursor: not-allowed;
+        color: ${reference('--ui-color-text-muted')};
+    }
+
+    /* Read off the control's own aria-invalid rather than off a host attribute, which is
+       the same source a screen reader uses and the same rule this file carried when
+       ui-field was the one writing it. One property now feeds all three — the boundary,
+       the message and setValidity — so they cannot disagree. Only the boundary moves; a
+       red fill on a switch would read as *on*.
+
+       Not :host([error]): a reflected string property whose default is empty puts an
+       empty attribute on the host, and an attribute-presence selector matches it. */
+    input[aria-invalid='true'] {
         border-color: ${reference('--ui-color-danger')};
     }
 
+    .error {
+        color: ${reference('--ui-color-danger')};
+        font-size: ${reference('--ui-text-supporting')};
+    }
+
     /* Forced colors replaces every author colour with one from the user's palette, so
        the accent that says *checked* becomes the same Canvas as the surface that says
        *not* — the state disappears, silently, for the people who turned the mode on to
@@ -122,13 +163,12 @@ const toggle = css `
        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),
-        ::slotted(input:indeterminate) {
+        input:checked {
             background-color: Highlight;
             border-color: Highlight;
         }
 
-        ::slotted(input:disabled) {
+        input:disabled {
             border-color: GrayText;
             opacity: 1;
         }
@@ -137,22 +177,245 @@ const toggle = css `
 /**
  * A boolean control, drawn from the token layer rather than replaced.
  *
- * The `<input type="checkbox">` is the host's own and stays in the light DOM; this element
- * is the box around it. {@link UiCheckbox} and {@link UiSwitch} differ in what they draw
- * and in what they announce, never in what they are made of.
+ * {@link UiCheckbox} and {@link UiSwitch} differ in what they draw and in what they
+ * announce, never in what they are made of. Both render a native `<input type="checkbox">`
+ * inside a `<label>` in this element's shadow root, so every behaviour a boolean control
+ * has stays the platform's — see the docblock on the shared styles above.
+ *
+ * **The element is the form control**, through `ElementInternals`. An `<input>` inside a
+ * shadow root has no form owner, so the value reaches a submit because this element passes
+ * it on and never because the input did.
+ *
+ * That is the entire price, and it is worth listing because it is smaller than it looks:
+ * `setFormValue`, `setValidity`, the three form lifecycle callbacks a form can no longer
+ * perform directly, and a re-dispatch of `change`, which is non-composed. **None of it is
+ * accessibility** — the role, the checked state, the tab stop and what `disabled` does to
+ * it are all still the platform's, because the control really is one.
+ *
+ * The same object pays the other half, which is a cost of the control being *in here*
+ * rather than of the form: two states a host stylesheet could no longer see. See
+ * {@link UiToggle.expose}.
  */
 class UiToggle extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The short road to a label. `slot="label"` overrides it where markup is needed.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * gives beside its own — and so for every property below.
+         */
+        this.label = '';
+        /**
+         * The name the value is submitted under.
+         *
+         * **Reflected, and that is a requirement rather than a convenience.** A form reads a
+         * form-associated custom element's name from the content attribute, so a host who sets
+         * only the property would submit nothing at all — silently, with a value published and
+         * no entry to carry it.
+         */
+        this.name = '';
+        /** What a checked control submits, which the platform spells `on` by default. */
+        this.value = 'on';
+        /**
+         * Whether the control is on.
+         *
+         * **Not reflected, which is the platform's own answer rather than an omission.** A
+         * native checkbox's `checked` IDL attribute does not reflect either: the content
+         * attribute is the *default*, which is what a form reset returns to, and an attribute
+         * that followed every click would make the default whatever the user last did.
+         *
+         * A host stylesheet reaches the live state through `:state(checked)` — see
+         * {@link UiToggle.expose}, and the measurement there for why it is not `::part()`.
+         */
+        this.checked = false;
+        /** Whether the control rejects interaction. Reflected, the way the platform's is. */
+        this.disabled = false;
+        /** Whether a form is invalid while this control is off. Reflected, likewise. */
+        this.required = false;
+        /** The error message, which paints the boundary and is announced with the control. */
+        this.error = '';
+        this.#internals = this.attachInternals();
+        /**
+         * What the inner control announces itself as, where the platform needs telling.
+         *
+         * Empty here, and the attribute is then omitted rather than written blank: an
+         * `<input type="checkbox">` already announces `checkbox`, and restating it would be
+         * this component overriding the platform with the platform. {@link UiSwitch} is the
+         * one that has something to add.
+         */
+        this.controlRole = '';
+        /**
+         * The listener, as a field rather than a method, which is this repository's shape for
+         * one — `src/toast.ts` carries the same. What it delegates to is a method, so a
+         * subclass can extend the mirroring without restating the binding.
+         *
+         * **The `change` is re-dispatched rather than left to bubble**, because it does not:
+         * `change` is one of the events the platform marks non-composed, so the one the inner
+         * control fires stops at the shadow boundary and a host listening on the tag would
+         * hear nothing. `input` needs no such help — it is composed, and arrives retargeted to
+         * this element on its own.
+         */
+        this.changed = (event) => {
+            this.sync(event.target);
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+    }
+    static { this.formAssociated = true; }
+    /**
+     * Focus is delegated, so `focus()` and `reportValidity()` reach the control.
+     *
+     * Neither is optional: the host is not a focusable element, so without this a call to
+     * either lands on something that cannot take focus and does nothing — and the second
+     * one is what the browser does on its own when a form with an invalid control is
+     * submitted.
+     */
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.properties = {
+        label: { type: String, reflect: true },
+        name: { type: String, reflect: true },
+        value: { type: String, reflect: true },
+        checked: { type: Boolean },
+        disabled: { type: Boolean, reflect: true },
+        required: { type: Boolean, reflect: true },
+        error: { type: String, reflect: true },
+    }; }
+    #internals;
+    /** The form value and the validity, which move together here or disagree anywhere. */
+    #publish() {
+        this.#internals.setFormValue(this.checked ? this.value : null);
+        if (this.error !== '') {
+            this.#internals.setValidity({ customError: true }, this.error);
+        }
+        else if (this.required && !this.checked) {
+            this.#internals.setValidity({ valueMissing: true }, 'Please tick this box if you want to proceed.');
+        }
+        else {
+            this.#internals.setValidity({});
+        }
+    }
+    /**
+     * Published after every render, and after the first one too — Lit calls this on the
+     * initial update as well, which is why there is no `firstUpdated` beside it. A second
+     * call from there would be a statement no test could distinguish from its own absence.
+     */
+    updated() {
+        this.#publish();
+        this.expose('checked', this.checked);
+    }
+    /**
+     * Puts one internal state where a host stylesheet can select on it.
+     *
+     * **This is what replaces the attribute `checked` deliberately does not reflect**, and
+     * the alternative was measured rather than assumed: `::part(box):checked` does not
+     * match. A `::part()` may be followed by user-action pseudo-classes and not by state
+     * ones, so a host had no way at all to reach a state this element keeps in its shadow
+     * root — which would have made *not reflecting* a decision that costs the host
+     * something, rather than one that costs nothing.
+     *
+     * Only the two states with no other route are exposed. `:valid`, `:invalid` and
+     * `:disabled` already match on this element, measured, because a form-associated
+     * custom element takes part in them; `required` reflects, so `[required]` reaches it.
+     *
+     * @param state - The name, as `:state(name)` spells it.
+     */
+    expose(state, on) {
+        if (on) {
+            this.#internals.states.add(state);
+        }
+        else {
+            this.#internals.states.delete(state);
+        }
+    }
+    /**
+     * Mirrors the platform's own state back into the properties it came from.
+     *
+     * Read off the control rather than inverted from what was there: the platform is what
+     * just changed it, and asking is the only way to stay right about a state this element
+     * did not decide.
+     */
+    sync(control) {
+        this.checked = control.checked;
+    }
+    /**
+     * A form reset, which the platform calls and this element cannot see any other way.
+     *
+     * The content attribute is what it returns to, which is exactly `defaultChecked` on a
+     * native control — and it stays a usable default only because `checked` is not
+     * reflected onto it.
+     */
+    formResetCallback() {
+        this.checked = this.hasAttribute('checked');
+    }
+    /** A `<fieldset disabled>` above this element, which reaches it and nothing below. */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /** Restoring after a back-navigation, where the browser hands the value back. */
+    formStateRestoreCallback(state) {
+        this.checked = state !== null;
+    }
+    /** The form this element participates in, for a host that needs it. */
+    get form() {
+        return this.#internals.form;
+    }
+    /** Whether the control currently satisfies its constraints. */
+    get validity() {
+        return this.#internals.validity;
+    }
+    /** The message a form would report for it, empty while the control is valid. */
+    get validationMessage() {
+        return this.#internals.validationMessage;
+    }
     render() {
-        return html `<slot></slot>`;
+        return this.template(false);
+    }
+    /**
+     * The whole drawing, with the one thing the two elements disagree on passed in.
+     *
+     * **A parameter rather than an overridable hook**, and the difference is one the
+     * mutation floor found: a hook returning `false` is indistinguishable from a hook
+     * returning nothing, because `input.indeterminate` coerces `undefined` to `false` — so
+     * no test could tell the base implementation from its own absence. Passed at the call
+     * site it is a value, and `<ui-switch>` reading back an unmixed control is what checks
+     * it.
+     *
+     * The mixed state is bound rather than written onto the control after render, which is
+     * what keeps this element free of a query whose null branch nothing could reach.
+     */
+    template(mixed) {
+        return html `
+            <label part="label">
+                <input
+                    type="checkbox"
+                    part="box"
+                    role=${this.controlRole === '' ? nothing : this.controlRole}
+                    .checked=${this.checked}
+                    .indeterminate=${mixed}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    aria-invalid=${this.error === '' ? nothing : 'true'}
+                    aria-describedby=${this.error === '' ? nothing : 'error'}
+                    @change=${this.changed}
+                />
+                <span part="text"><slot name="label">${this.label}</slot></span>
+            </label>
+            ${this.error === ''
+            ? nothing
+            : html `<span class="error" id="error" part="error">${this.error}</span>`}
+        `;
     }
 }
 /**
  * A checkbox, styled by the token layer rather than replaced.
  *
- * **The `<input>` is yours.** You write it, you set its attributes, and it stays in the
- * light DOM — so `name`, `checked`, `required` and `disabled` are the platform's business,
- * and it reaches a form submit because it is a native control inside a `<form>`. The same
- * shape `<ui-input>` has, for the same reason.
+ * **The control is this element's**, which RFC 0005 decided and reversed an earlier rule to
+ * do: the `<input>` and its `<label>` are rendered together in one shadow root, so `name`,
+ * `checked`, `required` and `disabled` are properties here rather than attributes a host
+ * writes on a control it supplies.
  *
  * **The indeterminate state is drawn, and that is not a feature being added.**
  * `appearance: none` takes the platform's dash away with the rest of the drawing, so a
@@ -160,22 +423,38 @@ class UiToggle extends LitElement {
  * rather than a missing one. The dash below is what stops that, and nothing here invites
  * a tri-state that APG says is rare.
  *
- * Composes with {@link UiField}, which finds the control through this wrapper and wires
- * the label, the help, the error and `aria-invalid` to it.
- *
  * @example
  * ```html
- * <ui-field>
- *   <label slot="label">Send a receipt</label>
- *   <ui-checkbox><input type="checkbox" name="receipt" /></ui-checkbox>
- * </ui-field>
+ * <ui-checkbox label="Send a receipt" name="receipt"></ui-checkbox>
+ * ```
+ *
+ * @example A label an attribute cannot hold.
+ * ```html
+ * <ui-checkbox name="terms">
+ *   <span slot="label">I accept the <a href="/terms">terms</a></span>
+ * </ui-checkbox>
  * ```
  */
 export class UiCheckbox extends UiToggle {
+    constructor() {
+        super(...arguments);
+        /**
+         * The mixed state, which the platform stopped drawing once `appearance` was removed.
+         *
+         * It takes an attribute where the platform offers none, which is this element having
+         * become the control rather than a box around one — and it is not reflected, for the
+         * reason `checked` is not.
+         */
+        this.indeterminate = false;
+    }
+    static { this.properties = {
+        ...UiToggle.properties,
+        indeterminate: { type: Boolean },
+    }; }
     static { this.styles = [
         toggle,
         css `
-            ::slotted(input) {
+            input {
                 inline-size: ${size};
                 border-radius: ${reference('--ui-radius')};
             }
@@ -183,7 +462,7 @@ export class UiCheckbox extends UiToggle {
             /* The mark is a hole: the whole control, minus the shape, so what shows
                through is whatever the control sits on. The docblock on the mask constant
                above says why a hole rather than a colour. */
-            ::slotted(input:checked) {
+            input:checked {
                 mask-image: ${whole}, ${tick};
                 mask-composite: exclude;
                 mask-size: 100% 100%;
@@ -191,7 +470,7 @@ export class UiCheckbox extends UiToggle {
             }
 
             /* A dash needs no drawing: a rectangle is a gradient with a size. */
-            ::slotted(input:indeterminate) {
+            input:indeterminate {
                 background-color: ${reference('--ui-color-accent')};
                 border-color: ${reference('--ui-color-accent')};
                 mask-image: ${whole}, ${whole};
@@ -202,8 +481,38 @@ export class UiCheckbox extends UiToggle {
                 mask-position: center;
                 mask-repeat: no-repeat;
             }
+
+            /* The mixed state's forced-colors override lives here rather than beside the
+               checked one in the shared sheet, and the cascade is why: the rule above is
+               in a later sheet at equal specificity, so a Highlight declared back there
+               loses to the accent declared here — and the accent is exactly what forced
+               colors replaces with the surface, taking the state away for the reader who
+               turned the mode on to see it. Measured, as a test the shared block passed
+               for :checked and could not pass for this one. */
+            @media (forced-colors: active) {
+                input:indeterminate {
+                    background-color: Highlight;
+                    border-color: Highlight;
+                }
+            }
         `,
     ]; }
+    render() {
+        return this.template(this.indeterminate);
+    }
+    updated() {
+        super.updated();
+        this.expose('indeterminate', this.indeterminate);
+    }
+    /**
+     * A toggle answers the question the mixed state was asking, and the platform has
+     * already cleared it on the control — so this reads it back rather than assuming.
+     * Without it the next render would put the mixed state straight back.
+     */
+    sync(control) {
+        super.sync(control);
+        this.indeterminate = control.indeterminate;
+    }
 }
 /**
  * A switch, which is a checkbox that says *on* and *off* rather than *checked*.
@@ -211,29 +520,28 @@ export class UiCheckbox extends UiToggle {
  * **The difference is semantic and the drawing follows it**, which is the order that
  * matters: a switch takes effect immediately and a checkbox is a value you submit, so the
  * two are not one component with two skins. `role="switch"` is what carries that to a
- * screen reader, and this element sets it on the slotted control rather than asking the
- * host to remember — forgetting it would leave a control that looks like a switch and
- * announces as a checkbox, with nothing anywhere to read. A role the host wrote is never
- * overwritten, the same way {@link UiField} never overwrites an `id` it did not generate.
+ * screen reader, and this element writes it on the control it renders — so a host has
+ * nothing to remember and nothing to forget.
  *
  * There is no native switch to delegate to: `<input type="checkbox" switch>` is
  * unsupported in the engine this suite measures, so the element is a checkbox with a role
  * and a drawing. A host who wants the mixed state wants {@link UiCheckbox} — `switch` has
- * no third value, so this element does not draw one.
+ * no third value, so this element does not draw one and offers no property for one.
  *
  * @example
  * ```html
- * <ui-field>
- *   <label slot="label">Email notifications</label>
- *   <ui-switch><input type="checkbox" name="notify" checked /></ui-switch>
- * </ui-field>
+ * <ui-switch label="Email notifications" name="notify" checked></ui-switch>
  * ```
  */
 export class UiSwitch extends UiToggle {
+    constructor() {
+        super(...arguments);
+        this.controlRole = 'switch';
+    }
     static { this.styles = [
         toggle,
         css `
-            ::slotted(input) {
+            input {
                 inline-size: calc(${size} * 5 / 3);
                 /* Any radius at or above half the block size rounds the ends fully, so
                    the whole size is a pill at every size this control can take. */
@@ -245,10 +553,10 @@ export class UiSwitch extends UiToggle {
                    colour — restating it here changed no pixel, which is how it was
                    found: as a mutant no test could possibly kill. */
                 background-color: ${reference('--ui-color-border')};
-                /* The thumb is a background layer rather than an element, because an
-                   element would have to live in the shadow root and could not be told
-                   the control is on. A closest-side radius comes from the layer's
-                   own size, so one number moves the thumb. */
+                /* The thumb is a background layer rather than an element, because the
+                   layer moves with one number where an element would need a second rule
+                   to be told the control is on. A closest-side radius comes from the
+                   layer's own size. */
                 background-image: radial-gradient(
                     circle closest-side,
                     ${reference('--ui-color-surface')} 100%,
@@ -265,28 +573,11 @@ export class UiSwitch extends UiToggle {
                         ${reference('--ui-easing-state')};
             }
 
-            ::slotted(input:checked) {
+            input:checked {
                 background-position: calc(100% - ${size} / 6) center;
             }
         `,
     ]; }
-    render() {
-        return html `<slot @slotchange=${this.#announce}></slot>`;
-    }
-    /**
-     * Marks the slotted control a switch for anything reading the accessibility tree.
-     *
-     * On `slotchange` rather than once, because the host may replace the control — a
-     * framework re-render is indistinguishable from that here, and a switch that
-     * announces itself correctly only until the first re-render is worse than one that
-     * never did.
-     */
-    #announce() {
-        const control = this.querySelector('input');
-        if (control !== null && !control.hasAttribute('role')) {
-            control.setAttribute('role', 'switch');
-        }
-    }
 }
 // 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

package/dist/checkbox.js.map

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

package/dist/field.d.ts

@@ -3,8 +3,12 @@ import { LitElement, type TemplateResult } from 'lit';
  * Form plumbing: a label bound to a control, help and error text bound through
  * `aria-describedby`, and `aria-invalid` while the field is in error.
  *
- * Written once here rather than per control. Every form component in the v0 cut needs the
- * same wiring, and five copies of it are five chances to get one subtly wrong.
+ * Written once here rather than per control that needs it, because copies of one wiring are
+ * copies of one chance to get it subtly wrong.
+ *
+ * **`<ui-checkbox>` and `<ui-switch>` are not among them any more.** They render their label,
+ * their message and their `aria-invalid` beside the control, in one tree scope, so there is
+ * nothing scattered here to point at anything — see `docs/checkbox.md`.
  *
  * **Everything is slotted, and that is forced rather than chosen.** An ARIA relationship
  * by IDREF does not cross a shadow boundary: a `<label for>` rendered in this element's

package/dist/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CAmLpC;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CAmLpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}

package/dist/field.js

@@ -6,8 +6,12 @@ let sequence = 0;
  * Form plumbing: a label bound to a control, help and error text bound through
  * `aria-describedby`, and `aria-invalid` while the field is in error.
  *
- * Written once here rather than per control. Every form component in the v0 cut needs the
- * same wiring, and five copies of it are five chances to get one subtly wrong.
+ * Written once here rather than per control that needs it, because copies of one wiring are
+ * copies of one chance to get it subtly wrong.
+ *
+ * **`<ui-checkbox>` and `<ui-switch>` are not among them any more.** They render their label,
+ * their message and their `aria-invalid` beside the control, in one tree scope, so there is
+ * nothing scattered here to point at anything — see `docs/checkbox.md`.
  *
  * **Everything is slotted, and that is forced rather than chosen.** An ARIA relationship
  * by IDREF does not cross a shadow boundary: a `<label for>` rendered in this element's

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;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;yBACxB,SAAS,CAAC,sBAAsB,CAAC;;;;;;qBAMrC,SAAS,CAAC,mBAAmB,CAAC;yBAC1B,SAAS,CAAC,sBAAsB,CAAC;;KAErD,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,gFAAgF;QAChF,6EAA6E;QAC7E,gFAAgF;QAChF,6EAA6E;QAC7E,8BAA8B;QAC9B,IAAI,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,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,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAE5D,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,EAAE;QACF,mFAAmF;QACnF,+EAA+E;QAC/E,iFAAiF;QACjF,kFAAkF;QAClF,mFAAmF;QACnF,0DAA0D;QAC1D,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAC3B,CAAC;QAEF,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;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAoB,EAAE,GAAW,EAAE,IAA4B;QACpE,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,OAAO,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC;QAElE,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;aAClD,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,KAAK,CAAC,OAAoB,EAAE,KAA8B,EAAE,UAAkB;QAC1E,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACtB,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;gBACpC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO;QACX,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YAE3C,OAAO;QACX,CAAC;QAED,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YAClB,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC;QAC1B,CAAC;QAED,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACtD,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":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;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;yBACxB,SAAS,CAAC,sBAAsB,CAAC;;;;;;qBAMrC,SAAS,CAAC,mBAAmB,CAAC;yBAC1B,SAAS,CAAC,sBAAsB,CAAC;;KAErD,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,gFAAgF;QAChF,6EAA6E;QAC7E,gFAAgF;QAChF,6EAA6E;QAC7E,8BAA8B;QAC9B,IAAI,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,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,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAE5D,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,EAAE;QACF,mFAAmF;QACnF,+EAA+E;QAC/E,iFAAiF;QACjF,kFAAkF;QAClF,mFAAmF;QACnF,0DAA0D;QAC1D,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAC3B,CAAC;QAEF,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;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAoB,EAAE,GAAW,EAAE,IAA4B;QACpE,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,GAAG,OAAO,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC;QAElE,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;aAClD,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,KAAK,CAAC,OAAoB,EAAE,KAA8B,EAAE,UAAkB;QAC1E,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACtB,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;gBACpC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO;QACX,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YAE3C,OAAO;QACX,CAAC;QAED,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YAClB,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC;QAC1B,CAAC;QAED,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACtD,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"}

package/dist/radio.d.ts

@@ -84,8 +84,8 @@ export declare class UiRadioGroup extends LitElement {
      * 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.
+     * A `role` the host wrote is never overwritten, the same courtesy {@link UiField}
+     * extends to an `id` it finds already there.
      */
     connectedCallback(): void;
     /**

package/dist/radio.js

@@ -258,8 +258,8 @@ export class UiRadioGroup extends LitElement {
      * 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.
+     * A `role` the host wrote is never overwritten, the same courtesy {@link UiField}
+     * extends to an `id` it finds already there.
      */
     connectedCallback() {
         super.connectedCallback();

package/dist/tooltip.js

@@ -207,7 +207,7 @@ export class UiTooltip extends LitElement {
      * one that stops being announced at a moment nothing reports.
      *
      * A `role` or an `id` the host wrote is never overwritten, the same courtesy
-     * `<ui-field>` and `<ui-switch>` extend. `aria-describedby` is **added to** rather than
+     * `<ui-field>` and `<ui-radio-group>` extend. `aria-describedby` is **added to** rather than
      * replaced: the trigger may already be described by a field's help text, and a
      * description that silently replaced another is the failure nobody sees.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.18",
+  "version": "0.3.0",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",
@@ -54,7 +54,7 @@
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.7",
+    "@rak200/coding-standard-ts": "github:rak200/coding-standard-ts#0.4.8",
     "@storybook/addon-a11y": "^10.5.8",
     "@storybook/web-components-vite": "^10.5.8",
     "@types/node": "^26.1.2",