@neumorphism-ui/elements 1.0.0-next.1 → 1.0.0-next.3

package/dist/components/number-field/number-field.docs.js

@@ -0,0 +1,45 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const numberFieldDocs = {
+    summary: 'A numeric input with an inset field and stepper buttons. The value attribute is the default value.',
+    descriptions: {
+        value: 'The current number as typed or set by script, as a string.',
+        min: 'The lowest accepted value, also the target of the Home key.',
+        max: 'The highest accepted value, also the target of the End key.',
+        step: 'The amount one step changes the value by, and the granularity values must match.',
+        name: 'The name under which the value is submitted with a form.',
+        label: 'Visible label text; the label slot replaces it.',
+        placeholder: 'Hint shown while the field is empty.',
+        helpText: 'Guidance shown below the field; the help-text slot replaces it.',
+        errorText: "Shown in place of the browser's validation message once the field is invalid after user interaction; does not itself make the field invalid.",
+        required: 'Makes the form invalid while the field is empty.',
+        disabled: 'Prevents interaction and leaves the field out of form submission.',
+        readOnly: 'Keeps the value visible and submitted but not editable.',
+        size: 'The field size.',
+        incrementLabel: 'Accessible name of the button that raises the value; defaults to "Increase".',
+        decrementLabel: 'Accessible name of the button that lowers the value; defaults to "Decrease".',
+        defaultValue: 'The value the field starts with, which a form reset restores; set by the value attribute.',
+    },
+    events: [
+        { name: 'input', description: 'Fired on every edit and every step (composed).' },
+        { name: 'change', description: 'Fired when an edit is committed, or after each step.' },
+    ],
+    slots: [
+        { name: 'label', description: 'Rich label; replaces the label attribute.' },
+        { name: 'help-text', description: 'Rich help text; replaces the help-text attribute.' },
+    ],
+    parts: [
+        { name: 'base', description: 'Outer wrapper.' },
+        { name: 'label', description: 'The <label> element.' },
+        { name: 'control', description: 'The inset field around the input and buttons.' },
+        { name: 'input', description: 'The native <input type="number">.' },
+        { name: 'decrement', description: 'The button that lowers the value.' },
+        { name: 'increment', description: 'The button that raises the value.' },
+        { name: 'help-text', description: 'Help or error text area.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        { name: 'ArrowUp / ArrowDown', description: 'Steps the value up or down by step.' },
+        { name: 'PageUp / PageDown', description: 'Steps the value up or down by ten times step.' },
+        { name: 'Home / End', description: 'Sets the value to min or max, when set.' },
+    ],
+};

package/dist/components/number-field/number-field.js

@@ -0,0 +1,121 @@
+import { afterDispatch, composing, setOptionalAttribute } from '../../core/dom.js';
+import { baseCommitProps, TextControlElement } from '../shared/text-control.js';
+import { BLOCKS_IMPLICIT_SUBMIT, implicitSubmit } from '../text-field/implicit-submit.js';
+import { stepUnit } from '../shared/step.js';
+import { decimalPad, numberFieldDef } from './number-field.def.js';
+export class NeuNumberField extends TextControlElement {
+    static def = numberFieldDef;
+    static [BLOCKS_IMPLICIT_SUBMIT] = true;
+    static extraProperties = ['defaultValue', 'valueAsNumber'];
+    commitProps = [...baseCommitProps, 'min', 'max', 'step'];
+    get np() {
+        return this.props;
+    }
+    get valueAsNumber() {
+        const input = this.input;
+        return input ? input.valueAsNumber : this.probe(this.value).valueAsNumber;
+    }
+    set valueAsNumber(next) {
+        this.value = Number.isFinite(next) ? String(next) : '';
+    }
+    /** The limits and step a native input of this field carries. */
+    constrain(input) {
+        const p = this.np;
+        setOptionalAttribute(input, 'min', Number.isFinite(p.min) ? String(p.min) : '');
+        setOptionalAttribute(input, 'max', Number.isFinite(p.max) ? String(p.max) : '');
+        input.step = String(stepUnit(p.step));
+        setOptionalAttribute(input, 'inputmode', decimalPad(p.min) ? 'decimal' : '');
+    }
+    probe(value) {
+        const probe = document.createElement('input');
+        probe.type = 'number';
+        this.constrain(probe);
+        probe.value = value;
+        return probe;
+    }
+    /** Moves the value, then reports it like a finished native edit: input (composed), then change. */
+    move(change) {
+        const input = this.input;
+        if (!input || input.disabled || input.readOnly)
+            return;
+        const before = input.value;
+        try {
+            change(input);
+        }
+        catch {
+            // stepUp and stepDown throw when no step applies; the value stays as it was.
+        }
+        if (input.value === before)
+            return;
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    rendered() {
+        super.rendered();
+        const steps = [
+            ['decrement', (input) => input.stepDown()],
+            ['increment', (input) => input.stepUp()],
+        ];
+        for (const [ref, mover] of steps) {
+            const button = this.ref(ref);
+            // Keep focus (and the caret) in the input while the button is pressed. A touch leaves focus
+            // where it is: focusing the input would open the on-screen keyboard on every tap.
+            button?.addEventListener('pointerdown', (event) => {
+                event.preventDefault();
+                if (!button.disabled && event.pointerType !== 'touch')
+                    this.input?.focus();
+            });
+            button?.addEventListener('click', () => this.move(mover));
+        }
+    }
+    controlKeyDown(event) {
+        if (composing(event))
+            return;
+        if (event.key === 'Enter') {
+            // Like a native input: submit once the keydown has finished dispatching, unless cancelled.
+            afterDispatch(event, () => {
+                if (!event.defaultPrevented)
+                    implicitSubmit(this.internals.form);
+            });
+            return;
+        }
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        const { min, max } = this.np;
+        let mover;
+        if (event.key === 'PageUp')
+            mover = (input) => input.stepUp(10);
+        else if (event.key === 'PageDown')
+            mover = (input) => input.stepDown(10);
+        else if (event.key === 'Home' && Number.isFinite(min))
+            mover = (input) => (input.value = `${min}`);
+        else if (event.key === 'End' && Number.isFinite(max))
+            mover = (input) => (input.value = `${max}`);
+        if (!mover)
+            return;
+        event.preventDefault();
+        this.move(mover);
+    }
+    update(changed) {
+        const input = this.input;
+        if (input) {
+            if (['min', 'max', 'step'].some((key) => changed.has(key)))
+                this.constrain(input);
+            const off = this.isDisabled || this.np.readOnly;
+            const buttons = [
+                ['decrement', 'decrementLabel'],
+                ['increment', 'incrementLabel'],
+            ];
+            for (const [ref, label] of buttons) {
+                const button = this.ref(ref);
+                if (!button)
+                    continue;
+                if (changed.has('disabled') || changed.has('readOnly'))
+                    button.disabled = off;
+                if (changed.has(label))
+                    button.setAttribute('aria-label', this.np[label]);
+            }
+        }
+        super.update(changed);
+    }
+}

package/dist/components/number-field/number-field.styles.d.ts

@@ -0,0 +1 @@
+export declare const numberFieldStyles = "\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 { font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted); }\n.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.375rem; }\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.input { appearance: textfield; text-align: center; }\n.input::-webkit-inner-spin-button, .input::-webkit-outer-spin-button { appearance: none; margin: 0; }\n.step {\n  display: inline-flex; flex: none; align-items: center; justify-content: center;\n  inline-size: 1.75rem; block-size: 1.75rem; padding: 0; border: none; border-radius: 50%;\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised-sm);\n  font: inherit; cursor: pointer;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n.step:active:not(:disabled) { box-shadow: var(--_neu-inset-sm); }\n.step:disabled { box-shadow: none; color: var(--_neu-fg-muted); cursor: not-allowed; }\n.step svg { inline-size: 1rem; block-size: 1rem; }\n";

package/dist/components/number-field/number-field.styles.js

@@ -0,0 +1,15 @@
+import { fieldStyles } from '../shared/field.styles.js';
+export const numberFieldStyles = `${fieldStyles}
+.input { appearance: textfield; text-align: center; }
+.input::-webkit-inner-spin-button, .input::-webkit-outer-spin-button { appearance: none; margin: 0; }
+.step {
+  display: inline-flex; flex: none; align-items: center; justify-content: center;
+  inline-size: 1.75rem; block-size: 1.75rem; padding: 0; border: none; border-radius: 50%;
+  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised-sm);
+  font: inherit; cursor: pointer;
+  transition: box-shadow var(--_neu-dur) ease;
+}
+.step:active:not(:disabled) { box-shadow: var(--_neu-inset-sm); }
+.step:disabled { box-shadow: none; color: var(--_neu-fg-muted); cursor: not-allowed; }
+.step svg { inline-size: 1rem; block-size: 1rem; }
+`;

package/dist/components/option/option-data.d.ts

@@ -0,0 +1,8 @@
+import type { OptionData } from '../../core/define.js';
+/** An option's label: its text with ASCII whitespace collapsed and trimmed, as a native option's. */
+export declare function optionLabel(text: string): string;
+/**
+ * What a neu-option holds, read from its attributes and text, so it works before the element is
+ * upgraded (plan decision 11): the value attribute, or the label when there is none.
+ */
+export declare function readOption(el: Element): OptionData;

package/dist/components/option/option-data.js

@@ -0,0 +1,12 @@
+/** An option's label: its text with ASCII whitespace collapsed and trimmed, as a native option's. */
+export function optionLabel(text) {
+    return text.replace(/[\t\n\f\r ]+/g, ' ').replace(/^ | $/g, '');
+}
+/**
+ * What a neu-option holds, read from its attributes and text, so it works before the element is
+ * upgraded (plan decision 11): the value attribute, or the label when there is none.
+ */
+export function readOption(el) {
+    const label = optionLabel(el.textContent ?? '');
+    return { value: el.getAttribute('value') ?? label, label, disabled: el.hasAttribute('disabled') };
+}

package/dist/components/option/option.d.ts

@@ -0,0 +1,17 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuOption extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+        };
+    }>;
+    disabled: boolean;
+    /** The value attribute, or the label when there is none (like a native option). */
+    get value(): string;
+    set value(next: string);
+    /** The text content, whitespace collapsed. */
+    get label(): string;
+}

