@rak200/ui 0.2.9 → 0.2.11

package/README.md

@@ -34,6 +34,21 @@ npm install @rak200/ui
   <span slot="help">In BRL, two decimals.</span>
 </ui-field>
 
+<ui-field>
+  <label slot="label">Currency</label>
+  <ui-select>
+    <select name="currency">
+      <option value="brl">Real</option>
+      <option value="usd">Dollar</option>
+    </select>
+  </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-button>Save</ui-button>
 <ui-button variant="secondary">Cancel</ui-button>
 <ui-button disabled>Unavailable</ui-button>
@@ -71,8 +86,8 @@ components; `docs/` is what describes them.
 
 ## Status
 
-**v0.** Five components — `<ui-button>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>` and
-`<ui-textarea>` — and the token layer under them, built to the ecosystem's full quality bar rather than sketched: type-checked at the strictest available
+**v0.** Eight components — `<ui-button>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
+`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>` and `<ui-select>` — and the token layer under them, 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 every public symbol documented. The v0 surface in
 RFC 0016 grows from here — see [ROADMAP.md](ROADMAP.md).

package/dist/checkbox.d.ts

@@ -0,0 +1,76 @@
+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.
+ */
+declare class UiToggle extends LitElement {
+    render(): 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 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
+ * control the host set `indeterminate` on would render as *unchecked* — a wrong answer
+ * 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>
+ * ```
+ */
+export declare class UiCheckbox extends UiToggle {
+    static readonly styles: CSSResult[];
+}
+/**
+ * A switch, which is a checkbox that says *on* and *off* rather than *checked*.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Email notifications</label>
+ *   <ui-switch><input type="checkbox" name="notify" checked /></ui-switch>
+ * </ui-field>
+ * ```
+ */
+export declare class UiSwitch extends UiToggle {
+    #private;
+    static readonly styles: CSSResult[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-checkbox': UiCheckbox;
+        'ui-switch': UiSwitch;
+    }
+}
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.d.ts.map

@@ -0,0 +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"}

package/dist/checkbox.js

