@esportsplus/ui 0.51.6 → 0.53.0

package/.github/workflows/bump.yml

@@ -4,6 +4,9 @@ on:
   push:
     branches: '**' # only trigger on branches, not on tags
 
+permissions:
+  contents: write
+
 jobs:
   bump:
-    uses: esportsplus/typescript/.github/workflows/bump.yml@main
+    uses: esportsplus/typescript/.github/workflows/bump.yml@main

package/.github/workflows/publish.yml

@@ -9,6 +9,10 @@ on:
     types:
       - completed
 
+permissions:
+  contents: read
+  id-token: write
+
 jobs:
   publish:
     secrets:

package/README.md

@@ -85,10 +85,9 @@ html`
 ### Layout
 | Component | Description |
 |-----------|-------------|
-| `scrollbar` | Custom scrollbar container |
+| `scrollbar` | Native scrollbar styling |
 | `frame` | Scrollable frame |
 | `sidebar` | Side navigation |
-| `site` | Site wrapper |
 | `overlay` | Modal/overlay container |
 
 ### Utility
@@ -212,7 +211,7 @@ Each component exposes CSS custom properties:
 ```scss
 .ui-button {
   --background: var(--color-blue-400);
-  --color: var(--color-white);
+  --color: var(--color-white-400);
   --border-radius: var(--border-radius-300);
   --padding-horizontal: 16px;
   --padding-vertical: 8px;

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

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

package/build/components/accordion/index.js

@@ -1,42 +1,16 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import * as reactivity_0ff113fe0a6246fbbfe92857b2a0303c0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_0ff113fe0a6246fbbfe92857b2a0303c4 = template_0ff113fe0a6246fbbfe92857b2a0303c1.template(`<div>`);
-class ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303c2 extends reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.ReactiveObject {
-    #active = this[reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.SIGNAL](0);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.write(this.#active, _v0);
-    }
-}
+const template_04mlrpv1 = template_u1.template(`<div class='accordion' ><div class='accordion-content'>`);
 const OMIT = ['state'];
-let key = Symbol();
-export default template.factory(function (attributes, content) {
-    let ref, state = attributes.state || new ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303c2();
+export default component(function (attributes, content) {
+    let state = attributes.state;
     return (() => {
-        let root_0ff113fe0a6246fbbfe92857b2a0303c3 = template_0ff113fe0a6246fbbfe92857b2a0303c4(), element_0ff113fe0a6246fbbfe92857b2a0303c5 = root_0ff113fe0a6246fbbfe92857b2a0303c3.firstChild;
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303c5, omit(attributes, OMIT));
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setList(element_0ff113fe0a6246fbbfe92857b2a0303c5, 'class', () => {
-            return state.active && '--active';
-        });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.onrender(element_0ff113fe0a6246fbbfe92857b2a0303c5, (element) => {
-            (ref = element)[key] = state;
-        });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setList(element_0ff113fe0a6246fbbfe92857b2a0303c5, '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}`;
-        });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.slot(element_0ff113fe0a6246fbbfe92857b2a0303c5, content, 1);
-        return root_0ff113fe0a6246fbbfe92857b2a0303c3;
+        let root_04mlrpv0 = template_04mlrpv1(), element_04mlrpv2 = root_04mlrpv0.firstChild, element_04mlrpv3 = element_04mlrpv2.firstElementChild;
+        template_u1.setProperties(element_04mlrpv2, omit(attributes, OMIT));
+        template_u1.setProperty(element_04mlrpv2, 'inert', () => !state.active);
+        template_u1.slot(element_04mlrpv3, content, 1);
+        return root_04mlrpv0;
     })();
 });

package/build/components/accordion/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.accordion,.accordion:not(.--active){--max-height:0}.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}}
+@layer components {.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion[inert]{grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}}
 /*$vite$:1*/

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

@@ -1,18 +1,21 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import { Attributes } from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>) => template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>>;
-    <T extends template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>) => template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>>;
-    <T extends template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>) => template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>>;
-    (attributes: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes, content: template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>) => template_0ff113fe0a6246fbbfe92857b2a0303c1.Renderable<any>>;
+        attributes?: template_u1.Attributes | undefined;
+        content?: template_u1.Renderable<any>;
+    }, attributes: Readonly<template_u1.Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
+    <T extends template_u1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_u1.Attributes | undefined;
+        content?: template_u1.Renderable<any>;
+    }, attributes: Readonly<template_u1.Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
+    <T extends template_u1.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_u1.Attributes | undefined;
+        content?: template_u1.Renderable<any>;
+    }, attributes: Readonly<template_u1.Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
+    (attributes: template_u1.Attributes, content: template_u1.Renderable<any>): ReturnType<(this: {
+        attributes?: template_u1.Attributes | undefined;
+        content?: template_u1.Renderable<any>;
+    }, attributes: Readonly<template_u1.Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
 };
 export default _default;

