@esportsplus/ui 0.46.0 → 0.48.0

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

@@ -1,4 +1,4 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
+import { Attributes, Renderable } from '@esportsplus/template';
 type A = {
     timeout?: number;
     value: string;

package/build/components/clipboard/onclick.js

@@ -1,28 +1,28 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import write from './write.js';
+const template_ed8f776bb07a460eadcbcfe445975fdf13 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div><!--$--></div>`);
 const OMIT = ['timeout', 'value'];
 export default template.factory(function (attributes, content) {
     let state = reactive({
         copied: false
     }), timeout = attributes.timeout || 1000 * 2;
-    return html `
-            <div
-                ${omit(attributes, OMIT)}
-                onclick=${(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        write(attributes.value).then(() => {
-            state.copied = true;
-            setTimeout(() => {
-                state.copied = false;
-            }, timeout);
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf12 = template_ed8f776bb07a460eadcbcfe445975fdf13(), element_ed8f776bb07a460eadcbcfe445975fdf14 = root_ed8f776bb07a460eadcbcfe445975fdf12.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf15 = element_ed8f776bb07a460eadcbcfe445975fdf14.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf14, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf14, 'click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            write(attributes.value).then(() => {
+                state.copied = true;
+                setTimeout(() => {
+                    state.copied = false;
+                }, timeout);
+            });
         });
-    }}
-            >
-                ${() => content(state)}
-            </div>
-        `;
+        new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdf15, () => content(state));
+        return root_ed8f776bb07a460eadcbcfe445975fdf12;
+    })();
 });

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

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

package/build/components/counter/index.js

@@ -1,7 +1,11 @@
-import { effect, reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf17 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<span class='counter-character counter-character--symbol'><!--$--></span>`);
+const template_ed8f776bb07a460eadcbcfe445975fdf1a = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<span><!--$--></span>`);
+const template_ed8f776bb07a460eadcbcfe445975fdf1d = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class=' counter-character'><div class='counter-character-track'><span>9</span><!--$--><span>0</span></div></div>`);
+const template_ed8f776bb07a460eadcbcfe445975fdf1h = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='counter'><!--$--></div>`);
 const OMIT = ['currency', 'decimals', 'delay', 'max', 'state', 'suffix', 'value'];
 let formatters = {};
 export default (attributes) => {
@@ -12,8 +16,9 @@ export default (attributes) => {
             currency: currency || 'USD'
         }), rendering = true, state = reactive({
         length: 0,
+        test: () => 'sds',
         render: []
-    });
+    }), render = reactive([]);
     decimals ??= 2;
     effect(() => {
         if (api.value !== -1) {
@@ -40,41 +45,41 @@ export default (attributes) => {
                 padding--;
                 value = '0';
             }
-            state.render[i] = value;
+            render[i] = value;
         }
         if (rendering === true) {
             rendering = false;
             setTimeout(() => api.value = value, delay || 1000);
         }
     });
-    return html `
-        <div class='counter' ${omit(attributes, OMIT)}>
-            ${() => {
-        let n = state.length;
-        if (n === 0) {
-            return '';
-        }
-        return html.reactive(state.render, function (value, i) {
-            if (isNaN(parseInt(value, 10))) {
-                return html `
-                            <span class='counter-character counter-character--symbol'>
-                                ${value}
-                            </span>
-                        `;
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf1g = template_ed8f776bb07a460eadcbcfe445975fdf1h(), element_ed8f776bb07a460eadcbcfe445975fdf1i = root_ed8f776bb07a460eadcbcfe445975fdf1g.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf1j = element_ed8f776bb07a460eadcbcfe445975fdf1i.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf1i, omit(attributes, OMIT));
+        new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdf1j, () => {
+            let n = state.length;
+            if (n === 0) {
+                return '';
             }
-            return html `
-                        <div class=' counter-character' ${{
-                class: i > n - 3 && 'counter-character--fraction'
-            }}>
-                            <div class='counter-character-track' style='${`--value: ${value}`}'>
-                                <span>9</span>
-                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
-                                <span>0</span>
-                            </div>
-                        </div>
-                    `;
+            return new template_ed8f776bb07a460eadcbcfe445975fdf1.ArraySlot(render, function (value) {
+                if (isNaN(parseInt(value, 10))) {
+                    return (() => {
+                        let root_ed8f776bb07a460eadcbcfe445975fdf16 = template_ed8f776bb07a460eadcbcfe445975fdf17(), element_ed8f776bb07a460eadcbcfe445975fdf18 = root_ed8f776bb07a460eadcbcfe445975fdf16.firstChild.firstChild;
+                        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf18, value);
+                        return root_ed8f776bb07a460eadcbcfe445975fdf16;
+                    })();
+                }
+                return (() => {
+                    let root_ed8f776bb07a460eadcbcfe445975fdf1c = template_ed8f776bb07a460eadcbcfe445975fdf1d(), element_ed8f776bb07a460eadcbcfe445975fdf1e = root_ed8f776bb07a460eadcbcfe445975fdf1c.firstChild.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdf1f = element_ed8f776bb07a460eadcbcfe445975fdf1e.firstChild.nextSibling;
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf1e, ';', `--value: ${value}`);
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf1f, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
+                        let root_ed8f776bb07a460eadcbcfe445975fdf19 = template_ed8f776bb07a460eadcbcfe445975fdf1a(), element_ed8f776bb07a460eadcbcfe445975fdf1b = root_ed8f776bb07a460eadcbcfe445975fdf19.firstChild.firstChild;
+                        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf1b, value);
+                        return root_ed8f776bb07a460eadcbcfe445975fdf19;
+                    }));
+                    return root_ed8f776bb07a460eadcbcfe445975fdf1c;
+                })();
+            });
         });
