@neumorphism-ui/elements 1.0.0-next.0 → 1.0.0-next.2

package/dist/components/select/select.js

@@ -0,0 +1,385 @@
+import { dispatch, setOptionalAttribute, setText } from '../../core/dom.js';
+import { FormControlElement } from '../../core/form-control.js';
+import { requiredMessage } from '../../core/validation.js';
+import { readOption } from '../option/option-data.js';
+import { pickOption, selectDef } from './select.def.js';
+/** Gap between the combobox and the listbox, in px. */
+const GAP = 4;
+/** How long typed characters keep adding to one typeahead search, in ms. */
+const TYPEAHEAD_MS = 500;
+export class NeuSelect extends FormControlElement {
+    static def = selectDef;
+    static extraProperties = ['defaultValue'];
+    /** The requested value, kept even while no option matches it (plan decision 8). */
+    current;
+    dirty = false;
+    /** The options as last read, which the listbox mirrors by index (`option-<index>`). */
+    opts = [];
+    observer;
+    opened = false;
+    /** The light-DOM option behind the active one, so a rebuild keeps it active. */
+    activeSource;
+    /** Whether the listbox was open when the pointer went down on the combobox. */
+    pressedOpen;
+    typed = '';
+    typedTimer;
+    constructor() {
+        super();
+        this.current = String(this.props.value);
+    }
+    get value() {
+        return pickOption(this.read(), this.current) ? this.current : '';
+    }
+    set value(next) {
+        this.dirty = true;
+        this.current = next === null || next === undefined ? '' : String(next);
+        this.sync();
+    }
+    get defaultValue() {
+        return String(this.props.value);
+    }
+    set defaultValue(next) {
+        this.setAttribute('value', String(next));
+    }
+    /** Reads the neu-option children from their attributes and text; they need not be upgraded. */
+    read() {
+        return [...this.querySelectorAll('neu-option')].map((el) => ({
+            ...readOption(el),
+            source: el,
+        }));
+    }
+    /** The value as of the last read: the requested one while an option matches it, else ''. */
+    chosen() {
+        return pickOption(this.opts, this.current) ? this.current : '';
+    }
+    /**
+     * Reads the options again, then brings the display, an open listbox and the form in line.
+     * setText writes only when the text differs, so a server-rendered display is left alone.
+     */
+    sync() {
+        this.opts = this.read();
+        const picked = pickOption(this.opts, this.current);
+        const display = this.ref('display');
+        setText(display, picked ? picked.label : String(this.props.placeholder));
+        display?.classList.toggle('placeholder', !picked);
+        if (this.opened)
+            this.render();
+        this.commit();
+    }
+    /** The first enabled option from `from` going `dir`, `from` included; -1 when there is none. */
+    step(from, dir) {
+        for (let i = from; i >= 0 && i < this.opts.length; i += dir) {
+            if (!this.opts[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    /**
+     * The enabled option nearest to `from` (clamped to the list) going `dir`, else turning back:
+     * a move or jump past either end stops at the last enabled option that way.
+     */
+    near(from, dir) {
+        const start = Math.min(Math.max(from, 0), this.opts.length - 1);
+        const found = this.step(start, dir);
+        return found < 0 ? this.step(start, -dir) : found;
+    }
+    activeIndex() {
+        return this.opts.findIndex((option) => option.source === this.activeSource);
+    }
+    /** Builds the listbox from the options and places it; the active option stays if it can. */
+    render() {
+        const listbox = this.ref('listbox');
+        const picked = pickOption(this.opts, this.current);
+        listbox.replaceChildren(...this.opts.map((option, i) => {
+            const el = document.createElement('div');
+            el.className = 'option';
+            el.id = `option-${i}`;
+            el.setAttribute('part', 'option');
+            el.setAttribute('role', 'option');
+            el.setAttribute('aria-selected', String(option === picked));
+            if (option.disabled)
+                el.setAttribute('aria-disabled', 'true');
+            el.textContent = option.label;
+            return el;
+        }));
+        this.place();
+        const kept = this.activeIndex();
+        const selected = picked ? this.opts.indexOf(picked) : -1;
+        this.activate(kept >= 0 && !this.opts[kept].disabled ? kept : selected >= 0 ? selected : this.step(0, 1));
+    }
+    /** Makes option `i` the active one (none for -1) and scrolls it into view. */
+    activate(i) {
+        const listbox = this.ref('listbox');
+        this.activeSource = this.opts[i]?.source;
+        const items = [...listbox.children];
+        items.forEach((item, n) => item.classList.toggle('active', n === i));
+        const item = items[i];
+        setOptionalAttribute(this.ref('combobox'), 'aria-activedescendant', item ? item.id : '');
+        if (!item)
+            return;
+        // Keep the listbox padding in view too, so Home and End scroll to the very top and bottom.
+        const pad = items[0].offsetTop;
+        const bottom = item.offsetTop + item.offsetHeight + pad;
+        if (item.offsetTop - pad < listbox.scrollTop)
+            listbox.scrollTop = item.offsetTop - pad;
+        else if (bottom > listbox.scrollTop + listbox.clientHeight) {
+            listbox.scrollTop = bottom - listbox.clientHeight;
+        }
+    }
+    /** Puts the listbox under the combobox at its width, or above it when that has more room. */
+    place = () => {
+        const listbox = this.ref('listbox');
+        const box = this.ref('combobox')?.getBoundingClientRect();
+        if (!listbox || !box)
+            return;
+        listbox.style.left = `${box.left}px`;
+        listbox.style.width = `${box.width}px`;
+        const height = listbox.offsetHeight;
+        const below = innerHeight - box.bottom - GAP;
+        const above = box.top - GAP;
+        const up = height > below && above > below;
+        listbox.style.top = `${up ? box.top - GAP - height : box.bottom + GAP}px`;
+    };
+    open() {
+        const listbox = this.ref('listbox');
+        if (this.opened || this.isDisabled || !listbox)
+            return;
+        this.opened = true;
+        this.activeSource = undefined;
+        if (!listbox.matches(':popover-open'))
+            listbox.showPopover();
+        this.render();
+        this.ref('combobox').setAttribute('aria-expanded', 'true');
+        window.addEventListener('scroll', this.place, { capture: true, passive: true });
+        window.addEventListener('resize', this.place, { passive: true });
+        this.ownerDocument.addEventListener('focusin', this.focusLanded, true);
+        dispatch(this, 'neu-open');
+    }
+    /**
+     * Focus that lands outside the select while the listbox is open. The combobox's focusout
+     * covers most moves; this covers focus set elsewhere after the window was left (the focusout
+     * then kept the listbox open, and Firefox sends no second one).
+     */
+    focusLanded = () => {
+        if (!this.shadowRoot.activeElement)
+            this.close();
+    };
+    /** The one way the listbox closes: by key, by choice, by light dismiss (toggle), by focus leaving or when disabled. */
+    close() {
+        if (!this.opened)
+            return;
+        this.opened = false;
+        const listbox = this.ref('listbox');
+        if (listbox.matches(':popover-open'))
+            listbox.hidePopover();
+        const combobox = this.ref('combobox');
+        combobox.setAttribute('aria-expanded', 'false');
+        combobox.removeAttribute('aria-activedescendant');
+        window.removeEventListener('scroll', this.place, { capture: true });
+        window.removeEventListener('resize', this.place);
+        this.ownerDocument.removeEventListener('focusin', this.focusLanded, true);
+        dispatch(this, 'neu-close');
+    }
+    /** A choice by the user: enabled options only, and events only when the value changes. */
+    choose(i) {
+        const option = this.opts[i];
+        if (!option || option.disabled)
+            return;
+        const before = this.chosen();
+        this.dirty = true;
+        this.current = option.value;
+        this.sync();
+        if (option.value === before)
+            return;
+        this.markInteracted();
+        dispatch(this, 'input');
+        dispatch(this, 'change');
+    }
+    /**
+     * Jumps to the next option whose label starts with the characters typed within TYPEAHEAD_MS.
+     * A buffer of one letter (typed once or repeated) searches that letter from the option after
+     * the active one, so repeating it cycles; any other buffer refines the search and starts at the
+     * active option, which may still match.
+     */
+    typeahead(char) {
+        clearTimeout(this.typedTimer);
+        this.typedTimer = setTimeout(() => (this.typed = ''), TYPEAHEAD_MS);
+        const typed = (this.typed += char.toLowerCase());
+        const active = this.activeIndex();
+        const count = this.opts.length;
+        const find = (prefix, from) => {
+            for (let k = 0; k < count; k++) {
+                const i = (from + k) % count;
+                const option = this.opts[i];
+                if (!option.disabled && option.label.toLowerCase().startsWith(prefix))
+                    return i;
+            }
+            return -1;
+        };
+        // Ruling R-8: one letter, typed once or repeated, moves on from the active option, so labels
+        // that start with a doubled letter ("AA Battery") cannot hold the cycle.
+        const found = [...typed].every((c) => c === typed[0])
+            ? find(typed[0], active + 1)
+            : find(typed, Math.max(active, 0));
+        if (found >= 0)
+            this.activate(found);
+    }
+    onKey(event) {
+        if (this.isDisabled || event.ctrlKey || event.metaKey)
+            return;
+        const { key, altKey } = event;
+        const printable = key.length === 1 && key !== ' ' && !altKey;
+        const active = this.activeIndex();
+        const last = this.opts.length - 1;
+        const moves = {
+            ArrowDown: [active + 1, 1],
+            ArrowUp: [active - 1, -1],
+            Home: [0, 1],
+            End: [last, -1],
+            PageDown: [active + 10, 1],
+            PageUp: [active - 10, -1],
+        };
+        if (!this.opened) {
+            // Closed (§7.2): Down, Up, Enter and Space open; Home, End and typing open and move.
+            if (!printable && !['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End'].includes(key))
+                return;
+            event.preventDefault();
+            this.open();
+            if (key === 'Home' || key === 'End')
+                this.activate(this.near(...moves[key]));
+            else if (printable)
+                this.typeahead(key);
+            return;
+        }
+        if (key === 'Tab') {
+            // Choose and close, and let focus move on.
+            this.choose(active);
+            this.close();
+            return;
+        }
+        if (key === 'Enter' || key === ' ' || (key === 'ArrowUp' && altKey)) {
+            this.choose(active);
+            this.close();
+        }
+        else if (key === 'Escape')
+            this.close();
+        else if (printable)
+            this.typeahead(key);
+        else if (moves[key])
+            this.activate(this.near(...moves[key]));
+        else
+            return;
+        event.preventDefault();
+    }
+    /** Index of the listbox option an event happened on, or -1. */
+    optionAt(event) {
+        const item = event.target.closest('.option');
+        return item ? Number(item.id.slice('option-'.length)) : -1;
+    }
+    rendered() {
+        const combobox = this.ref('combobox');
+        const listbox = this.ref('listbox');
+        combobox.addEventListener('keydown', (event) => this.onKey(event));
+        // The browser's light dismiss closes the listbox on the pointerup of a click on the combobox;
+        // remembering the state at pointerdown keeps that click from opening it again.
+        combobox.addEventListener('pointerdown', () => (this.pressedOpen = this.opened));
+        combobox.addEventListener('click', () => {
+            const wasOpen = this.pressedOpen ?? this.opened;
+            this.pressedOpen = undefined;
+            if (wasOpen)
+                this.close();
+            else
+                this.open();
+        });
+        this.ref('label').addEventListener('click', () => combobox.focus());
+        // Focus stays on the combobox (aria-activedescendant) while the pointer is on the listbox.
+        listbox.addEventListener('pointerdown', (event) => event.preventDefault());
+        listbox.addEventListener('pointermove', (event) => {
+            const i = this.optionAt(event);
+            if (i >= 0 && i !== this.activeIndex() && !this.opts[i]?.disabled)
+                this.activate(i);
+        });
+        listbox.addEventListener('click', (event) => {
+            const i = this.optionAt(event);
+            if (i < 0 || this.opts[i]?.disabled)
+                return;
+            this.choose(i);
+            this.close();
+        });
+        // Light dismiss and the browser's own Escape close the popover without us; follow it.
+        listbox.addEventListener('toggle', () => {
+            if (!listbox.matches(':popover-open'))
+                this.close();
+        });
+        // Focus moved elsewhere by a script, assistive tech or into a frame. Clicks on the listbox
+        // keep focus here (its pointerdown is cancelled), and leaving the window keeps it open.
+        combobox.addEventListener('focusout', (event) => {
+            const to = event.relatedTarget;
+            if (to ? !this.shadowRoot.contains(to) : document.hasFocus())
+                this.close();
+        });
+    }
+    willUpdate(changed) {
+        if (changed.has('value') && !this.dirty)
+            this.current = String(this.props.value);
+    }
+    update(changed) {
+        const combobox = this.ref('combobox');
+        if (changed.has('label'))
+            setText(this.ref('label'), String(this.props.label));
+        if (changed.has('helpText'))
+            setText(this.ref('help-text'), String(this.props.helpText));
+        if (changed.has('required')) {
+            setOptionalAttribute(combobox, 'aria-required', this.props.required ? 'true' : '');
+        }
+        if (changed.has('disabled')) {
+            const off = this.isDisabled;
+            setOptionalAttribute(combobox, 'aria-disabled', off ? 'true' : '');
+            setOptionalAttribute(combobox, 'tabindex', off ? '' : '0');
+            if (off)
+                this.close();
+        }
+        if (changed.has('value') || changed.has('placeholder'))
+            this.sync();
+        else if (changed.has('required') || changed.has('errorText'))
+            this.commit();
+    }
+    connected() {
+        this.observer ??= new MutationObserver(() => this.sync());
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['value', 'disabled'],
+        });
+        this.sync();
+    }
+    disconnected() {
+        this.observer?.disconnect();
+        this.close();
+    }
+    /** Like a native select: an option whose value is "" submits name=; no option, nothing. */
+    formValue() {
+        return pickOption(this.opts, this.current) ? this.current : null;
+    }
+    validate() {
+        if (this.props.required === true && this.chosen() === '') {
+            this.internals.setValidity({ valueMissing: true }, requiredMessage('select', 'Please select an item in the list.'), this.ref('combobox') ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+        setText(this.ref('error-text'), String(this.props.errorText) || this.internals.validationMessage);
+    }
+    resetToDefault() {
+        this.dirty = false;
+        this.current = String(this.props.value);
+        this.sync();
+    }
+    restoreState(state) {
+        this.dirty = true;
+        this.current = state;
+        this.sync();
+    }
+}

package/dist/components/select/select.styles.d.ts

@@ -0,0 +1 @@
+export declare const selectStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: block; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { display: flex; flex-direction: column; }\n.label-text, ::slotted([slot='label']) {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);\n}\n.label-text:empty { display: none; }\n.control {\n  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }\n:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }\n:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }\n:host(:state(user-invalid)) .control {\n  box-shadow:\n    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),\n    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n}\n:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }\n.input {\n  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;\n  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;\n}\n.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }\n.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }\n.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }\n.help-text:empty { display: none; }\n.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }\n:host(:state(user-invalid)) slot[name='help-text'] { display: none; }\n:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }\n\n.label {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);\n}\n.label:empty { display: none; }\n.combobox {\n  display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);\n  font-size: 0.9375rem; cursor: pointer; user-select: none; outline: none;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .combobox { min-block-size: 2.25rem; padding-inline: 0.75rem 0.625rem; font-size: 0.875rem; }\n:host([size='lg']) .combobox { min-block-size: 3.25rem; padding-inline: 1rem 0.875rem; font-size: 1rem; }\n.combobox[aria-expanded='true'] { box-shadow: var(--_neu-inset-sm); }\n.combobox:focus-visible { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }\n.combobox[aria-expanded='true']:focus-visible { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host(:state(user-invalid)) .combobox {\n  box-shadow:\n    calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) color-mix(in oklab, var(--_neu-danger) 45%, var(--_neu-sd)),\n    calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n}\n:host(:disabled) .combobox, :host([disabled]) .combobox { opacity: 0.6; cursor: not-allowed; }\n.display { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.placeholder { color: var(--_neu-fg-muted); }\n.chevron { display: inline-flex; flex: none; color: var(--_neu-fg-muted); transition: transform var(--_neu-dur) ease; }\n.chevron svg { inline-size: 1rem; block-size: 1rem; }\n.combobox[aria-expanded='true'] .chevron { transform: rotate(180deg); }\n.listbox {\n  position: fixed; inset: auto; margin: 0; max-block-size: 16rem; overflow: auto;\n  padding: 0.375rem; border: none; border-radius: var(--_neu-r);\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised); font-size: 0.9375rem;\n}\n.option { padding: 0.5rem 0.625rem; border-radius: calc(var(--_neu-r) * 0.75); cursor: pointer; user-select: none; }\n.option.active { box-shadow: var(--_neu-inset-sm); }\n.option[aria-selected='true'] { color: var(--_neu-accent-c); font-weight: 600; }\n.option[aria-disabled='true'] { color: var(--_neu-fg-muted); cursor: not-allowed; }\n";

