@esportsplus/ui 0.51.7 → 0.54.0

package/build/components/clipboard/index.js

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

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

@@ -1,44 +1,10 @@
+import * as template_u0 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 type A = {
     timeout?: number;
     value: string;
 } & Attributes;
-declare const _default: {
-    (): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            copied: boolean;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        copied: boolean;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    <T extends A>(attributes: T): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            copied: boolean;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        copied: boolean;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    <T extends (state: {
-        copied: boolean;
-    }) => Renderable<unknown>>(content: T): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            copied: boolean;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        copied: boolean;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    (attributes: A, content: (state: {
-        copied: boolean;
-    }) => Renderable<unknown>): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            copied: boolean;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        copied: boolean;
-    }) => Renderable<unknown>) => Renderable<any>>;
-};
+declare const _default: template_u0.Factory<A, (state: {
+    copied: boolean;
+}) => Renderable<unknown>, Renderable<any>>;
 export default _default;

package/build/components/clipboard/onclick.js

@@ -1,9 +1,9 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 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>`);
+const template_uo = template_u0.template(`<div >`);
 class ReactiveObject_0g8trzu0 extends reactivity_u0.ReactiveObject {
     #copied = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -17,22 +17,22 @@ 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;
-        template_u1.setProperties(element_0g8trzu3, omit(attributes, OMIT));
-        template_u1.delegate(element_0g8trzu3, 'click', (e) => {
+        let root_un = template_uo(), element_up = root_un.firstChild;
+        template_u0.setProperties(element_up, omit(attributes, OMIT));
+        template_u0.delegate(element_up, 'click', (e) => {
             e.preventDefault();
             e.stopPropagation();
-            write(attributes.value).then(() => {
+            void write(attributes.value).then(() => {
                 state.copied = true;
                 setTimeout(() => {
                     state.copied = false;
                 }, timeout);
             });
         });
-        new template_u1.EffectSlot(element_0g8trzu3, () => content(state), 1);
-        return root_0g8trzu1;
+        new template_u0.EffectSlot(element_up, () => content(state), 1);
+        return root_un;
     })();
 });

package/build/components/counter/index.js

@@ -1,12 +1,12 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect } from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
-const template_00nd5up3 = template_u1.template(`<span class='counter-character counter-character--symbol'>`);
-const template_00nd5up6 = template_u1.template(`<span>`);
-const template_00nd5up9 = template_u1.template(`<div class=' counter-character'><div class='counter-character-track'><span>9</span><!--$--><span>0`);
-const template_00nd5upd = template_u1.template(`<div class='counter' >`);
+const template_ur = template_u0.template(`<span class='counter-character counter-character--symbol'>`);
+const template_uu = template_u0.template(`<span>`);
+const template_ux = template_u0.template(`<div class='counter-character'><div class='counter-character-track' ><span>9</span><!--$--><span>0`);
+const template_u11 = template_u0.template(`<div class='counter' >`);
 class ReactiveObject_00nd5up0 extends reactivity_u0.ReactiveObject {
     #value = this[reactivity_u0.SIGNAL](-1);
     constructor() {
@@ -20,25 +20,15 @@ class ReactiveObject_00nd5up0 extends reactivity_u0.ReactiveObject {
     }
 }
 class ReactiveObject_00nd5up1 extends reactivity_u0.ReactiveObject {
-    #length = this[reactivity_u0.SIGNAL](0);
-    #test;
-    #render;
-    constructor(_p0, _p1) {
+    #started = this[reactivity_u0.SIGNAL](false);
+    constructor() {
         super(null);
-        this.#test = this[reactivity_u0.COMPUTED](_p0);
-        this.#render = this[reactivity_u0.REACTIVE_ARRAY](_p1);
-    }
-    get length() {
-        return reactivity_u0.read(this.#length);
     }
-    set length(_v0) {
-        reactivity_u0.write(this.#length, _v0);
+    get started() {
+        return reactivity_u0.read(this.#started);
     }
-    get test() {
-        return reactivity_u0.read(this.#test);
-    }
-    get render() {
-        return this.#render;
+    set started(_v0) {
+        reactivity_u0.write(this.#started, _v0);
     }
 }
 const OMIT = ['currency', 'decimals', 'delay', 'max', 'state', 'suffix', 'value'];
@@ -49,13 +39,11 @@ export default (attributes) => {
         : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency: currency || 'USD'
-        }), rendering = true, state = new ReactiveObject_00nd5up1(() => 'sds', []), render = new reactivity_u0.ReactiveArray();
+        }), animation = new ReactiveObject_00nd5up1(), render = new reactivity_u0.ReactiveArray();
     decimals ??= 2;
-    effect(() => {
-        if (api.value !== -1) {
-            value = api.value;
-        }
-        let padding = (max || value).toFixed(decimals).length - value.toFixed(decimals).length, values = value.toString().padStart(value.toString().length + padding, '1');
+    let stop = effect(() => {
+        let target = api.value === -1 ? value : api.value, started = animation.started;
+        let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length, values = target.toString().padStart(target.toString().length + padding, '1');
         if (formatter) {
             values = formatter.format(values);
         }
@@ -69,48 +57,52 @@ export default (attributes) => {
         if (suffix) {
             values.push(' ', ...suffix.split(''));
         }
-        state.length = values.length;
-        for (let i = 0, n = values.length; i < n; i++) {
-            let value = values[i];
-            if (!isNaN(parseInt(value, 10)) && (rendering === true || padding > 0)) {
-                padding--;
-                value = '0';
+        untrack(() => {
+            for (let i = 0, n = values.length; i < n; i++) {
+                let value = values[i], digit = !isNaN(parseInt(value, 10));
+                if (digit && (!started || padding > 0)) {
+                    padding--;
+                    value = '0';
+                }
+                if (render[i]?.digit === digit) {
+                    render[i].value = value;
+                }
+                else {
+                    let character = reactivity_u0.reactive({ digit, value });
+                    render.$set(i, character);
+                }
             }
-            render.$set(i, value);
-        }
-        if (rendering === true) {
-            rendering = false;
-            setTimeout(() => api.value = value, delay || 1000);
-        }
+            if (render.$length > values.length) {
+                render.splice(values.length);
+            }
+        });
+    }), timer = setTimeout(() => animation.started = true, delay ?? 1000);
+    onCleanup(() => {
+        clearTimeout(timer);
+        stop();
     });
     return (() => {
-        let root_00nd5upc = template_00nd5upd(), element_00nd5upe = root_00nd5upc.firstChild;
-        template_u1.setProperties(element_00nd5upe, omit(attributes, OMIT));
-        new template_u1.EffectSlot(element_00nd5upe, () => {
-            let n = state.length;
-            if (n === 0) {
-                return '';
-            }
-            return new template_u1.ArraySlot(render, function (value) {
-                if (isNaN(parseInt(value, 10))) {
-                    return (() => {
-                        let root_00nd5up2 = template_00nd5up3(), element_00nd5up4 = root_00nd5up2.firstChild;
-                        template_u1.slot(element_00nd5up4, value, 1);
-                        return root_00nd5up2;
-                    })();
-                }
+        let root_u10 = template_u11(), element_u12 = root_u10.firstChild;
+        template_u0.setProperties(element_u12, omit(attributes, OMIT));
+        element_u12.appendChild(new template_u0.ArraySlot(render, function (character) {
+            if (!character.digit) {
                 return (() => {
-                    let root_00nd5up8 = template_00nd5up9(), element_00nd5upa = root_00nd5up8.firstChild.firstElementChild, element_00nd5upb = element_00nd5upa.firstChild.nextSibling;
-                    template_u1.setList(element_00nd5upa, 'style', `--value: ${value}`);
-                    template_u1.slot(element_00nd5upb, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
-                        let root_00nd5up5 = template_00nd5up6(), element_00nd5up7 = root_00nd5up5.firstChild;
-                        template_u1.slot(element_00nd5up7, value, 1);
-                        return root_00nd5up5;
-                    }));
-                    return root_00nd5up8;
+                    let root_uq = template_ur(), element_us = root_uq.firstChild;
+                    new template_u0.EffectSlot(element_us, () => character.value, 1);
+                    return root_uq;
                 })();
-            });
-        }, 1);
-        return root_00nd5upc;
+            }
+            return (() => {
+                let root_uw = template_ux(), element_uy = root_uw.firstChild.firstElementChild, element_uz = element_uy.firstChild.nextSibling;
+                template_u0.setList(element_uy, 'style', () => `--value: ${character.value}`);
+                template_u0.slot(element_uz, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
+                    let root_ut = template_uu(), element_uv = root_ut.firstChild;
+                    template_u0.slot(element_uv, value, 1);
+                    return root_ut;
+                }));
+                return root_uw;
+            })();
+        }, true).fragment);
+        return root_u10;
     })();
 };

package/build/components/counter/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.counter{--font-size:clamp(2rem, 4vw + 1rem, 8rem);--font-weight:var(--font-weight-400);--line-height:calc(var(--font-size) * 1.5);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;line-height:var(--line-height);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size) * var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:var(--line-height);overflow:visible}.counter-character--fraction .counter-character-track span{padding:calc((var(--line-height) - var(--font-size)) * .2) 0;flex-direction:column;align-items:end;display:flex}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-right:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * var(--line-height) * -1);transition:translate var(--transition-duration) var(--timing-function);display:grid}.counter-character-track span{transform-style:flat;height:1lh}}
+@layer components {.counter{--font-size:clamp(2rem, 4vw + 1rem, 8rem);--font-weight:var(--font-weight-400);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size) * var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:1lh;overflow:visible}.counter-character--fraction .counter-character-track span{flex-direction:column;align-items:end;padding:calc(.2lh - .2em) 0;display:flex}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-right:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function);display:grid}.counter-character-track span{transform-style:flat;height:1lh}}
 /*$vite$:1*/

package/build/components/form/action.js

@@ -1,8 +1,8 @@
 import response from '@esportsplus/action';
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import input from './input.js';
-const template_1ajnoyj1 = template_u1.template(`<form class='form' >`);
+const template_u14 = template_u0.template(`<form class='form' >`);
 const OMIT = ['action', 'state'];
 function parse(input) {
     let data = {};
@@ -29,9 +29,9 @@ function parse(input) {
 export default (attributes, content) => {
     let { action, state } = attributes;
     return (() => {
-        let root_1ajnoyj0 = template_1ajnoyj1(), element_1ajnoyj2 = root_1ajnoyj0.firstChild;
-        template_u1.setProperties(element_1ajnoyj2, omit(attributes, OMIT));
-        template_u1.delegate(element_1ajnoyj2, 'click', function (event) {
+        let root_u13 = template_u14(), element_u15 = root_u13.firstChild;
+        template_u0.setProperties(element_u15, omit(attributes, OMIT));
+        template_u0.delegate(element_u15, 'click', function (event) {
             let trigger = event.target;
             if (trigger?.type !== 'submit') {
                 return;
@@ -39,7 +39,7 @@ export default (attributes, content) => {
             event.preventDefault();
             this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
         });
-        template_u1.on(element_1ajnoyj2, 'submit', async function (event) {
+        template_u0.on(element_u15, 'submit', async function (event) {
             event.preventDefault();
             if (state) {
                 state.processing = true;
@@ -59,7 +59,7 @@ export default (attributes, content) => {
                 state.processing = false;
             }
         });
-        template_u1.slot(element_1ajnoyj2, content, 1);
-        return root_1ajnoyj0;
+        template_u0.slot(element_u15, content, 1);
+        return root_u13;
     })();
 };

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

@@ -14,12 +14,12 @@ declare const _default: {
         };
     } & import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<any>) => DocumentFragment | Text;
     input: {
-        get: (element?: import("@esportsplus/template").Element) => {
+        get: <T extends {
             error: string;
-        } | undefined;
-        onrender: (reactive: {
+        }>(element?: import("@esportsplus/template").Element) => T | undefined;
+        onrender: <T extends {
             error: string;
-        }) => (element: import("@esportsplus/template").Element) => void;
+        }>(reactive: T) => (element: import("@esportsplus/template").Element) => void;
     };
 };
 export default _default;

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

@@ -1,10 +1,10 @@
 import { Element } from '@esportsplus/template';
-declare const get: (element?: Element) => {
+declare const get: <T extends {
     error: string;
-} | undefined;
-declare const onrender: (reactive: {
+}>(element?: Element) => T | undefined;
+declare const onrender: <T extends {
     error: string;
-}) => (element: Element) => void;
+}>(reactive: T) => (element: Element) => void;
 declare const _default: {
     get: typeof get;
     onrender: typeof onrender;

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/grid/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--gap-horizontal) var(--gap-vertical);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
+@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--gap-vertical) var(--gap-horizontal);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
 /*$vite$:1*/

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

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

package/build/components/icon/index.js

@@ -1,15 +1,15 @@
-import * as template_u1 from '@esportsplus/template';
-import template from '../template/index.js';
+import * as template_u0 from '@esportsplus/template';
+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) => {
+const template_u17 = template_u0.template(`<div class='icon' ><svg><use />`);
+export default component((attributes, href) => {
     if (href[0] !== '#') {
         href = '#' + href;
     }
     return (() => {
-        let root_1lt0nhw0 = template_1lt0nhw1(), element_1lt0nhw2 = root_1lt0nhw0.firstChild, element_1lt0nhw3 = element_1lt0nhw2.firstElementChild.firstElementChild;
-        template_u1.setProperties(element_1lt0nhw2, attributes);
-        template_u1.setProperty(element_1lt0nhw3, 'href', href);
-        return root_1lt0nhw0;
+        let root_u16 = template_u17(), element_u18 = root_u16.firstChild, element_u19 = element_u18.firstElementChild.firstElementChild;
+        template_u0.setProperties(element_u18, attributes);
+        template_u0.setProperty(element_u19, 'href', href);
+        return root_u16;
     })();
 });

package/build/components/icon/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}}
+@layer components {.icon{--color:inherit;--height:var(--size);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}}
 /*$vite$:1*/

package/build/components/index.d.ts

@@ -1,31 +1,21 @@
 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';
 export { default as clipboard } from './clipboard/index.js';
 export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
 export { default as form } from './form/index.js';
-export { default as frame } from './frame/index.js';
-export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
 export { default as input } from './input/index.js';
 export { default as json } from './json/index.js';
-export { default as loader } from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
 export { default as radio } from './radio/index.js';
 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,31 +1,21 @@
 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';
 export { default as clipboard } from './clipboard/index.js';
 export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
 export { default as form } from './form/index.js';
-export { default as frame } from './frame/index.js';
-export { default as highlight } from './highlight/index.js';
 export { default as icon } from './icon/index.js';
 export { default as input } from './input/index.js';
 export { default as json } from './json/index.js';
-export { default as loader } from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
 export { default as radio } from './radio/index.js';
 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/input/index.d.ts

@@ -2,7 +2,7 @@ import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
-}, attributes: Attributes & {
+} | void, attributes: Attributes & {
     state?: {
         active: boolean;
         error: string;

package/build/components/input/index.js

@@ -1,8 +1,8 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_0j57g2t2 = template_u1.template(`<input class='input' />`);
+const template_u1b = template_u0.template(`<input class='input' />`);
 class ReactiveObject_0j57g2t0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -25,19 +25,19 @@ class ReactiveObject_0j57g2t0 extends reactivity_u0.ReactiveObject {
 export default function (attributes) {
     let state = attributes.state || new ReactiveObject_0j57g2t0();
     return (() => {
-        let root_0j57g2t1 = template_0j57g2t2(), element_0j57g2t3 = root_0j57g2t1.firstChild;
-        template_u1.setProperties(element_0j57g2t3, this?.attributes);
-        template_u1.setProperties(element_0j57g2t3, attributes);
-        template_u1.setList(element_0j57g2t3, 'class', () => state.active && '--active');
-        template_u1.on(element_0j57g2t3, 'focusin', () => {
+        let root_u1a = template_u1b(), element_u1c = root_u1a.firstChild;
+        template_u0.setProperties(element_u1c, this?.attributes);
+        template_u0.setProperties(element_u1c, attributes);
+        template_u0.setList(element_u1c, 'class', () => state.active && '--active');
+        template_u0.on(element_u1c, 'focusin', () => {
             state.active = true;
         });
-        template_u1.on(element_0j57g2t3, 'focusout', () => {
+        template_u0.on(element_u1c, 'focusout', () => {
             state.active = false;
         });
-        template_u1.onrender(element_0j57g2t3, form.input.onrender(state));
-        template_u1.setProperty(element_0j57g2t3, 'type', (attributes.type || 'text'));
-        return root_0j57g2t1;
+        template_u0.onrender(element_u1c, form.input.onrender(state));
+        template_u0.setProperty(element_u1c, 'type', (attributes.type || 'text'));
+        return root_u1a;
     })();
 }
 ;

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);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}}
+@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);--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);min-height:calc(var(--padding-vertical) * 2 + var(--size));min-width:0;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));text-overflow:ellipsis;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);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/link/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.link{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-400);--padding-horizontal:0px;--padding-vertical:var(--size-400);--width:auto}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.link{background:var(--background);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, color var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center flex-start;display:flex;position:relative}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,all .3s cubic-bezier(.23,.65,.74,1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{opacity:0;padding:0 var(--padding-horizontal);white-space:nowrap;position:absolute;bottom:50%;right:50%;transform:translate(50%,125%)}}
+@layer components {.link{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--padding-horizontal:0px}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.text,.link{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.link{display:block}.link{background:var(--background);cursor:pointer;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start;position:relative}}
 /*$vite$:1*/

package/build/components/loading/index.js

@@ -1,10 +1,10 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import './scss/index.scss';
-const template_17hj0u91 = template_u1.template(`<div class='loading --border-width-700 --size-800' style='--border-color: var(--color-border-500);' >`);
+const template_u1e = template_u0.template(`<div class='loading --border-width-700 --size-800' style='--border-color: var(--color-border-500);' >`);
 export default (attributes) => {
     return (() => {
-        let root_17hj0u90 = template_17hj0u91(), element_17hj0u92 = root_17hj0u90.firstChild;
-        template_u1.setProperties(element_17hj0u92, attributes);
-        return root_17hj0u90;
+        let root_u1d = template_u1e(), element_u1f = root_u1d.firstChild;
+        template_u0.setProperties(element_u1f, attributes);
+        return root_u1d;
     })();
 };

package/build/components/modal/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--translateY:var(--margin-vertical);transition:opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);z-index:9;margin:auto}.modal:not(.--active){opacity:0;pointer-events:none;transform:translateY(var(--translateY))}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}}
+@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--translateY:var(--margin-vertical);transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);z-index:9;margin:auto}.modal:not(.--active){opacity:0;pointer-events:none;transform:translateY(var(--translateY))}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%}.modal-frame:not(.--active){display:none}}
 /*$vite$:1*/

package/build/components/normalize/scss/index.scss

@@ -1,3 +1,3 @@
 @layer components {/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
-*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}}
+*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}button,input,select,textarea{font-family:inherit;font-size:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}}
 /*$vite$:1*/