@esportsplus/ui 0.51.7 → 0.53.0

package/build/components/toast/manager.js

@@ -0,0 +1,203 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, effect } from '@esportsplus/reactivity';
+class ReactiveObject_0ktzs5p0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const DURATIONS = {
+    error: 6000,
+    info: 4000,
+    loading: 0,
+    message: 4000,
+    success: 4000,
+    warning: 6000
+};
+const EXIT_DURATION = 300;
+let counter = 0, paused = false, timers = new Map();
+function buildVisibleToastLayout(toasts) {
+    let fullIndex = 0, fullOffsetY = 0, liveIndex = 0, liveOffsetY = 0, items = toasts.map((toast) => {
+        let height = normalizeToastHeight(toast.height), item;
+        if (toast.status === 'ending') {
+            item = {
+                offsetY: fullOffsetY,
+                toast,
+                visibleIndex: fullIndex
+            };
+            fullOffsetY += height;
+            fullIndex += 1;
+            return item;
+        }
+        item = {
+            offsetY: liveOffsetY,
+            toast,
+            visibleIndex: liveIndex
+        };
+        fullOffsetY += height;
+        fullIndex += 1;
+        liveOffsetY += height;
+        liveIndex += 1;
+        return item;
+    }), frontmostLiveToast = toasts.find((toast) => toast.status !== 'ending');
+    return {
+        frontmostHeight: normalizeToastHeight(frontmostLiveToast?.height),
+        items
+    };
+}
+function clearTimer(id) {
+    let timer = timers.get(id);
+    if (!timer) {
+        return;
+    }
+    if (timer.handle !== undefined) {
+        clearTimeout(timer.handle);
+    }
+    timers.delete(id);
+}
+function create(type, title, options = {}) {
+    let id = options.id ?? `toast-${++counter}`, toast = reactivity_u0.reactive({
+        action: options.action,
+        createdAt: Date.now(),
+        description: options.description,
+        dismissible: options.dismissible ?? true,
+        duration: options.duration ?? DURATIONS[type],
+        height: 0,
+        id,
+        priority: options.priority ?? 'low',
+        status: 'starting',
+        title,
+        type
+    });
+    toasts.push(toast);
+    queueMicrotask(() => {
+        if (toast.status === 'starting' && toasts.includes(toast)) {
+            toast.status = 'visible';
+        }
+    });
+    if (type !== 'loading' && toast.duration > 0) {
+        schedule(toast);
+    }
+    return id;
+}
+function dismiss(id) {
+    let toast = toasts.find((value) => value.id === id);
+    if (!toast || toast.status === 'ending') {
+        return;
+    }
+    clearTimer(id);
+    toast.status = 'ending';
+    setTimeout(() => remove(id), EXIT_DURATION);
+}
+function normalizeToastHeight(height) {
+    return typeof height === 'number' && Number.isFinite(height) && height > 0 ? height : 0;
+}
+function pause() {
+    for (let timer of timers.values()) {
+        if (timer.handle === undefined) {
+            continue;
+        }
+        clearTimeout(timer.handle);
+        timer.remaining = Math.max(0, timer.remaining - (performance.now() - timer.started));
+        timer.handle = undefined;
+    }
+}
+function remove(id) {
+    let index = toasts.findIndex((toast) => toast.id === id);
+    clearTimer(id);
+    if (index !== -1) {
+        toasts.splice(index, 1);
+    }
+}
+function resume() {
+    for (let [id, timer] of timers) {
+        if (timer.handle !== undefined) {
+            continue;
+        }
+        timer.started = performance.now();
+        timer.handle = setTimeout(() => dismiss(id), timer.remaining);
+    }
+}
+function schedule(toast) {
+    if (toast.duration <= 0) {
+        return;
+    }
+    if (state.active) {
+        timers.set(toast.id, {
+            handle: undefined,
+            remaining: toast.duration,
+            started: 0
+        });
+        return;
+    }
+    timers.set(toast.id, {
+        handle: setTimeout(() => dismiss(toast.id), toast.duration),
+        remaining: toast.duration,
+        started: performance.now()
+    });
+}
+function update(id, options) {
+    let toast = toasts.find((value) => value.id === id);
+    if (!toast) {
+        return;
+    }
+    if (options.action !== undefined) {
+        toast.action = options.action;
+    }
+    if (options.description !== undefined) {
+        toast.description = options.description;
+    }
+    if (options.dismissible !== undefined) {
+        toast.dismissible = options.dismissible;
+    }
+    if (options.priority !== undefined) {
+        toast.priority = options.priority;
+    }
+    if (options.duration !== undefined) {
+        toast.duration = options.duration;
+        clearTimer(id);
+        if (toast.type !== 'loading' && toast.duration > 0 && toast.status !== 'ending') {
+            schedule(toast);
+        }
+    }
+}
+const state = new ReactiveObject_0ktzs5p0();
+const toasts = new ReactiveArray();
+effect(() => {
+    let active = state.active;
+    if (active === paused) {
+        return;
+    }
+    paused = active;
+    if (active) {
+        pause();
+    }
+    else {
+        resume();
+    }
+});
+const toast = {
+    dismiss: (id) => {
+        if (id === undefined) {
+            for (let value of [...toasts]) {
+                dismiss(value.id);
+            }
+            return;
+        }
+        dismiss(id);
+    },
+    error: (title, options) => create('error', title, options),
+    info: (title, options) => create('info', title, options),
+    loading: (title, options) => create('loading', title, options),
+    message: (title, options) => create('message', title, options),
+    success: (title, options) => create('success', title, options),
+    update,
+    warning: (title, options) => create('warning', title, options)
+};
+export { buildVisibleToastLayout, remove, state, toast, toasts };

