@esportsplus/ui 0.46.0 → 0.47.2

package/.github/workflows/bump.yml

@@ -1,4 +1,4 @@
-name: bump
+name: bump version
 
 on:
   push:
@@ -6,4 +6,4 @@ on:
 
 jobs:
   bump:
-    uses: esportsplus/workflows/.github/workflows/bump.yml@main
+    uses: esportsplus/typescript/.github/workflows/bump.yml@main

package/.github/workflows/dependabot.yml

@@ -9,4 +9,4 @@ jobs:
   automerge:
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-    uses: esportsplus/workflows/.github/workflows/dependabot.yml@main
+    uses: esportsplus/typescript/.github/workflows/dependabot.yml@main

package/.github/workflows/publish.yml

@@ -5,12 +5,12 @@ on:
     types: [published]
   workflow_dispatch:
   workflow_run:
-    workflows: [bump]
+    workflows: [bump version]
     types:
       - completed
 
 jobs:
   publish:
     secrets:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_PUBLISHING }}
-    uses: esportsplus/workflows/.github/workflows/publish.yml@main
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: esportsplus/typescript/.github/workflows/publish.yml@main

package/README.md

@@ -0,0 +1,288 @@
+# @esportsplus/ui
+
+A reactive component library built on compile-time template transformations. Provides typed, tree-shakeable UI components with integrated SCSS theming.
+
+## Installation
+
+```bash
+pnpm add @esportsplus/ui
+```
+
+## Dependencies
+
+- `@esportsplus/template` - Tagged template literals with compile-time transforms
+- `@esportsplus/reactivity` - Reactive state management
+- `@esportsplus/action` - Response/error handling
+- `@esportsplus/utilities` - Core utilities
+
+## Quick Start
+
+```typescript
+import { button, form, input, select } from '@esportsplus/ui';
+import { html } from '@esportsplus/template';
+
+// Simple component
+html`${button({}, 'Click Me')}`;
+
+// Form with validation
+html`
+  ${form.action({
+    action: async ({ input: data }) => {
+      const result = await api.submit(data);
+      return result.ok ? { errors: [] } : { errors: result.errors };
+    }
+  }, html`
+    ${input({ name: 'email', type: 'email' })}
+    ${button({}, 'Submit')}
+  `)}
+`;
+
+// Select with reactive state
+html`
+  ${select({
+    options: { a: 'Option A', b: 'Option B' },
+    selected: 'a'
+  }, (state) => html`Selected: ${state.selected}`)}
+`;
+```
+
+## Components
+
+### Form Controls
+| Component | Description | Variants |
+|-----------|-------------|----------|
+| `input` | Text input with validation state | - |
+| `textarea` | Multi-line text input | - |
+| `checkbox` | Checkbox with label | - |
+| `radio` | Radio button group | - |
+| `range` | Range slider | - |
+| `select` | Dropdown with custom options | - |
+| `switch` | Toggle switch | - |
+| `form` | Form wrapper | `form.action`, `form.input` |
+
+### Interactive
+| Component | Description | Variants |
+|-----------|-------------|----------|
+| `button` | Standard button | `button.hold` |
+| `tooltip` | Popup content | `tooltip.menu`, `tooltip.onclick`, `tooltip.onhover` |
+| `accordion` | Collapsible sections | - |
+| `clipboard` | Copy to clipboard | `clipboard.onclick`, `clipboard.write` |
+| `alert` | Notifications | error, info, success types |
+
+### Display
+| Component | Description |
+|-----------|-------------|
+| `counter` | Animated number with currency formatting |
+| `loader` | Loading spinner |
+| `loading` | Border loading indicator |
+| `typewriter` | Animated typing effect |
+| `highlight` | Viewport intersection highlight |
+| `ellipsis` | Animated dots |
+| `icon` | SVG sprite wrapper |
+| `number` | Number formatting |
+| `truncate` | Text truncation |
+| `json` | JSON display |
+
+### Layout
+| Component | Description |
+|-----------|-------------|
+| `scrollbar` | Custom scrollbar container |
+| `frame` | Scrollable frame |
+| `sidebar` | Side navigation |
+| `site` | Site wrapper |
+| `overlay` | Modal/overlay container |
+
+### Utility
+| Component | Description |
+|-----------|-------------|
+| `back` | Back navigation link |
+| `root` | Global event coordination (`root.onclick`) |
+| `template` | Template factory helper |
+
+## Component Patterns
+
+### Factory Pattern
+
+Components use `template.factory()` supporting flexible call signatures:
+
+```typescript
+// No arguments
+component()
+
+// Attributes only
+component({ class: 'custom' })
+
+// Content only
+component(html`<span>Content</span>`)
+
+// Both
+component({ class: 'custom' }, html`<span>Content</span>`)
+```
+
+### Reactive State
+
+Components can accept and return reactive state:
+
+```typescript
+import { reactive } from '@esportsplus/reactivity';
+
+let state = reactive({ active: false });
+
+accordion({ state }, html`
+  ${() => state.active ? 'Open' : 'Closed'}
+`);
+```
+
+### Form Integration
+
+```typescript
+form.action({
+  action: async ({ input, response }) => {
+    // input: parsed FormData with dot-notation support
+    // response: error handling utilities
+    return { errors: [] };
+  }
+}, content);
+
+// Input with error state
+form.input(element, { error: 'Required field' });
+```
+
+## Styling
+
+### CSS Layers
+
+Styles are organized into layers for proper cascade:
+
+```
+@layer normalize
+@layer components
+@layer themes
+@layer css-utilities
+```
+
+### Importing Styles
+
+```scss
+// All component styles
+@use '@esportsplus/ui/*.scss';
+
+// Specific component
+@use '@esportsplus/ui/button.scss';
+
+// CSS utilities
+@use '@esportsplus/ui/css-utilities.scss';
+
+// Design tokens
+@use '@esportsplus/ui/tokens.scss';
+
+// Theme
+@use '@esportsplus/ui/themes/dark/*.scss';
+```
+
+### Design Tokens
+
+Located in `tokens.scss`:
+
+- **Colors**: `--color-{name}-{300|400|500}` (black, white, red, green, blue, purple, yellow, grey)
+- **Sizing**: `--size-{300-800}` (12px-80px)
+- **Spacing**: `--spacing-{0-600}`
+- **Border**: `--border-radius-{100-900}`, `--border-width-{100-700}`
+- **Typography**: `--font-size-*`, `--font-weight-*`, `--line-height-*`
+
+### CSS Utilities
+
+```html
+<!-- Layout -->
+<div class="--flex --flex-center --gap-200">
+
+<!-- Spacing -->
+<div class="--margin-400 --padding-200">
+
+<!-- Typography -->
+<p class="--text-uppercase --color-grey-400">
+
+<!-- States -->
+<div class="--skeleton --disabled --hidden">
+```
+
+### Component Variables
+
+Each component exposes CSS custom properties:
+
+```scss
+.ui-button {
+  --background: var(--color-blue-400);
+  --color: var(--color-white);
+  --border-radius: var(--border-radius-300);
+  --padding-horizontal: 16px;
+  --padding-vertical: 8px;
+}
+```
+
+## Theming
+
+```typescript
+// JavaScript
+import '@esportsplus/ui/themes/dark';
+
+// SCSS
+@use '@esportsplus/ui/themes/dark/*.scss';
+```
+
+Themes override component variables. Create custom themes by overriding CSS custom properties.
+
+## Build
+
+```bash
+pnpm build         # Full build (SCSS + TypeScript)
+pnpm build:vite    # SCSS compilation only
+pnpm build:ts      # TypeScript compilation only
+```
+
+### Output Structure
+
+```
+build/
+├── components/
+│   ├── {component}/
+│   │   ├── index.js
+│   │   ├── index.d.ts
+│   │   └── scss/index.scss
+│   └── index.js
+├── css-utilities/
+├── themes/
+│   ├── dark/
+│   └── light/
+└── fonts/
+```
+
+## TypeScript
+
+Full type safety with zero `any` types:
+
+```typescript
+import type { Attributes } from '@esportsplus/template';
+
+// Components are generic
+template.factory<A extends Attributes, C>(fn);
+
+// State types are explicit
+type State = {
+  active: boolean;
+  error: string;
+};
+```
+
+## Performance
+
+- **Compile-time transforms**: Template expressions optimized at build
+- **Tree-shakeable**: Import only what you use
+- **WeakMap caching**: Memoized formatters and icons
+- **Object pooling**: Reused queue structures
+- **RAF batching**: Coalesced DOM updates
+- **CSS layers**: Efficient cascade resolution
+
+## License
+
+MIT

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