-    }}
-        </div>
-    `;
+        return root_ed8f776bb07a460eadcbcfe445975fdf1g;
+    })();
 };

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

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

package/build/components/ellipsis/index.js

@@ -1,9 +1,8 @@
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import './scss/index.scss';
-export default (attributes) => html `
-    <div class='ellipsis' ${attributes}>
-        <span></span>
-        <span></span>
-        <span></span>
-    </div>
-`;
+const template_ed8f776bb07a460eadcbcfe445975fdf1l = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='ellipsis'><span></span><span></span><span></span></div>`);
+export default (attributes) => {
+    let root_ed8f776bb07a460eadcbcfe445975fdf1k = template_ed8f776bb07a460eadcbcfe445975fdf1l(), element_ed8f776bb07a460eadcbcfe445975fdf1m = root_ed8f776bb07a460eadcbcfe445975fdf1k.firstChild;
+    template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf1m, attributes);
+    return root_ed8f776bb07a460eadcbcfe445975fdf1k;
+};

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

@@ -11,5 +11,5 @@ declare const _default: <T extends Record<string, any>>(attributes: {
     state?: {
         processing: boolean;
     };
-} & Attributes, content: Renderable<any>) => Node;
+} & Attributes, content: Renderable<any>) => DocumentFragment;
 export default _default;

package/build/components/form/action.js

@@ -1,7 +1,9 @@
 import response from '@esportsplus/action';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import input from './input.js';
