@esportsplus/ui 0.18.0 → 0.19.0

package/.github/dependabot.yml

@@ -4,11 +4,13 @@
 # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
 
 version: 2
+
 registries:
   npm-npmjs:
     token: ${{secrets.NPM_TOKEN}}
     type: npm-registry
     url: https://registry.npmjs.org
+
 updates:
   - package-ecosystem: "npm"
     directory: "/"

package/.github/workflows/bump.yml

@@ -1,7 +1,9 @@
 name: bump
+
 on:
   push:
     branches: '**' # only trigger on branches, not on tags
+
 jobs:
   bump:
     uses: esportsplus/workflows/.github/workflows/bump.yml@main

package/.github/workflows/dependabot.yml

@@ -0,0 +1,12 @@
+name: dependabot automerge
+
+on:
+  pull_request:
+    types: [opened, synchronize, labeled]
+  workflow_dispatch:
+
+jobs:
+  automerge:
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: esportsplus/workflows/.github/workflows/dependabot.yml@main

package/.github/workflows/publish.yml

@@ -1,4 +1,5 @@
 name: publish to npm
+
 on:
   release:
     types: [published]
@@ -7,6 +8,7 @@ on:
     workflows: [bump]
     types:
       - completed
+
 jobs:
   publish:
     secrets:

package/build/components/accordion/index.d.ts

