@esportsplus/ui 0.17.7 → 0.18.0

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

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

package/build/components/tooltip/index.js

@@ -1,7 +1,8 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { isArray, omit } from '@esportsplus/utilities';
+import { omit, toArray } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
 let parent = null, queue = [], running = false, scheduled = false;
 function frame() {
@@ -22,19 +23,33 @@ function frame() {
     }
     running = false;
 }
-const onclick = (data, content, state = reactive({ active: false })) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push(() => {
+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';
     });
-    return html `
-        <div
-            class='tooltip'
-            onclick='${function (e) {
+    attributes.onclick = function (e) {
         let active = true, node = e.target;
-        if (this === node || (data.toggle && this.contains(node))) {
+        if (this === node || (attributes.toggle && this.contains(node))) {
             active = !state.active;
         }
         if (parent !== this && !parent?.contains(this)) {
@@ -59,33 +74,35 @@ const onclick = (data, content, state = reactive({ active: false })) => {
             });
             scheduled = true;
         }
-    }}}'
-            ${omit(data, ['active', 'toggle'])}
-        >
-            ${content}
-        </div>
-    `;
-};
-const onhover = (data, content, state = reactive({ active: false })) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push(() => {
+    };
+    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';
     });
-    return html `
-        <div
-            class='tooltip'
-            onmouseover='${() => {
+    attributes.onmouseover = () => {
         state.active = true;
-    }}}'
-            onmouseout='${() => {
+    };
+    attributes.onmouseout = () => {
         state.active = false;
-    }}'
-            ${omit(data, ['active', 'toggle'])}
-        >
-            ${content}
-        </div>
-    `;
-};
-export default { onclick, onhover };
+    };
+    return html `
+            <div
+                class='tooltip'
+                ${omit(attributes, ['active', 'state', 'toggle'])}
+            >
+                ${content}
+            </div>
+        `;
+});
+export default { menu, onclick, onhover };

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

@@ -4,6 +4,6 @@ declare const _default: (content: string[]) => {
         class: string;
         onmount: () => void;
     };
-    html: () => any;
+    html: () => string | import("@esportsplus/template/build/types").RenderableTemplate;
 };
 export default _default;

package/build/css-utilities/flex/scss/index.scss

@@ -1,2 +1,2 @@
-@layer css-utilities {.--flex-center{flex-wrap:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-wrap:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-wrap:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-wrap:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-wrap:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-wrap:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-wrap:wrap;display:flex}}
+@layer css-utilities {.--flex-center{flex-flow:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-flow:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap;display:flex}}
 /*$vite$:1*/

package/package.json

@@ -1,21 +1,21 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/action": "^0.0.56",
-    "@esportsplus/reactivity": "^0.4.3",
-    "@esportsplus/template": "^0.9.9",
-    "@esportsplus/utilities": "^0.13.0",
+    "@esportsplus/action": "^0.0.57",
+    "@esportsplus/reactivity": "^0.4.5",
+    "@esportsplus/template": "^0.10.2",
+    "@esportsplus/utilities": "^0.15.0",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
     "@esportsplus/typescript": "^0.9.1",
-    "@types/node": "^24.0.14",
+    "@types/node": "^24.1.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.4"
+    "vite": "^7.0.6"
   },
   "exports": {
     "./css-utilities": {
@@ -47,7 +47,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.17.7",
+  "version": "0.18.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/accordion/scss/index.scss

@@ -1,5 +1,5 @@
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .accordion {
     max-height: var(--max-height);

package/src/components/anchor/scss/index.scss

@@ -1,5 +1,5 @@
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .anchor {
     max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));

package/src/components/banner/scss/index.scss

@@ -1,5 +1,5 @@
 @use '/lib';
-@use './variables.scss';
+@use 'variables';
 
 .banner {
     @include lib.position(absolute, full);

package/src/components/border/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .border {
     border-top: var(--border-width) var(--border-style) var(--border-color);

package/src/components/button/scss/index.scss

@@ -1,6 +1,6 @@
 @use '/lib';
 @use '/tokens';
-@use './variables.scss';
+@use 'variables';
 
 .button {
     align-content: center;

package/src/components/card/scss/index.scss

@@ -1,5 +1,5 @@
 @use '/lib';
-@use './variables.scss';
+@use 'variables';
 
 .card {
     background: var(--background);

package/src/components/container/scss/index.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use 'variables';
 
 .container {
     display: flex;