@@ -1,21 +1,21 @@
-import { Attributes } from '@esportsplus/template';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 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_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
+    <T extends template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
+    <T extends template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
+    (attributes: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>): ReturnType<(this: {
+        attributes?: template_a6aeaec5a75649bd8ec693d5230c50001.Attributes | undefined;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<template_a6aeaec5a75649bd8ec693d5230c50001.Attributes>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
 };
 export default _default;

package/build/components/accordion/index.js

@@ -1,34 +1,42 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50004 = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div><!--$--></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+}
 const OMIT = ['state'];
 let key = Symbol();
 export default template.factory(function (attributes, content) {
-    let ref, state = attributes.state || reactive({
-        active: 0
-    });
-    return html `
-            <div
-                ${omit(attributes, OMIT)}
-                ${{
-        class: () => {
+    let ref, state = attributes.state || new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002();
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c50003 = template_a6aeaec5a75649bd8ec693d5230c50004(), element_a6aeaec5a75649bd8ec693d5230c50005 = root_a6aeaec5a75649bd8ec693d5230c50003.firstChild, element_a6aeaec5a75649bd8ec693d5230c50006 = element_a6aeaec5a75649bd8ec693d5230c50005.firstChild;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50005, omit(attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50005, '', () => {
             return state.active && '--active';
-        },
-        onrender: (element) => {
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.onrender(element_a6aeaec5a75649bd8ec693d5230c50005, (element) => {
             (ref = element)[key] = state;
-        },
-        style: () => {
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.setStyle(element_a6aeaec5a75649bd8ec693d5230c50005, '', () => {
             let parent = ref.closest('accordion');
             if (parent && key in parent) {
                 parent[key].active = (+parent[key].active) + 1;
             }
             return state.active && `--max-height: ${ref.scrollHeight}`;
-        }
-    }}
-            >
-                ${content}
-            </div>
-        `;
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c50006, content);
+        return root_a6aeaec5a75649bd8ec693d5230c50003;
+    })();
 });

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