+const template_ed8f776bb07a460eadcbcfe445975fdf1o = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<form
+ class='form'><!--$--></form>`);
 const OMIT = ['action', 'state'];
 function parse(input) {
     let data = {};
@@ -27,20 +29,18 @@ function parse(input) {
 ;
 export default (attributes, content) => {
     let { action, state } = attributes;
-    return html `
-        <form
-            class='form'
-            ${omit(attributes, OMIT)}
-            ${{
-        onclick: function (event) {
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf1n = template_ed8f776bb07a460eadcbcfe445975fdf1o(), element_ed8f776bb07a460eadcbcfe445975fdf1p = root_ed8f776bb07a460eadcbcfe445975fdf1n.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf1q = element_ed8f776bb07a460eadcbcfe445975fdf1p.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf1p, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf1p, 'click', function (event) {
             let trigger = event.target;
             if (trigger?.type !== 'submit') {
                 return;
             }
             event.preventDefault();
             this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
-        },
-        onsubmit: async function (event) {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf1p, 'submit', async function (event) {
             event.preventDefault();
             if (state) {
                 state.processing = true;
@@ -59,10 +59,8 @@ export default (attributes, content) => {
             if (state) {
                 state.processing = false;
             }
-        }
-    }}
-        >
-            ${content}
-        </form>
-    `;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf1q, content);
+        return root_ed8f776bb07a460eadcbcfe445975fdf1n;
+    })();
 };

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

@@ -12,7 +12,7 @@ declare const _default: {
         state?: {
             processing: boolean;
         };
-    } & import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<any>) => Node;
+    } & import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<any>) => DocumentFragment;
     input: {
         get: (element?: import("@esportsplus/template").Element) => {
             error: string;

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

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

package/build/components/highlight/index.js

@@ -1,8 +1,9 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf1s = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='highlight'><!--$--></div>`);
 const OMIT = ['background'];
 let key = Symbol(), observer = null;
 export default template.factory((attributes, content) => {
@@ -28,21 +29,18 @@ export default template.factory((attributes, content) => {
     let state = reactive({
         highlight: 0
     });
-    return html `
-            <div class='highlight'
-                ${omit(attributes, OMIT)}
-                ${{
-        onrender: (element) => {
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf1r = template_ed8f776bb07a460eadcbcfe445975fdf1s(), element_ed8f776bb07a460eadcbcfe445975fdf1t = root_ed8f776bb07a460eadcbcfe445975fdf1r.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf1u = element_ed8f776bb07a460eadcbcfe445975fdf1t.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf1t, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf1t, (element) => {
             element[key] = state;
             observer.observe(element);
-        },
-        style: [
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf1t, '', [
             () => `--highlight: ${state.highlight}`,
             `--background: ${attributes.background}`,
-        ]
-    }}
-            >
-                ${content}
-            </div>
-        `;
+        ]);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf1u, content);
+        return root_ed8f776bb07a460eadcbcfe445975fdf1r;
+    })();
 });

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

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

package/build/components/icon/index.js

@@ -1,10 +1,13 @@
-import { html, svg } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { svg } from '@esportsplus/template';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf1w = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='icon'><!--$--></div>`);
 export default template.factory((attributes, icon) => {
-    return html `
-            <div class='icon' ${attributes}>
-                ${svg.sprite(icon)}
-            </div>
-        `;
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf1v = template_ed8f776bb07a460eadcbcfe445975fdf1w(), element_ed8f776bb07a460eadcbcfe445975fdf1x = root_ed8f776bb07a460eadcbcfe445975fdf1v.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf1y = element_ed8f776bb07a460eadcbcfe445975fdf1x.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf1x, attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf1y, svg.sprite(icon));
+        return root_ed8f776bb07a460eadcbcfe445975fdf1v;
+    })();
 });

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

@@ -1,4 +1,4 @@
-import { type Attributes } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
@@ -7,4 +7,4 @@ export default function (this: {
         active: boolean;
         error: string;
     };
-}): Node;
+}): DocumentFragment;

package/build/components/input/index.js

@@ -1,29 +1,29 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf20 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<input
+ class='input'
+ />`);
 export default function (attributes) {
     let state = attributes.state || reactive({
         active: false,
         error: ''
     });
-    return html `
-        <input
-            class='input'
-            ${this?.attributes}
-            ${attributes}
-            ${{
-        class: () => state.active && '--active',
-        onfocusin: () => {
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf1z = template_ed8f776bb07a460eadcbcfe445975fdf20(), element_ed8f776bb07a460eadcbcfe445975fdf21 = root_ed8f776bb07a460eadcbcfe445975fdf1z.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf21, this?.attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf21, attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf21, '', () => state.active && '--active');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf21, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf21, 'focusout', () => {
             state.active = false;
-        },
-        onrender: form.input.onrender(state),
-        type: (attributes.type || 'text')
-    }}
-        />
-    `;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf21, form.input.onrender(state));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf21, 'type', (attributes.type || 'text'));
+        return root_ed8f776bb07a460eadcbcfe445975fdf1z;
+    })();
 }
 ;

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

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