package/dist/components/select/select.styles.js

@@ -0,0 +1,39 @@
+import { fieldStyles } from '../shared/field.styles.js';
+export const selectStyles = `${fieldStyles}
+.label {
+  display: block; margin-block-end: 0.375rem;
+  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);
+}
+.label:empty { display: none; }
+.combobox {
+  display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;
+  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);
+  font-size: 0.9375rem; cursor: pointer; user-select: none; outline: none;
+  transition: box-shadow var(--_neu-dur) ease;
+}
+:host([size='sm']) .combobox { min-block-size: 2.25rem; padding-inline: 0.75rem 0.625rem; font-size: 0.875rem; }
+:host([size='lg']) .combobox { min-block-size: 3.25rem; padding-inline: 1rem 0.875rem; font-size: 1rem; }
+.combobox[aria-expanded='true'] { box-shadow: var(--_neu-inset-sm); }
+.combobox:focus-visible { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }
+.combobox[aria-expanded='true']:focus-visible { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
+:host(:state(user-invalid)) .combobox {
+  box-shadow:
+    calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) color-mix(in oklab, var(--_neu-danger) 45%, var(--_neu-sd)),
+    calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);
+}
+:host(:disabled) .combobox, :host([disabled]) .combobox { opacity: 0.6; cursor: not-allowed; }
+.display { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.placeholder { color: var(--_neu-fg-muted); }
+.chevron { display: inline-flex; flex: none; color: var(--_neu-fg-muted); transition: transform var(--_neu-dur) ease; }
+.chevron svg { inline-size: 1rem; block-size: 1rem; }
+.combobox[aria-expanded='true'] .chevron { transform: rotate(180deg); }
+.listbox {
+  position: fixed; inset: auto; margin: 0; max-block-size: 16rem; overflow: auto;
+  padding: 0.375rem; border: none; border-radius: var(--_neu-r);
+  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised); font-size: 0.9375rem;
+}
+.option { padding: 0.5rem 0.625rem; border-radius: calc(var(--_neu-r) * 0.75); cursor: pointer; user-select: none; }
+.option.active { box-shadow: var(--_neu-inset-sm); }
+.option[aria-selected='true'] { color: var(--_neu-accent-c); font-weight: 600; }
+.option[aria-disabled='true'] { color: var(--_neu-fg-muted); cursor: not-allowed; }
+`;