@@ -7,7 +7,7 @@ declare const _default: (attributes: Attributes & {
     "alert-messages"?: Attributes;
     "alert-message"?: Attributes;
 }) => {
-    content: Node;
+    content: DocumentFragment;
     deactivate: () => void;
     error: {
         (messages: Renderable<any>, seconds?: number): void;

package/build/components/alert/index.js

@@ -1,12 +1,55 @@
 import '@esportsplus/vite/global.d.ts';
-import { reactive } from '@esportsplus/reactivity';
-import { html, svg } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
+import { svg } from '@esportsplus/template';
 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_a6aeaec5a75649bd8ec693d5230c50009 = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div class='--flex-vertical'><!--$--></div>`);
+const template_a6aeaec5a75649bd8ec693d5230c5000d = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<p><!--$--></p>`);
+const template_a6aeaec5a75649bd8ec693d5230c5000h = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div class='--flex-start'><!--$--></div>`);
+const template_a6aeaec5a75649bd8ec693d5230c5000k = template_a6aeaec5a75649bd8ec693d5230c50001.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>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50007 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #messages;
+    #rerender = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
+    #type;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#messages = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](_p0);
+        this.#type = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](_p1);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+    get messages() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#messages);
+    }
+    set messages(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#messages, _v1);
+    }
+    get rerender() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#rerender);
+    }
+    set rerender(_v2) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#rerender, _v2);
+    }
+    get type() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#type);
+    }
+    set type(_v3) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#type, _v3);
+    }
+}
 const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
 let modifiers = {
     error: 'red',
@@ -53,12 +96,7 @@ function deactivate(state) {
     }, timeout);
 }
 export default (attributes) => {
-    let state = reactive({
-        active: false,
-        messages: new Set(),
-        rerender: 0,
-        type: ''
-    });
+    let state = new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50007(new Set(), '');
     const error = (messages, seconds = 0) => activate('error', messages, seconds, state);
     error.response = (response) => {
         if (response.ok) {
@@ -72,56 +110,43 @@ export default (attributes) => {
         }), 5);
     };
     return {
-        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>
-                            `;
+        content: (() => {
+            let root_a6aeaec5a75649bd8ec693d5230c5000j = template_a6aeaec5a75649bd8ec693d5230c5000k(), element_a6aeaec5a75649bd8ec693d5230c5000l = root_a6aeaec5a75649bd8ec693d5230c5000j.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000m = element_a6aeaec5a75649bd8ec693d5230c5000l.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000n = element_a6aeaec5a75649bd8ec693d5230c5000l.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c5000o = element_a6aeaec5a75649bd8ec693d5230c5000n.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000p = element_a6aeaec5a75649bd8ec693d5230c5000n.nextElementSibling.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c5000q = element_a6aeaec5a75649bd8ec693d5230c5000p.firstElementChild.firstChild;
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c5000l, ' --flex-row', () => state.active && '--active');
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000l, omit(attributes, OMIT));
+            new template_a6aeaec5a75649bd8ec693d5230c50001.EffectSlot(element_a6aeaec5a75649bd8ec693d5230c5000m, () => {
+                let type = state.type;
+                return (() => {
+                    let root_a6aeaec5a75649bd8ec693d5230c50008 = template_a6aeaec5a75649bd8ec693d5230c50009(), element_a6aeaec5a75649bd8ec693d5230c5000a = root_a6aeaec5a75649bd8ec693d5230c50008.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000b = element_a6aeaec5a75649bd8ec693d5230c5000a.firstChild;
+                    template_a6aeaec5a75649bd8ec693d5230c50001.setStyle(element_a6aeaec5a75649bd8ec693d5230c5000a, ';', `--color: var(--color-${modifiers[type]}-400);`);
+                    template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000b, icon({ class: '--size-500' }, type === 'error' ? e : check));
+                    return root_a6aeaec5a75649bd8ec693d5230c50008;
+                })();
+            });
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000n, attributes['alert-messages']);
+            new template_a6aeaec5a75649bd8ec693d5230c50001.EffectSlot(element_a6aeaec5a75649bd8ec693d5230c5000o, () => {
+                let message = attributes['alert-message'];
+                return state.rerender && [...state.messages].map((content) => {
+                    if (typeof content === 'string') {
+                        return (() => {
+                            let root_a6aeaec5a75649bd8ec693d5230c5000c = template_a6aeaec5a75649bd8ec693d5230c5000d(), element_a6aeaec5a75649bd8ec693d5230c5000e = root_a6aeaec5a75649bd8ec693d5230c5000c.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000f = element_a6aeaec5a75649bd8ec693d5230c5000e.firstChild;
+                            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000e, message);
+                            template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000f, content);
+                            return root_a6aeaec5a75649bd8ec693d5230c5000c;
+                        })();
+                    }
+                    return (() => {
+                        let root_a6aeaec5a75649bd8ec693d5230c5000g = template_a6aeaec5a75649bd8ec693d5230c5000h(), element_a6aeaec5a75649bd8ec693d5230c5000i = root_a6aeaec5a75649bd8ec693d5230c5000g.firstChild.firstChild;
+                        template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000i, content);
+                        return root_a6aeaec5a75649bd8ec693d5230c5000g;
+                    })();
+                });
             });
