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

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

@@ -0,0 +1,116 @@
+import { FormControlElement } from '../../core/form-control.js';
+export declare class NeuTextField extends FormControlElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly type: {
+            readonly type: "string";
+            readonly default: "text";
+            readonly values: readonly ["text", "email", "password", "search", "tel", "url"];
+            readonly reflect: true;
+        };
+        readonly value: {
+            readonly type: "string";
+        };
+        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 minLength: {
+            readonly type: "number";
+            readonly default: -1;
+            readonly attribute: "minlength";
+        };
+        readonly maxLength: {
+            readonly type: "number";
+            readonly default: -1;
+            readonly attribute: "maxlength";
+        };
+        readonly pattern: {
+            readonly type: "string";
+        };
+        readonly autocomplete: {
+            readonly type: "string";
+        };
+        readonly inputMode: {
+            readonly type: "string";
+            readonly attribute: "inputmode";
+        };
+        readonly enterKeyHint: {
+            readonly type: "string";
+            readonly attribute: "enterkeyhint";
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    static extraProperties: string[];
+    type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+    name: string;
+    label: string;
+    placeholder: string;
+    helpText: string;
+    errorText: string;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    minLength: number;
+    maxLength: number;
+    pattern: string;
+    autocomplete: string;
+    size: 'sm' | 'md' | 'lg';
+    /** True once the value was edited or set as a property; the default then stops applying. */
+    private dirty;
+    /** A value set before the shadow root exists. */
+    private pendingValue;
+    get value(): string;
+    set value(next: string);
+    get defaultValue(): string;
+    set defaultValue(next: string);
+    /** Focuses the inner input directly, so the caret stays where it was (no select-all). */
+    focus(options?: FocusOptions): void;
+    select(): void;
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
+    private get p();
+    private get input();
+    /** A detached input of this type holding `value`, sanitized the way the browser does it. */
+    private probe;
+    /** Stands in for the inner input until it exists, so validity is right from the start. */
+    private validityProbe;
+    protected rendered(): void;
+    protected update(changed: ReadonlySet<string>): void;
+    /** update() only runs once connected; before that, keep the value and validity current here. */
+    protected willUpdate(changed: ReadonlySet<string>): void;
+    protected formValue(): string;
+    /** Like a native input, a password or autocomplete=off field is never saved for restore. */
+    protected formState(): string | null;
+    protected validate(): void;
+    protected resetToDefault(): void;
+    protected restoreState(state: string): void;
+}

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

