@esportsplus/ui 0.46.0 → 0.48.0

package/build/components/loading/index.js

@@ -1,12 +1,12 @@
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf2d = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='loading --border-width-700 --size-800'
+ style='--border-color: var(--color-border-500);'></div>`);
 export default (attributes) => {
-    return html `
-        <div
-            class='loading --border-width-700 --size-800'
-            style='--border-color: var(--color-border-500);'
-            ${attributes}
-        >
-        </div>
-    `;
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf2c = template_ed8f776bb07a460eadcbcfe445975fdf2d(), element_ed8f776bb07a460eadcbcfe445975fdf2e = root_ed8f776bb07a460eadcbcfe445975fdf2c.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2e, attributes);
+        return root_ed8f776bb07a460eadcbcfe445975fdf2c;
+    })();
 };

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

@@ -6,5 +6,5 @@ declare const _default: (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

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

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

package/build/components/range/index.js

@@ -1,7 +1,11 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive, root } from '@esportsplus/template';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf2g = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<input
+ class='range --border-state --border-black'
+ type='range'
+ />`);
 export default function (attributes) {
     let { max, min } = attributes, state = attributes.state || reactive({
         active: false,
@@ -11,28 +15,24 @@ export default function (attributes) {
     if (attributes?.value) {
         state.value = Number(attributes.value);
     }
-    return html `
-        <input
-            class='range --border-state --border-black'
-            style='${() => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`}'
-            type='range'
-            ${this?.attributes}
-            ${attributes}
-            ${{
-        class: () => state.active && '--active',
-        onfocusin: () => {
+    return (() => {
+        let root_ed8f776bb07a460eadcbcfe445975fdf2f = template_ed8f776bb07a460eadcbcfe445975fdf2g(), element_ed8f776bb07a460eadcbcfe445975fdf2h = root_ed8f776bb07a460eadcbcfe445975fdf2f.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf2h, ';', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2h, this?.attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2h, attributes);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf2h, '', () => state.active && '--active');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf2h, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf2h, 'focusout', () => {
             state.active = false;
-        },
-        oninput: (e) => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf2h, 'input', (e) => {
             state.value = Number(e.target.value);
-        },
-        onrender: form.input.onrender(state),
-        value: root(() => attributes?.value || state.value || 0)
-    }}
-        />
-    `;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf2h, form.input.onrender(state));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf2h, 'value', root(() => attributes?.value || state.value || 0));
+        return root_ed8f776bb07a460eadcbcfe445975fdf2f;
+    })();
 }
 ;

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

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

package/build/components/scrollbar/index.js

@@ -1,8 +1,12 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf2j = template_ed8f776bb07a460eadcbcfe445975fdf1.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) {
@@ -10,18 +14,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_ed8f776bb07a460eadcbcfe445975fdf2i = template_ed8f776bb07a460eadcbcfe445975fdf2j(), element_ed8f776bb07a460eadcbcfe445975fdf2k = root_ed8f776bb07a460eadcbcfe445975fdf2i.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2l = element_ed8f776bb07a460eadcbcfe445975fdf2k.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdf2m = element_ed8f776bb07a460eadcbcfe445975fdf2l.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2n = element_ed8f776bb07a460eadcbcfe445975fdf2l.nextElementSibling;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2k, this?.attributes && omit(this.attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2k, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2l, this?.attributes?.['scrollbar-container-content']);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2l, attributes['scrollbar-container-content']);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf2l, 'scroll', function () {
             if (width === undefined) {
                 width = this.offsetWidth - this.clientWidth;
                 if (width && width !== 17) {
@@ -30,25 +29,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_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf2m, content);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2n, this?.attributes?.scrollbar);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2n, attributes.scrollbar);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf2n, '', () => state.height >= 100 && 'scrollbar--hidden');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf2n, '', () => `
                             --translate: translate3d(0, ${state.translate}%, 0);
                             --height: ${state.height}%;
-                        `
-    }}
-                >
-                </div>
-            </div>
-        `;
+                        `);
+        return root_ed8f776bb07a460eadcbcfe445975fdf2i;
+    })();
 });

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

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

package/build/components/select/index.js

@@ -1,11 +1,16 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 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_ed8f776bb07a460eadcbcfe445975fdf2p = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='link select-option '><!--$--></div>`);
+const template_ed8f776bb07a460eadcbcfe445975fdf2t = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
+ class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag'
+ /><!--$--></div>`);
 const OMIT = [
     'arrow',
     'options',
@@ -48,86 +53,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)) : (() => options[state.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_ed8f776bb07a460eadcbcfe445975fdf2s = template_ed8f776bb07a460eadcbcfe445975fdf2t(), element_ed8f776bb07a460eadcbcfe445975fdf2u = root_ed8f776bb07a460eadcbcfe445975fdf2s.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2v = element_ed8f776bb07a460eadcbcfe445975fdf2u.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2w = element_ed8f776bb07a460eadcbcfe445975fdf2u.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdf2x = element_ed8f776bb07a460eadcbcfe445975fdf2w.nextElementSibling, element_ed8f776bb07a460eadcbcfe445975fdf2y = element_ed8f776bb07a460eadcbcfe445975fdf2v.nextSibling.nextSibling.nextSibling;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf2u, ' ', () => state.active && '--active');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2u, this?.attributes && omit(this.attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2u, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf2u, 'click', () => {
+            if (state.render) {
+                set(state, !state.active);
+            }
+            state.render = true;
+        });
+        new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdf2v, 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_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2w, this?.attributes?.arrow);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2w, attributes.arrow);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf2x, 'name', attributes.name);
+        template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf2x, 'click', () => { });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf2x, form.input.onrender(state));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf2x, 'value', () => state.selected);
+        new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdf2y, () => {
+            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_ed8f776bb07a460eadcbcfe445975fdf2o = template_ed8f776bb07a460eadcbcfe445975fdf2p(), element_ed8f776bb07a460eadcbcfe445975fdf2q = root_ed8f776bb07a460eadcbcfe445975fdf2o.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf2r = element_ed8f776bb07a460eadcbcfe445975fdf2q.firstChild;
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf2q, ' ', () => selected[key] && '--active');
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2q, this?.attributes?.option);
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf2q, option);
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf2q, 'data-key', key);
+                    template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf2r, content);
+                    return root_ed8f776bb07a460eadcbcfe445975fdf2o;
+                })();
+            }));
+        });
+        return root_ed8f776bb07a460eadcbcfe445975fdf2s;
+    })();
 });
 export default select;

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

@@ -6,5 +6,5 @@ declare const _default: (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

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

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

package/build/components/textarea/index.js

@@ -1,31 +1,30 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
+import { reactive } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_ed8f776bb07a460eadcbcfe445975fdf30 = template_ed8f776bb07a460eadcbcfe445975fdf1.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_ed8f776bb07a460eadcbcfe445975fdf2z = template_ed8f776bb07a460eadcbcfe445975fdf30(), element_ed8f776bb07a460eadcbcfe445975fdf31 = root_ed8f776bb07a460eadcbcfe445975fdf2z.firstChild;
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf31, this?.attributes && omit(this.attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf31, omit(attributes, OMIT));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf31, '', () => state.active && '--active');
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf31, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.on(element_ed8f776bb07a460eadcbcfe445975fdf31, 'focusout', () => {
             state.active = false;
-        },
-        onrender: form.input.onrender(state),
-        value: attributes?.value || ''
-    }}
-        ></textarea>
-    `;
+        });
+        template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf31, form.input.onrender(state));
+        template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf31, 'value', attributes?.value || '');
+        return root_ed8f776bb07a460eadcbcfe445975fdf2z;
+    })();
 }
 ;