@esportsplus/ui 0.18.0 → 0.19.0

package/build/components/tooltip/index.js

@@ -1,108 +1,5 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, toArray } from '@esportsplus/utilities';
-import { root } from '@esportsplus/ui';
-import template from '../../components/template/index.js';
+import menu from './menu.js';
+import onclick from './onclick.js';
+import onhover from './onhover.js';
 import './scss/index.scss';
-let parent = null, queue = [], running = false, scheduled = false;
-function frame() {
-    if (running) {
-        return;
-    }
-    running = true;
-    let item, keep;
-    while (item = queue.pop()) {
-        if (parent === item.tooltip) {
-            keep = item;
-            continue;
-        }
-        item.fn();
-    }
-    if (keep) {
-        queue.push(keep);
-    }
-    running = false;
-}
-const menu = template.factory((attributes, content) => onclick(omit(attributes, ['options', 'option', 'tooltip-content']), html `
-            ${content}
-
-            <div
-                class='tooltip-content ${`tooltip-content--${attributes['tooltip-content']?.direction || 'nw'}`}'
-                ${omit(attributes['tooltip-content'], ['direction'])}
-            >
-                ${attributes.options.map((option) => html `
-                    <div
-                        class='link --width-full'
-                        ${omit(option, ['content'])}
-                        ${attributes.option}
-                    >
-                        ${option.content}
-                    </div>
-                `)}
-            </div>
-        `));
-const onclick = template.factory((attributes, content) => {
-    let state = attributes.state || reactive({ active: false });
-    attributes.class = toArray(attributes.class);
-    attributes.class.push(() => {
-        return state.active && '--active';
-    });
-    attributes.onclick = function (e) {
-        let active = true, node = e.target;
-        if (this === node || (attributes.toggle && this.contains(node))) {
-            active = !state.active;
-        }
-        if (parent !== this && !parent?.contains(this)) {
-            parent = this.parentElement?.closest('.tooltip');
-        }
-        frame();
-        if (parent === this) {
-            parent = null;
-            return;
-        }
-        state.active = active;
-        if (active) {
-            queue.push({
-                fn: () => state.active = false,
-                tooltip: this
-            });
-        }
-        if (!scheduled) {
-            root.onclick.push(() => {
-                frame();
-                scheduled = false;
-            });
-            scheduled = true;
-        }
-    };
-    return html `
-            <div
-                class='tooltip'
-                ${omit(attributes, ['state', 'toggle'])}
-            >
-                ${content}
-            </div>
-        `;
-});
-const onhover = template.factory((attributes, content) => {
-    let state = attributes.state || reactive({ active: false });
-    attributes.class = toArray(attributes.class);
-    attributes.class.push(() => {
-        return state.active && '--active';
-    });
-    attributes.onmouseover = () => {
-        state.active = true;
-    };
-    attributes.onmouseout = () => {
-        state.active = false;
-    };
-    return html `
-            <div
-                class='tooltip'
-                ${omit(attributes, ['active', 'state', 'toggle'])}
-            >
-                ${content}
-            </div>
-        `;
-});
 export default { menu, onclick, onhover };

package/build/components/tooltip/menu.d.ts

@@ -0,0 +1,20 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type A = Attributes & {
+    options: (Attributes & {
+        content: Renderable<unknown>;
+    })[];
+    option?: Attributes;
+    state?: {
+        active: boolean;
+    };
+    toggle?: boolean;
+    'tooltip-content': Attributes & {
+        direction?: string;
+    };
+};
+declare const _default: {
+    (): Renderable<unknown>;
+    (content: Renderable<unknown>): Renderable<unknown>;
+    (attributes: A, content: Renderable<unknown>): Renderable<unknown>;
+};
+export default _default;

package/build/components/tooltip/menu.js

