@esportsplus/ui 0.25.8 → 0.26.0

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

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

package/build/components/checkbox/index.js

@@ -3,31 +3,31 @@ import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
-const OMIT = ['checkbox-tag'];
-export default function (attributes) {
-    let a = attributes?.['checkbox-tag'], state = attributes?.state || reactive({
+const OMIT = ['checked', 'value'];
+const template = function (attributes) {
+    let state = attributes?.state || reactive({
         active: false,
         error: ''
     });
-    if (a?.checked) {
+    if (attributes?.checked) {
         state.active = true;
     }
     return html `
-        <div class='checkbox ${() => state.active && '--active'}' ${a ? omit(attributes, OMIT) : attributes}>
+        <div class='${this.type} ${() => state.active && '--active'}' ${attributes && omit(attributes, OMIT)}>
             <input
-                class='checkbox-tag'
-                type='checkbox'
                 ${{
-        checked: a?.checked || root(() => state.active),
+        checked: attributes?.checked || root(() => state.active),
+        class: `${this.type}-tag`,
         onchange: (e) => {
             state.active = e.target.checked;
         },
         onrender: form.input.onrender(state),
-        value: a?.value || 1
+        type: this.type === 'radio' ? 'radio' : 'checkbox',
+        value: attributes?.value || 1
     }}
-                ${a}
             >
         </div>
     `;
-}
-;
+};
+export default template.bind({ type: 'checkbox' });
+export { template };

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

@@ -1,21 +1,27 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
+type A = Attributes & {
+    state?: {
+        active: boolean;
+        error: string;
+    };
+};
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    <T extends A>(attributes: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    <T extends never>(content: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: A, content: never): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
 };
 export default _default;

package/build/components/input/index.js

@@ -1,17 +1,15 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const OMIT = ['input-tag'];
-export default template.factory(function (attributes, content) {
-    let a = attributes['input-tag'], state = attributes.state || reactive({
+export default template.factory(function (attributes) {
+    let state = attributes.state || reactive({
         active: false,
         error: ''
     });
     return html `
-            <label
+            <input
                 class='input'
                 ${{
         class: () => state.active && '--active',
@@ -20,19 +18,11 @@ export default template.factory(function (attributes, content) {
         },
         onfocusout: () => {
             state.active = false;
-        }
-    }}
-                ${a ? omit(attributes, OMIT) : attributes}
-            >
-                <input
-                    class='input-tag'
-                    ${{
+        },
         onrender: form.input.onrender(state),
         type: (attributes.type || 'text')
     }}
-                    ${a}
-                >
-                ${content}
-            </label>
+                ${attributes}
+            />
         `;
 });

package/build/components/input/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.input{--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);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.input:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.input:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.input.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.input{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);cursor:text;font-size:var(--font-size);line-height:var(--line-height);min-height:calc(var(--padding-vertical)*2 + var(--size));text-overflow:ellipsis;white-space:nowrap;flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.input:invalid,.input:required{box-shadow:none}.input-tag{color:var(--color);padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.input-tag[type=number]{appearance:textfield}}
+@layer components {.input{--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);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.input:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.input:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.input.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.input{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);line-height:var(--line-height);min-height:calc(var(--padding-vertical)*2 + var(--size));min-width:0;padding:var(--padding-vertical)var(--padding-horizontal);text-overflow:ellipsis;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;white-space:nowrap;flex-wrap:wrap;flex:auto;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.input:invalid,.input:required{box-shadow:none}.input[type=number]{appearance:textfield}}
 /*$vite$:1*/

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

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

package/build/components/radio/index.js

@@ -1,33 +1,3 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
+import { template } from '../../components/checkbox/index.js';
 import './scss/index.scss';
-const OMIT = ['radio-tag'];
-export default function (attributes) {
-    let a = attributes?.['radio-tag'], state = attributes?.state || reactive({
-        active: false,
-        error: ''
-    });
-    if (a?.checked) {
-        state.active = true;
-    }
-    return html `
-        <div class='radio ${() => state.active && '--active'}' ${a ? omit(attributes, OMIT) : attributes}>
-            <input
-                class='radio-tag'
-                type='radio'
-                ${{
-        checked: a?.checked || root(() => state.active),
-        onchange: (e) => {
-            state.active = e.target.checked;
-        },
-        onrender: form.input.onrender(state),
-        value: a?.value || 1
-    }}
-                ${a}
-            >
-        </div>
-    `;
-}
-;
+export default template.bind({ type: 'radio' });

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

@@ -1,21 +1,28 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
+type A = Attributes & {
+    state?: {
+        active: boolean;
+        error: string;
+        value: number;
+    };
+};
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    <T extends A>(attributes: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    <T extends never>(content: T): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
+    (attributes: A, content: never): ReturnType<(this: {
+        attributes?: A | undefined;
+        content?: undefined;
+    }, attributes: Readonly<A>, content: never) => import("@esportsplus/template").Renderable<any>>;
 };
 export default _default;

package/build/components/range/index.js

@@ -1,22 +1,21 @@
 import { reactive, root } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const OMIT = ['range-tag'];
-export default template.factory(function (attributes, content) {
-    let a = attributes['range-tag'], state = attributes.state || reactive({
+export default template.factory(function (attributes) {
+    let state = attributes.state || reactive({
         active: false,
         error: '',
         value: 0
     });
-    if (a?.value) {
-        state.value = Number(a.value);
+    if (attributes?.value) {
+        state.value = Number(attributes.value);
     }
     return html `
-            <div
+            <input
                 class='range --border-state --border-black'
+                type='range'
                 ${{
         class: () => state.active && '--active',
         onfocusin: () => {
@@ -24,23 +23,14 @@ export default template.factory(function (attributes, content) {
         },
         onfocusout: () => {
             state.active = false;
-        }
-    }}
-                ${a ? omit(attributes, OMIT) : attributes}
-            >
-                <input
-                    class='range-tag'
-                    type='range'
-                    ${{
+        },
         oninput: (e) => {
             state.value = Number(e.target.value);
         },
         onrender: form.input.onrender(state),
-        value: root(() => a?.value || state.value || 0)
+        value: root(() => attributes?.value || state.value || 0)
     }}
-                    ${a}
-                >
-                ${content}
-            </div>
+                ${attributes}
+            />
         `;
 });

package/build/components/range/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range,.range-tag{width:var(--width)}.range-tag{background:var(--background);height:var(--height);margin:calc((var(--height) - var(--thumb-size))/2)0;border:0;border-radius:240px;transition:opacity .2s}.range-tag::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag{appearance:none;outline:none}.range-tag::-moz-range-thumb{appearance:none;outline:none}.range-tag::-webkit-slider-thumb{appearance:none;outline:none}}
+@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc((var(--thumb-size) - var(--height))/2)0;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);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
 /*$vite$:1*/