package/build/components/back/index.js

@@ -1,16 +1,16 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import icon from '../../components/icon/index.js';
-import template from '../../components/template/index.js';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
 import arrow from './svg/arrow.svg';
 import './scss/index.scss';
-const template_0ff113fe0a6246fbbfe92857b2a0303cn = template_0ff113fe0a6246fbbfe92857b2a0303c1.template(`<a class='back link --padding-0px --flex-vertical'><!--$-->`);
-export default template.factory(function (attributes, content) {
+const template_1hhpvdm1 = template_u1.template(`<a class='back link --padding-0px --flex-vertical' ><!--$-->`);
+export default component(function (attributes, content) {
     return (() => {
-        let root_0ff113fe0a6246fbbfe92857b2a0303cm = template_0ff113fe0a6246fbbfe92857b2a0303cn(), element_0ff113fe0a6246fbbfe92857b2a0303co = root_0ff113fe0a6246fbbfe92857b2a0303cm.firstChild, element_0ff113fe0a6246fbbfe92857b2a0303cp = element_0ff113fe0a6246fbbfe92857b2a0303co.firstChild;
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303co, this.attributes);
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303co, attributes);
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.slot(element_0ff113fe0a6246fbbfe92857b2a0303cp, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.slot(element_0ff113fe0a6246fbbfe92857b2a0303co, content, 2);
-        return root_0ff113fe0a6246fbbfe92857b2a0303cm;
+        let root_1hhpvdm0 = template_1hhpvdm1(), element_1hhpvdm2 = root_1hhpvdm0.firstChild, element_1hhpvdm3 = element_1hhpvdm2.firstChild;
+        template_u1.setProperties(element_1hhpvdm2, this?.attributes);
+        template_u1.setProperties(element_1hhpvdm2, attributes);
+        template_u1.slot(element_1hhpvdm3, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
+        template_u1.slot(element_1hhpvdm2, content, 2);
+        return root_1hhpvdm0;
     })();
 });

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

@@ -1,24 +1,24 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import { Renderable } from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
+import { type Renderable } from '@esportsplus/template';
 import './scss/index.scss';
 declare const hold: {
     (): ReturnType<(this: {
-        attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+        attributes?: template_u1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
-    <T extends template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+    <T extends template_u1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_u1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
@@ -26,25 +26,25 @@ declare const hold: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+        attributes?: template_u1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
-    (attributes: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes, content: (state: {
+    (attributes: template_u1.Attributes, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>): ReturnType<(this: {
-        attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+        attributes?: template_u1.Attributes | undefined;
         content?: ((state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) | undefined;
-    }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+    }, attributes: Readonly<template_u1.Attributes>, content: (state: {
         holding: boolean;
         complete: boolean;
     }) => Renderable<any>) => Renderable<any>>;
@@ -52,22 +52,22 @@ declare const hold: {
 declare const _default: {
     hold: {
         (): ReturnType<(this: {
-            attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+            attributes?: template_u1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
-        <T extends template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>(attributes: T): ReturnType<(this: {
-            attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+        <T extends template_u1.Attributes>(attributes: T): ReturnType<(this: {
+            attributes?: template_u1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
@@ -75,25 +75,25 @@ declare const _default: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>>(content: T): ReturnType<(this: {
-            attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+            attributes?: template_u1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;
-        (attributes: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes, content: (state: {
+        (attributes: template_u1.Attributes, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>): ReturnType<(this: {
-            attributes?: template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes | undefined;
+            attributes?: template_u1.Attributes | undefined;
             content?: ((state: {
                 holding: boolean;
                 complete: boolean;
             }) => Renderable<any>) | undefined;
-        }, attributes: Readonly<template_0ff113fe0a6246fbbfe92857b2a0303c1.Attributes>, content: (state: {
+        }, attributes: Readonly<template_u1.Attributes>, content: (state: {
             holding: boolean;
             complete: boolean;
         }) => Renderable<any>) => Renderable<any>>;

package/build/components/button/index.js

@@ -1,59 +1,59 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import * as reactivity_0ff113fe0a6246fbbfe92857b2a0303c0 from '@esportsplus/reactivity';
-import template from '../template/index.js';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
 import './scss/index.scss';
-const template_0ff113fe0a6246fbbfe92857b2a0303cs = template_0ff113fe0a6246fbbfe92857b2a0303c1.template(`<div class='button '>`);
-class ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303cq extends reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.ReactiveObject {
-    #complete = this[reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.SIGNAL](false);
-    #holding = this[reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.SIGNAL](false);
+const template_1u9ndnf2 = template_u1.template(`<div class='button ' >`);
+class ReactiveObject_1u9ndnf0 extends reactivity_u0.ReactiveObject {
+    #complete = this[reactivity_u0.SIGNAL](false);
+    #holding = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
     }
     get complete() {
-        return reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.read(this.#complete);
+        return reactivity_u0.read(this.#complete);
     }
     set complete(_v0) {
-        reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.write(this.#complete, _v0);
+        reactivity_u0.write(this.#complete, _v0);
     }
     get holding() {
-        return reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.read(this.#holding);
+        return reactivity_u0.read(this.#holding);
     }
     set holding(_v1) {
-        reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.write(this.#holding, _v1);
+        reactivity_u0.write(this.#holding, _v1);
     }
 }
-const hold = template.factory(function (attributes, content) {
+const hold = component(function (attributes, content) {
     let end = () => {
         if (!state.complete) {
             state.holding = false;
         }
-    }, state = new ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303cq();
+    }, state = new ReactiveObject_1u9ndnf0();
     return (() => {
-        let root_0ff113fe0a6246fbbfe92857b2a0303cr = template_0ff113fe0a6246fbbfe92857b2a0303cs(), element_0ff113fe0a6246fbbfe92857b2a0303ct = root_0ff113fe0a6246fbbfe92857b2a0303cr.firstChild;
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setList(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'class', () => state.holding && 'button--holding');
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'mousedown', (e) => {
+        let root_1u9ndnf1 = template_1u9ndnf2(), element_1u9ndnf3 = root_1u9ndnf1.firstChild;
+        template_u1.setList(element_1u9ndnf3, 'class', () => state.holding && 'button--holding');
+        template_u1.delegate(element_1u9ndnf3, 'mousedown', (e) => {
             e.preventDefault();
             state.holding = true;
         });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303ct, attributes);
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'animationend', (e) => {
+        template_u1.setProperties(element_1u9ndnf3, attributes);
+        template_u1.delegate(element_1u9ndnf3, 'animationend', (e) => {
             if (e.animationName === 'buttonHolding') {
                 state.complete = true;
             }
         });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'click', () => { });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'mousedown', (e) => {
+        template_u1.delegate(element_1u9ndnf3, 'click', () => { });
+        template_u1.delegate(element_1u9ndnf3, 'mousedown', (e) => {
             e.preventDefault();
             state.holding = true;
         });
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'mouseup', end);
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'touchend', end);
-        template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303ct, 'touchstart', (e) => {
+        template_u1.delegate(element_1u9ndnf3, 'mouseup', end);
+        template_u1.delegate(element_1u9ndnf3, 'touchend', end);
+        template_u1.delegate(element_1u9ndnf3, 'touchstart', (e) => {
             e.preventDefault();
             state.holding = true;
         });
-        new template_0ff113fe0a6246fbbfe92857b2a0303c1.EffectSlot(element_0ff113fe0a6246fbbfe92857b2a0303ct, () => content(state), 1);
-        return root_0ff113fe0a6246fbbfe92857b2a0303cr;
+        new template_u1.EffectSlot(element_1u9ndnf3, () => content(state), 1);
+        return root_1u9ndnf1;
     })();
 });
 export default { hold };

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

@@ -1,4 +1,4 @@
-import { Attributes } from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const factory: (type: string) => (this: {
     attributes?: Attributes;

package/build/components/checkbox/index.js

@@ -1,50 +1,54 @@
-import * as template_0ff113fe0a6246fbbfe92857b2a0303c1 from '@esportsplus/template';
-import * as reactivity_0ff113fe0a6246fbbfe92857b2a0303c0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
 import { root } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import form from '../../components/form/index.js';
+import form from '../form/index.js';
 import './scss/index.scss';
-const template_0ff113fe0a6246fbbfe92857b2a0303cw = template_0ff113fe0a6246fbbfe92857b2a0303c1.template(`<div><input>`);
-class ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303cu extends reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.ReactiveObject {
-    #active = this[reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.SIGNAL](false);
-    #error = this[reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.SIGNAL]('');
+const template_0l38kpg2 = template_u1.template(`<div><input >`);
+class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.read(this.#active);
+        return reactivity_u0.read(this.#active);
     }
     set active(_v0) {
-        reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.write(this.#active, _v0);
+        reactivity_u0.write(this.#active, _v0);
     }
     get error() {
-        return reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.read(this.#error);
+        return reactivity_u0.read(this.#error);
     }
     set error(_v1) {
-        reactivity_0ff113fe0a6246fbbfe92857b2a0303c0.write(this.#error, _v1);
+        reactivity_u0.write(this.#error, _v1);
     }
 }
 const OMIT = ['checked', 'value'];
 const factory = (type) => {
     function template(attributes) {
-        let state = attributes?.state || new ReactiveObject_0ff113fe0a6246fbbfe92857b2a0303cu();
+        let ref, state = attributes?.state || new ReactiveObject_0l38kpg0();
         if (attributes?.checked) {
             state.active = true;
         }
         return (() => {
-            let root_0ff113fe0a6246fbbfe92857b2a0303cv = template_0ff113fe0a6246fbbfe92857b2a0303cw(), element_0ff113fe0a6246fbbfe92857b2a0303cx = root_0ff113fe0a6246fbbfe92857b2a0303cv.firstChild, element_0ff113fe0a6246fbbfe92857b2a0303cy = element_0ff113fe0a6246fbbfe92857b2a0303cx.firstElementChild;
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setList(element_0ff113fe0a6246fbbfe92857b2a0303cx, 'class', (type) + (() => state.active && '--active'));
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303cx, this?.attributes && omit(this.attributes, OMIT));
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperties(element_0ff113fe0a6246fbbfe92857b2a0303cx, attributes && omit(attributes, OMIT));
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperty(element_0ff113fe0a6246fbbfe92857b2a0303cy, 'checked', attributes?.checked || root(() => state.active));
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setList(element_0ff113fe0a6246fbbfe92857b2a0303cy, 'class', `${type}-tag`);
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.delegate(element_0ff113fe0a6246fbbfe92857b2a0303cy, 'change', (e) => {
+            let root_0l38kpg1 = template_0l38kpg2(), element_0l38kpg3 = root_0l38kpg1.firstChild, element_0l38kpg4 = element_0l38kpg3.firstElementChild;
+            template_u1.setList(element_0l38kpg3, 'class', () => state.active ? type + " --active" : type);
+            template_u1.setProperties(element_0l38kpg3, this?.attributes && omit(this.attributes, OMIT));
+            template_u1.setProperties(element_0l38kpg3, attributes && omit(attributes, OMIT));
+            template_u1.delegate(element_0l38kpg3, 'click', () => ref.click());
+            template_u1.setProperty(element_0l38kpg4, 'checked', attributes?.checked || root(() => state.active));
+            template_u1.setList(element_0l38kpg4, 'class', `${type}-tag`);
+            template_u1.delegate(element_0l38kpg4, 'change', (e) => {
                 state.active = e.target.checked;
             });
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.onrender(element_0ff113fe0a6246fbbfe92857b2a0303cy, form.input.onrender(state));
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperty(element_0ff113fe0a6246fbbfe92857b2a0303cy, 'type', type === 'radio' ? 'radio' : 'checkbox');
-            template_0ff113fe0a6246fbbfe92857b2a0303c1.setProperty(element_0ff113fe0a6246fbbfe92857b2a0303cy, 'value', attributes?.value || 1);
-            return root_0ff113fe0a6246fbbfe92857b2a0303cv;
+            template_u1.onconnect(element_0l38kpg4, (input) => {
+                ref = input;
+            });
+            template_u1.onrender(element_0l38kpg4, form.input.onrender(state));
+            template_u1.setProperty(element_0l38kpg4, 'type', type === 'radio' ? 'radio' : 'checkbox');
+            template_u1.setProperty(element_0l38kpg4, 'value', attributes?.value || 1);
+            return root_0l38kpg1;
         })();
     }
     return template;