package/dist/components/option/option.def.d.ts

@@ -0,0 +1,8 @@
+export declare const optionDef: import("../../core/define.js").ComponentDef<{
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+    };
+}>;

package/dist/components/option/option.def.js

@@ -0,0 +1,12 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { optionStyles } from './option.styles.js';
+export const optionDef = defineComponent({
+    tag: 'neu-option',
+    props: {
+        value: { type: 'string' },
+        disabled: { type: 'boolean' },
+    },
+    styles: optionStyles,
+    template: () => html `<slot></slot>`,
+});

package/dist/components/option/option.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const optionDocs: ComponentDocs;

package/dist/components/option/option.docs.js

@@ -0,0 +1,12 @@
+export const optionDocs = {
+    summary: 'One choice of a neu-select. It is data only and never rendered: the select reads its value (the value attribute, or the label when there is none), its text as the label, and disabled.',
+    descriptions: {
+        value: 'The value the select takes when this option is chosen; the label is used when it is missing.',
+        disabled: 'Keeps the option visible but not selectable.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'The label, as plain text.' }],
+    parts: [],
+    cssProperties: [],
+    keyboard: [],
+};

package/dist/components/option/option.js

@@ -0,0 +1,17 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { optionDef } from './option.def.js';
+import { optionLabel, readOption } from './option-data.js';
+export class NeuOption extends NeuElement {
+    static def = optionDef;
+    /** The value attribute, or the label when there is none (like a native option). */
+    get value() {
+        return readOption(this).value;
+    }
+    set value(next) {
+        this.setAttribute('value', next === null || next === undefined ? '' : String(next));
+    }
+    /** The text content, whitespace collapsed. */
+    get label() {
+        return optionLabel(this.textContent ?? '');
+    }
+}

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

@@ -0,0 +1,2 @@
+/** An option is data for its neu-select, which renders the listbox in its own shadow root. */
+export declare const optionStyles = "\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: none !important; }\n";

package/dist/components/option/option.styles.js

@@ -0,0 +1,5 @@
+import { hostTheme } from '../../core/styles.js';
+/** An option is data for its neu-select, which renders the listbox in its own shadow root. */
+export const optionStyles = `${hostTheme}
+:host { display: none !important; }
+`;

package/dist/components/radio/radio-link.d.ts

@@ -0,0 +1,11 @@
+/** How a radio and its group talk. Symbol.for: two copies of the library on one page agree. */
+export declare const SET_CHECKED: unique symbol;
+export declare const SET_GROUP_DISABLED: unique symbol;
+/** Implemented by neu-radio-group: radios ask for a resync when they upgrade or move in. */
+export declare const RESYNC: unique symbol;
+/** The part of a neu-radio its group uses; absent on a radio that is not upgraded yet. */
+export interface RadioLink extends HTMLElement {
+    disabled: boolean;
+    [SET_CHECKED]?(on: boolean): void;
+    [SET_GROUP_DISABLED]?(off: boolean): void;
+}

package/dist/components/radio/radio-link.js

@@ -0,0 +1,5 @@
+/** How a radio and its group talk. Symbol.for: two copies of the library on one page agree. */
+export const SET_CHECKED = Symbol.for('neu-ui.radio.setChecked');
+export const SET_GROUP_DISABLED = Symbol.for('neu-ui.radio.setGroupDisabled');
+/** Implemented by neu-radio-group: radios ask for a resync when they upgrade or move in. */
+export const RESYNC = Symbol.for('neu-ui.radioGroup.resync');

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,27 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { SET_CHECKED, SET_GROUP_DISABLED } from './radio-link.js';
+export { SET_CHECKED, SET_GROUP_DISABLED };
+export declare class NeuRadio extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly value: {
+            readonly type: "string";
+            readonly default: "on";
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+        };
+    }>;
+    value: string;
+    disabled: boolean;
+    private on;
+    private groupOff;
+    constructor();
+    get checked(): boolean;
+    [SET_CHECKED](on: boolean): void;
+    [SET_GROUP_DISABLED](off: boolean): void;
+    protected get isDisabled(): boolean;
+    protected update(changed: ReadonlySet<string>): void;
+    protected connected(): void;
+    /** Leaving a group (or the page) must not leave its selection or disabling behind. */
+    protected disconnected(): void;
+}

