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

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/divider/divider.d.ts

@@ -5,7 +5,6 @@ export declare class NeuDivider extends NeuElement {
             readonly type: "string";
             readonly default: "horizontal";
             readonly values: readonly ["horizontal", "vertical"];
-            readonly reflect: true;
         };
     }>;
     orientation: 'horizontal' | 'vertical';

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

@@ -3,6 +3,5 @@ export declare const dividerDef: import("../../core/define.js").ComponentDef<{
         readonly type: "string";
         readonly default: "horizontal";
         readonly values: readonly ["horizontal", "vertical"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/divider/divider.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 { dividerStyles } from './divider.styles.js';
 export const dividerDef = defineComponent({
     tag: 'neu-divider',
@@ -9,16 +8,8 @@ export const dividerDef = defineComponent({
             type: 'string',
             default: 'horizontal',
             values: ['horizontal', 'vertical'],
-            reflect: true,
         },
     },
     styles: dividerStyles,
     template: () => html `<span part="base" class="base"></span>`,
-    docs: {
-        summary: 'A thin engraved line that separates content.',
-        events: [],
-        slots: [],
-        parts: [{ name: 'base', description: 'The engraved line.' }],
-        cssProperties: themeCssProperties,
-    },
 });

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

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

package/dist/components/divider/divider.docs.js

@@ -0,0 +1,12 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const dividerDocs = {
+    summary: 'A thin engraved line that separates content.',
+    descriptions: {
+        orientation: 'The direction the line runs in.',
+    },
+    events: [],
+    slots: [],
+    parts: [{ name: 'base', description: 'The engraved line.' }],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

package/dist/components/icon/icon.d.ts

@@ -3,16 +3,13 @@ export declare class NeuIcon extends NeuElement {
     static def: import("../../ssr.js").ComponentDef<{
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly library: {
             readonly type: "string";
             readonly default: "system";
-            readonly reflect: true;
         };
         readonly label: {
             readonly type: "string";
-            readonly reflect: true;
         };
     }>;
     name: string;

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

@@ -1,15 +1,12 @@
 export declare const iconDef: import("../../core/define.js").ComponentDef<{
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly library: {
         readonly type: "string";
         readonly default: "system";
-        readonly reflect: true;
     };
     readonly label: {
         readonly type: "string";
-        readonly reflect: true;
     };
 }>;

package/dist/components/icon/icon.def.js

@@ -5,20 +5,13 @@ import { systemIconSvg } from './system-icons.js';
 export const iconDef = defineComponent({
     tag: 'neu-icon',
     props: {
-        name: { type: 'string', reflect: true },
-        library: { type: 'string', default: 'system', reflect: true },
-        label: { type: 'string', reflect: true },
+        name: { type: 'string' },
+        library: { type: 'string', default: 'system' },
+        label: { type: 'string' },
     },
     styles: iconStyles,
     template: (p) => {
         const svg = p.library === 'system' ? systemIconSvg(p.name) : undefined;
         return html `<span class="box" data-ref="box">${svg === undefined ? '' : unsafeHTML(svg)}</span>`;
     },
-    docs: {
-        summary: 'A vector icon from the built-in set or a registered icon library.',
-        events: [],
-        slots: [],
-        parts: [{ name: 'svg', description: 'The rendered SVG element.' }],
-        cssProperties: [],
-    },
 });

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

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

package/dist/components/icon/icon.docs.js

@@ -0,0 +1,13 @@
+export const iconDocs = {
+    summary: 'A vector icon from the built-in set or a registered icon library.',
+    descriptions: {
+        name: 'The name of the icon to show.',
+        library: 'The icon library to take the icon from; defaults to the built-in system set.',
+        label: 'Accessible name that turns the icon into an image; without it the icon is decorative.',
+    },
+    events: [],
+    slots: [],
+    parts: [{ name: 'svg', description: 'The rendered SVG element.' }],
+    cssProperties: [],
+    keyboard: [],
+};

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, part?: 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, part) {
+    return `<svg${part ? ` part="${part}"` : ''} 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, 'svg');
 }

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

@@ -15,29 +15,24 @@ export declare class NeuIconButton extends NeuButton {
             readonly type: "string";
             readonly default: "circle";
             readonly values: readonly ["circle", "square"];
-            readonly reflect: true;
         };
         readonly variant: {
             readonly type: "string";
             readonly default: "default";
             readonly values: readonly ["default", "primary", "flat"];
-            readonly reflect: true;
         };
         readonly size: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly type: {
             readonly type: "string";
             readonly default: "button";
             readonly values: readonly ["button", "submit", "reset"];
-            readonly reflect: true;
         };
     }>;
     icon: string;

package/dist/components/icon-button/icon-button.def.d.ts

@@ -13,28 +13,23 @@ export declare const iconButtonDef: import("../../core/define.js").ComponentDef<
         readonly type: "string";
         readonly default: "circle";
         readonly values: readonly ["circle", "square"];
-        readonly reflect: true;
     };
     readonly variant: {
         readonly type: "string";
         readonly default: "default";
         readonly values: readonly ["default", "primary", "flat"];
-        readonly reflect: true;
     };
     readonly size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly type: {
         readonly type: "string";
         readonly default: "button";
         readonly values: readonly ["button", "submit", "reset"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/icon-button/icon-button.def.js

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html, unsafeHTML } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { systemIconSvg } from '../icon/system-icons.js';
 import { iconButtonStyles } from './icon-button.styles.js';
 export const iconButtonDef = defineComponent({
@@ -9,20 +8,18 @@ export const iconButtonDef = defineComponent({
         icon: { type: 'string' },
         library: { type: 'string', default: 'system' },
         label: { type: 'string' },
-        shape: { type: 'string', default: 'circle', values: ['circle', 'square'], reflect: true },
+        shape: { type: 'string', default: 'circle', values: ['circle', 'square'] },
         variant: {
             type: 'string',
             default: 'default',
             values: ['default', 'primary', 'flat'],
-            reflect: true,
         },
-        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
-        disabled: { type: 'boolean', reflect: true },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
+        disabled: { type: 'boolean' },
         type: {
             type: 'string',
             default: 'button',
             values: ['button', 'submit', 'reset'],
-            reflect: true,
         },
     },
     styles: iconButtonStyles,
@@ -30,15 +27,4 @@ export const iconButtonDef = defineComponent({
         const svg = p.library === 'system' ? systemIconSvg(p.icon) : undefined;
         return html `<span part="base" class="base"><span part="icon" class="icon" data-ref="icon">${svg === undefined ? '' : unsafeHTML(svg)}</span></span>`;
     },
-    docs: {
-        summary: 'A raised button that shows an icon instead of a label. Name it with label.',
-        events: [{ name: 'click', description: 'Fired on activation; never while disabled.' }],
-        slots: [],
-        parts: [
-            { name: 'base', description: 'The raised surface.' },
-            { name: 'icon', description: 'Wrapper around the icon.' },
-            { name: 'svg', description: 'The rendered SVG element.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

package/dist/components/icon-button/icon-button.docs.d.ts

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

package/dist/components/icon-button/icon-button.docs.js

@@ -0,0 +1,26 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const iconButtonDocs = {
+    summary: 'A raised button that shows an icon instead of a label. Name it with label.',
+    descriptions: {
+        icon: 'The name of the icon to show.',
+        library: 'The icon library to take the icon from; defaults to the built-in system set.',
+        label: 'Accessible name of the button, since it has no visible text.',
+        shape: 'The outline of the button.',
+        variant: 'The visual emphasis of the button.',
+        size: 'The button size.',
+        disabled: 'Prevents interaction and dims the button.',
+        type: 'What the button does inside a form; defaults to "button", which does nothing.',
+    },
+    events: [{ name: 'click', description: 'Fired on activation; never while disabled.' }],
+    slots: [],
+    parts: [
+        { name: 'base', description: 'The raised surface.' },
+        { name: 'icon', description: 'Wrapper around the icon.' },
+        { name: 'svg', description: 'The rendered SVG element.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        { name: 'Enter', description: 'Activates the button on keydown.' },
+        { name: 'Space', description: 'Activates the button on keyup, like a native button.' },
+    ],
+};

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

@@ -0,0 +1,79 @@
+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 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 disabled: {
+            readonly type: "boolean";
+        };
+        readonly readOnly: {
+            readonly type: "boolean";
+            readonly attribute: "readonly";
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+        };
+        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,115 @@
+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 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 disabled: {
+        readonly type: "boolean";
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly attribute: "readonly";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+    };
+    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 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 disabled: {
+        readonly type: "boolean";
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly attribute: "readonly";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+    };
+    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,40 @@
+import { defineComponent } from '../../core/define.js';
+import { html, unsafeHTML } from '../../core/html.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' },
+    label: { type: 'string' },
+    placeholder: { type: 'string' },
+    helpText: { type: 'string' },
+    errorText: { type: 'string' },
+    required: { type: 'boolean' },
+    disabled: { type: 'boolean' },
+    readOnly: { type: 'boolean', attribute: 'readonly' },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
+    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>`;
+    },
+});

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

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