@neumorphism-ui/elements 0.0.0-stage → 1.0.0-next.0

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,19 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuSpinner extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly label: {
+            readonly type: "string";
+            readonly default: "Loading";
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    label: string;
+    size: 'sm' | 'md' | 'lg';
+    constructor();
+    protected update(changed: ReadonlySet<string>): void;
+}

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

@@ -0,0 +1,12 @@
+export declare const spinnerDef: import("../../core/define.js").ComponentDef<{
+    readonly label: {
+        readonly type: "string";
+        readonly default: "Loading";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/spinner/spinner.def.js

@@ -0,0 +1,25 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { spinnerStyles } from './spinner.styles.js';
+export const spinnerDef = defineComponent({
+    tag: 'neu-spinner',
+    props: {
+        label: { type: 'string', default: 'Loading' },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+    },
+    styles: spinnerStyles,
+    // The label is also visually hidden text: a live region announces content, not its name.
+    template: (p) => html `<span part="base" class="base"><span part="track" class="track"></span><span part="indicator" class="indicator"></span><span class="label" data-ref="label">${p.label}</span></span>`,
+    docs: {
+        summary: 'A rotating indicator for work in progress.',
+        events: [],
+        slots: [],
+        parts: [
+            { name: 'base', description: 'The sized wrapper.' },
+            { name: 'track', description: 'The inset ring behind the indicator.' },
+            { name: 'indicator', description: 'The rotating arc.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/spinner/spinner.js

@@ -0,0 +1,17 @@
+import { setText } from '../../core/dom.js';
+import { NeuElement } from '../../core/neu-element.js';
+import { spinnerDef } from './spinner.def.js';
+export class NeuSpinner extends NeuElement {
+    static def = spinnerDef;
+    constructor() {
+        super();
+        this.internals.role = 'status';
+    }
+    update(changed) {
+        if (!changed.has('label'))
+            return;
+        const label = String(this.props.label);
+        this.internals.ariaLabel = label || null;
+        setText(this.ref('label'), label);
+    }
+}

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

@@ -0,0 +1 @@
+export declare const spinnerStyles = "\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-block; vertical-align: middle; inline-size: 1.5rem; block-size: 1.5rem; }\n:host([size='sm']) { inline-size: 1rem; block-size: 1rem; }\n:host([size='lg']) { inline-size: 2.25rem; block-size: 2.25rem; }\n.base { position: relative; display: block; inline-size: 100%; block-size: 100%; }\n.track, .indicator { position: absolute; inset: 0; border-radius: 50%; }\n.label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.track { box-shadow: var(--_neu-inset-sm); }\n.indicator { border: 3px solid transparent; border-block-start-color: var(--_neu-accent-c); animation: neu-spinner-rotate 0.9s linear infinite; }\n@keyframes neu-spinner-rotate { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) { .indicator { animation-duration: 2.7s; } }\n";

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,13 @@
+import { hostTheme } from '../../core/styles.js';
+export const spinnerStyles = `${hostTheme}
+:host { display: inline-block; vertical-align: middle; inline-size: 1.5rem; block-size: 1.5rem; }
+:host([size='sm']) { inline-size: 1rem; block-size: 1rem; }
+:host([size='lg']) { inline-size: 2.25rem; block-size: 2.25rem; }
+.base { position: relative; display: block; inline-size: 100%; block-size: 100%; }
+.track, .indicator { position: absolute; inset: 0; border-radius: 50%; }
+.label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.track { box-shadow: var(--_neu-inset-sm); }
+.indicator { border: 3px solid transparent; border-block-start-color: var(--_neu-accent-c); animation: neu-spinner-rotate 0.9s linear infinite; }
+@keyframes neu-spinner-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .indicator { animation-duration: 2.7s; } }
+`;

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,33 @@
+import { NeuElement } from '../../core/neu-element.js';
+export declare class NeuSurface extends NeuElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly shape: {
+            readonly type: "string";
+            readonly default: "raised";
+            readonly values: readonly ["raised", "inset", "flat", "convex", "concave"];
+            readonly reflect: true;
+        };
+        readonly elevation: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+        readonly radius: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg", "full"];
+            readonly reflect: true;
+        };
+        readonly padding: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["none", "sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    shape: 'raised' | 'inset' | 'flat' | 'convex' | 'concave';
+    elevation: 'sm' | 'md' | 'lg';
+    radius: 'sm' | 'md' | 'lg' | 'full';
+    padding: 'none' | 'sm' | 'md' | 'lg';
+}

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

@@ -0,0 +1,26 @@
+export declare const surfaceDef: import("../../core/define.js").ComponentDef<{
+    readonly shape: {
+        readonly type: "string";
+        readonly default: "raised";
+        readonly values: readonly ["raised", "inset", "flat", "convex", "concave"];
+        readonly reflect: true;
+    };
+    readonly elevation: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+    readonly radius: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg", "full"];
+        readonly reflect: true;
+    };
+    readonly padding: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["none", "sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/surface/surface.def.js

@@ -0,0 +1,27 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { surfaceStyles } from './surface.styles.js';
+export const surfaceDef = defineComponent({
+    tag: 'neu-surface',
+    props: {
+        shape: {
+            type: 'string',
+            default: 'raised',
+            values: ['raised', 'inset', 'flat', 'convex', 'concave'],
+            reflect: true,
+        },
+        elevation: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        radius: { type: 'string', default: 'md', values: ['sm', 'md', 'lg', 'full'], reflect: true },
+        padding: { type: 'string', default: 'md', values: ['none', 'sm', 'md', 'lg'], reflect: true },
+    },
+    styles: surfaceStyles,
+    template: () => html `<div part="base" class="base"><slot></slot></div>`,
+    docs: {
+        summary: 'A neumorphic container with its own shape, elevation, radius and padding.',
+        events: [],
+        slots: [{ name: '', description: 'The content of the surface.' }],
+        parts: [{ name: 'base', description: 'The surface itself.' }],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/surface/surface.js

@@ -0,0 +1,5 @@
+import { NeuElement } from '../../core/neu-element.js';
+import { surfaceDef } from './surface.def.js';
+export class NeuSurface extends NeuElement {
+    static def = surfaceDef;
+}

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

@@ -0,0 +1 @@
+export declare const surfaceStyles = "\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; --_neu-raised-lg: calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-inset-lg: inset calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), inset calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-up: var(--_neu-raised); --_neu-down: var(--_neu-inset); --_neu-hi: color-mix(in oklab, var(--_neu-bg), white 8%); --_neu-lo: color-mix(in oklab, var(--_neu-bg), black 6%); }\n:host([elevation='sm']) { --_neu-up: var(--_neu-raised-sm); --_neu-down: var(--_neu-inset-sm); }\n:host([elevation='lg']) { --_neu-up: var(--_neu-raised-lg); --_neu-down: var(--_neu-inset-lg); }\n.base { background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-up); border-radius: var(--_neu-r); padding: 1.25rem; }\n:host([shape='inset']) .base { box-shadow: var(--_neu-down); }\n:host([shape='flat']) .base { box-shadow: none; }\n:host([shape='convex']) .base { background: linear-gradient(145deg, var(--_neu-hi), var(--_neu-lo)); }\n:host([shape='concave']) .base { background: linear-gradient(145deg, var(--_neu-lo), var(--_neu-hi)); }\n:host([radius='sm']) .base { border-radius: calc(var(--_neu-r) * 0.5); }\n:host([radius='lg']) .base { border-radius: calc(var(--_neu-r) * 2); }\n:host([radius='full']) .base { border-radius: 999px; }\n:host([padding='none']) .base { padding: 0; }\n:host([padding='sm']) .base { padding: 0.75rem; }\n:host([padding='lg']) .base { padding: 2rem; }\n";

package/dist/components/surface/surface.styles.js

@@ -0,0 +1,17 @@
+import { hostTheme } from '../../core/styles.js';
+export const surfaceStyles = `${hostTheme}
+:host { display: block; --_neu-raised-lg: calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-inset-lg: inset calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 2) calc(var(--_neu-d) * 4) var(--_neu-sd), inset calc(var(--_neu-d) * -2) calc(var(--_neu-d) * -2) calc(var(--_neu-d) * 4) var(--_neu-sl); --_neu-up: var(--_neu-raised); --_neu-down: var(--_neu-inset); --_neu-hi: color-mix(in oklab, var(--_neu-bg), white 8%); --_neu-lo: color-mix(in oklab, var(--_neu-bg), black 6%); }
+:host([elevation='sm']) { --_neu-up: var(--_neu-raised-sm); --_neu-down: var(--_neu-inset-sm); }
+:host([elevation='lg']) { --_neu-up: var(--_neu-raised-lg); --_neu-down: var(--_neu-inset-lg); }
+.base { background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-up); border-radius: var(--_neu-r); padding: 1.25rem; }
+:host([shape='inset']) .base { box-shadow: var(--_neu-down); }
+:host([shape='flat']) .base { box-shadow: none; }
+:host([shape='convex']) .base { background: linear-gradient(145deg, var(--_neu-hi), var(--_neu-lo)); }
+:host([shape='concave']) .base { background: linear-gradient(145deg, var(--_neu-lo), var(--_neu-hi)); }
+:host([radius='sm']) .base { border-radius: calc(var(--_neu-r) * 0.5); }
+:host([radius='lg']) .base { border-radius: calc(var(--_neu-r) * 2); }
+:host([radius='full']) .base { border-radius: 999px; }
+:host([padding='none']) .base { padding: 0; }
+:host([padding='sm']) .base { padding: 0.75rem; }
+:host([padding='lg']) .base { padding: 2rem; }
+`;

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,60 @@
+import { FormControlElement } from '../../core/form-control.js';
+export declare class NeuSwitch extends FormControlElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly checked: {
+            readonly type: "boolean";
+        };
+        readonly name: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly value: {
+            readonly type: "string";
+            readonly default: "on";
+            readonly reflect: true;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly required: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    static extraProperties: string[];
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    size: 'sm' | 'md' | 'lg';
+    private current;
+    private dirty;
+    constructor();
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * 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;
+    private onKeyDown;
+    /** Like a native checkbox, Space toggles on keyup only after its own keydown. */
+    private onKeyUp;
+    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/switch/switch.def.d.ts

@@ -0,0 +1,28 @@
+export declare const switchDef: import("../../core/define.js").ComponentDef<{
+    readonly checked: {
+        readonly type: "boolean";
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly value: {
+        readonly type: "string";
+        readonly default: "on";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/switch/switch.def.js

@@ -0,0 +1,33 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { switchStyles } from './switch.styles.js';
+export const switchDef = defineComponent({
+    tag: 'neu-switch',
+    props: {
+        checked: { type: 'boolean' },
+        name: { type: 'string', reflect: true },
+        value: { type: 'string', default: 'on', reflect: true },
+        disabled: { type: 'boolean', reflect: true },
+        required: { type: 'boolean', reflect: true },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+    },
+    form: { valueProp: 'checked' },
+    styles: switchStyles,
+    template: (p) => html `<span part="base" class="base"><span part="track" class="track${p.checked ? ' on' : ''}" data-ref="track"><span part="thumb" class="thumb"></span></span><span part="label" class="label"><slot></slot></span></span>`,
+    docs: {
+        summary: 'An on/off switch. The checked attribute is the default state.',
+        events: [
+            { name: 'input', description: 'Fired when the user toggles the switch.' },
+            { name: 'change', description: 'Fired after input when the user toggles the switch.' },
+        ],
+        slots: [{ name: '', description: 'Label; also the accessible name.' }],
+        parts: [
+            { name: 'base', description: 'Wrapper around track and label.' },
+            { name: 'track', description: 'The inset track.' },
+            { name: 'thumb', description: 'The raised thumb.' },
+            { name: 'label', description: 'Wrapper around the default slot.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/switch/switch.js

@@ -0,0 +1,125 @@
+import { afterDispatch, dispatch, isActiveInRoot } from '../../core/dom.js';
+import { FormControlElement } from '../../core/form-control.js';
+import { requiredCheckboxMessage } from '../../core/validation.js';
+import { switchDef } from './switch.def.js';
+export class NeuSwitch extends FormControlElement {
+    static def = switchDef;
+    static extraProperties = ['defaultChecked'];
+    current;
+    dirty = false;
+    constructor() {
+        super();
+        this.current = this.props.checked === true;
+        this.internals.role = 'switch';
+        this.addEventListener('click', (event) => this.onClick(event));
+        this.addEventListener('keydown', (event) => this.onKeyDown(event));
+        this.addEventListener('keyup', (event) => this.onKeyUp(event));
+        // Disarm when focus moves away, not when only the window loses focus.
+        this.addEventListener('blur', () => {
+            if (!isActiveInRoot(this))
+                this.toggleState('pressed', false);
+        });
+        // Focus coming back means Space may have been released while it was away.
+        this.addEventListener('focus', () => this.toggleState('pressed', false));
+    }
+    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));
+    }
+    /**
+     * 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) {
+        const before = this.current;
+        this.dirty = true;
+        this.setCurrent(!before);
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                this.setCurrent(before);
+            }
+            else if (this.isConnected && this.current === !before) {
+                this.markInteracted();
+                dispatch(this, 'input');
+                dispatch(this, 'change');
+            }
+        });
+    }
+    onKeyDown(event) {
+        if (event.key === ' ') {
+            if (event.defaultPrevented)
+                return;
+            // Cancelled at once: deferred, an ancestor that stops propagation would let the page scroll.
+            // An ancestor claims Space in the capture phase, or by cancelling the keyup.
+            event.preventDefault();
+            this.toggleState('pressed', true);
+        }
+        else if (event.key === 'Enter' && !event.repeat) {
+            // Not cancelled here, so a handler further up can still cancel the toggle.
+            afterDispatch(event, () => {
+                if (!event.defaultPrevented)
+                    this.click();
+            });
+        }
+    }
+    /** Like a native checkbox, Space toggles on keyup only after its own keydown. */
+    onKeyUp(event) {
+        if (event.key !== ' ' || !this.internals.states.has('pressed'))
+            return;
+        this.toggleState('pressed', false);
+        afterDispatch(event, () => {
+            if (!event.defaultPrevented)
+                this.click();
+        });
+    }
+    setCurrent(value) {
+        this.current = value;
+        this.toggleState('checked', value);
+        this.internals.ariaChecked = value ? 'true' : 'false';
+        this.ref('track')?.classList.toggle('on', value);
+        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 }, requiredCheckboxMessage(), this.ref('track') ?? 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/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const switchStyles = "\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 {\n  display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;\n  --_neu-track-w: 2.875rem; --_neu-track-h: 1.625rem; --_neu-thumb: 1.25rem;\n}\n:host([size='sm']) { --_neu-track-w: 2.25rem; --_neu-track-h: 1.25rem; --_neu-thumb: 0.9375rem; }\n:host([size='lg']) { --_neu-track-w: 3.5rem; --_neu-track-h: 2rem; --_neu-thumb: 1.5rem; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { display: inline-flex; align-items: center; gap: 0.625rem; }\n.track {\n  position: relative; flex: none; inline-size: var(--_neu-track-w); block-size: var(--_neu-track-h);\n  border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);\n  transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;\n}\n.track.on { background: var(--_neu-accent-soft); }\n.thumb {\n  position: absolute; inset-block-start: 50%;\n  inset-inline-start: calc((var(--_neu-track-h) - var(--_neu-thumb)) / 2);\n  inline-size: var(--_neu-thumb); block-size: var(--_neu-thumb); border-radius: 50%;\n  background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm); transform: translateY(-50%);\n  transition: inset-inline-start var(--_neu-dur) ease;\n}\n.track.on .thumb { inset-inline-start: calc(var(--_neu-track-w) - var(--_neu-thumb) - (var(--_neu-track-h) - var(--_neu-thumb)) / 2); }\n:host(:focus-visible) .track { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }\n:host(:state(user-invalid)) .track { box-shadow: var(--_neu-inset-sm), 0 0 0 2px color-mix(in oklab, var(--_neu-danger) 55%, transparent); }\n.label { color: var(--_neu-fg); }\n";

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,29 @@
+import { hostTheme } from '../../core/styles.js';
+export const switchStyles = `${hostTheme}
+:host {
+  display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;
+  --_neu-track-w: 2.875rem; --_neu-track-h: 1.625rem; --_neu-thumb: 1.25rem;
+}
+:host([size='sm']) { --_neu-track-w: 2.25rem; --_neu-track-h: 1.25rem; --_neu-thumb: 0.9375rem; }
+:host([size='lg']) { --_neu-track-w: 3.5rem; --_neu-track-h: 2rem; --_neu-thumb: 1.5rem; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: inline-flex; align-items: center; gap: 0.625rem; }
+.track {
+  position: relative; flex: none; inline-size: var(--_neu-track-w); block-size: var(--_neu-track-h);
+  border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
+  transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;
+}
+.track.on { background: var(--_neu-accent-soft); }
+.thumb {
+  position: absolute; inset-block-start: 50%;
+  inset-inline-start: calc((var(--_neu-track-h) - var(--_neu-thumb)) / 2);
+  inline-size: var(--_neu-thumb); block-size: var(--_neu-thumb); border-radius: 50%;
+  background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm); transform: translateY(-50%);
+  transition: inset-inline-start var(--_neu-dur) ease;
+}
+.track.on .thumb { inset-inline-start: calc(var(--_neu-track-w) - var(--_neu-thumb) - (var(--_neu-track-h) - var(--_neu-thumb)) / 2); }
+:host(:focus-visible) .track { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
+:host(:state(user-invalid)) .track { box-shadow: var(--_neu-inset-sm), 0 0 0 2px color-mix(in oklab, var(--_neu-danger) 55%, transparent); }
+.label { color: var(--_neu-fg); }
+`;

package/dist/components/text-field/implicit-submit.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Enter in a text control submits like a native input (HTML §4.10.21.2). With a default button
+ * (the form's first submit button, form="id" ones included) it clicks that button unless it is
+ * disabled, so the button's own guards and click listeners apply. Without one, it submits only
+ * when a single field blocks implicit submission. Either way it is a submit attempt in its own
+ * right, so invalid controls reveal user-invalid.
+ */
+export declare function implicitSubmit(form: HTMLFormElement | null): void;

package/dist/components/text-field/implicit-submit.js

@@ -0,0 +1,42 @@
+import { isSubmitButton, markSubmitAttempt } from '../../core/form-control.js';
+/** Input types that block implicit submission when the form has no submit button (HTML §4.10.21.2). */
+const BLOCKING_TYPES = new Set([
+    'text',
+    'search',
+    'url',
+    'tel',
+    'email',
+    'password',
+    'date',
+    'month',
+    'week',
+    'time',
+    'datetime-local',
+    'number',
+]);
+/**
+ * Enter in a text control submits like a native input (HTML §4.10.21.2). With a default button
+ * (the form's first submit button, form="id" ones included) it clicks that button unless it is
+ * disabled, so the button's own guards and click listeners apply. Without one, it submits only
+ * when a single field blocks implicit submission. Either way it is a submit attempt in its own
+ * right, so invalid controls reveal user-invalid.
+ */
+export function implicitSubmit(form) {
+    if (!form)
+        return;
+    const elements = [...form.elements];
+    const defaultButton = elements.find(isSubmitButton);
+    if (defaultButton) {
+        if (defaultButton.matches(':disabled') || defaultButton.hasAttribute('disabled'))
+            return;
+        markSubmitAttempt(form);
+        defaultButton.click();
+        return;
+    }
+    const blocking = elements.filter((el) => (el instanceof HTMLInputElement && BLOCKING_TYPES.has(el.type)) ||
+        el.localName === 'neu-text-field');
+    if (blocking.length !== 1)
+        return;
+    markSubmitAttempt(form);
+    form.requestSubmit();
+}