package/dist/components/radio/radio.def.d.ts

@@ -0,0 +1,9 @@
+export declare const radioDef: import("../../core/define.js").ComponentDef<{
+    readonly value: {
+        readonly type: "string";
+        readonly default: "on";
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+    };
+}>;

package/dist/components/radio/radio.def.js

@@ -0,0 +1,12 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { radioStyles } from './radio.styles.js';
+export const radioDef = defineComponent({
+    tag: 'neu-radio',
+    props: {
+        value: { type: 'string', default: 'on' },
+        disabled: { type: 'boolean' },
+    },
+    styles: radioStyles,
+    template: () => html `<span part="base" class="base"><span part="control" class="control"><span part="indicator" class="indicator"></span></span><span part="label" class="label"><slot></slot></span></span>`,
+});

package/dist/components/radio/radio.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const radioDocs: ComponentDocs;

package/dist/components/radio/radio.docs.js

@@ -0,0 +1,18 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const radioDocs = {
+    summary: 'One choice inside a neu-radio-group, which owns the value, the keyboard and the form. On its own it does nothing.',
+    descriptions: {
+        value: 'The value the group takes when this radio is selected; defaults to "on".',
+        disabled: 'Prevents this radio from being selected or focused by arrow keys.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'Label; also the accessible name.' }],
+    parts: [
+        { name: 'base', description: 'Wrapper around control and label.' },
+        { name: 'control', description: 'The inset ring.' },
+        { name: 'indicator', description: 'The dot shown when selected.' },
+        { name: 'label', description: 'Wrapper around the default slot.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

package/dist/components/radio/radio.js

@@ -0,0 +1,43 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { radioDef } from './radio.def.js';
+import { RESYNC, SET_CHECKED, SET_GROUP_DISABLED } from './radio-link.js';
+export { SET_CHECKED, SET_GROUP_DISABLED };
+export class NeuRadio extends NeuElement {
+    static def = radioDef;
+    on = false;
+    groupOff = false;
+    constructor() {
+        super();
+        this.internals.role = 'radio';
+        this.internals.ariaChecked = 'false';
+    }
+    get checked() {
+        return this.on;
+    }
+    [SET_CHECKED](on) {
+        this.on = on;
+        this.toggleState('checked', on);
+        this.internals.ariaChecked = on ? 'true' : 'false';
+    }
+    [SET_GROUP_DISABLED](off) {
+        if (off === this.groupOff)
+            return;
+        this.groupOff = off;
+        this.syncDisabledState();
+    }
+    get isDisabled() {
+        return super.isDisabled || this.groupOff;
+    }
+    update(changed) {
+        if (changed.has('disabled'))
+            this.syncDisabledState();
+    }
+    connected() {
+        this.closest('neu-radio-group')?.[RESYNC]?.();
+    }
+    /** Leaving a group (or the page) must not leave its selection or disabling behind. */
+    disconnected() {
+        this[SET_CHECKED](false);
+        this[SET_GROUP_DISABLED](false);
+    }
+}

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

@@ -0,0 +1 @@
+export declare const radioStyles = "\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: inline-flex; vertical-align: middle; cursor: pointer; user-select: none; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n:host(:state(checked)) { --_neu-radio-on: 1; }\n.base { display: inline-flex; align-items: center; gap: 0.625rem; }\n.control {\n  display: inline-flex; align-items: center; justify-content: center; flex: none;\n  inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;\n  background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n.indicator {\n  display: block; inline-size: 50%; block-size: 50%; border-radius: 50%;\n  background: var(--_neu-accent-c); transform: scale(var(--_neu-radio-on, 0));\n  transition: transform var(--_neu-dur) ease;\n}\n:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host([disabled]) .base { opacity: 0.55; }\n.label { color: var(--_neu-fg); }\n";

package/dist/components/radio/radio.styles.js

@@ -0,0 +1,21 @@
+import { hostTheme } from '../../core/styles.js';
+export const radioStyles = `${hostTheme}
+:host { display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+:host(:state(checked)) { --_neu-radio-on: 1; }
+.base { display: inline-flex; align-items: center; gap: 0.625rem; }
+.control {
+  display: inline-flex; align-items: center; justify-content: center; flex: none;
+  inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
+  background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
+  transition: box-shadow var(--_neu-dur) ease;
+}
+.indicator {
+  display: block; inline-size: 50%; block-size: 50%; border-radius: 50%;
+  background: var(--_neu-accent-c); transform: scale(var(--_neu-radio-on, 0));
+  transition: transform var(--_neu-dur) ease;
+}
+:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
+:host([disabled]) .base { opacity: 0.55; }
+.label { color: var(--_neu-fg); }
+`;

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,76 @@
+import { FormControlElement } from '../../core/form-control.js';
+import { RESYNC } from '../radio/radio-link.js';
+export declare class NeuRadioGroup extends FormControlElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly name: {
+            readonly type: "string";
+        };
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly required: {
+            readonly type: "boolean";
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+        };
+        readonly orientation: {
+            readonly type: "string";
+            readonly default: "vertical";
+            readonly values: readonly ["vertical", "horizontal"];
+        };
+    }>;
+    static extraProperties: string[];
+    name: string;
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * The requested value, kept even while no radio matches it (plan decision 8); null requests
+     * nothing, so a radio whose value is "" is chosen only when asked for.
+     */
+    private current;
+    private dirty;
+    /** The radio that holds the Tab stop. */
+    private stop;
+    /** The selected radio as of the last sync, which the form value and validity read. */
+    private picked;
+    private observer;
+    constructor();
+    get value(): string;
+    set value(next: string);
+    get defaultValue(): string;
+    set defaultValue(next: string);
+    /** The radios of this group: those whose closest group is this one. */
+    private radios;
+    /** The first radio of this group matching the requested value, if one is requested. */
+    private selected;
+    private radioAt;
+    private onKey;
+    /** A choice by the user: no event when the value does not change. */
+    private choose;
+    [RESYNC](): void;
+    /**
+     * Brings every radio in line with the group: checked state, disabling, the one Tab stop (the
+     * selected radio, else the first enabled one), the server-visible mark, and the form value.
+     * Radios that are not upgraded yet are skipped; they ask for a resync when they connect.
+     */
+    private sync;
+    /** The group's name: the slotted label's text when there is one, else the label attribute. */
+    private nameGroup;
+    protected rendered(): void;
+    protected willUpdate(changed: ReadonlySet<string>): void;
+    protected update(changed: ReadonlySet<string>): void;
+    protected connected(): void;
+    protected disconnected(): void;
+    protected formValue(): string | null;
+    /** Nothing selected saves nothing, so a radio whose value is "" is not chosen on restore. */
+    protected formState(): string | null;
+    protected validate(): void;
+    protected resetToDefault(): void;
+    protected restoreState(state: string): void;
+}

package/dist/components/radio-group/radio-group.def.d.ts

@@ -0,0 +1,36 @@
+import { type RawHtml } from '../../core/html.js';
+/**
+ * Escapes a value for a double-quoted CSS string. Besides the characters that end the string,
+ * `&`, `<`, `>` and `'` are hex-escaped too, so `html` leaves the text alone: it is raw text in a
+ * <style>, where an HTML entity would never be decoded.
+ */
+export declare function cssString(value: string): string;
+/**
+ * The rule that shows the selected radio before any script ran (plan decision 7). Only radios that
+ * are not defined yet: once upgraded, :state(checked) is the one source, so a duplicate value
+ * marks the first match only. cssString leaves nothing for `html` to escape, and the quotes are
+ * static text, so the style holds the same bytes on the server and in the client.
+ */
+export declare function markRule(value: string): RawHtml | '';
+export declare const radioGroupDef: import("../../core/define.js").ComponentDef<{
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly name: {
+        readonly type: "string";
+    };
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+    };
+    readonly orientation: {
+        readonly type: "string";
+        readonly default: "vertical";
+        readonly values: readonly ["vertical", "horizontal"];
+    };
+}>;

package/dist/components/radio-group/radio-group.def.js

@@ -0,0 +1,40 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { radioGroupStyles } from './radio-group.styles.js';
+/**
+ * Escapes a value for a double-quoted CSS string. Besides the characters that end the string,
+ * `&`, `<`, `>` and `'` are hex-escaped too, so `html` leaves the text alone: it is raw text in a
+ * <style>, where an HTML entity would never be decoded.
+ */
+export function cssString(value) {
+    return value.replace(/[\\"'&<>\r\n\f]/g, (char) => `\\${char.charCodeAt(0).toString(16)} `);
+}
+/**
+ * The rule that shows the selected radio before any script ran (plan decision 7). Only radios that
+ * are not defined yet: once upgraded, :state(checked) is the one source, so a duplicate value
+ * marks the first match only. cssString leaves nothing for `html` to escape, and the quotes are
+ * static text, so the style holds the same bytes on the server and in the client.
+ */
+export function markRule(value) {
+    return value === ''
+        ? ''
+        : html `::slotted(neu-radio:not(:defined)[value="${cssString(value)}"]){--_neu-radio-on:1}`;
+}
+export const radioGroupDef = defineComponent({
+    tag: 'neu-radio-group',
+    props: {
+        label: { type: 'string' },
+        name: { type: 'string' },
+        value: { type: 'string' },
+        required: { type: 'boolean' },
+        disabled: { type: 'boolean' },
+        orientation: {
+            type: 'string',
+            default: 'vertical',
+            values: ['vertical', 'horizontal'],
+        },
+    },
+    form: { valueProp: 'value' },
+    styles: radioGroupStyles,
+    template: (p) => html `<div part="base" class="base"><span part="label" class="label"><slot name="label"><span class="label-text" data-ref="label-text">${p.label}</span></slot></span><span class="items"><slot></slot></span><style data-ref="mark">${markRule(p.value)}</style></div>`,
+});

package/dist/components/radio-group/radio-group.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const radioGroupDocs: ComponentDocs;