@rak200/ui 0.2.8 → 0.2.10

package/README.md

@@ -34,6 +34,11 @@ npm install @rak200/ui
   <span slot="help">In BRL, two decimals.</span>
 </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 +76,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.** Seven components — `<ui-button>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
+`<ui-textarea>`, `<ui-checkbox>` and `<ui-switch>` — 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/dialog.d.ts

@@ -1,4 +1,41 @@
 import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The `scrollbar-gutter` to hold while the page is locked.
+ *
+ * **The question is not whether the page scrolls**, which is what this asked first and
+ * what `tests/manual/scroll-lock.mjs` caught. A page can scroll and still have no gutter
+ * to keep — an overlay scrollbar takes no layout space — and reserving one there pulls the
+ * content in by the width of a scrollbar that was never there: the same shift, in the
+ * other direction, measured at -15px. The question is whether the scrollbar is *taking
+ * space*, and the viewport minus the content width is what answers it.
+ *
+ * **Taken as arguments rather than read from `window`, and that is the floors talking.**
+ * The suite's engine reports no scrollbar width at all, so the reserving branch is
+ * unreachable from anything this code could measure itself — and a branch no test can
+ * reach is a branch no floor can hold. As a function of two numbers it is decided here and
+ * checked directly, while the call site keeps no branch of its own.
+ *
+ * @param viewport - The viewport's width, scrollbar included.
+ * @param content - The width available to content, scrollbar excluded.
+ * @param current - What the host already had, returned untouched when there is nothing to
+ * reserve — so a page that sets its own gutter keeps it through the lock.
+ */
+export declare function reservedGutter(viewport: number, content: number, current: string): string;
+/**
+ * Writes the two properties the lock is made of, and the only place either is named.
+ *
+ * **Handed an element rather than reaching for `document.documentElement`**, for the same
+ * reason {@link reservedGutter} is handed numbers. In the engine the suite runs, the root's
+ * gutter never changes: the scrollbar takes no space, so the value written is always the
+ * value already there and the write is a no-op that nothing can observe — the property name
+ * becomes a string no test compares against anything. On an element handed in, both writes
+ * are observable, and the names are checked rather than assumed.
+ *
+ * @param root - The element the lock is written on; `document.documentElement` in use.
+ * @param overflow - What to set `overflow` to; the empty string removes the declaration.
+ * @param gutter - What to set `scrollbar-gutter` to; likewise.
+ */
+export declare function applyLock(root: HTMLElement, overflow: string, gutter: string): void;
 /**
  * A modal dialog.
  *

package/dist/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAoGjE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,UAAU;;IACpC,gBAAyB,MAAM,0BAwG7B;IAEF,gBAAyB,UAAU;;;;;MAEjC;IAEF;;;;;;;;;;OAUG;IACH,IAAI,UAAS;;IAyCJ,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAU5B,YAAY,IAAI,IAAI;IAIpB,OAAO,IAAI,IAAI;IAiBf,MAAM,IAAI,cAAc;IAIjC;;;;;OAKG;IACH,IAAI,IAAI,IAAI;IAIZ,2FAA2F;IAC3F,KAAK,IAAI,IAAI;CA0FhB;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAiBjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAEzF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAGnF;AAiFD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,UAAU;;IACpC,gBAAyB,MAAM,0BAwG7B;IAEF,gBAAyB,UAAU;;;;;MAEjC;IAEF;;;;;;;;;;OAUG;IACH,IAAI,UAAS;;IAyCJ,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAU5B,YAAY,IAAI,IAAI;IAIpB,OAAO,IAAI,IAAI;IAiBf,MAAM,IAAI,cAAc;IAIjC;;;;;OAKG;IACH,IAAI,IAAI,IAAI;IAIZ,2FAA2F;IAC3F,KAAK,IAAI,IAAI;CA0FhB;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/dialog.js

@@ -11,6 +11,48 @@ let locks = 0;
  * initialiser here would be a value no test could ever observe.
  */
 let displaced;
+/**
+ * The `scrollbar-gutter` to hold while the page is locked.
+ *
+ * **The question is not whether the page scrolls**, which is what this asked first and
+ * what `tests/manual/scroll-lock.mjs` caught. A page can scroll and still have no gutter
+ * to keep — an overlay scrollbar takes no layout space — and reserving one there pulls the
+ * content in by the width of a scrollbar that was never there: the same shift, in the
+ * other direction, measured at -15px. The question is whether the scrollbar is *taking
+ * space*, and the viewport minus the content width is what answers it.
+ *
+ * **Taken as arguments rather than read from `window`, and that is the floors talking.**
+ * The suite's engine reports no scrollbar width at all, so the reserving branch is
+ * unreachable from anything this code could measure itself — and a branch no test can
+ * reach is a branch no floor can hold. As a function of two numbers it is decided here and
+ * checked directly, while the call site keeps no branch of its own.
+ *
+ * @param viewport - The viewport's width, scrollbar included.
+ * @param content - The width available to content, scrollbar excluded.
+ * @param current - What the host already had, returned untouched when there is nothing to
+ * reserve — so a page that sets its own gutter keeps it through the lock.
+ */
+export function reservedGutter(viewport, content, current) {
+    return viewport > content ? 'stable' : current;
+}
+/**
+ * Writes the two properties the lock is made of, and the only place either is named.
+ *
+ * **Handed an element rather than reaching for `document.documentElement`**, for the same
+ * reason {@link reservedGutter} is handed numbers. In the engine the suite runs, the root's
+ * gutter never changes: the scrollbar takes no space, so the value written is always the
+ * value already there and the write is a no-op that nothing can observe — the property name
+ * becomes a string no test compares against anything. On an element handed in, both writes
+ * are observable, and the names are checked rather than assumed.
+ *
+ * @param root - The element the lock is written on; `document.documentElement` in use.
+ * @param overflow - What to set `overflow` to; the empty string removes the declaration.
+ * @param gutter - What to set `scrollbar-gutter` to; likewise.
+ */
+export function applyLock(root, overflow, gutter) {
+    root.style.overflow = overflow;
+    root.style.setProperty('scrollbar-gutter', gutter);
+}
 /**
  * Holds the page still behind a modal, and gives it back when the last one leaves.
  *
@@ -24,7 +66,7 @@ let displaced;
  * back as padding — and the browser this suite runs in has overlay scrollbars, so the
  * width is `0`, every sign error in that arithmetic passes, and the check is theatre.
  * `scrollbar-gutter: stable` asks the browser to keep the space it was already using,
- * with no number to get wrong.
+ * with no number to get wrong — {@link reservedGutter} decides whether there is any.
  *
  * Counted rather than flagged, because a dialog opening a dialog is ordinary — a confirm
  * over a form — and the second one closing must not give the page back while the first is
@@ -40,13 +82,7 @@ function hold() {
         overflow: root.style.overflow,
         gutter: root.style.getPropertyValue('scrollbar-gutter'),
     };
-    // Only where there was a scrollbar to lose. `stable` on a page that never had one
-    // reserves space that was not there, which is the same layout shift in the other
-    // direction.
-    if (root.scrollHeight > root.clientHeight) {
-        root.style.setProperty('scrollbar-gutter', 'stable');
-    }
-    root.style.overflow = 'hidden';
+    applyLock(root, 'hidden', reservedGutter(window.innerWidth, root.clientWidth, displaced.gutter));
 }
 /** Gives the page back, once the last dialog has closed. */
 function release() {
@@ -57,8 +93,7 @@ function release() {
     const root = document.documentElement;
     // What the host had, not what this module would have chosen. A page that sets its own
     // `overflow` or reserves its own gutter gets it back rather than being cleared.
-    root.style.overflow = displaced.overflow;
-    root.style.setProperty('scrollbar-gutter', displaced.gutter);
+    applyLock(root, displaced.overflow, displaced.gutter);
 }
 /** One of the dialog's slots — named, or the default one when the name is empty. */
 function slot(name = '') {

package/dist/dialog.js.map

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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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';

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,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,4 +1,5 @@
 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';

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,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/package.json

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