@esportsplus/ui 0.48.6 → 0.49.0

package/README.md

@@ -10,7 +10,7 @@ pnpm add @esportsplus/ui
 
 ## Dependencies
 
-- `@esportsplus/template` - Tagged template literals with compile-time transforms and reactive state management
+- `@esportsplus/frontend` - Tagged template literals with compile-time transforms and reactive state management
 - `@esportsplus/action` - Response/error handling
 - `@esportsplus/utilities` - Core utilities
 
@@ -18,7 +18,7 @@ pnpm add @esportsplus/ui
 
 ```typescript
 import { button, form, input, select } from '@esportsplus/ui';
-import { html } from '@esportsplus/template';
+import { html } from '@esportsplus/frontend';
 
 // Simple component
 html`${button({}, 'Click Me')}`;
@@ -123,7 +123,7 @@ component({ class: 'custom' }, html`<span>Content</span>`)
 Components can accept and return reactive state:
 
 ```typescript
-import { reactive } from '@esportsplus/template';
+import { reactive } from '@esportsplus/frontend';
 
 let state = reactive({ active: false });
 
@@ -261,7 +261,7 @@ build/
 Full type safety with zero `any` types:
 
 ```typescript
-import type { Attributes } from '@esportsplus/template';
+import type { Attributes } from '@esportsplus/frontend';
 
 // Components are generic
 template.factory<A extends Attributes, C>(fn);

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

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

package/build/components/accordion/index.js

@@ -1,32 +1,33 @@
-import * as template_3ea7bdb36b1e42ed846a8dc5465fdb951 from '@esportsplus/template';
-import { reactive } from '@esportsplus/template';
+import { html, reactive } from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_3ea7bdb36b1e42ed846a8dc5465fdb953 = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div><!--$--></div>`);
 const OMIT = ['state'];
 let key = Symbol();
 export default template.factory(function (attributes, content) {
     let ref, state = attributes.state || reactive({
         active: 0
     });
-    return (() => {
-        let root_3ea7bdb36b1e42ed846a8dc5465fdb952 = template_3ea7bdb36b1e42ed846a8dc5465fdb953(), element_3ea7bdb36b1e42ed846a8dc5465fdb954 = root_3ea7bdb36b1e42ed846a8dc5465fdb952.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb955 = element_3ea7bdb36b1e42ed846a8dc5465fdb954.firstChild;
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb954, omit(attributes, OMIT), {});
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb954, 'class', '', () => {
+    return html `
+            <div
+                ${omit(attributes, OMIT)}
+                ${{
+        class: () => {
             return state.active && '--active';
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.onrender(element_3ea7bdb36b1e42ed846a8dc5465fdb954, (element) => {
+        },
+        onrender: (element) => {
             (ref = element)[key] = state;
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb954, 'style', '', () => {
+        },
+        style: () => {
             let parent = ref.closest('accordion');
             if (parent && key in parent) {
                 parent[key].active = (+parent[key].active) + 1;
             }
             return state.active && `--max-height: ${ref.scrollHeight}`;
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb955, content);
-        return root_3ea7bdb36b1e42ed846a8dc5465fdb952;
-    })();
+        }
+    }}
+            >
+                ${content}
+            </div>
+        `;
 });

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

@@ -1,6 +1,6 @@
 import '@esportsplus/vite/global.d.ts';
 import { Response } from '@esportsplus/action';
-import { Attributes, Renderable } from '@esportsplus/template';
+import { Attributes, Renderable } from '@esportsplus/frontend';
 import './scss/index.scss';
 declare const _default: (attributes: Attributes & {
     "alert-close"?: Attributes;

package/build/components/alert/index.js

@@ -1,16 +1,11 @@
 import '@esportsplus/vite/global.d.ts';
-import * as template_3ea7bdb36b1e42ed846a8dc5465fdb951 from '@esportsplus/template';
-import { reactive, svg } from '@esportsplus/template';
+import { html, reactive, svg } from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import { icon } from '@esportsplus/ui';
 import check from './svg/check.svg';
 import close from './svg/close.svg';
 import e from './svg/error.svg';
 import './scss/index.scss';
-const template_3ea7bdb36b1e42ed846a8dc5465fdb957 = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div class='--flex-vertical'><!--$--></div>`);
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95b = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<p><!--$--></p>`);
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95f = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div class='--flex-start'><!--$--></div>`);
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95i = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div class='alert anchor anchor--n  --flex-row'><!--$--><div class='alert-messages --flex-column --flex-fill'><!--$--></div><div class="--flex-vertical"><div class='alert-close button --padding-300'><div class="icon" style='--size: 14px;'><!--$--></div></div></div></div>`);
 const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
 let modifiers = {
     error: 'red',
@@ -76,43 +71,56 @@ export default (attributes) => {
         }), 5);
     };
     return {
-        content: (() => {
-            let root_3ea7bdb36b1e42ed846a8dc5465fdb95h = template_3ea7bdb36b1e42ed846a8dc5465fdb95i(), element_3ea7bdb36b1e42ed846a8dc5465fdb95j = root_3ea7bdb36b1e42ed846a8dc5465fdb95h.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95k = element_3ea7bdb36b1e42ed846a8dc5465fdb95j.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95l = element_3ea7bdb36b1e42ed846a8dc5465fdb95j.firstElementChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95m = element_3ea7bdb36b1e42ed846a8dc5465fdb95l.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95n = element_3ea7bdb36b1e42ed846a8dc5465fdb95l.nextElementSibling.firstElementChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95o = element_3ea7bdb36b1e42ed846a8dc5465fdb95n.firstElementChild.firstChild;
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb95j, 'class', '--flex-row', () => state.active && '--active');
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95j, omit(attributes, OMIT), { "class": "--flex-row" });
-            new template_3ea7bdb36b1e42ed846a8dc5465fdb951.EffectSlot(element_3ea7bdb36b1e42ed846a8dc5465fdb95k, () => {
-                let type = state.type;
-                return (() => {
-                    let root_3ea7bdb36b1e42ed846a8dc5465fdb956 = template_3ea7bdb36b1e42ed846a8dc5465fdb957(), element_3ea7bdb36b1e42ed846a8dc5465fdb958 = root_3ea7bdb36b1e42ed846a8dc5465fdb956.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb959 = element_3ea7bdb36b1e42ed846a8dc5465fdb958.firstChild;
-                    template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb958, 'style', '', `--color: var(--color-${modifiers[type]}-400);`);
-                    template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb959, icon({ class: '--size-500' }, type === 'error' ? e : check));
-                    return root_3ea7bdb36b1e42ed846a8dc5465fdb956;
-                })();
+        content: html `
+            <div
+                class='alert anchor anchor--n ${() => state.active && '--active'} --flex-row'
+                ${omit(attributes, OMIT)}
+            >
+                ${() => {
+            let type = state.type;
+            return html `
+                        <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
+                            ${icon({ class: '--size-500' }, type === 'error' ? e : check)}
+                        </div>
+                    `;
+        }}
+
+                <div
+                    class='alert-messages --flex-column --flex-fill'
+                    ${attributes['alert-messages']}
+                >
+                    ${() => {
+            let message = attributes['alert-message'];
+            return state.rerender && [...state.messages].map((content) => {
+                if (typeof content === 'string') {
+                    return html `
+                                    <p ${message}>
+                                        ${content}
+                                    </p>
+                                `;
+                }
+                return html `
+                                <div class='--flex-start'>
+                                    ${content}
+                                </div>
+                            `;
             });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95l, attributes['alert-messages'], { "class": "--flex-fill" });
-            new template_3ea7bdb36b1e42ed846a8dc5465fdb951.EffectSlot(element_3ea7bdb36b1e42ed846a8dc5465fdb95m, () => {
-                let message = attributes['alert-message'];
-                return state.rerender && [...state.messages].map((content) => {
-                    if (typeof content === 'string') {
-                        return (() => {
-                            let root_3ea7bdb36b1e42ed846a8dc5465fdb95a = template_3ea7bdb36b1e42ed846a8dc5465fdb95b(), element_3ea7bdb36b1e42ed846a8dc5465fdb95c = root_3ea7bdb36b1e42ed846a8dc5465fdb95a.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95d = element_3ea7bdb36b1e42ed846a8dc5465fdb95c.firstChild;
-                            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95c, message, {});
-                            template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb95d, content);
-                            return root_3ea7bdb36b1e42ed846a8dc5465fdb95a;
-                        })();
-                    }
-                    return (() => {
-                        let root_3ea7bdb36b1e42ed846a8dc5465fdb95e = template_3ea7bdb36b1e42ed846a8dc5465fdb95f(), element_3ea7bdb36b1e42ed846a8dc5465fdb95g = root_3ea7bdb36b1e42ed846a8dc5465fdb95e.firstChild.firstChild;
-                        template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb95g, content);
-                        return root_3ea7bdb36b1e42ed846a8dc5465fdb95e;
-                    })();
-                });
-            });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95n, 'click', () => deactivate(state));
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95n, attributes['alert-close'], { "class": "--padding-300" });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb95o, svg.sprite(close));
-            return root_3ea7bdb36b1e42ed846a8dc5465fdb95h;
-        })(),
+        }}
+                </div>
+
+                <div class="--flex-vertical">
+                    <div
+                        class='alert-close button --padding-300'
+                        onclick='${() => deactivate(state)}'
+                        ${attributes['alert-close']}
+                    >
+                        <div class="icon" style='--size: 14px;'>
+                            ${svg.sprite(close)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `,
         deactivate: () => deactivate(state),
         error,
         info: (messages, seconds = 0) => activate('info', messages, seconds, state),

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

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

package/build/components/back/index.js

@@ -1,16 +1,17 @@
-import * as template_3ea7bdb36b1e42ed846a8dc5465fdb951 from '@esportsplus/template';
+import { html } from '@esportsplus/frontend';
 import icon from '../../components/icon/index.js';
 import template from '../../components/template/index.js';
 import arrow from './svg/arrow.svg';
 import './scss/index.scss';
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95q = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<a class='back link --padding-0px --flex-vertical'><!--$--><!--$--></a>`);
 export default template.factory(function (attributes, content) {
-    return (() => {
-        let root_3ea7bdb36b1e42ed846a8dc5465fdb95p = template_3ea7bdb36b1e42ed846a8dc5465fdb95q(), element_3ea7bdb36b1e42ed846a8dc5465fdb95r = root_3ea7bdb36b1e42ed846a8dc5465fdb95p.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95s = element_3ea7bdb36b1e42ed846a8dc5465fdb95r.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95t = element_3ea7bdb36b1e42ed846a8dc5465fdb95s.nextSibling;
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95r, this.attributes, { "class": "--flex-vertical" });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95r, attributes, { "class": "--flex-vertical" });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb95s, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.slot(element_3ea7bdb36b1e42ed846a8dc5465fdb95t, content);
-        return root_3ea7bdb36b1e42ed846a8dc5465fdb95p;
-    })();
+    return html `
+            <a
+                class='back link --padding-0px --flex-vertical'
+                ${this.attributes}
+                ${attributes}
+            >
+                ${icon({ class: 'back-arrow --margin-right --margin-200' }, arrow)}
+                ${content}
+            </a>
+        `;
 });

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

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

package/build/components/button/index.js

@@ -1,8 +1,6 @@
-import * as template_3ea7bdb36b1e42ed846a8dc5465fdb951 from '@esportsplus/template';
-import { reactive } from '@esportsplus/template';
+import { html, reactive } from '@esportsplus/frontend';
 import template from '../template/index.js';
 import './scss/index.scss';
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95v = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div class='button '><!--$--></div>`);
 const hold = template.factory(function (attributes, content) {
     let end = () => {
         if (!state.complete) {
@@ -12,34 +10,36 @@ const hold = template.factory(function (attributes, content) {
         complete: false,
         holding: false
     });
-    return (() => {
-        let root_3ea7bdb36b1e42ed846a8dc5465fdb95u = template_3ea7bdb36b1e42ed846a8dc5465fdb95v(), element_3ea7bdb36b1e42ed846a8dc5465fdb95w = root_3ea7bdb36b1e42ed846a8dc5465fdb95u.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb95x = element_3ea7bdb36b1e42ed846a8dc5465fdb95w.firstChild;
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'class', '', () => state.holding && 'button--holding');
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'class', '', () => state.complete && '--active');
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'mousedown', (e) => {
-            e.preventDefault();
-            state.holding = true;
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, attributes, { "class": "" });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'animationend', (e) => {
+    return html `
+            <div
+                class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
+                onmousedown='${(e) => {
+        e.preventDefault();
+        state.holding = true;
+    }}'
+                ${attributes}
+                ${{
+        onanimationend: (e) => {
             if (e.animationName === 'buttonHolding') {
                 state.complete = true;
             }
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'click', () => { });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'mousedown', (e) => {
+        },
+        onclick: () => { },
+        onmousedown: (e) => {
             e.preventDefault();
             state.holding = true;
-        });
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'mouseup', end);
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'touchend', end);
-        template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb95w, 'touchstart', (e) => {
+        },
+        onmouseup: end,
+        ontouchend: end,
+        ontouchstart: (e) => {
             e.preventDefault();
             state.holding = true;
-        });
-        new template_3ea7bdb36b1e42ed846a8dc5465fdb951.EffectSlot(element_3ea7bdb36b1e42ed846a8dc5465fdb95x, () => content(state));
-        return root_3ea7bdb36b1e42ed846a8dc5465fdb95u;
-    })();
+        }
+    }}
+            >
+                ${() => content(state)}
+            </div>
+        `;
 });
 export default { hold };
 export { hold };

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

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

package/build/components/checkbox/index.js

@@ -1,9 +1,7 @@
-import * as template_3ea7bdb36b1e42ed846a8dc5465fdb951 from '@esportsplus/template';
-import { reactive, root } from '@esportsplus/template';
+import { html, reactive, root } from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
-const template_3ea7bdb36b1e42ed846a8dc5465fdb95z = template_3ea7bdb36b1e42ed846a8dc5465fdb951.template(`<div><input></div>`);
 const OMIT = ['checked', 'value'];
 const factory = (type) => {
     function template(attributes) {
@@ -14,22 +12,26 @@ const factory = (type) => {
         if (attributes?.checked) {
             state.active = true;
         }
-        return (() => {
-            let root_3ea7bdb36b1e42ed846a8dc5465fdb95y = template_3ea7bdb36b1e42ed846a8dc5465fdb95z(), element_3ea7bdb36b1e42ed846a8dc5465fdb9510 = root_3ea7bdb36b1e42ed846a8dc5465fdb95y.firstChild, element_3ea7bdb36b1e42ed846a8dc5465fdb9511 = element_3ea7bdb36b1e42ed846a8dc5465fdb9510.firstElementChild;
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb9510, 'class', '', type);
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb9510, 'class', '', () => state.active && '--active');
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb9510, this?.attributes && omit(this.attributes, OMIT), { "class": "" });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperties(element_3ea7bdb36b1e42ed846a8dc5465fdb9510, attributes && omit(attributes, OMIT), { "class": "" });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperty(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, 'checked', attributes?.checked || root(() => state.active));
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setList(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, 'class', '', `${type}-tag`);
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.delegate(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, 'change', (e) => {
+        return html `
+            <div
+                class='${type} ${() => state.active && '--active'}'
+                ${this?.attributes && omit(this.attributes, OMIT)}
+                ${attributes && omit(attributes, OMIT)}
+            >
+                <input
+                    ${{
+            checked: attributes?.checked || root(() => state.active),
+            class: `${type}-tag`,
+            onchange: (e) => {
                 state.active = e.target.checked;
-            });
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.onrender(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, form.input.onrender(state));
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperty(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, 'type', type === 'radio' ? 'radio' : 'checkbox');
-            template_3ea7bdb36b1e42ed846a8dc5465fdb951.setProperty(element_3ea7bdb36b1e42ed846a8dc5465fdb9511, 'value', attributes?.value || 1);
-            return root_3ea7bdb36b1e42ed846a8dc5465fdb95y;
-        })();
+            },
+            onrender: form.input.onrender(state),
+            type: type === 'radio' ? 'radio' : 'checkbox',
+            value: attributes?.value || 1
+        }}
+                >
+            </div>
+        `;
     }
     return template;
 };