@@ -1,18 +1,8 @@
-import { reactive } from '@esportsplus/reactivity';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-type Accordion = HTMLElement & {
-    [key: symbol]: {
-        active: boolean | number;
-    };
-};
-declare const _default: () => {
-    attributes: {
-        class: () => false | 0 | "--active";
-        onrender: (element: Accordion) => void;
-        style: (element: Accordion) => string | false | 0;
-    };
-    state: ReturnType<typeof reactive<{
-        active: boolean;
-    }>>;
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/accordion/index.js

@@ -1,26 +1,34 @@
 import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
+const OMIT = ['state'];
 let key = Symbol();
-export default () => {
-    let state = reactive({
+export default template.factory(function (attributes, content) {
+    let ref, state = attributes.state || reactive({
         active: 0
     });
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element) => {
-                element[key] = state;
-            },
-            style: (element) => {
-                let parent = element.closest('accordion');
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
+    return html `
+            <div
+                ${omit(attributes, OMIT)}
+                ${{
+        class: () => {
+            return state.active && '--active';
+        },
+        onrender: (element) => {
+            (ref = element)[key] = state;
         },
-        state: state
-    };
-};
+        style: () => {
+            let parent = ref.closest('accordion');
+            if (parent && key in parent) {
+                parent[key].active = (+parent[key].active) + 1;
+            }
+            return state.active && `--max-height: ${ref.scrollHeight}`;
+        }
+    }}
+            >
+                ${content}
+            </div>
+        `;
+});

package/build/components/counter/index.d.ts

@@ -1,6 +1,6 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (data: Attributes & {
+declare const _default: (attributes: Attributes & {
     currency?: "IGNORE" | "EUR" | "GBP" | "USD";
     decimals?: number;
     delay?: number;
@@ -10,5 +10,5 @@ declare const _default: (data: Attributes & {
     };
     suffix?: string;
     value: number;
-}) => import("@esportsplus/template/build/types").RenderableTemplate;
+}) => Node;
 export default _default;

package/build/components/counter/index.js

@@ -2,9 +2,10 @@ import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
+const OMIT = ['currency', 'decimals', 'delay', 'max', 'state', 'suffix', 'value'];
 let formatters = {};
-export default (data) => {
-    let { currency, decimals, delay, max, suffix, value } = data, api = data.state || reactive({ value: -1 }), formatter = currency === 'IGNORE'
+export default (attributes) => {
+    let { currency, decimals, delay, max, suffix, value } = attributes, api = attributes.state || reactive({ value: -1 }), formatter = currency === 'IGNORE'
         ? undefined
         : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
             style: 'currency',
@@ -47,7 +48,7 @@ export default (data) => {
         }
     });
     return html `
-        <div class='counter' ${omit(data, ['currency', 'decimals', 'delay', 'max', 'state', 'suffix'])}>
+        <div class='counter' ${omit(attributes, OMIT)}>
             ${() => {
         let n = state.length;
         if (n === 0) {
@@ -62,13 +63,12 @@ export default (data) => {
                         `;
             }
             return html `
-                        <div
-                            class='
-                                ${i > n - 3 && 'counter-character--fraction'}
-                                counter-character
-                            '
-                        >
-                            <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                        <div class=' counter-character' ${{
+                class: i > n - 3 && 'counter-character--fraction'
+            }}>
+                            <div class='counter-character-track' ${{
+                style: `--value: ${this[i]}`
+            }}}>
                                 <span>9</span>
                                 ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
                                 <span>0</span>

package/build/components/ellipsis/index.d.ts

@@ -1,4 +1,4 @@
 import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes?: Attributes) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: (attributes?: Attributes) => Node;
 export default _default;

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

@@ -9,349 +9,19 @@ type A = Attributes & {
 };
 declare const _default: {
     checkbox: {
-        (content: (mask: ((attributes: A) => Renderable)) => 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;
-            };
-        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+        (): Renderable<unknown>;
+        (content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
+        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
     };
     radio: {
-        (content: (mask: ((attributes: A) => Renderable)) => 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;
-            };
-        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+        (): Renderable<unknown>;
+        (content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
+        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
     };
     switch: {
-        (content: (mask: ((attributes: A) => Renderable)) => 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;
-            };
-        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+        (): Renderable<unknown>;
+        (content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
+        (attributes: Attributes, content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>): Renderable<unknown>;
     };
 };
 export default _default;

package/build/components/field/checkbox.js

@@ -2,43 +2,46 @@ import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit, pick } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
-const TAG_KEYS = ['checked', 'disabled', 'name', 'required'];
+const OMIT_FIELD = ['state'];
+const TAG = ['checked', 'disabled', 'name', 'required'];
 function mask(attributes, modifier, state) {
     return html `
         <div
-            class='
-                ${`field-mask--${modifier}`}
-                field-mask
-            '
-            ${omit(attributes, TAG_KEYS)}
+            class='field-mask'
+            ${omit(attributes, TAG)}
+            ${{
+        class: `field-mask--${modifier}`
+    }}
         >
             <input
-                ${attributes.checked || attributes.value || state.active && 'checked'}
                 class='field-mask-tag field-mask-tag--hidden'
-                type='${modifier === 'radio' ? 'radio' : 'checkbox'}'
-                value='${attributes.value || 1}'
-                ${pick(attributes, TAG_KEYS)}
+                ${{
+        checked: attributes.checked || attributes.value || state.active,
+        type: modifier === 'radio' ? 'radio' : 'checkbox',
+        value: attributes.value || 1
+    }}
+                ${pick(attributes, TAG)}
             >
         </div>
     `;
 }
 const field = template.factory(function (attributes, content) {
-    let state = attributes.state || reactive({
+    let state = attributes?.state || reactive({
         active: false
     });
     return html `
             <label
-                class='
-                    ${() => state.active && '--active'}
-                    field
-                '
-                onchange='${(e) => {
-        if (e.target.type !== 'checkbox') {
-            return;
+                class='field'
+                ${omit(attributes, OMIT_FIELD)}
+                ${{
+        class: () => state.active && '--active',
+        onchange: (e) => {
+            if (e.target.type !== 'checkbox') {
+                return;
+            }
+            state.active = e.target?.checked;
         }
-        state.active = e.target?.checked;
-    }}'
-                ${omit(attributes, ['state'])}
+    }}
             >
                 ${content((attributes) => this(attributes, state))}
             </label>

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

@@ -1,6 +1,6 @@
-import { type Attributes } from '@esportsplus/template';
 declare const _default: {
-    (content: unknown): import("@esportsplus/template").Renderable;
-    (attributes: Attributes, content: unknown): import("@esportsplus/template").Renderable;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

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

@@ -1,4 +1,5 @@
+import { Renderable } from '@esportsplus/template';
 declare const _default: (state: {
-    error: unknown;
-}) => () => import("@esportsplus/template/build/types").RenderableTemplate | "";
+    error: Renderable<unknown>;
+}) => () => Node | "";
 export default _default;