package/build/components/toast/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.toaster{--toast-gap:var(--size-300);--toast-inset:var(--size-500);--toast-peek:var(--size-300)}.toast{--toast-calc-height:max(var(--toast-frontmost-height,var(--toast-height,0px)), var(--toast-height,0px));--toast-calc-offset-y:calc(var(--toast-offset-y,0px) + (var(--toast-index,0) * var(--toast-gap)) + var(--toast-swipe-y,0px));--toast-color:var(--color-text-300);--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:max(0, 1 - (var(--toast-index,0) * .06));--toast-shrink:calc(1 - var(--toast-scale));--toast-swipe-x:0px;--toast-swipe-y:0px}.toaster{width:min(360px, 100% - var(--toast-inset) * 2);z-index:9999;position:fixed;inset:auto}.toaster[data-position^=top]{top:var(--toast-inset)}.toaster[data-position^=bottom]{bottom:var(--toast-inset)}.toaster[data-position$=left]{left:var(--toast-inset)}.toaster[data-position$=right]{right:var(--toast-inset)}.toaster[data-position$=center]{left:50%;transform:translate(-50%)}.toast{background:var(--background);border:1px solid var(--color-border-400);border-radius:var(--border-radius-500);box-shadow:var(--box-shadow-300);color:var(--color-text-400);transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + var(--toast-index) * var(--toast-peek) + var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));-webkit-user-select:none;user-select:none;width:100%;z-index:calc(9999 - var(--toast-index,0));transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s,height .2s;position:absolute;left:0;right:0;overflow:visible}[data-position*=top] .toast{transform-origin:top;top:0;bottom:auto}[data-position*=bottom] .toast{--toast-calc-offset-y:calc((var(--toast-offset-y,0px) * -1) + (var(--toast-index,0) * var(--toast-gap) * -1) + var(--toast-swipe-y,0px));transform:translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - var(--toast-index) * var(--toast-peek) - var(--toast-shrink) * var(--toast-calc-height))) scale(var(--toast-scale));transform-origin:bottom;top:auto;bottom:0}.toast:after{content:"";height:calc(var(--toast-gap) + 1px);width:100%;position:absolute;left:0}[data-position*=top] .toast:after{top:100%}[data-position*=bottom] .toast:after{bottom:100%}.toast-action{flex-shrink:0}.toast-close{background:var(--background);border:1px solid var(--color-border-400);border-radius:var(--border-radius-circle);color:var(--color-text-500);height:var(--size-500);right:calc(var(--size-200) * -1);top:calc(var(--size-200) * -1);width:var(--size-500);z-index:1;justify-content:center;align-items:center;display:flex;position:absolute}.toast-content{align-items:center;gap:var(--size-300);min-height:0;opacity:max(0, 1 - var(--toast-index,0));padding:var(--size-400);justify-content:space-between;transition:opacity .3s;display:flex;overflow:clip visible}.toast-copy{justify-content:center;align-items:center;display:inline-flex}.toast-description{color:var(--color-text-300);overflow-wrap:anywhere}.toast-description--clamp{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toast-details{margin-top:var(--size-200);max-height:160px;overflow-y:auto}.toast-details-toggle{cursor:pointer;align-items:center;gap:var(--size-200);display:flex}.toast-icon{color:var(--toast-color);flex-shrink:0;width:18px;height:18px}.toast-title{font-weight:var(--font-weight-400);overflow-wrap:anywhere}.toast--error{--toast-color:var(--color-red-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--warning{--toast-color:var(--color-yellow-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--success{--toast-color:var(--color-green-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--info{--toast-color:var(--color-blue-400);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading{--toast-color:var(--color-grey-500);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toast--loading .toast-icon{animation:1s linear infinite toast-spin}.toast--message{--toast-color:var(--color-text-300);border-color:color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400))}.toaster.--active .toast{height:auto;transform:translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y))}.toaster.--active .toast-content{opacity:1}.toaster .toast.toast--starting{opacity:0}.toaster[data-position*=top] .toast.toast--starting{transform:translateY(-120%)}.toaster[data-position*=bottom] .toast.toast--starting{transform:translateY(120%)}.toaster .toast.toast--ending{opacity:0}.toaster[data-position*=top] .toast.toast--ending{transform:translateY(calc(-100% - var(--toast-inset)))}.toaster[data-position*=bottom] .toast.toast--ending{transform:translateY(calc(100% + var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y))}.toaster .toast.toast--ending[data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)))}.toaster .toast.toast--ending[data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)))}.toast--swiping{transition:none}@keyframes toast-spin{to{transform:rotate(360deg)}}}
+/*$vite$:1*/

