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

package/dist/components/slider/slider.docs.js

@@ -0,0 +1,45 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const sliderDocs = {
+    summary: 'A horizontal slider for a number. The value attribute is the default; the value property is the current value. The valueFormatter property turns the value into the text a screen reader announces.',
+    descriptions: {
+        value: 'The current number, snapped to the nearest step within the range.',
+        min: 'The lowest value of the range.',
+        max: 'The highest value of the range.',
+        step: 'The distance between allowed values.',
+        name: 'The name under which the value is submitted with a form.',
+        label: 'Accessible name of the slider.',
+        disabled: 'Prevents interaction and leaves the slider out of form submission.',
+        defaultValue: 'The value the slider starts with, which a form reset restores; set by the value attribute.',
+        valueFormatter: 'Function that turns the value into the text a screen reader announces.',
+    },
+    events: [
+        {
+            name: 'input',
+            description: 'Fired on every change while the user drags or presses a key.',
+        },
+        {
+            name: 'change',
+            description: 'Fired after the user commits a change: on release, or per key.',
+        },
+    ],
+    slots: [],
+    parts: [
+        { name: 'base', description: 'Wrapper around the track.' },
+        { name: 'track', description: 'The inset groove.' },
+        { name: 'fill', description: 'The part of the track up to the thumb.' },
+        { name: 'thumb', description: 'The raised handle.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        {
+            name: 'ArrowRight / ArrowUp',
+            description: 'Increases the value by step; left and right swap in right-to-left text.',
+        },
+        { name: 'ArrowLeft / ArrowDown', description: 'Decreases the value by step.' },
+        {
+            name: 'PageUp / PageDown',
+            description: 'Changes the value by a large step: the larger of step and a tenth of the range.',
+        },
+        { name: 'Home / End', description: 'Sets the value to min or max.' },
+    ],
+};

package/dist/components/spinner/spinner.d.ts

