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

package/dist/components/slider/slider.js

@@ -0,0 +1,170 @@
+import { dispatch } from '../../core/dom.js';
+import { FormControlElement } from '../../core/form-control.js';
+import { stepUnit } from '../shared/step.js';
+import { sliderBigStep, sliderDef, sliderStyle, sliderValue } from './slider.def.js';
+export class NeuSlider extends FormControlElement {
+    static def = sliderDef;
+    static extraProperties = ['defaultValue', 'valueFormatter'];
+    current;
+    dirty = false;
+    dragging = false;
+    startValue = 0;
+    formatter;
+    constructor() {
+        super();
+        this.internals.role = 'slider';
+        this.internals.ariaOrientation = 'horizontal';
+        this.current = this.snap(this.props.value);
+        this.addEventListener('keydown', (event) => this.onKey(event));
+        this.addEventListener('pointerdown', (event) => this.onDown(event));
+        this.addEventListener('pointermove', (event) => this.onMove(event));
+        this.addEventListener('pointerup', () => this.endDrag());
+        this.addEventListener('pointercancel', () => this.endDrag());
+        // Capture lost without a pointerup reaching us (the browser took it back, say): the drag is over.
+        this.addEventListener('lostpointercapture', () => this.endDrag());
+    }
+    disconnected() {
+        super.disconnected();
+        // A drag cut short by removal does not resume when the slider is put back.
+        this.dragging = false;
+    }
+    get value() {
+        return this.current;
+    }
+    set value(next) {
+        this.dirty = true;
+        this.setCurrent(this.snap(Number(next)));
+    }
+    get defaultValue() {
+        return this.snap(this.props.value);
+    }
+    set defaultValue(next) {
+        this.setAttribute('value', String(next));
+    }
+    get valueFormatter() {
+        return this.formatter;
+    }
+    set valueFormatter(next) {
+        this.formatter = typeof next === 'function' ? next : undefined;
+        this.sync();
+    }
+    snap(raw) {
+        return sliderValue(raw, this.props.min, this.props.max, this.props.step);
+    }
+    /** Pushes the value to ARIA and the thumb, without touching the form. */
+    sync() {
+        const { min, max } = this.props;
+        const internals = this.internals;
+        internals.ariaLabel = this.props.label === '' ? null : String(this.props.label);
+        internals.ariaValueMin = String(min);
+        internals.ariaValueMax = String(Math.max(min, max));
+        internals.ariaValueNow = String(this.current);
+        internals.ariaValueText = this.formatter ? this.formatter(this.current) : null;
+        // The template writes the same string, so a server-rendered root is left alone.
+        const base = this.ref('base');
+        const style = sliderStyle(this.current, min, max);
+        if (base && base.getAttribute('style') !== style)
+            base.setAttribute('style', style);
+    }
+    setCurrent(next) {
+        this.current = next;
+        this.sync();
+        this.commit();
+    }
+    /** The value as a user change: marks the form interaction and fires input. Returns false if nothing changed. */
+    userSet(next) {
+        if (next === this.current)
+            return false;
+        this.markInteracted();
+        this.setCurrent(next);
+        dispatch(this, 'input');
+        return true;
+    }
+    onKey(event) {
+        if (this.isDisabled || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const { min, max } = this.props;
+        const step = stepUnit(this.props.step);
+        const direction = this.matches(':dir(rtl)') ? -1 : 1;
+        const big = sliderBigStep(min, max, step);
+        const wanted = {
+            ArrowRight: this.current + step * direction,
+            ArrowLeft: this.current - step * direction,
+            ArrowUp: this.current + step,
+            ArrowDown: this.current - step,
+            PageUp: this.current + big,
+            PageDown: this.current - big,
+            Home: Number.NEGATIVE_INFINITY,
+            End: Number.POSITIVE_INFINITY,
+        };
+        const raw = wanted[event.key];
+        if (raw === undefined)
+            return;
+        event.preventDefault();
+        if (this.userSet(this.snap(raw)))
+            dispatch(this, 'change');
+    }
+    onDown(event) {
+        if (this.isDisabled || event.button !== 0)
+            return;
+        this.dragging = true;
+        this.startValue = this.current;
+        this.focus();
+        try {
+            this.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // A pointer the browser does not know (synthetic events): the drag is tracked by the flag.
+        }
+        this.moveTo(event);
+    }
+    onMove(event) {
+        if (this.dragging)
+            this.moveTo(event);
+    }
+    moveTo(event) {
+        const track = this.ref('track');
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        let fraction = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+        if (this.matches(':dir(rtl)'))
+            fraction = 1 - fraction;
+        const { min, max } = this.props;
+        const clamped = Math.min(1, Math.max(0, fraction));
+        this.userSet(this.snap(min + clamped * (Math.max(min, max) - min)));
+    }
+    endDrag() {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        if (this.current !== this.startValue)
+            dispatch(this, 'change');
+    }
+    willUpdate(changed) {
+        if (changed.has('value') || changed.has('min') || changed.has('max') || changed.has('step')) {
+            // Until the user or a script sets one, the value is the attribute's; a new range re-snaps it.
+            this.current = this.snap(this.dirty ? this.current : this.props.value);
+        }
+    }
+    update(changed) {
+        if (changed.has('disabled'))
+            this.syncDisabledState();
+        this.sync();
+        this.commit();
+    }
+    formValue() {
+        return String(this.current);
+    }
+    validate() {
+        this.internals.setValidity({});
+    }
+    resetToDefault() {
+        this.dirty = false;
+        this.setCurrent(this.snap(this.props.value));
+    }
+    restoreState(state) {
+        this.dirty = true;
+        this.setCurrent(this.snap(Number(state)));
+    }
+}

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

@@ -0,0 +1 @@
+export declare const sliderStyles = "\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; min-block-size: 1.25rem; touch-action: pan-y; cursor: pointer; user-select: none; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { position: relative; display: flex; align-items: center; block-size: 1.25rem; padding-inline: 0.625rem; }\n.track { position: relative; flex: 1; block-size: 0.5rem; border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm); }\n.fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--_neu-pos) * 100%); border-radius: inherit; background: var(--_neu-accent-soft); }\n.thumb {\n  position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--_neu-pos) * 100%);\n  inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.625rem; margin-inline-start: -0.625rem;\n  border-radius: 50%; background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host(:focus-visible) .thumb { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }\n:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }\n";

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,16 @@
+import { hostTheme } from '../../core/styles.js';
+export const sliderStyles = `${hostTheme}
+:host { display: block; min-block-size: 1.25rem; touch-action: pan-y; cursor: pointer; user-select: none; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { position: relative; display: flex; align-items: center; block-size: 1.25rem; padding-inline: 0.625rem; }
+.track { position: relative; flex: 1; block-size: 0.5rem; border-radius: 999px; background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm); }
+.fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--_neu-pos) * 100%); border-radius: inherit; background: var(--_neu-accent-soft); }
+.thumb {
+  position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--_neu-pos) * 100%);
+  inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.625rem; margin-inline-start: -0.625rem;
+  border-radius: 50%; background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);
+  transition: box-shadow var(--_neu-dur) ease;
+}
+:host(:focus-visible) .thumb { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
+`;

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

@@ -9,7 +9,6 @@ export declare class NeuSpinner extends NeuElement {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     label: string;

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

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

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

@@ -1,25 +1,13 @@
 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 },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     },
     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.docs.d.ts

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