package/dist/components/shared/checkable.d.ts

@@ -0,0 +1,45 @@
+import { FormControlElement } from '../../core/form-control.js';
+import { type EnterMode } from './press.js';
+/**
+ * Base for controls with a checked state (switch, checkbox): the checked/default split, the native
+ * click order, form value, required validity, reset and restore. Subclasses paint their own shadow.
+ */
+export declare abstract class CheckableElement extends FormControlElement {
+    static extraProperties: string[];
+    /** How Enter activates; Space always does. */
+    static enter: EnterMode;
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    size: 'sm' | 'md' | 'lg';
+    private current;
+    private dirty;
+    /** data-ref of the node that anchors validity messages. */
+    protected abstract readonly anchor: string;
+    /** Mirrors the current state into the shadow root's classes. */
+    protected abstract paint(): void;
+    constructor();
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    protected ariaCheckedValue(): 'true' | 'false' | 'mixed';
+    /** Changes the state for a click and returns the function that puts it back. */
+    protected flip(): () => void;
+    /**
+     * Native checkbox order: flip now, let click listeners see it, then input + change once the
+     * click has finished dispatching (within it, unless propagation was stopped before window).
+     */
+    private onClick;
+    /** Pushes the state to host state, ARIA and the shadow root, without touching the form. */
+    protected sync(): void;
+    private setCurrent;
+    protected willUpdate(changed: ReadonlySet<string>): void;
+    protected update(changed: ReadonlySet<string>): void;
+    protected formValue(): string | null;
+    protected formState(): string;
+    protected validate(): void;
+    protected resetToDefault(): void;
+    protected restoreState(state: string): void;
+}

