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

package/dist/all.d.ts

@@ -2,11 +2,19 @@ export * from './avatar.js';
 export * from './badge.js';
 export * from './button.js';
 export * from './button-group.js';
+export * from './checkbox.js';
 export * from './divider.js';
 export * from './icon.js';
 export * from './icon-button.js';
 export * from './icons.js';
+export * from './number-field.js';
+export * from './option.js';
+export * from './radio.js';
+export * from './radio-group.js';
+export * from './select.js';
+export * from './slider.js';
 export * from './spinner.js';
 export * from './surface.js';
 export * from './switch.js';
 export * from './text-field.js';
+export * from './textarea.js';

package/dist/all.js

@@ -2,11 +2,19 @@ export * from './avatar.js';
 export * from './badge.js';
 export * from './button.js';
 export * from './button-group.js';
+export * from './checkbox.js';
 export * from './divider.js';
 export * from './icon.js';
 export * from './icon-button.js';
 export * from './icons.js';
+export * from './number-field.js';
+export * from './option.js';
+export * from './radio.js';
+export * from './radio-group.js';
+export * from './select.js';
+export * from './slider.js';
 export * from './spinner.js';
 export * from './surface.js';
 export * from './switch.js';
 export * from './text-field.js';
+export * from './textarea.js';

package/dist/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { NeuCheckbox } from './components/checkbox/checkbox.js';
+export { NeuCheckbox };
+export { checkboxDef } from './components/checkbox/checkbox.def.js';

package/dist/checkbox.js

@@ -0,0 +1,4 @@
+import { NeuCheckbox } from './components/checkbox/checkbox.js';
+NeuCheckbox.define();
+export { NeuCheckbox };
+export { checkboxDef } from './components/checkbox/checkbox.def.js';

package/dist/components/button/button.d.ts

@@ -19,7 +19,5 @@ export declare class NeuButton extends NeuElement {
     private onClickCapture;
     /** Like a native button: submit or reset once the click has dispatched, unless it was cancelled. */
     private onClick;
-    private onKeyDown;
-    private onKeyUp;
     protected update(changed: ReadonlySet<string>): void;
 }

package/dist/components/button/button.js

@@ -1,6 +1,7 @@
-import { afterDispatch, isActiveInRoot } from '../../core/dom.js';
+import { afterDispatch } from '../../core/dom.js';
 import { markSubmitAttempt, SUBMITS } from '../../core/form-control.js';
 import { NeuElement } from '../../core/neu-element.js';
+import { pressable } from '../shared/press.js';
 import { buttonDef } from './button.def.js';
 export class NeuButton extends NeuElement {
     static def = buttonDef;
@@ -13,15 +14,7 @@ export class NeuButton extends NeuElement {
         this.internals.role = 'button';
         this.addEventListener('click', (event) => this.onClickCapture(event), { capture: true });
         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));
+        pressable(this, this.internals.states, 'repeat', () => this.inactive);
     }
     get form() {
         return this.internals.form;
@@ -52,32 +45,6 @@ export class NeuButton extends NeuElement {
             }
         });
     }
-    onKeyDown(event) {
-        if (this.inactive)
-            return;
-        if (event.key === 'Enter') {
-            // Not cancelled here, so a handler further up can still cancel the activation.
-            afterDispatch(event, () => {
-                if (!event.defaultPrevented && !this.inactive)
-                    this.click();
-            });
-        }
-        else if (event.key === ' ' && !event.defaultPrevented) {
-            // 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);
-        }
-    }
-    onKeyUp(event) {
-        if (event.key !== ' ' || !this.internals.states.has('pressed'))
-            return;
-        this.toggleState('pressed', false);
-        afterDispatch(event, () => {
-            if (!event.defaultPrevented && !this.inactive)
-                this.click();
-        });
-    }
     update(changed) {
         if (changed.has('disabled') || changed.has('loading')) {
             this.syncDisabledState();

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,44 @@
+import { CheckableElement } from '../shared/checkable.js';
+export declare class NeuCheckbox extends CheckableElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly checked: {
+            readonly type: "boolean";
+        };
+        readonly indeterminate: {
+            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;
+        };
+    }>;
+    /** Only Space toggles, like a native checkbox. */
+    static enter: "none";
+    indeterminate: boolean;
+    protected readonly anchor = "control";
+    constructor();
+    protected ariaCheckedValue(): 'true' | 'false' | 'mixed';
+    /** Native: a click on an indeterminate box toggles checked and clears indeterminate. */
+    protected flip(): () => void;
+    protected paint(): void;
+    protected update(changed: ReadonlySet<string>): void;
+}

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