package/dist/components/spinner/spinner.docs.js

@@ -0,0 +1,17 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const spinnerDocs = {
+    summary: 'A rotating indicator for work in progress.',
+    descriptions: {
+        label: 'Accessible name announced for the spinner; defaults to "Loading".',
+        size: 'The spinner size.',
+    },
+    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,
+    keyboard: [],
+};

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

@@ -5,25 +5,21 @@ export declare class NeuSurface extends NeuElement {
             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';

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

@@ -3,24 +3,20 @@ export declare const surfaceDef: import("../../core/define.js").ComponentDef<{
         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

@@ -1,6 +1,5 @@
 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',
@@ -9,19 +8,11 @@ export const surfaceDef = defineComponent({
             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 },
+        elevation: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
+        radius: { type: 'string', default: 'md', values: ['sm', 'md', 'lg', 'full'] },
+        padding: { type: 'string', default: 'md', values: ['none', 'sm', 'md', 'lg'] },
     },
     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.docs.d.ts

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

package/dist/components/surface/surface.docs.js

@@ -0,0 +1,15 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const surfaceDocs = {
+    summary: 'A neumorphic container with its own shape, elevation, radius and padding.',
+    descriptions: {
+        shape: 'How the surface is lit and curved.',
+        elevation: 'How far the surface appears to lift off its background.',
+        radius: 'How rounded the corners are.',
+        padding: 'The space between the edge and the content.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'The content of the surface.' }],
+    parts: [{ name: 'base', description: 'The surface itself.' }],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

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

@@ -1,60 +1,29 @@
-import { FormControlElement } from '../../core/form-control.js';
-export declare class NeuSwitch extends FormControlElement {
+import { CheckableElement } from '../shared/checkable.js';
+export declare class NeuSwitch extends CheckableElement {
     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;
+    protected readonly anchor = "track";
     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;
+    protected paint(): void;
 }

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

@@ -4,25 +4,20 @@ export declare const switchDef: import("../../core/define.js").ComponentDef<{
     };
     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

@@ -1,33 +1,17 @@
 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 },
+        name: { type: 'string' },
+        value: { type: 'string', default: 'on' },
+        disabled: { type: 'boolean' },
+        required: { type: 'boolean' },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     },
     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.docs.d.ts

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

package/dist/components/switch/switch.docs.js

@@ -0,0 +1,26 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const switchDocs = {
+    summary: 'An on/off switch. The checked attribute is the default state.',
+    descriptions: {
+        checked: 'Whether the switch is currently on.',
+        name: 'The name under which the value is submitted with a form.',
+        value: 'The value submitted with the form while the switch is on; defaults to "on".',
+        disabled: 'Prevents interaction and leaves the switch out of form submission.',
+        required: 'Makes the form invalid until the switch is on.',
+        size: 'The switch size.',
+        defaultChecked: 'Whether the switch starts on, which a form reset restores; set by the checked attribute.',
+    },
+    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,
+    keyboard: [{ name: 'Space / Enter', description: 'Toggles the switch.' }],
+};

package/dist/components/switch/switch.js

@@ -1,125 +1,13 @@
-import { afterDispatch, dispatch, isActiveInRoot } from '../../core/dom.js';
-import { FormControlElement } from '../../core/form-control.js';
-import { requiredCheckboxMessage } from '../../core/validation.js';
+import { CheckableElement } from '../shared/checkable.js';
 import { switchDef } from './switch.def.js';
-export class NeuSwitch extends FormControlElement {
+export class NeuSwitch extends CheckableElement {
     static def = switchDef;
-    static extraProperties = ['defaultChecked'];
-    current;
-    dirty = false;
+    anchor = 'track';
     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');
+    paint() {
+        this.ref('track')?.classList.toggle('on', this.checked);
     }
 }