@@ -0,0 +1,28 @@
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
+import onclick from './onclick.js';
+const OMIT = ['options', 'option', 'state', 'toggle', 'tooltip-content'];
+const OMIT_OPTION = ['content'];
+const OMIT_TOOLTIP_CONTENT = ['direction'];
+export default template.factory((attributes, content) => {
+    let options = attributes.options, option = attributes.option, tooltipContent = attributes?.['tooltip-content'], tooltipContentDirection = tooltipContent?.direction || 'nw';
+    return onclick(omit(attributes, OMIT), html `
+                ${content}
+
+                <div
+                    class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
+                    ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                >
+                    ${options.map((o) => html `
+                        <div
+                            class='link --width-full'
+                            ${omit(o, OMIT_OPTION)}
+                            ${option}
+                        >
+                            ${o.content}
+                        </div>
+                    `)}
+                </div>
+            `);
+});

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

@@ -0,0 +1,124 @@
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: {
+        class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
+        style?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
+    } & {
+        onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
+        onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+        onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
+    } & {
+        [key: `aria-${string}`]: string | number | boolean | undefined;
+        [key: `data-${string}`]: string | undefined;
+        onconnect?: (element: import("@esportsplus/template").Element) => void;
+        ondisconnect?: (element: import("@esportsplus/template").Element) => void;
+        onrender?: (element: import("@esportsplus/template").Element) => void;
+    } & Record<PropertyKey, unknown> & {
+        state?: {
+            active: boolean;
+        };
+        toggle?: boolean;
+    }, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+};
+export default _default;

package/build/components/tooltip/onclick.js

@@ -0,0 +1,67 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import { root } from '@esportsplus/ui';
+import template from '../../components/template/index.js';
+const OMIT = ['state', 'toggle'];
+let parent = null, queue = [], running = false, scheduled = false;
+function frame() {
+    if (running) {
+        return;
+    }
+    running = true;
+    let item, keep;
+    while (item = queue.pop()) {
+        if (parent === item.tooltip) {
+            keep = item;
+            continue;
+        }
+        item.fn();
+    }
+    if (keep) {
+        queue.push(keep);
+    }
+    running = false;
+}
+export default template.factory((attributes, content) => {
+    let state = attributes.state || reactive({ active: false }), toggle = attributes.toggle || false;
+    return html `
+            <div
+                class='tooltip'
+                ${omit(attributes, OMIT)}
+                ${{
+        class: () => state.active && '--active',
+        onclick: function (e) {
+            let active = true, node = e.target;
+            if (this === node || (toggle && this.contains(node))) {
+                active = !state.active;
+            }
+            if (parent !== this && !parent?.contains(this)) {
+                parent = this.parentElement?.closest('.tooltip');
+            }
+            frame();
+            if (parent === this) {
+                parent = null;
+                return;
+            }
+            state.active = active;
+            if (active) {
+                queue.push({
+                    fn: () => state.active = false,
+                    tooltip: this
+                });
+            }
+            if (!scheduled) {
+                root.onclick.push(() => {
+                    frame();
+                    scheduled = false;
+                });
+                scheduled = true;
+            }
+        }
+    }}
+            >
+                ${content}
+            </div>
+        `;
+});

package/build/components/tooltip/onhover.d.ts

@@ -0,0 +1,7 @@
+import { Attributes } from '@esportsplus/template';
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+};
+export default _default;

package/build/components/tooltip/onhover.js

@@ -0,0 +1,25 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
+const OMIT = ['state'];
+export default template.factory((attributes, content) => {
+    let state = attributes.state || reactive({ active: false });
+    return html `
+            <div
+                class='tooltip'
+                ${omit(attributes, OMIT)}
+                ${{
+        class: () => state.active && '--active',
+        onmouseover: () => {
+            state.active = true;
+        },
+        onmouseout: () => {
+            state.active = false;
+        }
+    }}
+            >
+                ${content}
+            </div>
+        `;
+});

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

@@ -1,9 +1,7 @@
 import './scss/index.scss';
-declare const _default: (content: string[]) => {
-    attributes: {
-        class: string;
-        onmount: () => void;
-    };
-    html: () => string | import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: string[]): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("@esportsplus/template").Attributes, content: string[]): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/typewriter/index.js

