@esportsplus/ui 0.51.7 → 0.53.0

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,22 +1,27 @@
 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?: Attributes | undefined;
+        attributes?: A | undefined;
         content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
+    }, 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<Attributes>, content: template_u1.Renderable<any>) => 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?: Attributes | undefined;
+        attributes?: A | undefined;
         content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    (attributes: Attributes, content: template_u1.Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes | undefined;
+    }, 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<Attributes>, content: template_u1.Renderable<any>) => 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_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
+import { component } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import './scss/index.scss';
-const template_04mlrpv2 = template_u1.template(`<div >`);
-class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](0);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.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_04mlrpv0();
+export default component(function (attributes, content) {
+    let state = attributes.state;
     return (() => {
-        let root_04mlrpv1 = template_04mlrpv2(), element_04mlrpv3 = root_04mlrpv1.firstChild;
-        template_u1.setProperties(element_04mlrpv3, omit(attributes, OMIT));
-        template_u1.setList(element_04mlrpv3, 'class', () => {
-            return state.active && '--active';
-        });
-        template_u1.onrender(element_04mlrpv3, (element) => {
-            (ref = element)[key] = state;
-        });
-        template_u1.setList(element_04mlrpv3, '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}`;
-        });
+        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_04mlrpv1;
+        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_u1 from '@esportsplus/template';
-import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.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?: Attributes;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    (attributes: Attributes, content: template_u1.Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.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>>;
+    (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,13 +1,13 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import icon from '../icon/index.js';
-import template from '../template/index.js';
 import arrow from './svg/arrow.svg';
 import './scss/index.scss';
 const template_1hhpvdm1 = template_u1.template(`<a class='back link --padding-0px --flex-vertical' ><!--$-->`);
-export default template.factory(function (attributes, content) {
+export default component(function (attributes, content) {
     return (() => {
         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, 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);

package/build/components/button/index.js

@@ -1,6 +1,6 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import template from '../template/index.js';
 import './scss/index.scss';
 const template_1u9ndnf2 = template_u1.template(`<div class='button ' >`);
 class ReactiveObject_1u9ndnf0 extends reactivity_u0.ReactiveObject {
@@ -22,7 +22,7 @@ class ReactiveObject_1u9ndnf0 extends reactivity_u0.ReactiveObject {
         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;

package/build/components/checkbox/index.js

@@ -4,7 +4,7 @@ import { root } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_0l38kpg2 = template_u1.template(`<div ><input >`);
+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]('');
@@ -27,20 +27,24 @@ class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
 const OMIT = ['checked', 'value'];
 const factory = (type) => {
     function template(attributes) {
-        let state = attributes?.state || new ReactiveObject_0l38kpg0();
+        let ref, state = attributes?.state || new ReactiveObject_0l38kpg0();
         if (attributes?.checked) {
             state.active = true;
         }
         return (() => {
             let root_0l38kpg1 = template_0l38kpg2(), element_0l38kpg3 = root_0l38kpg1.firstChild, element_0l38kpg4 = element_0l38kpg3.firstElementChild;
-            template_u1.setList(element_0l38kpg3, 'class', (type) + (() => state.active && '--active'));
+            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_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);

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

@@ -1,3 +1,5 @@
+import onclick from './onclick.js';
+import write from './write.js';
 declare const _default: {
     onclick: {
         (): ReturnType<(this: {
@@ -5,8 +7,8 @@ declare const _default: {
                 timeout?: number;
                 value: string;
             } & {
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -128,8 +130,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -250,8 +252,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -370,8 +372,8 @@ declare const _default: {
                 timeout?: number;
                 value: string;
             } & {
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -493,8 +495,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -618,8 +620,8 @@ declare const _default: {
                 timeout?: number;
                 value: string;
             } & {
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -741,8 +743,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -863,8 +865,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -985,8 +987,8 @@ declare const _default: {
                 timeout?: number;
                 value: string;
             } & {
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1108,8 +1110,8 @@ declare const _default: {
             timeout?: number;
             value: string;
         } & {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1230,3 +1232,4 @@ declare const _default: {
     write: (value: string) => Promise<boolean>;
 };
 export default _default;
+export { onclick, write };

package/build/components/clipboard/index.js

@@ -1,3 +1,4 @@
 import onclick from './onclick.js';
 import write from './write.js';
 export default { onclick, write };
+export { onclick, write };

package/build/components/clipboard/onclick.js

@@ -1,7 +1,7 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import write from './write.js';
 const template_0g8trzu2 = template_u1.template(`<div>`);
 class ReactiveObject_0g8trzu0 extends reactivity_u0.ReactiveObject {
@@ -17,7 +17,7 @@ class ReactiveObject_0g8trzu0 extends reactivity_u0.ReactiveObject {
     }
 }
 const OMIT = ['timeout', 'value'];
-export default template.factory(function (attributes, content) {
+export default component(function (attributes, content) {
     let state = new ReactiveObject_0g8trzu0(), timeout = attributes.timeout || 1000 * 2;
     return (() => {
         let root_0g8trzu1 = template_0g8trzu2(), element_0g8trzu3 = root_0g8trzu1.firstChild;
@@ -25,7 +25,7 @@ export default template.factory(function (attributes, content) {
         template_u1.delegate(element_0g8trzu3, 'click', (e) => {
             e.preventDefault();
             e.stopPropagation();
-            write(attributes.value).then(() => {
+            void write(attributes.value).then(() => {
                 state.copied = true;
                 setTimeout(() => {
                     state.copied = false;

package/build/components/form/input.js

@@ -1,13 +1,13 @@
-let key = Symbol();
+const KEY = Symbol();
 const get = (element) => {
     if (element) {
-        return element[key];
+        return element[KEY];
     }
     return undefined;
 };
 const onrender = (reactive) => {
     return (element) => {
-        element[key] = reactive;
+        element[KEY] = reactive;
     };
 };
 export default { get, onrender };

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

@@ -1,20 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("../scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").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/frame/index.js

@@ -1,7 +1,13 @@
-import scrollbar from '../scrollbar/index.js';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import './scss/index.scss';
-export default scrollbar.bind({
-    attributes: {
-        class: 'frame'
-    }
+const template_0f2789a1 = template_u1.template(`<div class='frame --scrollbar' >`);
+export default component(function (attributes, content) {
+    return (() => {
+        let root_0f2789a0 = template_0f2789a1(), element_0f2789a2 = root_0f2789a0.firstChild;
+        template_u1.setProperties(element_0f2789a2, this?.attributes);
+        template_u1.setProperties(element_0f2789a2, attributes);
+        template_u1.slot(element_0f2789a2, content, 1);
+        return root_0f2789a0;
+    })();
 });

package/build/components/highlight/index.js

@@ -1,7 +1,7 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import './scss/index.scss';
 const template_0k38r592 = template_u1.template(`<div class='highlight' >`);
 class ReactiveObject_0k38r590 extends reactivity_u0.ReactiveObject {
@@ -18,7 +18,7 @@ class ReactiveObject_0k38r590 extends reactivity_u0.ReactiveObject {
 }
 const OMIT = ['background'];
 let key = Symbol(), observer = null;
-export default template.factory((attributes, content) => {
+export default component((attributes, content) => {
     if (observer === null) {
         observer = new IntersectionObserver((entries) => {
             let disconnected = 0, n = entries.length;

package/build/components/icon/index.js

@@ -1,8 +1,8 @@
 import * as template_u1 from '@esportsplus/template';
-import template from '../template/index.js';
+import { component } from '@esportsplus/template';
 import './scss/index.scss';
 const template_1lt0nhw1 = template_u1.template(`<div class='icon' ><svg><use href='' />`);
-export default template.factory((attributes, href) => {
+export default component((attributes, href) => {
     if (href[0] !== '#') {
         href = '#' + href;
     }

package/build/components/index.d.ts

@@ -1,5 +1,4 @@
 export { default as accordion } from './accordion/index.js';
-export { default as alert } from './alert/index.js';
 export { default as back } from './back/index.js';
 export { default as button } from './button/index.js';
 export { default as checkbox } from './checkbox/index.js';
@@ -21,11 +20,9 @@ export { default as range } from './range/index.js';
 export { default as root } from './root/index.js';
 export { default as select } from './select/index.js';
 export { default as switch } from './switch/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
-export { default as site } from './site/index.js';
-export { default as template } from './template/index.js';
 export { default as textarea } from './textarea/index.js';
+export { default as toaster, toast } from './toast/index.js';
 export { default as tooltip } from './tooltip/index.js';
 export { default as truncate } from './truncate/index.js';
 export { default as typewriter } from './typewriter/index.js';

package/build/components/index.js

@@ -1,5 +1,4 @@
 export { default as accordion } from './accordion/index.js';
-export { default as alert } from './alert/index.js';
 export { default as back } from './back/index.js';
 export { default as button } from './button/index.js';
 export { default as checkbox } from './checkbox/index.js';
@@ -21,11 +20,9 @@ export { default as range } from './range/index.js';
 export { default as root } from './root/index.js';
 export { default as select } from './select/index.js';
 export { default as switch } from './switch/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
-export { default as site } from './site/index.js';
-export { default as template } from './template/index.js';
 export { default as textarea } from './textarea/index.js';
+export { default as toaster, toast } from './toast/index.js';
 export { default as tooltip } from './tooltip/index.js';
 export { default as truncate } from './truncate/index.js';
 export { default as typewriter } from './typewriter/index.js';

package/build/components/loader/index.js

@@ -1,7 +1,7 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import './scss/index.scss';
 const template_0bvfqbq2 = template_u1.template(`<div class='loader-content' ><div class='loader-logo text --flex-center --text-uppercase --text-600' style='color: var(--color-grey-500);' >`);
 const template_0bvfqbq6 = template_u1.template(`<div class='loader '><div class='loader ' >`);
@@ -32,7 +32,7 @@ class ReactiveObject_0bvfqbq0 extends reactivity_u0.ReactiveObject {
     }
 }
 const OMIT = ['loader-content', 'loader-logo'];
-export default template.factory((attributes, content) => {
+export default component((attributes, content) => {
     let state = new ReactiveObject_0bvfqbq0();
     return () => {
         if (state.remove) {
@@ -42,9 +42,9 @@ export default template.factory((attributes, content) => {
         return (() => {
             let root_0bvfqbq5 = template_0bvfqbq6(), element_0bvfqbq7 = root_0bvfqbq5.firstChild, element_0bvfqbq8 = element_0bvfqbq7.firstElementChild;
             template_u1.setList(element_0bvfqbq7, 'class', () => state.load && 'loader--load');
-            template_u1.delegate(element_0bvfqbq7, 'animationend', (e) => {
+            template_u1.delegate(element_0bvfqbq7, 'animationend', ({ animationName: name }) => {
                 i++;
-                if (e.animationName === 'move' && i > 1) {
+                if (name === 'move' && i > 1) {
                     state.remove = true;
                 }
             });

package/build/components/loader/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{opacity:1;pointer-events:none;visibility:visible;z-index:9999;background-color:#01020964;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.4s ease-in-out .2s both loaderMove}.loader--load .loader--load{animation:.4s ease-in-out both loaderMove}@keyframes loaderMove{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both loaderLogoScale}@keyframes loaderLogoScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}}
+@layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{opacity:1;pointer-events:none;visibility:visible;z-index:9999;background-color:#01020964;transition:opacity .3s ease-in-out,visibility .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.4s ease-in-out .2s both loaderMove}.loader--load .loader--load{animation:.4s ease-in-out both loaderMove}@keyframes loaderMove{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both loaderLogoScale}@keyframes loaderLogoScale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}}
 /*$vite$:1*/

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

@@ -1,20 +1,21 @@
+import * as template_u1 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("../scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").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;