package/build/components/loader/index.js

@@ -1,8 +1,14 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf23 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='loader-content'><div
+ class='loader-logo text --flex-center --text-uppercase --text-600'
+ style='color: var(--color-grey-500);'><!--$--></div></div>`);
+const template_ed8f776bb07a460eadcbcfe445975fdf28 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='loader '><div
+ class='loader '><!--$--></div></div>`);
 const OMIT = ['loader-content', 'loader-logo'];
 export default template.factory((attributes, content) => {
     let state = reactive({
@@ -15,50 +21,40 @@ export default template.factory((attributes, content) => {
             return;
         }
         let i = 0;
-        return html `
-                <div
-                    class='loader ${() => state.load && 'loader--load'}'
-                    onanimationend=${(e) => {
-            i++;
-            if (e.animationName === 'move' && i > 1) {
-                state.remove = true;
-            }
-        }}
-                    ${omit(attributes, OMIT)}
-                >
-                    <div
-                        class='loader ${() => state.load && 'loader--load'}'
-                        ${!content && {
-            onconnect: () => {
-                state.load = true;
-            }
-        }}
-                        ${attributes.loader}
-                    >
-                        ${content && html `
-                            <div class='loader-content' ${attributes['loader-content']}>
-                                <div
-                                    class='loader-logo text --flex-center --text-uppercase --text-600'
-                                    style='color: var(--color-grey-500);'
-                                    ${attributes['loader-logo']}
-                                    ${{
-            class: () => state.scale && 'loader-logo--scale',
-            onanimationend: ({ animationName: name }) => {
-                if (name === 'scale') {
+        return (() => {
+            let root_ed8f776bb07a460eadcbcfe445975fdf27 = template_ed8f776bb07a460eadcbcfe445975fdf28(), element_ed8f776bb07a460eadcbcfe445975fdf29 = root_ed8f776bb07a460eadcbcfe445975fdf27.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2a = element_ed8f776bb07a460eadcbcfe445975fdf29.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdf2b = element_ed8f776bb07a460eadcbcfe445975fdf2a.firstChild;
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf29, ' ', () => state.load && 'loader--load');
+            template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf29, 'animationend', (e) => {
+                i++;
+                if (e.animationName === 'move' && i > 1) {
+                    state.remove = true;
+                }
+            });
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf29, omit(attributes, OMIT));
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf2a, ' ', () => state.load && 'loader--load');
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2a, !content && {
+                onconnect: () => {
                     state.load = true;
                 }
-            },
-            onconnect: () => {
-                state.scale = true;
-            }
-        }}
-                                >
-                                    ${content}
-                                </div>
-                            </div>
-                        `}
-                    </div>
-                </div>
-            `;
+            });
+            template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2a, attributes.loader);
+            template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf2b, content && (() => {
+                let root_ed8f776bb07a460eadcbcfe445975fdf22 = template_ed8f776bb07a460eadcbcfe445975fdf23(), element_ed8f776bb07a460eadcbcfe445975fdf24 = root_ed8f776bb07a460eadcbcfe445975fdf22.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf25 = element_ed8f776bb07a460eadcbcfe445975fdf24.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdf26 = element_ed8f776bb07a460eadcbcfe445975fdf25.firstChild;
+                template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf24, attributes['loader-content']);
+                template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf25, attributes['loader-logo']);
+                template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf25, '', () => state.scale && 'loader-logo--scale');
+                template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf25, 'animationend', ({ animationName: name }) => {
+                    if (name === 'scale') {
+                        state.load = true;
+                    }
+                });
+                template_ed8f776bb07a460eadcbcfe445975fdf1.onconnect(element_ed8f776bb07a460eadcbcfe445975fdf25, () => {
+                    state.scale = true;
+                });
+                template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf26, content);
+                return root_ed8f776bb07a460eadcbcfe445975fdf22;
+            })());
+            return root_ed8f776bb07a460eadcbcfe445975fdf27;
+        })();
     };
 });

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

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