@@ -1,42 +1,43 @@
 import { html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
 const EMPTY_NODE = html ` `;
-export default (content) => {
+export default template.factory(function (_, content) {
     let state = reactive({ text: '' });
-    return {
-        attributes: {
-            class: 'typewriter',
-            onmount: () => {
-                let character = 0, i = 0, isWriting = true, write = content[i];
-                function play() {
-                    setTimeout(() => {
-                        state.text = write.slice(0, character);
-                        if (isWriting) {
-                            if (character > write.length) {
-                                isWriting = false;
-                                setTimeout(play, 2000);
-                                return;
-                            }
-                            else {
-                                character++;
-                            }
+    return html `
+            <div class='typewriter' ${{
+        onconnect: () => {
+            let character = 0, i = 0, isWriting = true, write = content[i];
+            function play() {
+                setTimeout(() => {
+                    state.text = write.slice(0, character);
+                    if (isWriting) {
+                        if (character > write.length) {
+                            isWriting = false;
+                            setTimeout(play, 2000);
+                            return;
                         }
                         else {
-                            if (character === 0) {
-                                isWriting = true;
-                                write = content[++i] || content[i = 0];
-                            }
-                            else {
-                                character--;
-                            }
+                            character++;
                         }
-                        play();
-                    }, isWriting ? 64 : 32);
-                }
-                play();
+                    }
+                    else {
+                        if (character === 0) {
+                            isWriting = true;
+                            write = content[++i] || content[i = 0];
+                        }
+                        else {
+                            character--;
+                        }
+                    }
+                    play();
+                }, isWriting ? 64 : 32);
             }
-        },
-        html: () => state.text || EMPTY_NODE
-    };
-};
+            play();
+        }
+    }}>
+                ${() => state.text || EMPTY_NODE}
+            </div>
+        `;
+});

package/package.json

@@ -1,21 +1,22 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/action": "^0.0.57",
-    "@esportsplus/reactivity": "^0.4.5",
-    "@esportsplus/template": "^0.10.2",
-    "@esportsplus/utilities": "^0.15.0",
+    "@esportsplus/action": "^0.0.58",
+    "@esportsplus/queue": "^0.1.0",
+    "@esportsplus/reactivity": "^0.16.7",
+    "@esportsplus/template": "^0.19.5",
+    "@esportsplus/utilities": "^0.22.1",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.1",
-    "@types/node": "^24.1.0",
+    "@esportsplus/typescript": "^0.9.2",
+    "@types/node": "^24.3.0",
     "autoprefixer": "^10.4.21",
     "glob": "^11.0.3",
     "lightningcss": "^1.30.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.89.2",
-    "vite": "^7.0.6"
+    "sass": "^1.90.0",
+    "vite": "^7.1.2"
   },
   "exports": {
     "./css-utilities": {
@@ -47,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/accordion/index.ts

@@ -1,36 +1,51 @@
 import { reactive } from '@esportsplus/reactivity';
+import { html, Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '~/components/template';
 import './scss/index.scss';
 
 
+type A = Attributes & { state?: { active: boolean | number } };
+
 type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
 
 
+const OMIT = ['state'];
+
+
 let key = Symbol();
 
 
-export default () => {
-    let state = reactive({
-            active: 0 as boolean | number
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element: Accordion) => {
-                element[key] = state;
-            },
-            style: (element: Accordion) => {
-                let parent = element.closest('accordion') as Accordion | null;
-
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
-        },
-        state: state as ReturnType<typeof reactive<{ active: boolean }>>
-    };
-}
+export default template.factory(
+    function(attributes: A, content) {
+        let ref: Accordion,
+            state = attributes.state || reactive({
+                active: 0
+            });
+
+        return html`
+            <div
+                ${omit(attributes, OMIT)}
+                ${{
+                    class: () => {
+                        return state.active && '--active';
+                    },
+                    onrender: (element) => {
+                        ( ref = element as Accordion )[key] = state;
+                    },
+                    style: () => {
+                        let parent = ref.closest<Accordion>('accordion');
+
+                        if (parent && key in parent) {
+                            parent[key].active = (+parent[key].active) + 1;
+                        }
+
+                        return state.active && `--max-height: ${ref.scrollHeight}`;
+                    }
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
+);