@@ -0,0 +1,143 @@
+import type { InferProps } from '../../core/props.js';
+declare const props: {
+    readonly type: {
+        readonly type: "string";
+        readonly default: "text";
+        readonly values: readonly ["text", "email", "password", "search", "tel", "url"];
+        readonly reflect: true;
+    };
+    readonly value: {
+        readonly type: "string";
+    };
+    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 minLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "minlength";
+    };
+    readonly maxLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "maxlength";
+    };
+    readonly pattern: {
+        readonly type: "string";
+    };
+    readonly autocomplete: {
+        readonly type: "string";
+    };
+    readonly inputMode: {
+        readonly type: "string";
+        readonly attribute: "inputmode";
+    };
+    readonly enterKeyHint: {
+        readonly type: "string";
+        readonly attribute: "enterkeyhint";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+};
+export type TextFieldProps = InferProps<typeof props>;
+export declare const textFieldDef: import("../../core/define.js").ComponentDef<{
+    readonly type: {
+        readonly type: "string";
+        readonly default: "text";
+        readonly values: readonly ["text", "email", "password", "search", "tel", "url"];
+        readonly reflect: true;
+    };
+    readonly value: {
+        readonly type: "string";
+    };
+    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 minLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "minlength";
+    };
+    readonly maxLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "maxlength";
+    };
+    readonly pattern: {
+        readonly type: "string";
+    };
+    readonly autocomplete: {
+        readonly type: "string";
+    };
+    readonly inputMode: {
+        readonly type: "string";
+        readonly attribute: "inputmode";
+    };
+    readonly enterKeyHint: {
+        readonly type: "string";
+        readonly attribute: "enterkeyhint";
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;
+export {};

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

@@ -0,0 +1,63 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { textFieldStyles } from './text-field.styles.js';
+const props = {
+    type: {
+        type: 'string',
+        default: 'text',
+        values: ['text', 'email', 'password', 'search', 'tel', 'url'],
+        reflect: true,
+    },
+    value: { type: 'string' },
+    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' },
+    minLength: { type: 'number', default: -1, attribute: 'minlength' },
+    maxLength: { type: 'number', default: -1, attribute: 'maxlength' },
+    pattern: { type: 'string' },
+    autocomplete: { type: 'string' },
+    inputMode: { type: 'string', attribute: 'inputmode' },
+    enterKeyHint: { type: 'string', attribute: 'enterkeyhint' },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+};
+/** Attributes of the inner <input> that only appear when set. */
+function inputAttributes(p) {
+    return html `${p.placeholder ? html ` placeholder="${p.placeholder}"` : ''}${p.required ? html ` required` : ''}${p.disabled ? html ` disabled` : ''}${p.readOnly ? html ` readonly` : ''}${p.minLength >= 0 ? html ` minlength="${p.minLength}"` : ''}${p.maxLength >= 0 ? html ` maxlength="${p.maxLength}"` : ''}${p.pattern ? html ` pattern="${p.pattern}"` : ''}${p.autocomplete ? html ` autocomplete="${p.autocomplete}"` : ''}${p.inputMode ? html ` inputmode="${p.inputMode}"` : ''}${p.enterKeyHint ? html ` enterkeyhint="${p.enterKeyHint}"` : ''}`;
+}
+export const textFieldDef = defineComponent({
+    tag: 'neu-text-field',
+    props,
+    delegatesFocus: true,
+    form: { valueProp: 'value' },
+    styles: textFieldStyles,
+    template: (p) => 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"><span part="prefix" class="prefix"><slot name="prefix"></slot></span><input part="input" class="input" id="input" data-ref="input" type="${p.type}" value="${p.value}" aria-describedby="help"${inputAttributes(p)}><span part="suffix" class="suffix"><slot name="suffix"></slot></span></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 single-line text input with an inset field. The value attribute is the default value.',
+        events: [
+            { name: 'input', description: 'Fired on every edit (the native input event, composed).' },
+            { name: 'change', description: 'Fired when an edit is committed, usually on blur.' },
+        ],
+        slots: [
+            { name: 'label', description: 'Rich label; replaces the label attribute.' },
+            { name: 'prefix', description: 'Content before the input, such as an icon.' },
+            { name: 'suffix', description: 'Content after the input.' },
+            { 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.' },
+            { name: 'input', description: 'The native <input>.' },
+            { name: 'prefix', description: 'Wrapper around the prefix slot.' },
+            { name: 'suffix', description: 'Wrapper around the suffix slot.' },
+            { name: 'help-text', description: 'Help or error text area.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

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

@@ -0,0 +1,207 @@
+import { afterDispatch, dispatch, setOptionalAttribute, setText } from '../../core/dom.js';
+import { FormControlElement } from '../../core/form-control.js';
+import { copyValidity } from '../../core/validation.js';
+import { implicitSubmit } from './implicit-submit.js';
+import { textFieldDef } from './text-field.def.js';
+/** Props that can change the form value, its restore state or its validity. */
+const COMMIT_PROPS = [
+    'value',
+    'type',
+    'required',
+    'disabled',
+    'readOnly',
+    'minLength',
+    'maxLength',
+    'pattern',
+    'errorText',
+    'autocomplete',
+];
+function needsCommit(changed) {
+    return COMMIT_PROPS.some((key) => changed.has(key));
+}
+export class NeuTextField extends FormControlElement {
+    static def = textFieldDef;
+    static extraProperties = ['defaultValue'];
+    // inputMode and enterKeyHint are inherited from HTMLElement with the right type.
+    /** True once the value was edited or set as a property; the default then stops applying. */
+    dirty = false;
+    /** A value set before the shadow root exists. */
+    pendingValue = null;
+    get value() {
+        return this.input?.value ?? this.pendingValue ?? this.p.value;
+    }
+    set value(next) {
+        const text = next === null || next === undefined ? '' : String(next);
+        this.dirty = true;
+        const input = this.input;
+        if (input)
+            input.value = text;
+        else
+            this.pendingValue = text;
+        this.commit();
+    }
+    get defaultValue() {
+        return this.p.value;
+    }
+    set defaultValue(next) {
+        this.setAttribute('value', String(next));
+    }
+    /** Focuses the inner input directly, so the caret stays where it was (no select-all). */
+    focus(options) {
+        const input = this.input;
+        if (input)
+            input.focus(options);
+        else
+            super.focus(options);
+    }
+    select() {
+        this.input?.select();
+    }
+    setSelectionRange(start, end, direction) {
+        this.input?.setSelectionRange(start, end, direction);
+    }
+    get p() {
+        return this.props;
+    }
+    get input() {
+        return this.ref('input');
+    }
+    /** A detached input of this type holding `value`, sanitized the way the browser does it. */
+    probe(value) {
+        const probe = document.createElement('input');
+        probe.type = this.p.type;
+        probe.value = value;
+        return probe;
+    }
+    /** Stands in for the inner input until it exists, so validity is right from the start. */
+    validityProbe() {
+        const p = this.p;
+        const probe = this.probe(this.value);
+        probe.required = p.required;
+        probe.readOnly = p.readOnly;
+        probe.disabled = this.isDisabled;
+        if (p.pattern)
+            probe.setAttribute('pattern', p.pattern);
+        if (p.minLength >= 0)
+            probe.setAttribute('minlength', String(p.minLength));
+        if (p.maxLength >= 0)
+            probe.setAttribute('maxlength', String(p.maxLength));
+        return probe;
+    }
+    rendered() {
+        const input = this.input;
+        // A declarative root adopted without its input (cut short by the parser): nothing to wire up.
+        if (!input)
+            return;
+        // An SSR'd input works before JS loads; keep whatever was typed or autofilled meanwhile.
+        // Compare with the sanitized default: the browser trims or strips some values by itself.
+        if (input.value !== this.probe(this.p.value).value)
+            this.dirty = true;
+        if (this.pendingValue !== null) {
+            input.value = this.pendingValue;
+            this.pendingValue = null;
+        }
+        input.addEventListener('input', () => {
+            this.dirty = true;
+            this.commit();
+        });
+        input.addEventListener('change', () => {
+            this.markInteracted();
+            dispatch(this, 'change');
+        });
+        input.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter' || event.isComposing)
+                return;
+            // Like a native input: submit once the keydown has finished dispatching, unless a listener
+            // (on the host or further up) cancelled it.
+            afterDispatch(event, () => {
+                if (!event.defaultPrevented)
+                    implicitSubmit(this.internals.form);
+            });
+        });
+    }
+    update(changed) {
+        const p = this.p;
+        const input = this.input;
+        if (input) {
+            if (changed.has('type') && input.type !== p.type)
+                input.type = p.type;
+            if (changed.has('value')) {
+                if (input.defaultValue !== p.value)
+                    input.defaultValue = p.value;
+                if (!this.dirty)
+                    input.value = p.value;
+            }
+            if (changed.has('placeholder'))
+                setOptionalAttribute(input, 'placeholder', p.placeholder);
+            if (changed.has('required'))
+                input.required = p.required;
+            if (changed.has('disabled'))
+                input.disabled = this.isDisabled;
+            if (changed.has('readOnly'))
+                input.readOnly = p.readOnly;
+            if (changed.has('minLength')) {
+                setOptionalAttribute(input, 'minlength', p.minLength >= 0 ? String(p.minLength) : '');
+            }
+            if (changed.has('maxLength')) {
+                setOptionalAttribute(input, 'maxlength', p.maxLength >= 0 ? String(p.maxLength) : '');
+            }
+            if (changed.has('pattern'))
+                setOptionalAttribute(input, 'pattern', p.pattern);
+            if (changed.has('autocomplete'))
+                setOptionalAttribute(input, 'autocomplete', p.autocomplete);
+            if (changed.has('inputMode'))
+                setOptionalAttribute(input, 'inputmode', p.inputMode);
+            if (changed.has('enterKeyHint'))
+                setOptionalAttribute(input, 'enterkeyhint', p.enterKeyHint);
+        }
+        if (changed.has('label'))
+            setText(this.ref('label-text'), p.label);
+        if (changed.has('helpText'))
+            setText(this.ref('help-text'), p.helpText);
+        if (needsCommit(changed))
+            this.commit();
+    }
+    /** update() only runs once connected; before that, keep the value and validity current here. */
+    willUpdate(changed) {
+        if (!this.isConnected && !this.input && needsCommit(changed))
+            this.commit();
+    }
+    formValue() {
+        return this.value;
+    }
+    /** Like a native input, a password or autocomplete=off field is never saved for restore. */
+    formState() {
+        const p = this.p;
+        if (p.type === 'password' || p.autocomplete.trim().toLowerCase() === 'off')
+            return null;
+        return this.value;
+    }
+    validate() {
+        const input = this.input;
+        const source = input ?? this.validityProbe();
+        // A disabled or readonly input still sets flags such as typeMismatch, but is barred from
+        // validation and has no message; setValidity() would throw on flags without a message.
+        if (!source.willValidate || source.validity.valid)
+            this.internals.setValidity({});
+        else {
+            this.internals.setValidity(copyValidity(source.validity), source.validationMessage, input ?? undefined);
+        }
+        setText(this.ref('error-text'), this.p.errorText || input?.validationMessage || '');
+    }
+    resetToDefault() {
+        this.dirty = false;
+        this.pendingValue = null;
+        const input = this.input;
+        if (input)
+            input.value = this.p.value;
+    }
+    restoreState(state) {
+        this.dirty = true;
+        const input = this.input;
+        if (input)
+            input.value = state;
+        else
+            this.pendingValue = state;
+    }
+}

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

@@ -0,0 +1 @@
+export declare const textFieldStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: block; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { display: flex; flex-direction: column; }\n.label-text, ::slotted([slot='label']) {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);\n}\n.label-text:empty { display: none; }\n.control {\n  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }\n:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }\n:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }\n:host(:state(user-invalid)) .control {\n  box-shadow:\n    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),\n    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n}\n:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }\n.input {\n  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;\n  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;\n}\n.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }\n.prefix, .suffix { display: inline-flex; }\n::slotted([slot='prefix']) { margin-inline-end: 0.5rem; }\n::slotted([slot='suffix']) { margin-inline-start: 0.5rem; }\n.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }\n.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }\n.help-text:empty { display: none; }\n.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }\n:host(:state(user-invalid)) slot[name='help-text'] { display: none; }\n:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }\n";

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