package/dist/components/shared/checkable.js

@@ -0,0 +1,108 @@
+import { afterDispatch, dispatch } from '../../core/dom.js';
+import { FormControlElement } from '../../core/form-control.js';
+import { requiredMessage } from '../../core/validation.js';
+import { pressable } from './press.js';
+/**
+ * Base for controls with a checked state (switch, checkbox): the checked/default split, the native
+ * click order, form value, required validity, reset and restore. Subclasses paint their own shadow.
+ */
+export class CheckableElement extends FormControlElement {
+    static extraProperties = ['defaultChecked'];
+    /** How Enter activates; Space always does. */
+    static enter = 'once';
+    current;
+    dirty = false;
+    constructor() {
+        super();
+        this.current = this.props.checked === true;
+        this.addEventListener('click', (event) => this.onClick(event));
+        // Like a native checkbox, Space toggles on keyup only after its own keydown.
+        pressable(this, this.internals.states, this.constructor.enter, () => this.isDisabled);
+    }
+    get checked() {
+        return this.current;
+    }
+    set checked(value) {
+        this.dirty = true;
+        this.setCurrent(Boolean(value));
+    }
+    get defaultChecked() {
+        return this.props.checked === true;
+    }
+    set defaultChecked(value) {
+        this.toggleAttribute('checked', Boolean(value));
+    }
+    ariaCheckedValue() {
+        return this.current ? 'true' : 'false';
+    }
+    /** Changes the state for a click and returns the function that puts it back. */
+    flip() {
+        const before = this.current;
+        this.setCurrent(!before);
+        return () => this.setCurrent(before);
+    }
+    /**
+     * Native checkbox order: flip now, let click listeners see it, then input + change once the
+     * click has finished dispatching (within it, unless propagation was stopped before window).
+     */
+    onClick(event) {
+        this.dirty = true;
+        const undo = this.flip();
+        const flipped = this.ariaCheckedValue();
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                undo();
+            }
+            else if (this.isConnected && this.ariaCheckedValue() === flipped) {
+                this.markInteracted();
+                dispatch(this, 'input');
+                dispatch(this, 'change');
+            }
+        });
+    }
+    /** Pushes the state to host state, ARIA and the shadow root, without touching the form. */
+    sync() {
+        this.toggleState('checked', this.current);
+        this.internals.ariaChecked = this.ariaCheckedValue();
+        this.paint();
+    }
+    setCurrent(value) {
+        this.current = value;
+        this.sync();
+        this.commit();
+    }
+    willUpdate(changed) {
+        if (changed.has('checked') && !this.dirty)
+            this.current = this.props.checked === true;
+    }
+    update(changed) {
+        if (changed.has('disabled'))
+            this.syncDisabledState();
+        if (changed.has('checked'))
+            this.setCurrent(this.current);
+        else if (changed.has('required') || changed.has('value'))
+            this.commit();
+    }
+    formValue() {
+        return this.current ? String(this.props.value) : null;
+    }
+    formState() {
+        return this.current ? 'checked' : 'unchecked';
+    }
+    validate() {
+        if (this.props.required === true && !this.current) {
+            this.internals.setValidity({ valueMissing: true }, requiredMessage('checkbox', 'Please check this box if you want to proceed.'), this.ref(this.anchor) ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    resetToDefault() {
+        this.dirty = false;
+        this.setCurrent(this.props.checked === true);
+    }
+    restoreState(state) {
+        this.dirty = true;
+        this.setCurrent(state === 'checked');
+    }
+}

package/dist/components/shared/field.styles.d.ts

@@ -0,0 +1 @@
+export declare const fieldStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: block; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { display: flex; flex-direction: column; }\n.label-text, ::slotted([slot='label']) {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);\n}\n.label-text:empty { display: none; }\n.control {\n  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }\n:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }\n:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }\n:host(:state(user-invalid)) .control {\n  box-shadow:\n    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),\n    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n}\n:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }\n.input {\n  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;\n  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;\n}\n.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }\n.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }\n.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }\n.help-text:empty { display: none; }\n.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }\n:host(:state(user-invalid)) slot[name='help-text'] { display: none; }\n:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }\n";

