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

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

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

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

@@ -1,5 +1,5 @@
-import { FormControlElement } from '../../core/form-control.js';
-export declare class NeuSwitch extends FormControlElement {
+import { CheckableElement } from '../shared/checkable.js';
+export declare class NeuSwitch extends CheckableElement {
     static def: import("../../ssr.js").ComponentDef<{
         readonly checked: {
             readonly type: "boolean";
@@ -28,33 +28,7 @@ export declare class NeuSwitch extends FormControlElement {
             readonly reflect: true;
         };
     }>;
-    static extraProperties: string[];
-    name: string;
-    value: string;
-    disabled: boolean;
-    required: boolean;
-    size: 'sm' | 'md' | 'lg';
-    private current;
-    private dirty;
+    protected readonly anchor = "track";
     constructor();
-    get checked(): boolean;
-    set checked(value: boolean);
-    get defaultChecked(): boolean;
-    set defaultChecked(value: boolean);
-    /**
-     * Native checkbox order: flip now, let click listeners see it, then input + change once the
-     * click has finished dispatching (within it, unless propagation was stopped before window).
-     */
-    private onClick;
-    private onKeyDown;
-    /** Like a native checkbox, Space toggles on keyup only after its own keydown. */
-    private onKeyUp;
-    private setCurrent;
-    protected willUpdate(changed: ReadonlySet<string>): void;
-    protected update(changed: ReadonlySet<string>): void;
-    protected formValue(): string | null;
-    protected formState(): string;
-    protected validate(): void;
-    protected resetToDefault(): void;
-    protected restoreState(state: string): void;
+    protected paint(): void;
 }

package/dist/components/switch/switch.js

@@ -1,125 +1,13 @@
-import { afterDispatch, dispatch, isActiveInRoot } from '../../core/dom.js';
-import { FormControlElement } from '../../core/form-control.js';
-import { requiredCheckboxMessage } from '../../core/validation.js';
+import { CheckableElement } from '../shared/checkable.js';
 import { switchDef } from './switch.def.js';
-export class NeuSwitch extends FormControlElement {
+export class NeuSwitch extends CheckableElement {
     static def = switchDef;
-    static extraProperties = ['defaultChecked'];
-    current;
-    dirty = false;
+    anchor = 'track';
     constructor() {
         super();
-        this.current = this.props.checked === true;
         this.internals.role = 'switch';
-        this.addEventListener('click', (event) => this.onClick(event));
-        this.addEventListener('keydown', (event) => this.onKeyDown(event));
-        this.addEventListener('keyup', (event) => this.onKeyUp(event));
-        // Disarm when focus moves away, not when only the window loses focus.
-        this.addEventListener('blur', () => {
-            if (!isActiveInRoot(this))
-                this.toggleState('pressed', false);
-        });
-        // Focus coming back means Space may have been released while it was away.
-        this.addEventListener('focus', () => this.toggleState('pressed', false));
     }
-    get checked() {
-        return this.current;
-    }
-    set checked(value) {
-        this.dirty = true;
-        this.setCurrent(Boolean(value));
-    }
-    get defaultChecked() {
-        return this.props.checked === true;
-    }
-    set defaultChecked(value) {
-        this.toggleAttribute('checked', Boolean(value));
-    }
-    /**
-     * Native checkbox order: flip now, let click listeners see it, then input + change once the
-     * click has finished dispatching (within it, unless propagation was stopped before window).
-     */
-    onClick(event) {
-        const before = this.current;
-        this.dirty = true;
-        this.setCurrent(!before);
-        afterDispatch(event, () => {
-            if (event.defaultPrevented) {
-                this.setCurrent(before);
-            }
-            else if (this.isConnected && this.current === !before) {
-                this.markInteracted();
-                dispatch(this, 'input');
-                dispatch(this, 'change');
-            }
-        });
-    }
-    onKeyDown(event) {
-        if (event.key === ' ') {
-            if (event.defaultPrevented)
-                return;
-            // Cancelled at once: deferred, an ancestor that stops propagation would let the page scroll.
-            // An ancestor claims Space in the capture phase, or by cancelling the keyup.
-            event.preventDefault();
-            this.toggleState('pressed', true);
-        }
-        else if (event.key === 'Enter' && !event.repeat) {
-            // Not cancelled here, so a handler further up can still cancel the toggle.
-            afterDispatch(event, () => {
-                if (!event.defaultPrevented)
-                    this.click();
-            });
-        }
-    }
-    /** Like a native checkbox, Space toggles on keyup only after its own keydown. */
-    onKeyUp(event) {
-        if (event.key !== ' ' || !this.internals.states.has('pressed'))
-            return;
-        this.toggleState('pressed', false);
-        afterDispatch(event, () => {
-            if (!event.defaultPrevented)
-                this.click();
-        });
-    }
-    setCurrent(value) {
-        this.current = value;
-        this.toggleState('checked', value);
-        this.internals.ariaChecked = value ? 'true' : 'false';
-        this.ref('track')?.classList.toggle('on', value);
-        this.commit();
-    }
-    willUpdate(changed) {
-        if (changed.has('checked') && !this.dirty)
-            this.current = this.props.checked === true;
-    }
-    update(changed) {
-        if (changed.has('disabled'))
-            this.syncDisabledState();
-        if (changed.has('checked'))
-            this.setCurrent(this.current);
-        else if (changed.has('required') || changed.has('value'))
-            this.commit();
-    }
-    formValue() {
-        return this.current ? String(this.props.value) : null;
-    }
-    formState() {
-        return this.current ? 'checked' : 'unchecked';
-    }
-    validate() {
-        if (this.props.required === true && !this.current) {
-            this.internals.setValidity({ valueMissing: true }, requiredCheckboxMessage(), this.ref('track') ?? undefined);
-        }
-        else {
-            this.internals.setValidity({});
-        }
-    }
-    resetToDefault() {
-        this.dirty = false;
-        this.setCurrent(this.props.checked === true);
-    }
-    restoreState(state) {
-        this.dirty = true;
-        this.setCurrent(state === 'checked');
+    paint() {
+        this.ref('track')?.classList.toggle('on', this.checked);
     }
 }

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,5 +1,6 @@
-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";
@@ -70,47 +71,19 @@ export declare class NeuTextField extends FormControlElement {
             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.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, 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' || event.isComposing)
             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-text, ::slotted([slot='label']) {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; 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.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; }
 `;