@@ -9,7 +9,6 @@ export declare class NeuSpinner extends NeuElement {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     label: string;

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

@@ -7,6 +7,5 @@ export declare const spinnerDef: import("../../core/define.js").ComponentDef<{
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/spinner/spinner.def.js

@@ -1,25 +1,13 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { spinnerStyles } from './spinner.styles.js';
 export const spinnerDef = defineComponent({
     tag: 'neu-spinner',
     props: {
         label: { type: 'string', default: 'Loading' },
-        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     },
     styles: spinnerStyles,
     // The label is also visually hidden text: a live region announces content, not its name.
     template: (p) => html `<span part="base" class="base"><span part="track" class="track"></span><span part="indicator" class="indicator"></span><span class="label" data-ref="label">${p.label}</span></span>`,
-    docs: {
-        summary: 'A rotating indicator for work in progress.',
-        events: [],
-        slots: [],
-        parts: [
-            { name: 'base', description: 'The sized wrapper.' },
-            { name: 'track', description: 'The inset ring behind the indicator.' },
-            { name: 'indicator', description: 'The rotating arc.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

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

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

package/dist/components/spinner/spinner.docs.js

@@ -0,0 +1,17 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const spinnerDocs = {
+    summary: 'A rotating indicator for work in progress.',
+    descriptions: {
+        label: 'Accessible name announced for the spinner; defaults to "Loading".',
+        size: 'The spinner size.',
+    },
+    events: [],
+    slots: [],
+    parts: [
+        { name: 'base', description: 'The sized wrapper.' },
+        { name: 'track', description: 'The inset ring behind the indicator.' },
+        { name: 'indicator', description: 'The rotating arc.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

package/dist/components/surface/surface.d.ts

@@ -5,25 +5,21 @@ export declare class NeuSurface extends NeuElement {
             readonly type: "string";
             readonly default: "raised";
             readonly values: readonly ["raised", "inset", "flat", "convex", "concave"];
-            readonly reflect: true;
         };
         readonly elevation: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
         readonly radius: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg", "full"];
-            readonly reflect: true;
         };
         readonly padding: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["none", "sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     shape: 'raised' | 'inset' | 'flat' | 'convex' | 'concave';

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

@@ -3,24 +3,20 @@ export declare const surfaceDef: import("../../core/define.js").ComponentDef<{
         readonly type: "string";
         readonly default: "raised";
         readonly values: readonly ["raised", "inset", "flat", "convex", "concave"];
-        readonly reflect: true;
     };
     readonly elevation: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
     readonly radius: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg", "full"];
-        readonly reflect: true;
     };
     readonly padding: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["none", "sm", "md", "lg"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/surface/surface.def.js

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { surfaceStyles } from './surface.styles.js';
 export const surfaceDef = defineComponent({
     tag: 'neu-surface',
@@ -9,19 +8,11 @@ export const surfaceDef = defineComponent({
             type: 'string',
             default: 'raised',
             values: ['raised', 'inset', 'flat', 'convex', 'concave'],
-            reflect: true,
         },
-        elevation: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
-        radius: { type: 'string', default: 'md', values: ['sm', 'md', 'lg', 'full'], reflect: true },
-        padding: { type: 'string', default: 'md', values: ['none', 'sm', 'md', 'lg'], reflect: true },
+        elevation: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
+        radius: { type: 'string', default: 'md', values: ['sm', 'md', 'lg', 'full'] },
+        padding: { type: 'string', default: 'md', values: ['none', 'sm', 'md', 'lg'] },
     },
     styles: surfaceStyles,
     template: () => html `<div part="base" class="base"><slot></slot></div>`,
-    docs: {
-        summary: 'A neumorphic container with its own shape, elevation, radius and padding.',
-        events: [],
-        slots: [{ name: '', description: 'The content of the surface.' }],
-        parts: [{ name: 'base', description: 'The surface itself.' }],
-        cssProperties: themeCssProperties,
-    },
 });

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

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

package/dist/components/surface/surface.docs.js

@@ -0,0 +1,15 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const surfaceDocs = {
+    summary: 'A neumorphic container with its own shape, elevation, radius and padding.',
+    descriptions: {
+        shape: 'How the surface is lit and curved.',
+        elevation: 'How far the surface appears to lift off its background.',
+        radius: 'How rounded the corners are.',
+        padding: 'The space between the edge and the content.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'The content of the surface.' }],
+    parts: [{ name: 'base', description: 'The surface itself.' }],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

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

@@ -6,26 +6,21 @@ export declare class NeuSwitch extends CheckableElement {
         };
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly value: {
             readonly type: "string";
             readonly default: "on";
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly required: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly size: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     protected readonly anchor = "track";

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

@@ -4,25 +4,20 @@ export declare const switchDef: import("../../core/define.js").ComponentDef<{
     };
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly value: {
         readonly type: "string";
         readonly default: "on";
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly required: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/switch/switch.def.js

@@ -1,33 +1,17 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { switchStyles } from './switch.styles.js';
 export const switchDef = defineComponent({
     tag: 'neu-switch',
     props: {
         checked: { type: 'boolean' },
-        name: { type: 'string', reflect: true },
-        value: { type: 'string', default: 'on', reflect: true },
-        disabled: { type: 'boolean', reflect: true },
-        required: { type: 'boolean', reflect: true },
-        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        name: { type: 'string' },
+        value: { type: 'string', default: 'on' },
+        disabled: { type: 'boolean' },
+        required: { type: 'boolean' },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     },
     form: { valueProp: 'checked' },
     styles: switchStyles,
     template: (p) => html `<span part="base" class="base"><span part="track" class="track${p.checked ? ' on' : ''}" data-ref="track"><span part="thumb" class="thumb"></span></span><span part="label" class="label"><slot></slot></span></span>`,
-    docs: {
-        summary: 'An on/off switch. The checked attribute is the default state.',
-        events: [
-            { name: 'input', description: 'Fired when the user toggles the switch.' },
-            { name: 'change', description: 'Fired after input when the user toggles the switch.' },
-        ],
-        slots: [{ name: '', description: 'Label; also the accessible name.' }],
-        parts: [
-            { name: 'base', description: 'Wrapper around track and label.' },
-            { name: 'track', description: 'The inset track.' },
-            { name: 'thumb', description: 'The raised thumb.' },
-            { name: 'label', description: 'Wrapper around the default slot.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

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

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

package/dist/components/switch/switch.docs.js

@@ -0,0 +1,26 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const switchDocs = {
+    summary: 'An on/off switch. The checked attribute is the default state.',
+    descriptions: {
+        checked: 'Whether the switch is currently on.',
+        name: 'The name under which the value is submitted with a form.',
+        value: 'The value submitted with the form while the switch is on; defaults to "on".',
+        disabled: 'Prevents interaction and leaves the switch out of form submission.',
+        required: 'Makes the form invalid until the switch is on.',
+        size: 'The switch size.',
+        defaultChecked: 'Whether the switch starts on, which a form reset restores; set by the checked attribute.',
+    },
+    events: [
+        { name: 'input', description: 'Fired when the user toggles the switch.' },
+        { name: 'change', description: 'Fired after input when the user toggles the switch.' },
+    ],
+    slots: [{ name: '', description: 'Label; also the accessible name.' }],
+    parts: [
+        { name: 'base', description: 'Wrapper around track and label.' },
+        { name: 'track', description: 'The inset track.' },
+        { name: 'thumb', description: 'The raised thumb.' },
+        { name: 'label', description: 'Wrapper around the default slot.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [{ name: 'Space / Enter', description: 'Toggles the switch.' }],
+};

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

@@ -6,14 +6,12 @@ export declare class NeuTextField extends TextControlElement {
             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";
@@ -29,15 +27,12 @@ export declare class NeuTextField extends TextControlElement {
         };
         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: {
@@ -68,7 +63,6 @@ export declare class NeuTextField extends TextControlElement {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     static readonly [BLOCKS_IMPLICIT_SUBMIT] = true;

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,4 +1,4 @@
-import { afterDispatch, setOptionalAttribute } from '../../core/dom.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';
@@ -21,7 +21,7 @@ export class NeuTextField extends TextControlElement {
         return probe;
     }
     controlKeyDown(event) {
-        if (event.key !== 'Enter' || event.isComposing)
+        if (event.key !== 'Enter' || composing(event))
             return;
         // Like a native input: submit once the keydown has finished dispatching, unless a listener
         // (on the host or further up) cancelled it.

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; 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";
+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";