@@ -0,0 +1,31 @@
+export declare const checkboxDef: import("../../core/define.js").ComponentDef<{
+    readonly checked: {
+        readonly type: "boolean";
+    };
+    readonly indeterminate: {
+        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/checkbox/checkbox.def.js

@@ -0,0 +1,37 @@
+import { defineComponent } from '../../core/define.js';
+import { html, unsafeHTML } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { checkBody, minusBody, svgWrap } from '../icon/system-icons.js';
+import { checkboxStyles } from './checkbox.styles.js';
+const checkSvg = unsafeHTML(svgWrap(checkBody));
+const minusSvg = unsafeHTML(svgWrap(minusBody));
+export const checkboxDef = defineComponent({
+    tag: 'neu-checkbox',
+    props: {
+        checked: { type: 'boolean' },
+        indeterminate: { 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: checkboxStyles,
+    template: (p) => html `<span part="base" class="base"><span part="control" class="control${p.checked ? ' on' : ''}${p.indeterminate ? ' mixed' : ''}" data-ref="control"><span part="indicator" class="indicator">${checkSvg}${minusSvg}</span></span><span part="label" class="label"><slot></slot></span></span>`,
+    docs: {
+        summary: 'A checkbox. The checked attribute is the default state; indeterminate is a property whose attribute only sets the initial state.',
+        events: [
+            { name: 'input', description: 'Fired when the user toggles the checkbox.' },
+            { name: 'change', description: 'Fired after input when the user toggles the checkbox.' },
+        ],
+        slots: [{ name: '', description: 'Label; also the accessible name.' }],
+        parts: [
+            { name: 'base', description: 'Wrapper around control and label.' },
+            { name: 'control', description: 'The inset box.' },
+            { name: 'indicator', description: 'The check or minus mark.' },
+            { name: 'label', description: 'Wrapper around the default slot.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,40 @@
+import { CheckableElement } from '../shared/checkable.js';
+import { checkboxDef } from './checkbox.def.js';
+export class NeuCheckbox extends CheckableElement {
+    static def = checkboxDef;
+    /** Only Space toggles, like a native checkbox. */
+    static enter = 'none';
+    anchor = 'control';
+    constructor() {
+        super();
+        this.internals.role = 'checkbox';
+    }
+    ariaCheckedValue() {
+        return this.props.indeterminate === true ? 'mixed' : super.ariaCheckedValue();
+    }
+    /** Native: a click on an indeterminate box toggles checked and clears indeterminate. */
+    flip() {
+        const mixed = this.props.indeterminate === true;
+        if (!mixed)
+            return super.flip();
+        const checked = this.checked;
+        this.setProp('indeterminate', false);
+        this.checked = !checked;
+        return () => {
+            this.setProp('indeterminate', true);
+            this.checked = checked;
+        };
+    }
+    paint() {
+        const mixed = this.props.indeterminate === true;
+        const control = this.ref('control');
+        control?.classList.toggle('on', this.checked);
+        control?.classList.toggle('mixed', mixed);
+        this.toggleState('indeterminate', mixed);
+    }
+    update(changed) {
+        super.update(changed);
+        if (changed.has('indeterminate'))
+            this.sync();
+    }
+}

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

@@ -0,0 +1 @@
+export declare const checkboxStyles = "\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-box: 1.25rem;\n}\n:host([size='sm']) { --_neu-box: 1rem; }\n:host([size='lg']) { --_neu-box: 1.5rem; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\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: var(--_neu-box); block-size: var(--_neu-box);\n  border-radius: calc(var(--_neu-r) * 0.4); background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);\n  color: var(--_neu-accent-c);\n  transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;\n}\n.control.on, .control.mixed { background: var(--_neu-accent-soft); }\n.indicator { display: inline-flex; inline-size: 80%; block-size: 80%; opacity: 0; }\n.control.on .indicator, .control.mixed .indicator { opacity: 1; }\n.indicator svg { inline-size: 100%; block-size: 100%; }\n.indicator svg:last-child, .control.mixed .indicator svg:first-child { display: none; }\n.control.mixed .indicator svg:last-child { display: block; }\n:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }\n:host(:state(user-invalid)) .control { 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/checkbox/checkbox.styles.js

@@ -0,0 +1,28 @@
+import { hostTheme } from '../../core/styles.js';
+export const checkboxStyles = `${hostTheme}
+:host {
+  display: inline-flex; vertical-align: middle; cursor: pointer; user-select: none;
+  --_neu-box: 1.25rem;
+}
+:host([size='sm']) { --_neu-box: 1rem; }
+:host([size='lg']) { --_neu-box: 1.5rem; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: inline-flex; align-items: center; gap: 0.625rem; }
+.control {
+  display: inline-flex; align-items: center; justify-content: center; flex: none;
+  inline-size: var(--_neu-box); block-size: var(--_neu-box);
+  border-radius: calc(var(--_neu-r) * 0.4); background: var(--_neu-bg); box-shadow: var(--_neu-inset-sm);
+  color: var(--_neu-accent-c);
+  transition: background-color var(--_neu-dur) ease, box-shadow var(--_neu-dur) ease;
+}
+.control.on, .control.mixed { background: var(--_neu-accent-soft); }
+.indicator { display: inline-flex; inline-size: 80%; block-size: 80%; opacity: 0; }
+.control.on .indicator, .control.mixed .indicator { opacity: 1; }
+.indicator svg { inline-size: 100%; block-size: 100%; }
+.indicator svg:last-child, .control.mixed .indicator svg:first-child { display: none; }
+.control.mixed .indicator svg:last-child { display: block; }
+:host(:focus-visible) .control { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }
+:host(:disabled) .base, :host([disabled]) .base { opacity: 0.55; }
+:host(:state(user-invalid)) .control { 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/icon/system-icons.d.ts

@@ -1,2 +1,12 @@
+export declare const checkBody = "<path d=\"M5 12.5l4.5 4.5L19 7.5\"/>";
+export declare const chevronDownBody = "<path d=\"M6 9l6 6 6-6\"/>";
+export declare const chevronUpBody = "<path d=\"M6 15l6-6 6 6\"/>";
+export declare const plusBody = "<path d=\"M12 5v14M5 12h14\"/>";
+export declare const minusBody = "<path d=\"M5 12h14\"/>";
+export declare const xBody = "<path d=\"M6 6l12 12M18 6L6 18\"/>";
+export declare const alertCircleBody = "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7.5v5.5M12 16.5h.01\"/>";
+export declare const userBody = "<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\"/>";
+/** The SVG element around an icon body. DOM-free. */
+export declare function svgWrap(body: string): string;
 /** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
 export declare function systemIconSvg(name: string): string | undefined;

package/dist/components/icon/system-icons.js

@@ -1,17 +1,28 @@
+// Each body is its own export, so a component that needs one icon bundles only that icon.
+export const checkBody = '<path d="M5 12.5l4.5 4.5L19 7.5"/>';
+export const chevronDownBody = '<path d="M6 9l6 6 6-6"/>';
+export const chevronUpBody = '<path d="M6 15l6-6 6 6"/>';
+export const plusBody = '<path d="M12 5v14M5 12h14"/>';
+export const minusBody = '<path d="M5 12h14"/>';
+export const xBody = '<path d="M6 6l12 12M18 6L6 18"/>';
+export const alertCircleBody = '<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5h.01"/>';
+export const userBody = '<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/>';
 const BODIES = {
-    check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
-    'chevron-down': '<path d="M6 9l6 6 6-6"/>',
-    'chevron-up': '<path d="M6 15l6-6 6 6"/>',
-    plus: '<path d="M12 5v14M5 12h14"/>',
-    minus: '<path d="M5 12h14"/>',
-    x: '<path d="M6 6l12 12M18 6L6 18"/>',
-    'alert-circle': '<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5h.01"/>',
-    user: '<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-6 8-6s8 2 8 6"/>',
+    check: checkBody,
+    'chevron-down': chevronDownBody,
+    'chevron-up': chevronUpBody,
+    plus: plusBody,
+    minus: minusBody,
+    x: xBody,
+    'alert-circle': alertCircleBody,
+    user: userBody,
 };
+/** The SVG element around an icon body. DOM-free. */
+export function svgWrap(body) {
+    return `<svg part="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+}
 /** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
 export function systemIconSvg(name) {
     const body = Object.hasOwn(BODIES, name) ? BODIES[name] : undefined;
-    if (body === undefined)
-        return undefined;
-    return `<svg part="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+    return body === undefined ? undefined : svgWrap(body);
 }

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

@@ -0,0 +1,84 @@
+import { TextControlElement } from '../shared/text-control.js';
+import { BLOCKS_IMPLICIT_SUBMIT } from '../text-field/implicit-submit.js';
+export declare class NeuNumberField extends TextControlElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly min: {
+            readonly type: "number";
+            readonly default: number;
+        };
+        readonly max: {
+            readonly type: "number";
+            readonly default: number;
+        };
+        readonly step: {
+            readonly type: "number";
+            readonly default: 1;
+        };
+        readonly name: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly placeholder: {
+            readonly type: "string";
+        };
+        readonly helpText: {
+            readonly type: "string";
+        };
+        readonly errorText: {
+            readonly type: "string";
+        };
+        readonly required: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly readOnly: {
+            readonly type: "boolean";
+            readonly reflect: true;
+            readonly attribute: "readonly";
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+        readonly incrementLabel: {
+            readonly type: "string";
+            readonly default: "Increase";
+        };
+        readonly decrementLabel: {
+            readonly type: "string";
+            readonly default: "Decrease";
+        };
+    }>;
+    static readonly [BLOCKS_IMPLICIT_SUBMIT] = true;
+    static extraProperties: string[];
+    min: number;
+    max: number;
+    step: number;
+    size: 'sm' | 'md' | 'lg';
+    incrementLabel: string;
+    decrementLabel: string;
+    protected readonly commitProps: string[];
+    private get np();
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /** The limits and step a native input of this field carries. */
+    private constrain;
+    protected probe(value: string): HTMLInputElement;
+    /** Moves the value, then reports it like a finished native edit: input (composed), then change. */
+    private move;
+    protected rendered(): void;
+    protected controlKeyDown(event: KeyboardEvent): void;
+    protected update(changed: ReadonlySet<string>): void;
+}

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

@@ -0,0 +1,125 @@
+import type { InferProps } from '../../core/props.js';
+declare const props: {
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly min: {
+        readonly type: "number";
+        readonly default: number;
+    };
+    readonly max: {
+        readonly type: "number";
+        readonly default: number;
+    };
+    readonly step: {
+        readonly type: "number";
+        readonly default: 1;
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly placeholder: {
+        readonly type: "string";
+    };
+    readonly helpText: {
+        readonly type: "string";
+    };
+    readonly errorText: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly reflect: true;
+        readonly attribute: "readonly";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+    readonly incrementLabel: {
+        readonly type: "string";
+        readonly default: "Increase";
+    };
+    readonly decrementLabel: {
+        readonly type: "string";
+        readonly default: "Decrease";
+    };
+};
+export type NumberFieldProps = InferProps<typeof props>;
+/** iOS has no minus key on the decimal keypad: ask for it only when negatives are out of range. */
+export declare const decimalPad: (min: number) => boolean;
+export declare const numberFieldDef: import("../../core/define.js").ComponentDef<{
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly min: {
+        readonly type: "number";
+        readonly default: number;
+    };
+    readonly max: {
+        readonly type: "number";
+        readonly default: number;
+    };
+    readonly step: {
+        readonly type: "number";
+        readonly default: 1;
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly placeholder: {
+        readonly type: "string";
+    };
+    readonly helpText: {
+        readonly type: "string";
+    };
+    readonly errorText: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly reflect: true;
+        readonly attribute: "readonly";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+    readonly incrementLabel: {
+        readonly type: "string";
+        readonly default: "Increase";
+    };
+    readonly decrementLabel: {
+        readonly type: "string";
+        readonly default: "Decrease";
+    };
+}>;
+export {};

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

@@ -0,0 +1,62 @@
+import { defineComponent } from '../../core/define.js';
+import { html, unsafeHTML } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { minusBody, plusBody, svgWrap } from '../icon/system-icons.js';
+import { stepUnit } from '../shared/step.js';
+import { numberFieldStyles } from './number-field.styles.js';
+const props = {
+    value: { type: 'string' },
+    min: { type: 'number', default: Number.NaN },
+    max: { type: 'number', default: Number.NaN },
+    step: { type: 'number', default: 1 },
+    name: { type: 'string', reflect: true },
+    label: { type: 'string' },
+    placeholder: { type: 'string' },
+    helpText: { type: 'string' },
+    errorText: { type: 'string' },
+    required: { type: 'boolean', reflect: true },
+    disabled: { type: 'boolean', reflect: true },
+    readOnly: { type: 'boolean', reflect: true, attribute: 'readonly' },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+    incrementLabel: { type: 'string', default: 'Increase' },
+    decrementLabel: { type: 'string', default: 'Decrease' },
+};
+/** iOS has no minus key on the decimal keypad: ask for it only when negatives are out of range. */
+export const decimalPad = (min) => Number.isFinite(min) && min >= 0;
+/** Attributes of the inner <input> that only appear when set. */
+function inputAttributes(p) {
+    return html `${decimalPad(p.min) ? html ` inputmode="decimal"` : ''}${Number.isFinite(p.min) ? html ` min="${p.min}"` : ''}${Number.isFinite(p.max) ? html ` max="${p.max}"` : ''}${p.placeholder ? html ` placeholder="${p.placeholder}"` : ''}${p.required ? html ` required` : ''}${p.disabled ? html ` disabled` : ''}${p.readOnly ? html ` readonly` : ''}`;
+}
+const icon = (body) => unsafeHTML(svgWrap(body));
+export const numberFieldDef = defineComponent({
+    tag: 'neu-number-field',
+    props,
+    delegatesFocus: true,
+    form: { valueProp: 'value' },
+    styles: numberFieldStyles,
+    template: (p) => {
+        const off = p.disabled || p.readOnly ? html ` disabled` : '';
+        return html `<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${p.label}</span></slot></label><div part="control" class="control"><button part="decrement" class="step" type="button" tabindex="-1" aria-label="${p.decrementLabel}" data-ref="decrement"${off}>${icon(minusBody)}</button><input part="input" class="input" id="input" data-ref="input" type="number" value="${p.value}" step="${stepUnit(p.step)}" aria-describedby="help"${inputAttributes(p)}><button part="increment" class="step" type="button" tabindex="-1" aria-label="${p.incrementLabel}" data-ref="increment"${off}>${icon(plusBody)}</button></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${p.helpText}</span></slot><span class="error-text" data-ref="error-text">${p.errorText}</span></div></div>`;
+    },
+    docs: {
+        summary: 'A numeric input with an inset field and stepper buttons. The value attribute is the default value.',
+        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,
+    },
+});