@esportsplus/ui 0.17.7 → 0.18.1

package/build/components/field/index.js

@@ -1,9 +1,10 @@
 import checkbox from './checkbox.js';
-import file from './file.js';
-import optional from './optional.js';
+import description from './description.js';
+import input from './input.js';
 import select from './select.js';
-import s from './switch.js';
-import textarea from './textarea.js';
-import text from './text.js';
+import title from './title.js';
 import './scss/index.scss';
-export default { checkbox, file, optional, select, switch: s, textarea, text };
+const { checkbox: cb, radio, switch: sw } = checkbox;
+const { file, text, textarea } = input;
+export default { checkbox: cb, description, file, radio, select, switch: sw, textarea, text, title };
+export { cb as checkbox, description, file, radio, select, sw as switch, textarea, text, title };

package/build/components/field/input.d.ts

@@ -0,0 +1,364 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+declare const file: {
+    (content: unknown): Renderable;
+    (attributes: Attributes, content: unknown): Renderable;
+};
+declare const text: {
+    (content: unknown): Renderable;
+    (attributes: Attributes, content: unknown): Renderable;
+};
+declare const textarea: {
+    (content: unknown): Renderable;
+    (attributes: Attributes, content: unknown): Renderable;
+};
+declare const _default: {
+    file: {
+        (content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+        (attributes: {
+            class?: string | (string | (() => unknown))[];
+            style?: string | (string | (() => unknown))[];
+        } & {
+            onabort?: ((event: UIEvent) => void) | undefined;
+            onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+            onanimationend?: ((event: AnimationEvent) => void) | undefined;
+            onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+            onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+            onauxclick?: ((event: MouseEvent) => void) | undefined;
+            onbeforeinput?: ((event: InputEvent) => void) | undefined;
+            onbeforetoggle?: ((event: Event) => void) | undefined;
+            onblur?: ((event: FocusEvent) => void) | undefined;
+            oncancel?: ((event: Event) => void) | undefined;
+            oncanplay?: ((event: Event) => void) | undefined;
+            oncanplaythrough?: ((event: Event) => void) | undefined;
+            onchange?: ((event: Event) => void) | undefined;
+            onclick?: ((event: MouseEvent) => void) | undefined;
+            onclose?: ((event: Event) => void) | undefined;
+            oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+            oncontextlost?: ((event: Event) => void) | undefined;
+            oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+            oncontextrestored?: ((event: Event) => void) | undefined;
+            oncopy?: ((event: ClipboardEvent) => void) | undefined;
+            oncuechange?: ((event: Event) => void) | undefined;
+            oncut?: ((event: ClipboardEvent) => void) | undefined;
+            ondblclick?: ((event: MouseEvent) => void) | undefined;
+            ondrag?: ((event: DragEvent) => void) | undefined;
+            ondragend?: ((event: DragEvent) => void) | undefined;
+            ondragenter?: ((event: DragEvent) => void) | undefined;
+            ondragleave?: ((event: DragEvent) => void) | undefined;
+            ondragover?: ((event: DragEvent) => void) | undefined;
+            ondragstart?: ((event: DragEvent) => void) | undefined;
+            ondrop?: ((event: DragEvent) => void) | undefined;
+            ondurationchange?: ((event: Event) => void) | undefined;
+            onemptied?: ((event: Event) => void) | undefined;
+            onended?: ((event: Event) => void) | undefined;
+            onerror?: ((event: ErrorEvent) => void) | undefined;
+            onfocus?: ((event: FocusEvent) => void) | undefined;
+            onfocusin?: ((event: FocusEvent) => void) | undefined;
+            onfocusout?: ((event: FocusEvent) => void) | undefined;
+            onformdata?: ((event: FormDataEvent) => void) | undefined;
+            ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+            oninput?: ((event: Event) => void) | undefined;
+            oninvalid?: ((event: Event) => void) | undefined;
+            onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+            onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+            onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+            onload?: ((event: Event) => void) | undefined;
+            onloadeddata?: ((event: Event) => void) | undefined;
+            onloadedmetadata?: ((event: Event) => void) | undefined;
+            onloadstart?: ((event: Event) => void) | undefined;
+            onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+            onmousedown?: ((event: MouseEvent) => void) | undefined;
+            onmouseenter?: ((event: MouseEvent) => void) | undefined;
+            onmouseleave?: ((event: MouseEvent) => void) | undefined;
+            onmousemove?: ((event: MouseEvent) => void) | undefined;
+            onmouseout?: ((event: MouseEvent) => void) | undefined;
+            onmouseover?: ((event: MouseEvent) => void) | undefined;
+            onmouseup?: ((event: MouseEvent) => void) | undefined;
+            onpaste?: ((event: ClipboardEvent) => void) | undefined;
+            onpause?: ((event: Event) => void) | undefined;
+            onplay?: ((event: Event) => void) | undefined;
+            onplaying?: ((event: Event) => void) | undefined;
+            onpointercancel?: ((event: PointerEvent) => void) | undefined;
+            onpointerdown?: ((event: PointerEvent) => void) | undefined;
+            onpointerenter?: ((event: PointerEvent) => void) | undefined;
+            onpointerleave?: ((event: PointerEvent) => void) | undefined;
+            onpointermove?: ((event: PointerEvent) => void) | undefined;
+            onpointerout?: ((event: PointerEvent) => void) | undefined;
+            onpointerover?: ((event: PointerEvent) => void) | undefined;
+            onpointerup?: ((event: PointerEvent) => void) | undefined;
+            onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+            onratechange?: ((event: Event) => void) | undefined;
+            onreset?: ((event: Event) => void) | undefined;
+            onresize?: ((event: UIEvent) => void) | undefined;
+            onscroll?: ((event: Event) => void) | undefined;
+            onscrollend?: ((event: Event) => void) | undefined;
+            onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+            onseeked?: ((event: Event) => void) | undefined;
+            onseeking?: ((event: Event) => void) | undefined;
+            onselect?: ((event: Event) => void) | undefined;
+            onselectionchange?: ((event: Event) => void) | undefined;
+            onselectstart?: ((event: Event) => void) | undefined;
+            onslotchange?: ((event: Event) => void) | undefined;
+            onstalled?: ((event: Event) => void) | undefined;
+            onsubmit?: ((event: SubmitEvent) => void) | undefined;
+            onsuspend?: ((event: Event) => void) | undefined;
+            ontimeupdate?: ((event: Event) => void) | undefined;
+            ontoggle?: ((event: Event) => void) | undefined;
+            ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+            ontouchend?: ((event: TouchEvent) => void) | undefined;
+            ontouchmove?: ((event: TouchEvent) => void) | undefined;
+            ontouchstart?: ((event: TouchEvent) => void) | undefined;
+            ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+            onvolumechange?: ((event: Event) => void) | undefined;
+            onwaiting?: ((event: Event) => void) | undefined;
+            onwebkitanimationend?: ((event: Event) => void) | undefined;
+            onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+            onwebkitanimationstart?: ((event: Event) => void) | undefined;
+            onwebkittransitionend?: ((event: Event) => void) | undefined;
+            onwheel?: ((event: WheelEvent) => void) | undefined;
+        } & Record<PropertyKey, unknown> & {
+            state?: {
+                active: boolean;
+                error: string;
+            };
+        }, content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+    };
+    text: {
+        (content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+        (attributes: {
+            class?: string | (string | (() => unknown))[];
+            style?: string | (string | (() => unknown))[];
+        } & {
+            onabort?: ((event: UIEvent) => void) | undefined;
+            onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+            onanimationend?: ((event: AnimationEvent) => void) | undefined;
+            onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+            onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+            onauxclick?: ((event: MouseEvent) => void) | undefined;
+            onbeforeinput?: ((event: InputEvent) => void) | undefined;
+            onbeforetoggle?: ((event: Event) => void) | undefined;
+            onblur?: ((event: FocusEvent) => void) | undefined;
+            oncancel?: ((event: Event) => void) | undefined;
+            oncanplay?: ((event: Event) => void) | undefined;
+            oncanplaythrough?: ((event: Event) => void) | undefined;
+            onchange?: ((event: Event) => void) | undefined;
+            onclick?: ((event: MouseEvent) => void) | undefined;
+            onclose?: ((event: Event) => void) | undefined;
+            oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+            oncontextlost?: ((event: Event) => void) | undefined;
+            oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+            oncontextrestored?: ((event: Event) => void) | undefined;
+            oncopy?: ((event: ClipboardEvent) => void) | undefined;
+            oncuechange?: ((event: Event) => void) | undefined;
+            oncut?: ((event: ClipboardEvent) => void) | undefined;
+            ondblclick?: ((event: MouseEvent) => void) | undefined;
+            ondrag?: ((event: DragEvent) => void) | undefined;
+            ondragend?: ((event: DragEvent) => void) | undefined;
+            ondragenter?: ((event: DragEvent) => void) | undefined;
+            ondragleave?: ((event: DragEvent) => void) | undefined;
+            ondragover?: ((event: DragEvent) => void) | undefined;
+            ondragstart?: ((event: DragEvent) => void) | undefined;
+            ondrop?: ((event: DragEvent) => void) | undefined;
+            ondurationchange?: ((event: Event) => void) | undefined;
+            onemptied?: ((event: Event) => void) | undefined;
+            onended?: ((event: Event) => void) | undefined;
+            onerror?: ((event: ErrorEvent) => void) | undefined;
+            onfocus?: ((event: FocusEvent) => void) | undefined;
+            onfocusin?: ((event: FocusEvent) => void) | undefined;
+            onfocusout?: ((event: FocusEvent) => void) | undefined;
+            onformdata?: ((event: FormDataEvent) => void) | undefined;
+            ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+            oninput?: ((event: Event) => void) | undefined;
+            oninvalid?: ((event: Event) => void) | undefined;
+            onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+            onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+            onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+            onload?: ((event: Event) => void) | undefined;
+            onloadeddata?: ((event: Event) => void) | undefined;
+            onloadedmetadata?: ((event: Event) => void) | undefined;
+            onloadstart?: ((event: Event) => void) | undefined;
+            onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+            onmousedown?: ((event: MouseEvent) => void) | undefined;
+            onmouseenter?: ((event: MouseEvent) => void) | undefined;
+            onmouseleave?: ((event: MouseEvent) => void) | undefined;
+            onmousemove?: ((event: MouseEvent) => void) | undefined;
+            onmouseout?: ((event: MouseEvent) => void) | undefined;
+            onmouseover?: ((event: MouseEvent) => void) | undefined;
+            onmouseup?: ((event: MouseEvent) => void) | undefined;
+            onpaste?: ((event: ClipboardEvent) => void) | undefined;
+            onpause?: ((event: Event) => void) | undefined;
+            onplay?: ((event: Event) => void) | undefined;
+            onplaying?: ((event: Event) => void) | undefined;
+            onpointercancel?: ((event: PointerEvent) => void) | undefined;
+            onpointerdown?: ((event: PointerEvent) => void) | undefined;
+            onpointerenter?: ((event: PointerEvent) => void) | undefined;
+            onpointerleave?: ((event: PointerEvent) => void) | undefined;
+            onpointermove?: ((event: PointerEvent) => void) | undefined;
+            onpointerout?: ((event: PointerEvent) => void) | undefined;
+            onpointerover?: ((event: PointerEvent) => void) | undefined;
+            onpointerup?: ((event: PointerEvent) => void) | undefined;
+            onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+            onratechange?: ((event: Event) => void) | undefined;
+            onreset?: ((event: Event) => void) | undefined;
+            onresize?: ((event: UIEvent) => void) | undefined;
+            onscroll?: ((event: Event) => void) | undefined;
+            onscrollend?: ((event: Event) => void) | undefined;
+            onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+            onseeked?: ((event: Event) => void) | undefined;
+            onseeking?: ((event: Event) => void) | undefined;
+            onselect?: ((event: Event) => void) | undefined;
+            onselectionchange?: ((event: Event) => void) | undefined;
+            onselectstart?: ((event: Event) => void) | undefined;
+            onslotchange?: ((event: Event) => void) | undefined;
+            onstalled?: ((event: Event) => void) | undefined;
+            onsubmit?: ((event: SubmitEvent) => void) | undefined;
+            onsuspend?: ((event: Event) => void) | undefined;
+            ontimeupdate?: ((event: Event) => void) | undefined;
+            ontoggle?: ((event: Event) => void) | undefined;
+            ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+            ontouchend?: ((event: TouchEvent) => void) | undefined;
+            ontouchmove?: ((event: TouchEvent) => void) | undefined;
+            ontouchstart?: ((event: TouchEvent) => void) | undefined;
+            ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+            onvolumechange?: ((event: Event) => void) | undefined;
+            onwaiting?: ((event: Event) => void) | undefined;
+            onwebkitanimationend?: ((event: Event) => void) | undefined;
+            onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+            onwebkitanimationstart?: ((event: Event) => void) | undefined;
+            onwebkittransitionend?: ((event: Event) => void) | undefined;
+            onwheel?: ((event: WheelEvent) => void) | undefined;
+        } & Record<PropertyKey, unknown> & {
+            state?: {
+                active: boolean;
+                error: string;
+            };
+        }, content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+    };
+    textarea: {
+        (content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+        (attributes: {
+            class?: string | (string | (() => unknown))[];
+            style?: string | (string | (() => unknown))[];
+        } & {
+            onabort?: ((event: UIEvent) => void) | undefined;
+            onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+            onanimationend?: ((event: AnimationEvent) => void) | undefined;
+            onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+            onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+            onauxclick?: ((event: MouseEvent) => void) | undefined;
+            onbeforeinput?: ((event: InputEvent) => void) | undefined;
+            onbeforetoggle?: ((event: Event) => void) | undefined;
+            onblur?: ((event: FocusEvent) => void) | undefined;
+            oncancel?: ((event: Event) => void) | undefined;
+            oncanplay?: ((event: Event) => void) | undefined;
+            oncanplaythrough?: ((event: Event) => void) | undefined;
+            onchange?: ((event: Event) => void) | undefined;
+            onclick?: ((event: MouseEvent) => void) | undefined;
+            onclose?: ((event: Event) => void) | undefined;
+            oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+            oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+            oncontextlost?: ((event: Event) => void) | undefined;
+            oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+            oncontextrestored?: ((event: Event) => void) | undefined;
+            oncopy?: ((event: ClipboardEvent) => void) | undefined;
+            oncuechange?: ((event: Event) => void) | undefined;
+            oncut?: ((event: ClipboardEvent) => void) | undefined;
+            ondblclick?: ((event: MouseEvent) => void) | undefined;
+            ondrag?: ((event: DragEvent) => void) | undefined;
+            ondragend?: ((event: DragEvent) => void) | undefined;
+            ondragenter?: ((event: DragEvent) => void) | undefined;
+            ondragleave?: ((event: DragEvent) => void) | undefined;
+            ondragover?: ((event: DragEvent) => void) | undefined;
+            ondragstart?: ((event: DragEvent) => void) | undefined;
+            ondrop?: ((event: DragEvent) => void) | undefined;
+            ondurationchange?: ((event: Event) => void) | undefined;
+            onemptied?: ((event: Event) => void) | undefined;
+            onended?: ((event: Event) => void) | undefined;
+            onerror?: ((event: ErrorEvent) => void) | undefined;
+            onfocus?: ((event: FocusEvent) => void) | undefined;
+            onfocusin?: ((event: FocusEvent) => void) | undefined;
+            onfocusout?: ((event: FocusEvent) => void) | undefined;
+            onformdata?: ((event: FormDataEvent) => void) | undefined;
+            ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+            oninput?: ((event: Event) => void) | undefined;
+            oninvalid?: ((event: Event) => void) | undefined;
+            onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+            onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+            onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+            onload?: ((event: Event) => void) | undefined;
+            onloadeddata?: ((event: Event) => void) | undefined;
+            onloadedmetadata?: ((event: Event) => void) | undefined;
+            onloadstart?: ((event: Event) => void) | undefined;
+            onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+            onmousedown?: ((event: MouseEvent) => void) | undefined;
+            onmouseenter?: ((event: MouseEvent) => void) | undefined;
+            onmouseleave?: ((event: MouseEvent) => void) | undefined;
+            onmousemove?: ((event: MouseEvent) => void) | undefined;
+            onmouseout?: ((event: MouseEvent) => void) | undefined;
+            onmouseover?: ((event: MouseEvent) => void) | undefined;
+            onmouseup?: ((event: MouseEvent) => void) | undefined;
+            onpaste?: ((event: ClipboardEvent) => void) | undefined;
+            onpause?: ((event: Event) => void) | undefined;
+            onplay?: ((event: Event) => void) | undefined;
+            onplaying?: ((event: Event) => void) | undefined;
+            onpointercancel?: ((event: PointerEvent) => void) | undefined;
+            onpointerdown?: ((event: PointerEvent) => void) | undefined;
+            onpointerenter?: ((event: PointerEvent) => void) | undefined;
+            onpointerleave?: ((event: PointerEvent) => void) | undefined;
+            onpointermove?: ((event: PointerEvent) => void) | undefined;
+            onpointerout?: ((event: PointerEvent) => void) | undefined;
+            onpointerover?: ((event: PointerEvent) => void) | undefined;
+            onpointerup?: ((event: PointerEvent) => void) | undefined;
+            onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+            onratechange?: ((event: Event) => void) | undefined;
+            onreset?: ((event: Event) => void) | undefined;
+            onresize?: ((event: UIEvent) => void) | undefined;
+            onscroll?: ((event: Event) => void) | undefined;
+            onscrollend?: ((event: Event) => void) | undefined;
+            onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+            onseeked?: ((event: Event) => void) | undefined;
+            onseeking?: ((event: Event) => void) | undefined;
+            onselect?: ((event: Event) => void) | undefined;
+            onselectionchange?: ((event: Event) => void) | undefined;
+            onselectstart?: ((event: Event) => void) | undefined;
+            onslotchange?: ((event: Event) => void) | undefined;
+            onstalled?: ((event: Event) => void) | undefined;
+            onsubmit?: ((event: SubmitEvent) => void) | undefined;
+            onsuspend?: ((event: Event) => void) | undefined;
+            ontimeupdate?: ((event: Event) => void) | undefined;
+            ontoggle?: ((event: Event) => void) | undefined;
+            ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+            ontouchend?: ((event: TouchEvent) => void) | undefined;
+            ontouchmove?: ((event: TouchEvent) => void) | undefined;
+            ontouchstart?: ((event: TouchEvent) => void) | undefined;
+            ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+            ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+            onvolumechange?: ((event: Event) => void) | undefined;
+            onwaiting?: ((event: Event) => void) | undefined;
+            onwebkitanimationend?: ((event: Event) => void) | undefined;
+            onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+            onwebkitanimationstart?: ((event: Event) => void) | undefined;
+            onwebkittransitionend?: ((event: Event) => void) | undefined;
+            onwheel?: ((event: WheelEvent) => void) | undefined;
+        } & Record<PropertyKey, unknown> & {
+            state?: {
+                active: boolean;
+                error: string;
+            };
+        }, content: (mask: typeof file | typeof text | typeof textarea) => Renderable): Renderable;
+    };
+};
+export default _default;

package/build/components/field/input.js

@@ -0,0 +1,97 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import template from '../../components/template/index.js';
+import error from './error.js';
+const FILE_TAG_KEYS = ['accept', 'disabled', 'name', 'required', 'value'];
+const TEXT_TAG_KEYS = [
+    'autocapitalize',
+    'autocomplete',
+    'autocorrect',
+    'autofocus',
+    'disabled',
+    'maxlength',
+    'minlength',
+    'name',
+    'placeholder',
+    'readonly',
+    'required',
+    'spellcheck',
+    'type',
+    'value',
+    'wrap'
+];
+const field = template.factory(function (attributes, content) {
+    let state = attributes.state || reactive({
+        active: false,
+        error: ''
+    });
+    return html `
+            <div
+                class='
+                    ${() => state.active && '--active'}
+                    field
+                '
+                onfocusin='${() => {
+        state.active = true;
+    }}'
+                onfocusout='${() => {
+        state.active = false;
+    }}'
+                ${omit(attributes, ['state'])}
+            >
+                ${content(((...args) => this.call(state, ...args)))}
+                ${error(state)}
+            </div>
+        `;
+});
+const file = template.factory(function (attributes, content) {
+    return html `
+            <label
+                class='field-mask field-mask--file'
+                ${omit(attributes, FILE_TAG_KEYS)}
+            >
+                <input
+                    class='field-mask-tag field-mask-tag--hidden'
+                    onrender='${form.input.onrender(this)}'
+                    type='file'
+                    ${pick(attributes, FILE_TAG_KEYS)}
+                >
+
+                ${content}
+            </label>
+        `;
+});
+const text = template.factory(function (attributes, content) {
+    return html `
+            <label class='field-mask field-mask--input' ${omit(attributes, TEXT_TAG_KEYS)}>
+                <input
+                    class='field-mask-tag'
+                    onrender='${form.input.onrender(this)}'
+                    type='${attributes.type || 'text'}'
+                    ${pick(attributes, TEXT_TAG_KEYS)}
+                >
+                ${content}
+            </label>
+        `;
+});
+const textarea = template.factory(function (attributes, content) {
+    return html `
+            <label class='field-mask field-mask--textarea' ${omit(attributes, TEXT_TAG_KEYS)}>
+                <textarea
+                    class='field-mask-tag'
+                    onrender='${form.input.onrender(this)}'
+                    ${pick(attributes, TEXT_TAG_KEYS)}
+                >
+                    ${attributes.value}
+                </textarea>
+                ${content}
+            </label>
+        `;
+});
+export default {
+    file: field.bind(file),
+    text: field.bind(text),
+    textarea: field.bind(textarea)
+};

package/build/components/field/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field--optional{--max-height:0;--max-height-active:0}.field.--active .field--optional{--max-height:var(--max-height-active)}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:100%;--size:6px}.field-title{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:100%;--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:240px;--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--input,.field-mask--select{--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.field-mask--input{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{gap:var(--margin-vertical)var(--margin-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,max-height var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:1;position:absolute;inset:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--input,.field-mask--select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--input .field-tag[type=number]{appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-text{padding-right:var(--padding-horizontal)}}
+@layer components {button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:100%;--size:6px}.field-title{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:100%;--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:240px;--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--padding-horizontal-400);--padding-vertical:var(--padding-vertical-400)}.field-mask--file,.field-mask--input,.field-mask--textarea{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}.field{gap:var(--margin-vertical)var(--margin-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;flex-flow:column;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:1;position:absolute;inset:0}.field-mask-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-mask-tag,.field-mask--radio .field-mask-tag,.field-mask--switch .field-mask-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--file,.field-mask--input,.field-mask--select,.field-mask--textarea{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--file:invalid,.field-mask--file:required,.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required,.field-mask--textarea:invalid,.field-mask--textarea:required{box-shadow:none}.field-mask--file,.field-mask--file .field-mask-tag,.field-mask--input,.field-mask--input .field-mask-tag,.field-mask--select,.field-mask--select .field-mask-tag,.field-mask--textarea,.field-mask--textarea .field-mask-tag{color:var(--color)}.field-mask--file.field-text,.field-mask--input.field-text,.field-mask--select.field-text,.field-mask--textarea.field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--file,.field-mask--input,.field-mask--textarea{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--file .field-mask-tag,.field-mask--input .field-mask-tag,.field-mask--textarea .field-mask-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--file .field-mask-tag[type=number],.field-mask--input .field-mask-tag[type=number],.field-mask--textarea .field-mask-tag[type=number]{appearance:textfield}.field-mask--file textarea.field-mask-tag,.field-mask--input textarea.field-mask-tag,.field-mask--textarea textarea.field-mask-tag{white-space:normal}.field-mask--file{cursor:pointer}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-mask-text{padding-right:var(--padding-horizontal);pointer-events:none}}
 /*$vite$:1*/