package/dist/components/shared/field.styles.js

@@ -0,0 +1,36 @@
+import { hostTheme } from '../../core/styles.js';
+export const fieldStyles = `${hostTheme}
+:host { display: block; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: flex; flex-direction: column; }
+.label-text, ::slotted([slot='label']) {
+  display: block; margin-block-end: 0.375rem;
+  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);
+}
+.label-text:empty { display: none; }
+.control {
+  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
+  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);
+  transition: box-shadow var(--_neu-dur) ease;
+}
+:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }
+:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }
+:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }
+:host(:state(user-invalid)) .control {
+  box-shadow:
+    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),
+    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
+}
+:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }
+.input {
+  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;
+  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
+}
+.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }
+.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }
+.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }
+.help-text:empty { display: none; }
+.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }
+:host(:state(user-invalid)) slot[name='help-text'] { display: none; }
+:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }
+`;

package/dist/components/shared/press.d.ts

@@ -0,0 +1,7 @@
+/** How Enter activates: on every keydown, only on the first, or not at all. */
+export type EnterMode = 'repeat' | 'once' | 'none';
+/**
+ * Native-like keyboard activation shared by button, switch and checkbox: Space arms on keydown and
+ * clicks on keyup, Enter clicks on keydown. `inactive` blocks both arming and clicking.
+ */
+export declare function pressable(host: HTMLElement, states: CustomStateSet, enter: EnterMode, inactive: () => boolean): void;