@@ -0,0 +1,298 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * The size both controls are drawn at, and a floor rather than a preference.
+ *
+ * A native checkbox is 13x13 in this engine, measured, 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, which covers a target whose size the author has not
+ * modified. Drawing it ourselves gives that exception up, so the floor becomes ours to
+ * hold, and `max()` is what holds it: a host who shrinks `--ui-space` restyles everything
+ * else and cannot shrink a control below the floor without saying so in their own CSS.
+ */
+const size = css `max(24px, calc(${reference('--ui-space')} * 3))`;
+/**
+ * The tick, as a mask rather than a picture — and that is what keeps it a token decision.
+ *
+ * A `data:` URI freezes whatever is inside it, so an SVG drawn with `stroke='#fff'` would
+ * be one hardcoded colour in a package whose rule is that a host can override every visual
+ * 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. */
+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`.
+ *
+ * **`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
+ * rest of the kit already uses — and the alternative buys none: there is no native switch
+ * to delegate to. `<input type="checkbox" switch>` is unsupported in this engine,
+ * measured, so a switch is drawn whatever the checkbox does, and a delegated checkbox
+ * beside a drawn switch would argue cosmetically for a difference that is semantic.
+ *
+ * What it gives up is named where it is paid back: the indeterminate mark below, the
+ * target-size floor at {@link size}, and the forced-colors block at the end.
+ */
+const toggle = css `
+    :host {
+        display: inline-flex;
+    }
+
+    ::slotted(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;
+        block-size: ${size};
+        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')};
+    }
+
+    ::slotted(input:checked) {
+        background-color: ${reference('--ui-color-accent')};
+        border-color: ${reference('--ui-color-accent')};
+    }
+
+    /* Unchecked, the boundary finishes the mix it already started — the same hover
+       ui-input has, because it is the same boundary. Checked, 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. */
+    ::slotted(input:focus-visible) {
+        outline: 2px solid ${reference('--ui-color-focus')};
+        outline-offset: 2px;
+    }
+
+    ::slotted(input:disabled) {
+        cursor: not-allowed;
+        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']) {
+        border-color: ${reference('--ui-color-danger')};
+    }
+
+    /* 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
+       see states more clearly. Measured in this engine. System colours are the ones
+       forced colors keeps, so the checked states name 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),
+        ::slotted(input:indeterminate) {
+            background-color: Highlight;
+            border-color: Highlight;
+        }
+
+        ::slotted(input:disabled) {
+            border-color: GrayText;
+            opacity: 1;
+        }
+    }
+`;
+/**
+ * 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.
+ */
+class UiToggle extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+/**
+ * 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 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
+ * control the host set `indeterminate` on would render as *unchecked* — a wrong answer
+ * 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>
+ * ```
+ */
+export class UiCheckbox extends UiToggle {
+    static { this.styles = [
+        toggle,
+        css `
+            ::slotted(input) {
+                inline-size: ${size};
+                border-radius: ${reference('--ui-radius')};
+            }
+
+            /* 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) {
+                mask-image: ${whole}, ${tick};
+                mask-composite: exclude;
+                mask-size: 100% 100%;
+                mask-repeat: no-repeat;
+            }
+
+            /* A dash needs no drawing: a rectangle is a gradient with a size. */
+            ::slotted(input:indeterminate) {
+                background-color: ${reference('--ui-color-accent')};
+                border-color: ${reference('--ui-color-accent')};
+                mask-image: ${whole}, ${whole};
+                mask-composite: exclude;
+                mask-size:
+                    100% 100%,
+                    calc(${size} / 2) calc(${size} / 12);
+                mask-position: center;
+                mask-repeat: no-repeat;
+            }
+        `,
+    ]; }
+}
+/**
+ * A switch, which is a checkbox that says *on* and *off* rather than *checked*.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Email notifications</label>
+ *   <ui-switch><input type="checkbox" name="notify" checked /></ui-switch>
+ * </ui-field>
+ * ```
+ */
+export class UiSwitch extends UiToggle {
+    static { this.styles = [
+        toggle,
+        css `
+            ::slotted(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. */
+                border-radius: ${size};
+                /* The track carries the boundary a checkbox gets from its border, so it
+                   is the border token: the value chosen to clear 3:1 against the
+                   surface, which is what WCAG 1.4.11 asks of a control's boundary. The
+                   border is left to the shared sheet, which already paints it that exact
+                   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. */
+                background-image: radial-gradient(
+                    circle closest-side,
+                    ${reference('--ui-color-surface')} 100%,
+                    transparent 100%
+                );
+                background-size: calc(${size} * 2 / 3);
+                background-position: calc(${size} / 6) center;
+                transition:
+                    background-color ${reference('--ui-duration-state')}
+                        ${reference('--ui-easing-state')},
+                    border-color ${reference('--ui-duration-state')}
+                        ${reference('--ui-easing-state')},
+                    background-position ${reference('--ui-duration-state')}
+                        ${reference('--ui-easing-state')};
+            }
+
+            ::slotted(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
+// 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-checkbox', UiCheckbox);
+// Stryker disable next-line StringLiteral: the same, for the same reason.
+customElements.define('ui-switch', UiSwitch);
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

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

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { UiButton, type ButtonVariant } from './button.js';
+export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
 export { UiInput, UiTextarea } from './input.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,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,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,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"}

package/dist/index.js

@@ -1,6 +1,8 @@
 export { UiButton } from './button.js';
+export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
 export { UiInput, UiTextarea } from './input.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,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,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,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"}

package/dist/select.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, type CSSResult, type TemplateResult } from 'lit';
+/**
+ * A native `<select>`, styled by the token layer rather than replaced.
+ *
+ * **The `<select>` is yours.** You write it and its `<option>`s, and it stays in the light
+ * DOM — the same shape {@link UiInput} 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>` beside it. It reaches a form submit because it is
+ * a native control inside a `<form>`.
+ *
+ * **The native element is the decision, not a shortcut.** A custom listbox is an
+ * accessibility project of its own, and it would have to reimplement the platform picker
+ * a phone already opens — which is the part a consumer notices most and a library gets
+ * wrong most. RFC 0016 defers that listbox, and this element is not a step toward it.
+ *
+ * **What the platform still refuses is documented rather than worked around**, in
+ * `docs/select.md`: the drop-down list is drawn by the operating system and no rule here
+ * reaches inside it.
+ *
+ * ## Why the box is written out rather than shared
+ *
+ * `src/input.ts` carries the same box and says that duplicating it would be *two copies of
+ * a contract with nothing comparing them*. That objection is answered on its own terms
+ * rather than dodged: `tests/select.test.ts` mounts both and asserts they agree on the
+ * boundary, the radius, the padding, the font and the focus ring. Something compares them,
+ * and it fails when they drift.
+ *
+ * Sharing was the alternative and it costs the thing this file exists for — a consumer
+ * looking for `<ui-select>` finds `select.ts`, `select.stories.ts`, `select.test.ts` and
+ * `select.md`, rather than a select folded into the input's page under the input's name.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Currency</label>
+ *   <ui-select>
+ *     <select name="currency">
+ *       <option value="brl">Real</option>
+ *       <option value="usd">Dollar</option>
+ *     </select>
+ *   </ui-select>
+ * </ui-field>
+ * ```
+ */
+export declare class UiSelect extends LitElement {
+    static readonly styles: CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-select': UiSelect;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAqBjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACpC,gBAAyB,MAAM,EAAE,SAAS,CA8FxC;IAEO,MAAM,IAAI,cAAc;CAGpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/select.js

@@ -0,0 +1,167 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * One arm of the caret, and the gap it keeps from the edge.
+ *
+ * A fraction of the space token rather than a literal, so the mark scales with everything
+ * else a host retunes — and small enough that the two arms plus their gap fit inside the
+ * padding reserved for them below.
+ */
+const arm = css `calc(${reference('--ui-space')} * 0.75)`;
+/**
+ * The room the caret needs, which the text must not run into.
+ *
+ * The caret ends one space from the edge and is two arms wide, so this is that plus one
+ * more space of air. Written as the sum rather than as a number, because a number would be
+ * right at the default space token and wrong at every other.
+ */
+const clearance = css `calc(${reference('--ui-space')} * 2 + ${arm} * 2)`;
+/**
+ * A native `<select>`, styled by the token layer rather than replaced.
+ *
+ * **The `<select>` is yours.** You write it and its `<option>`s, and it stays in the light
+ * DOM — the same shape {@link UiInput} 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>` beside it. It reaches a form submit because it is
+ * a native control inside a `<form>`.
+ *
+ * **The native element is the decision, not a shortcut.** A custom listbox is an
+ * accessibility project of its own, and it would have to reimplement the platform picker
+ * a phone already opens — which is the part a consumer notices most and a library gets
+ * wrong most. RFC 0016 defers that listbox, and this element is not a step toward it.
+ *
+ * **What the platform still refuses is documented rather than worked around**, in
+ * `docs/select.md`: the drop-down list is drawn by the operating system and no rule here
+ * reaches inside it.
+ *
+ * ## Why the box is written out rather than shared
+ *
+ * `src/input.ts` carries the same box and says that duplicating it would be *two copies of
+ * a contract with nothing comparing them*. That objection is answered on its own terms
+ * rather than dodged: `tests/select.test.ts` mounts both and asserts they agree on the
+ * boundary, the radius, the padding, the font and the focus ring. Something compares them,
+ * and it fails when they drift.
+ *
+ * Sharing was the alternative and it costs the thing this file exists for — a consumer
+ * looking for `<ui-select>` finds `select.ts`, `select.stories.ts`, `select.test.ts` and
+ * `select.md`, rather than a select folded into the input's page under the input's name.
+ *
+ * @example
+ * ```html
+ * <ui-field>
+ *   <label slot="label">Currency</label>
+ *   <ui-select>
+ *     <select name="currency">
+ *       <option value="brl">Real</option>
+ *       <option value="usd">Dollar</option>
+ *     </select>
+ *   </ui-select>
+ * </ui-field>
+ * ```
+ */
+export class UiSelect extends LitElement {
+    static { this.styles = css `
+        :host {
+            display: block;
+        }
+
+        /* The box, which src/input.ts also draws and tests/select.test.ts compares. */
+        ::slotted(select) {
+            box-sizing: border-box;
+            inline-size: 100%;
+            font: inherit;
+            font-family: ${reference('--ui-font')};
+            color: ${reference('--ui-color-text')};
+            background-color: ${reference('--ui-color-surface')};
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            padding: ${reference('--ui-space')};
+            /* A select opens something when clicked, so it is a pointer rather than a
+               caret — the one place this box disagrees with the input's on purpose. */
+            cursor: pointer;
+            /* Only the boundary moves. The focus ring is deliberately not in this list,
+               for the reason src/button.ts gives beside its own. */
+            transition: border-color ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-state')};
+        }
+
+        /* Taking the platform's own drawing off is what makes the box possible at all: a
+           select left at appearance: auto keeps the operating system's chevron and, off
+           this engine, ignores much of what is set above — so the control beside a text
+           field would stop matching it exactly where a kit is supposed to. What that
+           costs is the chevron, which is drawn below.
+
+           It does NOT cost the picker. appearance: none changes how the closed control
+           is painted and nothing about what opens, so a phone still opens its own wheel. */
+        ::slotted(select) {
+            appearance: none;
+            padding-inline-end: ${clearance};
+            background-repeat: no-repeat;
+        }
+
+        /* The caret is two triangles rather than a picture, and that is what keeps its
+           colour a token: gradients take var(), and an SVG in a data: URI would
+           freeze whatever colour was drawn into it. src/checkbox.ts solved the same
+           problem the other way, by making its mark a hole — which is not available here,
+           because a mask would clip the option text with it.
+
+           A multiple select is a list rather than a drop-down, and a caret on a list
+           points at nothing, so it is guarded rather than drawn everywhere. */
+        ::slotted(select:not([multiple])) {
+            background-image:
+                linear-gradient(45deg, transparent 50%, ${reference('--ui-color-text-muted')} 50%),
+                linear-gradient(135deg, ${reference('--ui-color-text-muted')} 50%, transparent 50%);
+            background-size: ${arm} ${arm};
+            background-position:
+                right calc(${reference('--ui-space')} + ${arm}) center,
+                right ${reference('--ui-space')} center;
+        }
+
+        /* Direction is the control's own, not the page's, and background-position has no
+           logical form — so the one physical thing in this sheet is mirrored explicitly.
+           The padding needs no rule: padding-inline-end already follows. Measured, both
+           halves. */
+        ::slotted(select:not([multiple]):dir(rtl)) {
+            background-position:
+                left ${reference('--ui-space')} center,
+                left calc(${reference('--ui-space')} + ${arm}) center;
+        }
+
+        /* The boundary completes the mix it already started, the same way ui-input's does
+           and against the same token.
+
+           There is no [readonly] guard here and its absence is measured rather than
+           forgotten: readOnly is not a property of a select at all, so the input's
+           second guard would be a rule about an attribute the platform never sets. */
+        ::slotted(select:hover:not(:disabled)) {
+            border-color: ${reference('--ui-color-text')};
+        }
+
+        /* A visible focus ring is not decoration: removing it is the single most common
+           way a component stops being usable by keyboard. */
+        ::slotted(select:focus-visible) {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: 2px;
+        }
+
+        ::slotted(select:disabled) {
+            cursor: not-allowed;
+            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. */
+        ::slotted(select[aria-invalid='true']) {
+            border-color: ${reference('--ui-color-danger')};
+        }
+    `; }
+    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-select', UiSelect);
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuC,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,GAAG,GAAG,GAAG,CAAA,QAAQ,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,SAAS,GAAG,GAAG,CAAA,QAAQ,SAAS,CAAC,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;aACX,WAAM,GAAc,GAAG,CAAA;;;;;;;;;;2BAUzB,SAAS,CAAC,WAAW,CAAC;qBAC5B,SAAS,CAAC,iBAAiB,CAAC;gCACjB,SAAS,CAAC,oBAAoB,CAAC;gCAC/B,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;uBAC9B,SAAS,CAAC,YAAY,CAAC;;;;;;uCAMP,SAAS,CAAC,qBAAqB,CAAC;kBACrD,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;kCAad,SAAS;;;;;;;;;;;;;;0DAce,SAAS,CAAC,uBAAuB,CAAC;0CAClD,SAAS,CAAC,uBAAuB,CAAC;+BAC7C,GAAG,IAAI,GAAG;;6BAEZ,SAAS,CAAC,YAAY,CAAC,MAAM,GAAG;wBACrC,SAAS,CAAC,YAAY,CAAC;;;;;;;;;uBASxB,SAAS,CAAC,YAAY,CAAC;4BAClB,SAAS,CAAC,YAAY,CAAC,MAAM,GAAG;;;;;;;;;;4BAUhC,SAAS,CAAC,iBAAiB,CAAC;;;;;;iCAMvB,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;;;;4BAYlC,SAAS,CAAC,mBAAmB,CAAC;;KAErD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

package/package.json

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