package/build/components/toast/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>

package/build/components/toast/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/build/components/toast/svg/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

package/build/components/toast/svg/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/build/components/toast/svg/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>

package/build/components/toast/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/build/components/toast/svg/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/build/components/toast/svg/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/build/components/toast/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

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

@@ -3,8 +3,8 @@ declare const _default: {
     menu: {
         (): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -133,8 +133,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -262,8 +262,8 @@ declare const _default: {
             };
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         <T extends {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -391,8 +391,8 @@ declare const _default: {
             };
         }>(attributes: T): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -521,8 +521,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -651,8 +651,8 @@ declare const _default: {
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -781,8 +781,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -910,8 +910,8 @@ declare const _default: {
             };
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         (attributes: {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1039,8 +1039,8 @@ declare const _default: {
             };
         }, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1169,8 +1169,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1301,8 +1301,8 @@ declare const _default: {
     onclick: {
         (): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1424,8 +1424,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1546,8 +1546,8 @@ declare const _default: {
             toggle?: boolean;
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         <T extends {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1668,8 +1668,8 @@ declare const _default: {
             toggle?: boolean;
         }>(attributes: T): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1791,8 +1791,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -1914,8 +1914,8 @@ declare const _default: {
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -2037,8 +2037,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -2159,8 +2159,8 @@ declare const _default: {
             toggle?: boolean;
         }>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
         (attributes: {
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -2281,8 +2281,8 @@ declare const _default: {
             toggle?: boolean;
         }, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
             attributes?: ({
-                [key: `aria-${string}`]: string | number | boolean | undefined;
-                [key: `data-${string}`]: string | undefined;
+                [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+                [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
                 class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
                 onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
                 ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
@@ -2404,8 +2404,8 @@ declare const _default: {
             }) | undefined;
             content?: import("@esportsplus/template").Renderable<any>;
         }, attributes: Readonly<{
-            [key: `aria-${string}`]: string | number | boolean | undefined;
-            [key: `data-${string}`]: string | undefined;
+            [key: `aria-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
+            [key: `data-${string}`]: ((element: import("@esportsplus/template").Element) => string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined);
             class?: import("@esportsplus/template").Attribute | import("@esportsplus/template").Attribute[];
             onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
             ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;

package/build/components/tooltip/menu.js

@@ -1,38 +1,52 @@
 import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import onclick from './onclick.js';
-const template_0p4v5171 = template_u1.template(`<a class='link --width-full' target='_blank' >`);
-const template_0p4v5174 = template_u1.template(`<div class='link --width-full' >`);
-const template_0p4v5177 = template_u1.template(`<!--$--><div class='tooltip-content ' >`);
+const template_0p4v5172 = template_u1.template(`<a class='link --width-full' target='_blank' >`);
+const template_0p4v5175 = template_u1.template(`<div class='link --width-full' >`);
+const template_0p4v5178 = template_u1.template(`<!--$--><div class='tooltip-content ' >`);
+class ReactiveObject_0p4v5170 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
 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), (() => {
-        let root_0p4v5176 = template_0p4v5177(), element_0p4v5178 = root_0p4v5176.firstChild, element_0p4v5179 = element_0p4v5178.nextSibling;
-        template_u1.slot(element_0p4v5178, content);
-        template_u1.setList(element_0p4v5179, 'class', `tooltip-content--${tooltipContentDirection}`);
-        template_u1.setProperties(element_0p4v5179, tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT));
-        template_u1.slot(element_0p4v5179, options.map((o) => {
+export default component((attributes, content) => {
+    let options = attributes.options, option = attributes.option, state = attributes.state || new ReactiveObject_0p4v5170(), tooltipContent = attributes?.['tooltip-content'], tooltipContentDirection = tooltipContent?.direction || 'nw';
+    return onclick({ ...omit(attributes, OMIT), state }, (() => {
+        let root_0p4v5177 = template_0p4v5178(), element_0p4v5179 = root_0p4v5177.firstChild, element_0p4v517a = element_0p4v5179.nextSibling;
+        template_u1.slot(element_0p4v5179, content);
+        template_u1.setList(element_0p4v517a, 'class', `tooltip-content--${tooltipContentDirection}`);
+        template_u1.setProperties(element_0p4v517a, tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT));
+        template_u1.setProperty(element_0p4v517a, 'inert', () => !state.active);
+        template_u1.slot(element_0p4v517a, options.map((o) => {
             if (o.href) {
                 return (() => {
-                    let root_0p4v5170 = template_0p4v5171(), element_0p4v5172 = root_0p4v5170.firstChild;
-                    template_u1.setProperties(element_0p4v5172, omit(o, OMIT_OPTION));
-                    template_u1.setProperties(element_0p4v5172, option);
-                    template_u1.slot(element_0p4v5172, o.content, 1);
-                    return root_0p4v5170;
+                    let root_0p4v5171 = template_0p4v5172(), element_0p4v5173 = root_0p4v5171.firstChild;
+                    template_u1.setProperties(element_0p4v5173, omit(o, OMIT_OPTION));
+                    template_u1.setProperties(element_0p4v5173, option);
+                    template_u1.slot(element_0p4v5173, o.content, 1);
+                    return root_0p4v5171;
                 })();
             }
             return (() => {
-                let root_0p4v5173 = template_0p4v5174(), element_0p4v5175 = root_0p4v5173.firstChild;
-                template_u1.setProperties(element_0p4v5175, omit(o, OMIT_OPTION));
-                template_u1.setProperties(element_0p4v5175, option);
-                template_u1.slot(element_0p4v5175, o.content, 1);
-                return root_0p4v5173;
+                let root_0p4v5174 = template_0p4v5175(), element_0p4v5176 = root_0p4v5174.firstChild;
+                template_u1.setProperties(element_0p4v5176, omit(o, OMIT_OPTION));
+                template_u1.setProperties(element_0p4v5176, option);
+                template_u1.slot(element_0p4v5176, o.content, 1);
+                return root_0p4v5174;
             })();
         }), 1);
-        return root_0p4v5176;
+        return root_0p4v5177;
     })());
 });