@esportsplus/ui 0.49.0 → 0.49.2

package/build/components/scrollbar/index.js

@@ -1,7 +1,9 @@
-import { html, reactive } from '@esportsplus/frontend';
+import * as template_0d7f5d57c4bb40d69aedf451c3798d4b1 from '@esportsplus/frontend';
+import { reactive } from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_0d7f5d57c4bb40d69aedf451c3798d4b37 = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<div class='scrollbar-container'><div class='scrollbar-container-content'><!--$--></div><div class='scrollbar'></div></div>`);
 const OMIT = ['scrollbar', 'scrollbar-container-content'];
 let root = document.body, width;
 export default template.factory(function (attributes, content) {
@@ -9,18 +11,13 @@ export default template.factory(function (attributes, content) {
         height: 100,
         translate: 0
     });
-    return html `
-            <div
-                class='scrollbar-container'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-            >
-                <div
-                    class='scrollbar-container-content'
-                    ${this?.attributes?.['scrollbar-container-content']}
-                    ${attributes['scrollbar-container-content']}
-                    ${{
-        onscroll: function () {
+    return (() => {
+        let root_0d7f5d57c4bb40d69aedf451c3798d4b36 = template_0d7f5d57c4bb40d69aedf451c3798d4b37(), element_0d7f5d57c4bb40d69aedf451c3798d4b38 = root_0d7f5d57c4bb40d69aedf451c3798d4b36.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b39 = element_0d7f5d57c4bb40d69aedf451c3798d4b38.firstElementChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3a = element_0d7f5d57c4bb40d69aedf451c3798d4b39.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3b = element_0d7f5d57c4bb40d69aedf451c3798d4b39.nextElementSibling, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3c = { "class": "scrollbar-container" }, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3d = { "class": "scrollbar-container-content" }, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3e = { "class": "scrollbar" };
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b38, this?.attributes && omit(this.attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3c);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b38, omit(attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3c);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b39, this?.attributes?.['scrollbar-container-content'], attributes_0d7f5d57c4bb40d69aedf451c3798d4b3d);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b39, attributes['scrollbar-container-content'], attributes_0d7f5d57c4bb40d69aedf451c3798d4b3d);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.on(element_0d7f5d57c4bb40d69aedf451c3798d4b39, 'scroll', function () {
             if (width === undefined) {
                 width = this.offsetWidth - this.clientWidth;
                 if (width && width !== 17) {
@@ -29,25 +26,15 @@ export default template.factory(function (attributes, content) {
             }
             state.height = (this.clientHeight / this.scrollHeight) * 100;
             state.translate = (this.scrollTop / this.clientHeight) * 100;
-        }
-    }}
-                >
-                    ${content}
-                </div>
-
-                <div
-                    class='scrollbar'
-                    ${this?.attributes?.scrollbar}
-                    ${attributes.scrollbar}
-                    ${{
-        class: () => state.height >= 100 && 'scrollbar--hidden',
-        style: () => `
+        });
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b3a, content);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3b, this?.attributes?.scrollbar, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3e);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3b, attributes.scrollbar, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3e);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b3b, 'class', () => state.height >= 100 && 'scrollbar--hidden', attributes_0d7f5d57c4bb40d69aedf451c3798d4b3e);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b3b, 'style', () => `
                             --translate: translate3d(0, ${state.translate}%, 0);
                             --height: ${state.height}%;
-                        `
-    }}
-                >
-                </div>
-            </div>
-        `;
+                        `, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3e);
+        return root_0d7f5d57c4bb40d69aedf451c3798d4b36;
+    })();
 });

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

@@ -1,4 +1,4 @@
-import { type Renderable, type Attributes } from '@esportsplus/frontend';
+import { Attributes, Renderable } from '@esportsplus/frontend';
 import { Attributes as Attr } from '../../components/scrollbar/index.js';
 import './scss/index.scss';
 type A = {

package/build/components/select/index.js

@@ -1,10 +1,13 @@
-import { html, reactive } from '@esportsplus/frontend';
+import * as template_0d7f5d57c4bb40d69aedf451c3798d4b1 from '@esportsplus/frontend';
+import { reactive } from '@esportsplus/frontend';
 import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import root from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_0d7f5d57c4bb40d69aedf451c3798d4b3g = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<div class='link select-option '><!--$--></div>`);
+const template_0d7f5d57c4bb40d69aedf451c3798d4b3l = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<div class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag'  /><!--$--></div>`);
 const OMIT = [
     'arrow',
     'options',
@@ -47,95 +50,87 @@ const select = template.factory(function (attributes, content) {
         render: false,
         selected: attributes.selected || Object.keys(options)[0]
     });
-    return html `
-            <div
-                class='select tooltip ${() => state.active && '--active'}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-                onclick=${() => {
-        if (state.render) {
-            set(state, !state.active);
-        }
-        state.render = true;
-    }}
-            >
-                ${content ? (() => content(state)) : (() => {
-        let selected = options[state.selected];
-        if (!selected) {
-            return '-';
-        }
-        if (selected !== null && typeof selected === 'object' && 'content' in selected) {
-            return selected.content;
-        }
-        return selected;
-    })}
-
-                <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
-
-                <input class='select-tag'
-                    ${{
-        name: attributes.name,
-        onclick: () => { },
-        onrender: form.input.onrender(state),
-        value: () => state.selected
-    }}
-                />
-
-                ${() => {
-        if (!state.render) {
-            return;
-        }
-        let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
-        return sb({
-            ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-            ...attributes['tooltip-content'],
-            class: [
-                ...toArray(attributes['tooltip-content']?.class),
-                `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-            ],
-            onclick: (e) => {
-                let element = e.target, key = element.dataset?.key;
-                if (key === undefined) {
-                    let parent;
-                    while (parent = element.parentElement) {
-                        key = parent.dataset?.key;
-                        if (key !== undefined) {
-                            break;
+    return (() => {
+        let root_0d7f5d57c4bb40d69aedf451c3798d4b3k = template_0d7f5d57c4bb40d69aedf451c3798d4b3l(), element_0d7f5d57c4bb40d69aedf451c3798d4b3m = root_0d7f5d57c4bb40d69aedf451c3798d4b3k.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3n = element_0d7f5d57c4bb40d69aedf451c3798d4b3m.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3o = element_0d7f5d57c4bb40d69aedf451c3798d4b3m.firstElementChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3p = element_0d7f5d57c4bb40d69aedf451c3798d4b3o.nextElementSibling, element_0d7f5d57c4bb40d69aedf451c3798d4b3q = element_0d7f5d57c4bb40d69aedf451c3798d4b3n.nextSibling.nextSibling.nextSibling, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3r = { "class": "select tooltip" }, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3s = { "class": "select-arrow" };
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b3m, 'class', () => state.active && '--active', attributes_0d7f5d57c4bb40d69aedf451c3798d4b3r);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3m, this?.attributes && omit(this.attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3r);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3m, omit(attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3r);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.delegate(element_0d7f5d57c4bb40d69aedf451c3798d4b3m, 'click', () => {
+            if (state.render) {
+                set(state, !state.active);
+            }
+            state.render = true;
+        });
+        new template_0d7f5d57c4bb40d69aedf451c3798d4b1.EffectSlot(element_0d7f5d57c4bb40d69aedf451c3798d4b3n, content ? (() => content(state)) : (() => {
+            let selected = options[state.selected];
+            if (!selected) {
+                return '-';
+            }
+            if (selected !== null && typeof selected === 'object' && 'content' in selected) {
+                return selected.content;
+            }
+            return selected;
+        }));
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3o, this?.attributes?.arrow, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3s);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3o, attributes.arrow, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3s);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperty(element_0d7f5d57c4bb40d69aedf451c3798d4b3p, 'name', attributes.name);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.delegate(element_0d7f5d57c4bb40d69aedf451c3798d4b3p, 'click', () => { });
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.onrender(element_0d7f5d57c4bb40d69aedf451c3798d4b3p, form.input.onrender(state));
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperty(element_0d7f5d57c4bb40d69aedf451c3798d4b3p, 'value', () => state.selected);
+        new template_0d7f5d57c4bb40d69aedf451c3798d4b1.EffectSlot(element_0d7f5d57c4bb40d69aedf451c3798d4b3q, () => {
+            if (!state.render) {
+                return;
+            }
+            let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
+            return sb({
+                ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
+                ...attributes['tooltip-content'],
+                class: [
+                    ...toArray(attributes['tooltip-content']?.class),
+                    `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
+                ],
+                onclick: (e) => {
+                    let element = e.target, key = element.dataset?.key;
+                    if (key === undefined) {
+                        let parent;
+                        while (parent = element.parentElement) {
+                            key = parent.dataset?.key;
+                            if (key !== undefined) {
+                                break;
+                            }
                         }
                     }
+                    if (key === undefined) {
+                        return;
+                    }
+                    let previous = state.selected;
+                    set(state, false);
+                    state.selected = key;
+                    selected[key] = true;
+                    selected[previous] = false;
+                },
+                onconnect: () => {
+                    set(state, true);
+                },
+                scrollbar: attributes.scrollbar,
+                'scrollbar-container-content': attributes['scrollbar-container-content']
+            }, keys.map((key) => {
+                let content = options[key];
+                if (content !== null && typeof content === 'object' && 'content' in content) {
+                    content = content.content;
                 }
-                if (key === undefined) {
-                    return;
-                }
-                let previous = state.selected;
-                set(state, false);
-                state.selected = key;
-                selected[key] = true;
-                selected[previous] = false;
-            },
-            onconnect: () => {
-                set(state, true);
-            },
-            scrollbar: attributes.scrollbar,
-            'scrollbar-container-content': attributes['scrollbar-container-content']
-        }, keys.map((key) => {
-            let content = options[key];
-            if (content !== null && typeof content === 'object' && 'content' in content) {
-                content = content.content;
-            }
-            return html `
-                                <div
-                                    class='link select-option ${() => selected[key] && '--active'}'
-                                    ${this?.attributes?.option}
-                                    ${option}
-                                    data-key='${key}'
-                                >
-                                    ${content}
-                                </div>
-                            `;
-        }));
-    }}
-            </div>
-        `;
+                return (() => {
+                    let root_0d7f5d57c4bb40d69aedf451c3798d4b3f = template_0d7f5d57c4bb40d69aedf451c3798d4b3g(), element_0d7f5d57c4bb40d69aedf451c3798d4b3h = root_0d7f5d57c4bb40d69aedf451c3798d4b3f.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b3i = element_0d7f5d57c4bb40d69aedf451c3798d4b3h.firstChild, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3j = { "class": "link select-option" };
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b3h, 'class', () => selected[key] && '--active', attributes_0d7f5d57c4bb40d69aedf451c3798d4b3j);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3h, this?.attributes?.option, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3j);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3h, option, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3j);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperty(element_0d7f5d57c4bb40d69aedf451c3798d4b3h, 'data-key', key);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b3i, content);
+                    return root_0d7f5d57c4bb40d69aedf451c3798d4b3f;
+                })();
+            }));
+        });
+        return root_0d7f5d57c4bb40d69aedf451c3798d4b3k;
+    })();
 });
 export default select;

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

@@ -1,4 +1,4 @@
-import { type Attributes } from '@esportsplus/frontend';
+import { Attributes } from '@esportsplus/frontend';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;

package/build/components/textarea/index.js

@@ -1,30 +1,29 @@
-import { html, reactive } from '@esportsplus/frontend';
+import * as template_0d7f5d57c4bb40d69aedf451c3798d4b1 from '@esportsplus/frontend';
+import { reactive } from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_0d7f5d57c4bb40d69aedf451c3798d4b3u = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<textarea class='textarea'></textarea>`);
 const OMIT = ['state'];
 export default function (attributes) {
     let state = attributes.state || reactive({
         active: false,
         error: ''
     });
-    return html `
-        <textarea
-            class='textarea'
-            ${this?.attributes && omit(this.attributes, OMIT)}
-            ${omit(attributes, OMIT)}
-            ${{
-        class: () => state.active && '--active',
-        onfocusin: () => {
+    return (() => {
+        let root_0d7f5d57c4bb40d69aedf451c3798d4b3t = template_0d7f5d57c4bb40d69aedf451c3798d4b3u(), element_0d7f5d57c4bb40d69aedf451c3798d4b3v = root_0d7f5d57c4bb40d69aedf451c3798d4b3t.firstChild, attributes_0d7f5d57c4bb40d69aedf451c3798d4b3w = { "class": "textarea" };
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, this?.attributes && omit(this.attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3w);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, omit(attributes, OMIT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b3w);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, 'class', () => state.active && '--active', attributes_0d7f5d57c4bb40d69aedf451c3798d4b3w);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.on(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.on(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, 'focusout', () => {
             state.active = false;
-        },
-        onrender: form.input.onrender(state),
-        value: attributes?.value || ''
-    }}
-        ></textarea>
-    `;
+        });
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.onrender(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, form.input.onrender(state));
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperty(element_0d7f5d57c4bb40d69aedf451c3798d4b3v, 'value', attributes?.value || '');
+        return root_0d7f5d57c4bb40d69aedf451c3798d4b3t;
+    })();
 }
 ;

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

@@ -1,4 +1,5 @@
-import { type Attributes, type Renderable } from '@esportsplus/frontend';
+import * as template_0d7f5d57c4bb40d69aedf451c3798d4b1 from '@esportsplus/frontend';
+import { Attributes, Renderable } from '@esportsplus/frontend';
 type A = Attributes & {
     options: (Attributes & {
         content: Renderable<unknown>;
@@ -15,19 +16,19 @@ type A = Attributes & {
 declare const _default: {
     (): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: Renderable<any>;
-    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+        content?: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>) => Renderable<any>>;
     <T extends A>(attributes: T): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: Renderable<any>;
-    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
-    <T extends Renderable<any>>(content: T): ReturnType<(this: {
+        content?: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>) => Renderable<any>>;
+    <T extends template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>>(content: T): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: Renderable<any>;
-    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
-    (attributes: A, content: Renderable<any>): ReturnType<(this: {
+        content?: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>) => Renderable<any>>;
+    (attributes: A, content: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: Renderable<any>;
-    }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
+        content?: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_0d7f5d57c4bb40d69aedf451c3798d4b1.Renderable<any>) => Renderable<any>>;
 };
 export default _default;

package/build/components/tooltip/menu.js

@@ -1,42 +1,38 @@
-import { html } from '@esportsplus/frontend';
+import * as template_0d7f5d57c4bb40d69aedf451c3798d4b1 from '@esportsplus/frontend';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import onclick from './onclick.js';
+const template_0d7f5d57c4bb40d69aedf451c3798d4b3y = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<a class='link --width-full' target='_blank'><!--$--></a>`);
+const template_0d7f5d57c4bb40d69aedf451c3798d4b43 = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<div class='link --width-full'><!--$--></div>`);
+const template_0d7f5d57c4bb40d69aedf451c3798d4b48 = template_0d7f5d57c4bb40d69aedf451c3798d4b1.template(`<!--$--><div class='tooltip-content '><!--$--></div>`);
 const OMIT = ['options', 'option', '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) => {
-        if (o.href) {
-            return html `
-                                <a
-                                    class='link --width-full'
-                                    target='_blank'
-                                    ${omit(o, OMIT_OPTION)}
-                                    ${option}
-                                >
-                                    ${o.content}
-                                </a>
-                            `;
-        }
-        return html `
-                            <div
-                                class='link --width-full'
-                                ${omit(o, OMIT_OPTION)}
-                                ${option}
-                            >
-                                ${o.content}
-                            </div>
-                        `;
-    })}
-                </div>
-            `);
+    return onclick(omit(attributes, OMIT), (() => {
+        let root_0d7f5d57c4bb40d69aedf451c3798d4b47 = template_0d7f5d57c4bb40d69aedf451c3798d4b48(), element_0d7f5d57c4bb40d69aedf451c3798d4b49 = root_0d7f5d57c4bb40d69aedf451c3798d4b47.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b4a = element_0d7f5d57c4bb40d69aedf451c3798d4b49.nextSibling, element_0d7f5d57c4bb40d69aedf451c3798d4b4b = element_0d7f5d57c4bb40d69aedf451c3798d4b4a.firstChild, attributes_0d7f5d57c4bb40d69aedf451c3798d4b4c = { "class": "tooltip-content" };
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b49, content);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setList(element_0d7f5d57c4bb40d69aedf451c3798d4b4a, 'class', `tooltip-content--${tooltipContentDirection}`, attributes_0d7f5d57c4bb40d69aedf451c3798d4b4c);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b4a, tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT), attributes_0d7f5d57c4bb40d69aedf451c3798d4b4c);
+        template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b4b, options.map((o) => {
+            if (o.href) {
+                return (() => {
+                    let root_0d7f5d57c4bb40d69aedf451c3798d4b3x = template_0d7f5d57c4bb40d69aedf451c3798d4b3y(), element_0d7f5d57c4bb40d69aedf451c3798d4b3z = root_0d7f5d57c4bb40d69aedf451c3798d4b3x.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b40 = element_0d7f5d57c4bb40d69aedf451c3798d4b3z.firstChild, attributes_0d7f5d57c4bb40d69aedf451c3798d4b41 = { "class": "link --width-full" };
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3z, omit(o, OMIT_OPTION), attributes_0d7f5d57c4bb40d69aedf451c3798d4b41);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b3z, option, attributes_0d7f5d57c4bb40d69aedf451c3798d4b41);
+                    template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b40, o.content);
+                    return root_0d7f5d57c4bb40d69aedf451c3798d4b3x;
+                })();
+            }
+            return (() => {
+                let root_0d7f5d57c4bb40d69aedf451c3798d4b42 = template_0d7f5d57c4bb40d69aedf451c3798d4b43(), element_0d7f5d57c4bb40d69aedf451c3798d4b44 = root_0d7f5d57c4bb40d69aedf451c3798d4b42.firstChild, element_0d7f5d57c4bb40d69aedf451c3798d4b45 = element_0d7f5d57c4bb40d69aedf451c3798d4b44.firstChild, attributes_0d7f5d57c4bb40d69aedf451c3798d4b46 = { "class": "link --width-full" };
+                template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b44, omit(o, OMIT_OPTION), attributes_0d7f5d57c4bb40d69aedf451c3798d4b46);
+                template_0d7f5d57c4bb40d69aedf451c3798d4b1.setProperties(element_0d7f5d57c4bb40d69aedf451c3798d4b44, option, attributes_0d7f5d57c4bb40d69aedf451c3798d4b46);
+                template_0d7f5d57c4bb40d69aedf451c3798d4b1.slot(element_0d7f5d57c4bb40d69aedf451c3798d4b45, o.content);
+                return root_0d7f5d57c4bb40d69aedf451c3798d4b42;
+            })();
+        }));
+        return root_0d7f5d57c4bb40d69aedf451c3798d4b47;
+    })());
 });