@@ -0,0 +1,39 @@
+import { hostTheme } from '../../core/styles.js';
+export const textFieldStyles = `${hostTheme}
+:host { display: block; }
+:host(:disabled), :host([disabled]) { cursor: not-allowed; }
+.base { display: flex; flex-direction: column; }
+.label-text, ::slotted([slot='label']) {
+  display: block; margin-block-end: 0.375rem;
+  font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);
+}
+.label-text:empty { display: none; }
+.control {
+  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;
+  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);
+  transition: box-shadow var(--_neu-dur) ease;
+}
+:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }
+:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }
+:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }
+:host(:state(user-invalid)) .control {
+  box-shadow:
+    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),
+    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);
+}
+:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }
+.input {
+  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;
+  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
+}
+.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }
+.prefix, .suffix { display: inline-flex; }
+::slotted([slot='prefix']) { margin-inline-end: 0.5rem; }
+::slotted([slot='suffix']) { margin-inline-start: 0.5rem; }
+.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }
+.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }
+.help-text:empty { display: none; }
+.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }
+:host(:state(user-invalid)) slot[name='help-text'] { display: none; }
+:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }
+`;

package/dist/core/define.d.ts

@@ -0,0 +1,33 @@
+import type { RawHtml } from './html.js';
+import type { InferProps, PropsSchema } from './props.js';
+export interface DocEntry {
+    readonly name: string;
+    readonly description: string;
+}
+export interface ComponentDocs {
+    readonly summary: string;
+    readonly events: readonly DocEntry[];
+    readonly slots: readonly DocEntry[];
+    readonly parts: readonly DocEntry[];
+    readonly cssProperties: readonly DocEntry[];
+}
+export interface FormDef {
+    /** The prop whose attribute holds the default value (spec §6.1). */
+    readonly valueProp: 'value' | 'checked';
+}
+/** The DOM-free half of a component, shared by the element, SSR, React wrappers and docs. */
+export interface ComponentDef<S extends PropsSchema = PropsSchema> {
+    readonly tag: string;
+    readonly props: S;
+    readonly styles: string;
+    template(props: InferProps<S>): RawHtml;
+    readonly delegatesFocus?: boolean;
+    readonly form?: FormDef;
+    readonly docs: ComponentDocs;
+}
+export declare function defineComponent<const S extends PropsSchema>(def: ComponentDef<S>): ComponentDef<S>;
+/**
+ * The element property that sets a form control's default (its value attribute), as wrappers and
+ * generated types expose it: `defaultChecked` for `checked`, `defaultValue` for `value`.
+ */
+export declare function formDefaultProp(def: ComponentDef): 'defaultChecked' | 'defaultValue' | undefined;

