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

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

@@ -1,3 +1,8 @@
+/**
+ * Static brand of the custom elements that block implicit submission like a text input. A
+ * subclass inherits it, so it counts under any tag name.
+ */
+export declare const BLOCKS_IMPLICIT_SUBMIT: unique symbol;
 /**
  * Enter in a text control submits like a native input (HTML §4.10.21.2). With a default button
  * (the form's first submit button, form="id" ones included) it clicks that button unless it is

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

@@ -14,6 +14,13 @@ const BLOCKING_TYPES = new Set([
     'datetime-local',
     'number',
 ]);
+/**
+ * Static brand of the custom elements that block implicit submission like a text input. A
+ * subclass inherits it, so it counts under any tag name.
+ */
+export const BLOCKS_IMPLICIT_SUBMIT = Symbol.for('neu-ui.blocks-implicit-submit');
+const blocks = (el) => (el instanceof HTMLInputElement && BLOCKING_TYPES.has(el.type)) ||
+    el.constructor[BLOCKS_IMPLICIT_SUBMIT] === true;
 /**
  * Enter in a text control submits like a native input (HTML §4.10.21.2). With a default button
  * (the form's first submit button, form="id" ones included) it clicks that button unless it is
@@ -33,9 +40,7 @@ export function implicitSubmit(form) {
         defaultButton.click();
         return;
     }
-    const blocking = elements.filter((el) => (el instanceof HTMLInputElement && BLOCKING_TYPES.has(el.type)) ||
-        el.localName === 'neu-text-field');
-    if (blocking.length !== 1)
+    if (elements.filter(blocks).length !== 1)
         return;
     markSubmitAttempt(form);
     form.requestSubmit();

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

@@ -1,18 +1,17 @@
-import { FormControlElement } from '../../core/form-control.js';
-export declare class NeuTextField extends FormControlElement {
+import { TextControlElement } from '../shared/text-control.js';
+import { BLOCKS_IMPLICIT_SUBMIT } from './implicit-submit.js';
+export declare class NeuTextField extends TextControlElement {
     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";
@@ -28,15 +27,12 @@ export declare class NeuTextField extends FormControlElement {
         };
         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: {
@@ -67,50 +63,21 @@ export declare class NeuTextField extends FormControlElement {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
+    static readonly [BLOCKS_IMPLICIT_SUBMIT] = 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();
+    protected readonly commitProps: string[];
+    private get tp();
     /** 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 probe(value: string): HTMLInputElement;
+    protected controlKeyDown(event: KeyboardEvent): 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. */
+    /** Like a native input, a password 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

@@ -4,14 +4,12 @@ declare const props: {
         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";
@@ -27,15 +25,12 @@ declare const props: {
     };
     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: {
@@ -66,7 +61,6 @@ declare const props: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
 };
 export type TextFieldProps = InferProps<typeof props>;
@@ -75,14 +69,12 @@ export declare const textFieldDef: import("../../core/define.js").ComponentDef<{
         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";
@@ -98,15 +90,12 @@ export declare const textFieldDef: import("../../core/define.js").ComponentDef<{
     };
     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: {
@@ -137,7 +126,6 @@ export declare const textFieldDef: import("../../core/define.js").ComponentDef<{
         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

@@ -1,30 +1,28 @@
 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 },
+    name: { type: 'string' },
     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' },
+    required: { type: 'boolean' },
+    disabled: { type: 'boolean' },
+    readOnly: { type: 'boolean', 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 },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
 };
 /** Attributes of the inner <input> that only appear when set. */
 function inputAttributes(p) {
@@ -37,27 +35,4 @@ export const textFieldDef = defineComponent({
     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.docs.d.ts

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

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

@@ -0,0 +1,45 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const textFieldDocs = {
+    summary: 'A single-line text input with an inset field. The value attribute is the default value.',
+    descriptions: {
+        type: 'The kind of text the field accepts, which sets its keyboard and masking and drives email, url and tel validation.',
+        value: 'The current text as typed or set by script.',
+        name: 'The name under which the text is submitted with a form.',
+        label: 'Visible label text; the label slot replaces it.',
+        placeholder: 'Hint shown while the field is empty.',
+        helpText: 'Guidance shown below the field; the help-text slot replaces it.',
+        errorText: "Shown in place of the browser's validation message once the field is invalid after user interaction; does not itself make the field invalid.",
+        required: 'Makes the form invalid while the field is empty.',
+        disabled: 'Prevents interaction and leaves the field out of form submission.',
+        readOnly: 'Keeps the text visible and submitted but not editable.',
+        minLength: 'The fewest characters the text must have; checked after user edits, like native, not on script-set values.',
+        maxLength: 'The most characters the text may have; checked after user edits, like native, not a hard limit on script-set values.',
+        pattern: 'A regular expression the whole text must match.',
+        autocomplete: "Hint for the browser's autofill, as for the native attribute.",
+        inputMode: 'Hint for which virtual keyboard to show.',
+        enterKeyHint: "Hint for the label of the virtual keyboard's Enter key.",
+        size: 'The field size.',
+        defaultValue: 'The text the field starts with, which a form reset restores; set by the value attribute.',
+    },
+    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,
+    keyboard: [],
+};

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

@@ -1,207 +1,50 @@
-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 { afterDispatch, composing, setOptionalAttribute } from '../../core/dom.js';
+import { baseCommitProps, TextControlElement } from '../shared/text-control.js';
+import { BLOCKS_IMPLICIT_SUBMIT, 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 {
+export class NeuTextField extends TextControlElement {
     static def = textFieldDef;
+    static [BLOCKS_IMPLICIT_SUBMIT] = true;
     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() {
+    commitProps = [...baseCommitProps, 'type', 'pattern'];
+    get tp() {
         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.type = this.tp.type;
         probe.value = value;
+        if (this.tp.pattern)
+            probe.setAttribute('pattern', this.tp.pattern);
         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)
+    controlKeyDown(event) {
+        if (event.key !== 'Enter' || composing(event))
             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);
-            });
+        // 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 p = this.tp;
         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();
+        super.update(changed);
     }
-    /** 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. */
+    /** Like a native input, a password 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;
+        return this.tp.type === 'password' ? null : super.formState();
     }
 }

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

@@ -1 +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";
+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 { font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted); }\n.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.375rem; }\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.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\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";

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

@@ -1,39 +1,6 @@
-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; }
+import { fieldStyles } from '../shared/field.styles.js';
+export const textFieldStyles = `${fieldStyles}
 .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; }
 `;