-        }}
-                </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>
-        `,
+            template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c5000p, 'click', () => deactivate(state));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000p, attributes['alert-close']);
+            template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000q, svg.sprite(close));
+            return root_a6aeaec5a75649bd8ec693d5230c5000j;
+        })(),
         deactivate: () => deactivate(state),
         error,
         info: (messages, seconds = 0) => activate('info', messages, seconds, state),

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

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

package/build/components/back/index.js

@@ -1,17 +1,17 @@
-import { html } from '@esportsplus/template';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 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_a6aeaec5a75649bd8ec693d5230c5000s = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<a
+ class='back link --padding-0px --flex-vertical'><!--$--><!--$--></a>`);
 export default template.factory(function (attributes, content) {
-    return html `
-            <a
-                class='back link --padding-0px --flex-vertical'
-                ${this.attributes}
-                ${attributes}
-            >
-                ${icon({ class: 'back-arrow --margin-right --margin-200' }, arrow)}
-                ${content}
-            </a>
-        `;
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c5000r = template_a6aeaec5a75649bd8ec693d5230c5000s(), element_a6aeaec5a75649bd8ec693d5230c5000t = root_a6aeaec5a75649bd8ec693d5230c5000r.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000u = element_a6aeaec5a75649bd8ec693d5230c5000t.firstChild, element_a6aeaec5a75649bd8ec693d5230c5000v = element_a6aeaec5a75649bd8ec693d5230c5000u.nextSibling;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000t, this.attributes);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c5000t, attributes);
+        template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000u, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
+        template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c5000v, content);
+        return root_a6aeaec5a75649bd8ec693d5230c5000r;
+    })();
 });