package/dist/core/define.js

@@ -0,0 +1,15 @@
+export function defineComponent(def) {
+    return def;
+}
+/**
+ * The element property that sets a form control's default (its value attribute), as wrappers and
+ * generated types expose it: `defaultChecked` for `checked`, `defaultValue` for `value`.
+ */
+export function formDefaultProp(def) {
+    const valueProp = def.form?.valueProp;
+    if (valueProp === 'checked')
+        return 'defaultChecked';
+    if (valueProp === 'value')
+        return 'defaultValue';
+    return undefined;
+}

package/dist/core/dom.d.ts

@@ -0,0 +1,21 @@
+/** Writes text only when it changed, so hydrated nodes are not replaced needlessly. */
+export declare function setText(el: Element | null, text: string): void;
+/** Sets the attribute when value is non-empty and removes it otherwise. */
+export declare function setOptionalAttribute(el: Element | null, name: string, value: string): void;
+/**
+ * True while `el` is the focused element of its tree. It stays true when only the window or frame
+ * loses focus, which also fires blur on the element; it is false once focus moved elsewhere.
+ */
+export declare function isActiveInRoot(el: Element): boolean;
+/** Dispatches a bubbling, composed event from a host (spec §6.4). */
+export declare function dispatch(target: EventTarget, type: string): void;
+/**
+ * Runs `run` once `event` has finished dispatching — after every listener, including those on
+ * window — or on the next task if propagation was stopped before window. Runs exactly once.
+ *
+ * A one-shot bubble listener on window catches this same event object, so `run` lands within the
+ * dispatch, after the listeners on the way up, and sees their preventDefault(). Not a microtask:
+ * for a trusted event the microtask queue drains between listeners. An event that never reaches
+ * window (stopPropagation, bubbles: false, a disconnected target) is finished by the timeout.
+ */
+export declare function afterDispatch(event: Event, run: () => void): void;