@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/tooltip/onhover.js

@@ -1,8 +1,10 @@
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { content, morph, morphing } from './utilities.js';
-const template_0bwku672 = template_u1.template(`<div class='tooltip'>`);
+import { onCleanup } from '@esportsplus/reactivity';
+import overlay from '../overlay/index.js';
+import { content, cool, morph, morphs, wait, warm } from './utilities.js';
+const template_0bwku673 = template_u1.template(`<div class='tooltip'>`);
 class ReactiveObject_0bwku670 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -15,6 +17,32 @@ class ReactiveObject_0bwku670 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#active, _v0);
     }
 }
+class ReactiveObject_0bwku671 extends reactivity_u0.ReactiveObject {
+    #instant = this[reactivity_u0.SIGNAL](false);
+    #morphing = this[reactivity_u0.SIGNAL](false);
+    #safe = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get instant() {
+        return reactivity_u0.read(this.#instant);
+    }
+    set instant(_v0) {
+        reactivity_u0.write(this.#instant, _v0);
+    }
+    get morphing() {
+        return reactivity_u0.read(this.#morphing);
+    }
+    set morphing(_v1) {
+        reactivity_u0.write(this.#morphing, _v1);
+    }
+    get safe() {
+        return reactivity_u0.read(this.#safe);
+    }
+    set safe(_v2) {
+        reactivity_u0.write(this.#safe, _v2);
+    }
+}
 function cross(o, a, b) {
     return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
 }
@@ -46,60 +74,118 @@ function safe(element, x, y) {
     if (!tooltip) {
         return;
     }
-    let box = tooltip.getBoundingClientRect(), left = Math.min(x, box.left), points = hull([[x, y], [box.left, box.top], [box.right, box.top], [box.right, box.bottom], [box.left, box.bottom]]), polygon = '', style = element.style, top = Math.min(y, box.top);
+    let box = tooltip.getBoundingClientRect(), left = Math.min(x, box.left), points = hull([[x, y], [box.left, box.top], [box.right, box.top], [box.right, box.bottom], [box.left, box.bottom]]), polygon = '', top = Math.min(y, box.top);
     for (let i = 0, n = points.length; i < n; i++) {
         polygon += `${i ? ', ' : ''}${points[i][0] - left}px ${points[i][1] - top}px`;
     }
-    style.setProperty('--safe-area', `polygon(${polygon})`);
-    style.setProperty('--safe-height', `${Math.max(y, box.bottom) - top}px`);
-    style.setProperty('--safe-left', `${left - rect.left - element.clientLeft}px`);
-    style.setProperty('--safe-top', `${top - rect.top - element.clientTop}px`);
-    style.setProperty('--safe-width', `${Math.max(x, box.right) - left}px`);
+    return `
+        --safe-area: polygon(${polygon});
+        --safe-height: ${Math.max(y, box.bottom) - top}px;
+        --safe-left: ${left - rect.left - element.clientLeft}px;
+        --safe-top: ${top - rect.top - element.clientTop}px;
+        --safe-width: ${Math.max(x, box.right) - left}px;
+    `;
 }
-export default component(({ state = new ReactiveObject_0bwku670(), ...attributes }, content) => {
-    let cancel, settled = morphing(false), x = 0, y = 0;
-    return (() => {
-        let root_0bwku671 = template_0bwku672(), element_0bwku673 = root_0bwku671.firstChild;
-        template_u1.setProperties(element_0bwku673, attributes);
-        template_u1.setList(element_0bwku673, 'class', () => state.active && '--active');
-        template_u1.delegate(element_0bwku673, 'animationcancel', settled);
-        template_u1.delegate(element_0bwku673, 'animationend', settled);
-        template_u1.delegate(element_0bwku673, 'animationstart', morphing(true));
-        template_u1.delegate(element_0bwku673, 'mouseover', (e) => {
+function trigger({ delay: { close: closing = 0, open: opening = 0 } = {}, state = new ReactiveObject_0bwku670() } = {}) {
+    let leaving, local = new ReactiveObject_0bwku671(), morphed, pending, x = 0, y = 0;
+    function close() {
+        clearTimeout(leaving);
+        leaving = undefined;
+        morphed?.();
+        morphed = undefined;
+        pending?.();
+        pending = undefined;
+        if (opening && state.active) {
+            cool();
+        }
+        state.active = false;
+    }
+    function open(element) {
+        pending = undefined;
+        morphed = morph(element, () => {
+            morphed = undefined;
+            state.active = true;
+        });
+    }
+    function release() {
+        pending?.();
+        pending = undefined;
+        if (!closing || !(state.active || morphed)) {
+            close();
+            return;
+        }
+        leaving ??= setTimeout(close, closing);
+    }
+    function stay() {
+        clearTimeout(leaving);
+        leaving = undefined;
+    }
+    onCleanup(() => {
+        clearTimeout(leaving);
+        morphed?.();
+        pending?.();
+    });
+    let handlers = morphs(local), popup = overlay.popup({ canDismiss: () => !!(pending || morphed), ondismiss: close, state, target: content });
+    return {
+        ...popup,
+        ...handlers,
+        class: [
+            popup.class,
+            () => state.active && local.instant && 'tooltip--instant',
+            () => local.morphing && 'tooltip--morphing'
+        ].flat(),
+        onfocusin: (e) => {
+            stay();
+            if (state.active || morphed || !e.target.matches(':focus-visible')) {
+                return;
+            }
+            pending?.();
+            local.instant = false;
+            open(e.currentTarget);
+        },
+        onfocusout: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                release();
+            }
+        },
+        onmouseover: (e) => {
             let element = e.currentTarget;
-            if (state.active || cancel || element.contains(e.relatedTarget)) {
+            if (element.contains(e.relatedTarget)) {
                 return;
             }
-            cancel = morph(element, () => {
-                cancel = undefined;
-                state.active = true;
-            });
-        });
-        template_u1.delegate(element_0bwku673, 'mouseout', (e) => {
-            if (e.currentTarget.contains(e.relatedTarget)) {
+            stay();
+            if (state.active || morphed || pending) {
                 return;
             }
-            cancel?.();
-            cancel = undefined;
-            state.active = false;
-        });
-        template_u1.delegate(element_0bwku673, 'pointermove', (e) => {
+            local.instant = opening > 0 && warm();
+            pending = wait(opening, () => open(element));
+        },
+        onmouseout: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                release();
+            }
+        },
+        onpointermove: (e) => {
             let element = e.currentTarget;
             x = e.clientX;
             y = e.clientY;
             if (state.active) {
-                safe(element, x, y);
+                local.safe = safe(element, x, y) ?? local.safe;
             }
-        });
-        template_u1.delegate(element_0bwku673, 'transitioncancel', settled);
-        template_u1.delegate(element_0bwku673, 'transitionend', (e) => {
-            settled(e);
+        },
+        ontransitionend: (e) => {
+            handlers.ontransitionend(e);
             if (state.active) {
-                safe(e.currentTarget, x, y);
+                local.safe = safe(e.currentTarget, x, y) ?? local.safe;
             }
-        });
-        template_u1.delegate(element_0bwku673, 'transitionrun', morphing(true));
-        template_u1.slot(element_0bwku673, content, 1);
-        return root_0bwku671;
-    })();
-});
+        },
+        style: () => local.safe
+    };
+}
+export default component(({ delay, state, ...attributes }, content) => {
+    let root_0bwku672 = template_0bwku673(), element_0bwku674 = root_0bwku672.firstChild;
+    template_u1.slot(element_0bwku674, content, 1);
+    template_u1.setProperties(element_0bwku674, attributes);
+    template_u1.setProperties(element_0bwku674, trigger({ delay, state }));
+    return root_0bwku672;
+}, { trigger });

package/build/components/tooltip/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.tooltip-group{z-index:0;display:inline-flex;position:relative}.tooltip-group.--active{z-index:9}.tooltip-group.--active>.tooltip-group-content>.tooltip-group-box{filter:blur();opacity:1;transition:filter var(--group-open-duration) var(--group-timing-function) var(--group-delay), opacity var(--group-open-duration) var(--group-timing-function) var(--group-delay), scale var(--group-open-duration) var(--group-timing-function) var(--group-delay), translate var(--group-open-duration) var(--group-timing-function) var(--group-delay);translate:0;scale:1}.tooltip-group.--gliding>.tooltip-group-content{transition:height var(--group-glide-duration) var(--group-glide-timing-function), translate var(--group-glide-duration) var(--group-glide-timing-function), width var(--group-glide-duration) var(--group-glide-timing-function)}.tooltip-group.--gliding .tooltip-group-layer{transition:filter var(--group-swap-duration) var(--group-timing-function), opacity var(--group-swap-duration) var(--group-timing-function), translate var(--group-swap-duration) var(--group-timing-function)}.tooltip-group-box{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);filter:blur(var(--group-blur));font-size:var(--font-size);font-weight:var(--font-weight);opacity:0;scale:var(--group-scale);transition:filter var(--group-close-duration) var(--group-timing-function), opacity var(--group-close-duration) var(--group-timing-function), scale var(--group-close-duration) var(--group-timing-function), translate var(--group-close-duration) var(--group-timing-function);position:absolute;inset:0;overflow:hidden}.tooltip-group-content{height:var(--group-height);pointer-events:none;width:var(--group-width);z-index:9;transition:none;position:absolute}.tooltip-group-content--e,.tooltip-group-content--w{--group-axis-x:0;--group-axis-y:1;translate:0 calc(var(--group-y) - 50%);top:0}.tooltip-group-content--n,.tooltip-group-content--s{--group-axis-x:1;--group-axis-y:0;translate:calc(var(--group-x) - 50%) 0;left:0}.tooltip-group-content--e{left:calc(100% + var(--spacer))}.tooltip-group-content--e>.tooltip-group-box{transform-origin:0;translate:calc(var(--group-rise) * -1) 0}.tooltip-group-content--n{bottom:calc(100% + var(--spacer))}.tooltip-group-content--n>.tooltip-group-box{transform-origin:bottom;translate:0 var(--group-rise)}.tooltip-group-content--s{top:calc(100% + var(--spacer))}.tooltip-group-content--s>.tooltip-group-box{transform-origin:top;translate:0 calc(var(--group-rise) * -1)}.tooltip-group-content--w{right:calc(100% + var(--spacer))}.tooltip-group-content--w>.tooltip-group-box{transform-origin:100%;translate:var(--group-rise) 0}.tooltip-group-layer{--group-shift:var(--group-swap-shift);filter:blur(var(--group-swap-blur));max-width:var(--max-width);opacity:0;padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);translate:calc(-50% + var(--group-shift) * var(--group-axis-x)) calc(-50% + var(--group-shift) * var(--group-axis-y));white-space:nowrap;width:max-content;transition:none;position:absolute;top:50%;left:50%}.tooltip-group-layer.--active{--group-shift:0px;filter:blur();opacity:1}.tooltip-group-layer.--before{--group-shift:calc(var(--group-swap-shift) * -1)}@media (prefers-reduced-motion:reduce){.tooltip-group>.tooltip-group-content{--group-blur:0px;--group-glide-duration:0s;--group-rise:0px;--group-scale:1;--group-swap-blur:0px;--group-swap-shift:0px}}.tooltip{--safe-color:transparent}.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700) * 2));--min-width:auto;--offset:calc(var(--spacer) * 2);--scale:1;--spacer:var(--size-300);--width:auto}.tooltip-content--corner,.tooltip-message--corner{--corner-bleed:24px;--corner-clip-timing-function:cubic-bezier(.16, 1, .3, 1);--corner-close-duration:.26s;--corner-open-clip-duration:.32s;--corner-open-duration:.36s;--offset:0px;--scale:.96;--transition-timing-function:cubic-bezier(.2, .8, .2, 1)}.tooltip-content--grow,.tooltip-message--grow{--offset:0px;--scale:1 0;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.4, .64, 1)}.tooltip-content--morph,.tooltip-message--morph{--morph-blur:4px;--morph-close-duration:.16s;--morph-focus-timing-function:cubic-bezier(.25, .1, .25, 1);--morph-land:2px;--morph-open-duration:.12s;--morph-timing-function:cubic-bezier(.2, 0, 0, 1);--offset:0px;--scale:1}.tooltip-content--scale,.tooltip-message--scale{--offset:var(--spacer);--scale:.88}.tooltip-content--scale-spring,.tooltip-message--scale-spring{--offset:var(--spacer);--scale:.88;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-content--spring,.tooltip-message--spring{--offset:calc(var(--spacer) * 3);--scale:.96;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-content--stagger,.tooltip-message--stagger{--offset:4px;--scale:.98;--stagger-delay:25ms;--stagger-offset:6px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.16, 1, .3, 1)}.tooltip-content--zoom,.tooltip-message--zoom{--offset:8px;--scale:.95;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.16, 1, .3, 1)}.tooltip-arrow{--rotate:0deg}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.tooltip-group-content{--background:var(--color-black-400);--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--group-blur:7px;--group-close-duration:.128s;--group-delay:0s;--group-glide-duration:.4s;--group-glide-timing-function:cubic-bezier(.22, 1.12, .36, 1);--group-open-duration:.16s;--group-rise:4px;--group-scale:.94;--group-swap-blur:3px;--group-swap-duration:.14s;--group-swap-shift:10px;--group-timing-function:cubic-bezier(.23, 1, .32, 1);--max-width:calc(90vw - (var(--size-700) * 2));--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300);--spacer:var(--size-300)}.tooltip{cursor:pointer;z-index:0;position:relative}.tooltip.--active:before{background:var(--safe-color);clip-path:var(--safe-area);content:"";height:var(--safe-height);left:var(--safe-left);top:var(--safe-top);width:var(--safe-width);z-index:-3;position:absolute}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{scale:-1 1}.tooltip.--active,.tooltip:not(.--active):hover{z-index:9}.tooltip--context{cursor:inherit}.tooltip.--morphing{filter:url(#tooltip-morph-goo)}.tooltip:has(>.tooltip-content--morph,>.tooltip-message--morph,>:not(.tooltip)>.tooltip-content--morph,>:not(.tooltip)>.tooltip-message--morph):after{background:inherit;border-radius:inherit;content:"";pointer-events:none;z-index:-1;display:block;position:absolute;inset:0}.tooltip-arrow{rotate:var(--rotate);margin-inline:-1px}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;scale:var(--scale);transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width);z-index:9;overflow:hidden}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1;scale:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content--context,.tooltip-message--context{position:absolute}.tooltip-content--c,.tooltip-message--c{transform-origin:50%;position:absolute;bottom:50%;right:50%;translate:50% 50%}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{translate:var(--offset)}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% + var(--spacer) - var(--offset));transform-origin:0;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{translate:var(--offset) 50%}.tooltip-content--en,.tooltip-message--en{transform-origin:0 0;top:0}.tooltip-content--es,.tooltip-message--es{transform-origin:0 100%;bottom:0}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{translate:0 calc(var(--offset) * -1)}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% + var(--spacer) - var(--offset));transform-origin:bottom;position:absolute;right:50%;translate:50%}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{translate:50% calc(var(--offset) * -1)}.tooltip-content--ne,.tooltip-message--ne{transform-origin:100% 100%;right:0}.tooltip-content--nw,.tooltip-message--nw{transform-origin:0 100%;left:0}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{top:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{translate:0 var(--offset)}.tooltip-content--s,.tooltip-message--s{right:50%;top:calc(100% + var(--spacer) - var(--offset));transform-origin:top;position:absolute;translate:50%}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{translate:50% var(--offset)}.tooltip-content--se,.tooltip-message--se{transform-origin:100% 0;right:0}.tooltip-content--sw,.tooltip-message--sw{transform-origin:0 0;left:0}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{right:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{translate:calc(var(--offset) * -1)}.tooltip-content--w,.tooltip-message--w{bottom:50%;right:calc(100% + var(--spacer) - var(--offset));transform-origin:100%;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{translate:calc(var(--offset) * -1) 50%}.tooltip-content--wn,.tooltip-message--wn{transform-origin:100% 0;top:0}.tooltip-content--ws,.tooltip-message--ws{transform-origin:100% 100%;bottom:0}.tooltip-content--corner,.tooltip-message--corner{--corner-clip-duration:var(--corner-close-duration);--corner-duration:var(--corner-close-duration);clip-path:inset(var(--corner-inset) round var(--border-radius));transition:clip-path var(--corner-clip-duration) var(--corner-clip-timing-function), opacity var(--corner-duration) var(--transition-timing-function), scale var(--corner-duration) var(--transition-timing-function), translate var(--corner-duration) var(--transition-timing-function)}.tooltip.--active>.tooltip-content--corner,.tooltip.--active :not(.tooltip)>.tooltip-content--corner,.tooltip.--active>.tooltip-message--corner,.tooltip.--active :not(.tooltip)>.tooltip-message--corner{--corner-clip-duration:var(--corner-open-clip-duration);--corner-duration:var(--corner-open-duration);clip-path:inset(calc(var(--corner-bleed) * -1) round calc(var(--border-radius) + var(--corner-bleed)))}.tooltip-content--stagger>*,.tooltip-message--stagger>*{opacity:0;transition:opacity var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);translate:0 calc(var(--stagger-offset) * -1)}.tooltip.--active>.tooltip-content--stagger>*,.tooltip.--active :not(.tooltip)>.tooltip-content--stagger>*,.tooltip.--active>.tooltip-message--stagger>*,.tooltip.--active :not(.tooltip)>.tooltip-message--stagger>*{opacity:1;transition-delay:calc(var(--stagger-index,0) * var(--stagger-delay));translate:0}.tooltip-content--stagger>:first-child,.tooltip-message--stagger>:first-child{--stagger-index:0}.tooltip-content--stagger>:nth-child(2),.tooltip-message--stagger>:nth-child(2){--stagger-index:1}.tooltip-content--stagger>:nth-child(3),.tooltip-message--stagger>:nth-child(3){--stagger-index:2}.tooltip-content--stagger>:nth-child(4),.tooltip-message--stagger>:nth-child(4){--stagger-index:3}.tooltip-content--stagger>:nth-child(5),.tooltip-message--stagger>:nth-child(5){--stagger-index:4}.tooltip-content--stagger>:nth-child(6),.tooltip-message--stagger>:nth-child(6){--stagger-index:5}.tooltip-content--stagger>:nth-child(7),.tooltip-message--stagger>:nth-child(7){--stagger-index:6}.tooltip-content--stagger>:nth-child(8),.tooltip-message--stagger>:nth-child(8){--stagger-index:7}.tooltip-content--stagger>:nth-child(9),.tooltip-message--stagger>:nth-child(9){--stagger-index:8}.tooltip-content--stagger>:nth-child(10),.tooltip-message--stagger>:nth-child(10){--stagger-index:9}.tooltip-content--stagger>:nth-child(11),.tooltip-message--stagger>:nth-child(11){--stagger-index:10}.tooltip-content--stagger>:nth-child(12),.tooltip-message--stagger>:nth-child(12){--stagger-index:11}@media (prefers-reduced-motion:reduce){.tooltip-content--corner,.tooltip-content--grow,.tooltip-content--stagger,.tooltip-content--stagger>*,.tooltip-content--zoom,.tooltip-message--corner,.tooltip-message--grow,.tooltip-message--stagger,.tooltip-message--stagger>*,.tooltip-message--zoom{transition-duration:0s}}.tooltip-content--morph,.tooltip-message--morph{animation:tooltip-morph-close var(--morph-close-duration) linear;box-shadow:none;clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));filter:blur(var(--morph-blur));opacity:1;transition:filter var(--morph-close-duration) cubic-bezier(.16, 1, .3, 1), visibility 0s linear var(--morph-close-duration);visibility:hidden;z-index:-2;background:0 0;overflow:visible}.tooltip-content--morph:before,.tooltip-message--morph:before{background:var(--background);content:"";inset:min(var(--morph-blur) * -3, var(--morph-top) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-right) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-bottom) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-left) - var(--morph-land));z-index:-1;position:absolute}.tooltip.--active>.tooltip-content--morph,.tooltip.--active :not(.tooltip)>.tooltip-content--morph,.tooltip.--active>.tooltip-message--morph,.tooltip.--active :not(.tooltip)>.tooltip-message--morph{clip-path:inset(0 round var(--border-radius));filter:none;transition:clip-path var(--morph-open-duration) var(--morph-timing-function), filter var(--morph-open-duration) var(--morph-focus-timing-function);visibility:visible;animation:none}.tooltip-content--corner.tooltip-content--c{--corner-inset:46%}.tooltip-content--corner.tooltip-content--e{--corner-inset:46% 92% 46% 0}.tooltip-content--corner.tooltip-content--en{--corner-inset:0 92% 92% 0}.tooltip-content--corner.tooltip-content--es{--corner-inset:92% 92% 0 0}.tooltip-content--corner.tooltip-content--n{--corner-inset:92% 46% 0 46%}.tooltip-content--corner.tooltip-content--ne{--corner-inset:92% 0 0 92%}.tooltip-content--corner.tooltip-content--nw{--corner-inset:92% 92% 0 0}.tooltip-content--corner.tooltip-content--s{--corner-inset:0 46% 92% 46%}.tooltip-content--corner.tooltip-content--se{--corner-inset:0 0 92% 92%}.tooltip-content--corner.tooltip-content--sw{--corner-inset:0 92% 92% 0}.tooltip-content--corner.tooltip-content--w{--corner-inset:46% 0 46% 92%}.tooltip-content--corner.tooltip-content--wn{--corner-inset:0 0 92% 92%}.tooltip-content--corner.tooltip-content--ws{--corner-inset:92% 0 0 92%}.tooltip-content--grow:is(.tooltip-content--e,.tooltip-content--en,.tooltip-content--es,.tooltip-content--w,.tooltip-content--wn,.tooltip-content--ws){--scale:0 1}.tooltip-message--corner.tooltip-message--c{--corner-inset:46%}.tooltip-message--corner.tooltip-message--e{--corner-inset:46% 92% 46% 0}.tooltip-message--corner.tooltip-message--en{--corner-inset:0 92% 92% 0}.tooltip-message--corner.tooltip-message--es{--corner-inset:92% 92% 0 0}.tooltip-message--corner.tooltip-message--n{--corner-inset:92% 46% 0 46%}.tooltip-message--corner.tooltip-message--ne{--corner-inset:92% 0 0 92%}.tooltip-message--corner.tooltip-message--nw{--corner-inset:92% 92% 0 0}.tooltip-message--corner.tooltip-message--s{--corner-inset:0 46% 92% 46%}.tooltip-message--corner.tooltip-message--se{--corner-inset:0 0 92% 92%}.tooltip-message--corner.tooltip-message--sw{--corner-inset:0 92% 92% 0}.tooltip-message--corner.tooltip-message--w{--corner-inset:46% 0 46% 92%}.tooltip-message--corner.tooltip-message--wn{--corner-inset:0 0 92% 92%}.tooltip-message--corner.tooltip-message--ws{--corner-inset:92% 0 0 92%}.tooltip-message--grow:is(.tooltip-message--e,.tooltip-message--en,.tooltip-message--es,.tooltip-message--w,.tooltip-message--wn,.tooltip-message--ws){--scale:0 1}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);pointer-events:none;white-space:nowrap}@keyframes tooltip-morph-close{0%{clip-path:inset(0 round var(--border-radius));animation-timing-function:cubic-bezier(.3,0,.2,1)}55%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)))}80%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)));animation-timing-function:cubic-bezier(.4,0,.2,1)}to{clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius))}}}
+@layer components{.tooltip-menu-panel:after{position:absolute;inset:0}.tooltip:has(>.tooltip-content--morph,>.tooltip-message--morph,>:not(.tooltip)>.tooltip-content--morph,>:not(.tooltip)>.tooltip-message--morph):after{position:absolute;inset:0}.tooltip-menu-panel:after{border-radius:inherit;pointer-events:none}.tooltip:has(>.tooltip-content--morph,>.tooltip-message--morph,>:not(.tooltip)>.tooltip-content--morph,>:not(.tooltip)>.tooltip-message--morph):after{border-radius:inherit;pointer-events:none}.tooltip-shared{color:inherit;pointer-events:none;background:0 0;border:0;margin:0;padding:0;position:fixed;inset:auto;overflow:visible}.tooltip-menu-label,.tooltip-menu-title{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.tooltip--menu{display:inline-block}.tooltip--menu>.tooltip-menu-panel:not(.tooltip-menu-panel--expand){opacity:0;left:0;top:calc(100% + var(--offset));transition:opacity var(--close-duration) var(--open-timing-function), visibility 0s linear var(--close-duration);translate:var(--shift-x,0px) 0;visibility:hidden;z-index:9}.tooltip--menu>.tooltip-menu-panel:not(.tooltip-menu-panel--expand).--active{opacity:1;transition:opacity var(--close-duration) var(--open-timing-function);visibility:visible}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand{--background:inherit;--border-radius:inherit;--box-shadow:inherit;--expand-bleed:24px;--expand-close-fade-delay:.2s;--expand-content-delay:60ms;--expand-content-duration:.15s;--expand-content-timing-function:cubic-bezier(.23, 1, .32, 1);--expand-duration:.4s;--expand-fade-delay:var(--expand-close-fade-delay);--expand-fade-duration:.15s;--expand-offset:8px;--expand-shift:0;--expand-stagger:20ms;--expand-timing-function:linear(0, .072, .22, .382, .529, .651, .747, .82, .874, .913, .94, .96, .973, .982, .988, .992, .995, .997, .998, .999, 1);--offset:0px;--scale:1;--spacer:-100%;--width:inherit;box-shadow:none;clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));transform:translateX(var(--shift-x,0px));transition:clip-path var(--expand-duration) var(--expand-timing-function), opacity var(--expand-fade-duration) linear var(--expand-fade-delay);background:0 0;overflow:visible}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.--active{--expand-fade-delay:0s;clip-path:inset(calc(var(--expand-bleed) * -1) round calc(var(--border-radius) + var(--expand-bleed)))}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.--active:before{border-radius:var(--border-radius);inset:0}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.--active>:not(.highlight){animation:tooltip-menu-expand-in var(--expand-content-duration) var(--expand-content-timing-function) calc(var(--expand-content-delay) + var(--index,0) * var(--expand-stagger)) backwards;opacity:1}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.--active>:not(.highlight)>*{animation:tooltip-menu-expand-slide var(--expand-content-duration) var(--expand-content-timing-function) calc(var(--expand-content-delay) + var(--index,0) * var(--expand-stagger)) backwards}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.--active.tooltip-menu-panel--settled{clip-path:none}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand:before{background:var(--background);border-radius:var(--morph-radius);box-shadow:var(--box-shadow);content:"";inset:var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left);transition:border-radius var(--expand-duration) var(--expand-timing-function), inset var(--expand-duration) var(--expand-timing-function);z-index:-1;position:absolute}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:not(.highlight){animation:tooltip-menu-expand-out var(--expand-content-duration) var(--expand-content-timing-function);opacity:0}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:first-child{--index:0}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(2){--index:1}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(3){--index:2}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(4){--index:3}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(5){--index:4}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(6){--index:5}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(7){--index:6}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(8){--index:7}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(9){--index:8}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(10){--index:9}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(11){--index:10}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand>:nth-child(12){--index:11}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--e,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--en,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--es,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--nw,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--sw{--expand-shift:calc(var(--expand-offset) * -1) 0}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--n{--expand-shift:0 var(--expand-offset)}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--s{--expand-shift:0 calc(var(--expand-offset) * -1)}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--ne,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--se,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--w,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--wn,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand.tooltip-content--ws{--expand-shift:var(--expand-offset) 0}@media (prefers-reduced-motion:reduce){.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand{--expand-content-delay:0s;--expand-content-duration:0s;--expand-fade-delay:0s;--expand-stagger:0s}.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand,.tooltip--menu>.tooltip-menu-panel.tooltip-menu-panel--expand:before{transition-duration:0s}}.tooltip--menu.tooltip--instant>.tooltip-menu-panel--expand{--expand-content-delay:0s;--expand-content-duration:0s;--expand-duration:0s;--expand-fade-delay:0s;--expand-fade-duration:0s;--expand-stagger:0s}.tooltip-menu-chevron{opacity:.6;height:6px;transition:rotate var(--open-duration) var(--open-timing-function);border:1.5px solid;border-width:0 1.5px 1.5px 0;flex-shrink:0;width:6px;margin-inline:2px;rotate:-45deg}.tooltip-menu-chevron--down{rotate:45deg}.tooltip-menu-entry{position:relative}.tooltip-menu-entry--open{z-index:2}.tooltip-menu-header,.tooltip-menu-item{border-radius:var(--item-border-radius);align-items:center;gap:var(--gap);min-height:var(--item-height);padding-inline:var(--item-padding);display:flex}.tooltip-menu-header{cursor:pointer}.tooltip-menu-hint{color:var(--color-hint);font-size:.75rem}.tooltip-menu-icon{flex-shrink:0;display:inline-flex}.tooltip-menu-item{appearance:none;color:inherit;cursor:pointer;font:inherit;text-align:start;transition:background var(--close-duration) var(--open-timing-function);background:0 0;border:0;outline:none;width:100%;text-decoration:none}.tooltip-menu-item:focus,.tooltip-menu-item:hover{background:var(--background-hover)}.tooltip-menu-item.tooltip-menu-item--danger{color:var(--color-danger)}.tooltip-menu-item:disabled,.tooltip-menu-item[aria-disabled=true]{color:var(--color-disabled);cursor:not-allowed;background:0 0}.tooltip-menu-label,.tooltip-menu-title{flex:1;min-width:0}.tooltip-menu-panel{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--font-size);isolation:isolate;padding:var(--padding);width:var(--width);position:absolute}.tooltip-menu-panel:after{background:var(--scrim);content:"";opacity:0;transition:opacity var(--open-duration) var(--open-timing-function);z-index:1}.tooltip-menu-panel--covered:after{cursor:pointer;opacity:1;pointer-events:auto}.tooltip-menu-entry>.tooltip-menu-panel{clip-path:inset(var(--padding) var(--padding) calc(100% - var(--padding) - var(--item-height)) var(--padding) round var(--item-border-radius));inset-inline:calc(var(--padding) * -1);pointer-events:none;top:calc(var(--padding) * -1);transition:clip-path var(--close-duration) var(--open-timing-function), visibility 0s linear var(--close-duration);visibility:hidden;z-index:2;width:auto}.tooltip-menu-entry>.tooltip-menu-panel.--active{clip-path:inset(-48px round calc(var(--border-radius) + 48px));pointer-events:auto;transition:clip-path var(--open-duration) var(--open-timing-function);visibility:visible}.tooltip-menu-entry>.tooltip-menu-panel.--active.tooltip-menu-panel--settled{clip-path:none}.tooltip-menu-title{display:grid}.tooltip-menu-title-bold,.tooltip-menu-title-regular{text-overflow:ellipsis;transition:opacity var(--open-duration) var(--open-timing-function);grid-area:1/1;overflow:hidden}.tooltip-menu-title-bold{opacity:var(--title-bold-opacity);font-weight:600}.tooltip-menu-title-regular{opacity:var(--title-regular-opacity)}.tooltip-menu-trigger{cursor:pointer}@keyframes tooltip-menu-expand-in{0%{opacity:0}}@keyframes tooltip-menu-expand-out{0%{opacity:1}to{opacity:0}}@keyframes tooltip-menu-expand-slide{0%{translate:var(--expand-shift)}}.tooltip-shared{box-sizing:content-box;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);height:var(--shared-height);translate:var(--shared-x) var(--shared-y);width:var(--shared-width);top:0;left:0}.tooltip-shared:not(.tooltip-shared--gliding) .tooltip-shared-layer{transition:none}.tooltip-shared.--active>.tooltip-shared-box{filter:none;opacity:1;transition:filter var(--open-duration) var(--timing-function), opacity var(--open-duration) var(--timing-function), scale var(--open-duration) var(--timing-function), translate var(--open-duration) var(--timing-function);translate:0;scale:1}.tooltip-shared.tooltip-shared--instant>.tooltip-shared-box{transition:none}.tooltip-shared--e{padding-left:var(--spacer)}.tooltip-shared--gliding{transition:height var(--glide-duration) var(--glide-timing-function), translate var(--glide-duration) var(--glide-timing-function), width var(--glide-duration) var(--glide-timing-function)}.tooltip-shared--interactive.--active{pointer-events:auto}.tooltip-shared--n{padding-bottom:var(--spacer)}.tooltip-shared--s{padding-top:var(--spacer)}.tooltip-shared--w{padding-right:var(--spacer)}.tooltip-shared-box{background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);filter:blur(var(--blur));opacity:0;height:100%;scale:var(--scale);transition:filter var(--close-duration) var(--timing-function), opacity var(--close-duration) var(--timing-function), scale var(--close-duration) var(--timing-function), translate var(--close-duration) var(--timing-function);translate:var(--box-translate);display:block;position:relative;overflow:hidden}.tooltip-shared-layer{max-width:var(--max-width);padding:var(--padding);white-space:var(--white-space);width:max-content;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tooltip-shared-layer strong{--color:inherit}.tooltip{--safe-color:transparent}.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-400);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700) * 2));--min-width:auto;--offset:calc(var(--spacer) * 2);--scale:1;--spacer:var(--size-300);--width:auto}.tooltip-content--morph,.tooltip-message--morph{--morph-blur:4px;--morph-close-duration:.16s;--morph-focus-timing-function:cubic-bezier(.25, .1, .25, 1);--morph-land:2px;--morph-open-duration:.12s;--morph-timing-function:cubic-bezier(.2, 0, 0, 1);--offset:0px;--scale:1}.tooltip-content--scale,.tooltip-message--scale{--offset:var(--spacer);--scale:.88}.tooltip-content--scale-spring,.tooltip-message--scale-spring{--offset:var(--spacer);--scale:.88;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-content--spring,.tooltip-message--spring{--offset:calc(var(--spacer) * 3);--scale:.96;--transition-duration:.24s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1)}.tooltip-arrow{--rotate:0deg}.tooltip-content[role=menu]{--option-focus-background:color-mix(in srgb, currentColor 12%, transparent)}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.tooltip--menu{--background:var(--color-white-400);--background-hover:var(--color-grey-500);--border-radius:var(--border-radius-600);--box-shadow:var(--box-shadow-500);--close-duration:.12s;--color:var(--color-text-500);--color-danger:var(--color-red-400);--color-disabled:var(--color-text-300);--color-hint:var(--color-text-300);--font-size:.875rem;--gap:var(--size-200);--item-border-radius:var(--border-radius-400);--item-height:36px;--item-padding:var(--size-200);--offset:var(--size-200);--open-duration:.28s;--open-timing-function:cubic-bezier(.2, 0, 0, 1);--padding:4px;--scrim:oklch(from var(--color-black-400) l c h / .08);--width:17rem}.tooltip--menu.tooltip--instant{--close-duration:0s;--open-duration:0s}@media (pointer:coarse){.tooltip--menu{--item-height:44px}}@media (prefers-reduced-motion:reduce){.tooltip--menu{--close-duration:0s;--open-duration:0s}}.tooltip-menu-panel{--title-bold-opacity:0;--title-regular-opacity:1}.tooltip-menu-panel.--active{--title-bold-opacity:1;--title-regular-opacity:0}.tooltip-shared{--background:var(--color-black-400);--blur:7px;--box-shadow:var(--box-shadow-400);--close-duration:.128s;--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--glide-duration:.4s;--glide-timing-function:cubic-bezier(.22, 1.12, .36, 1);--max-width:calc(90vw - (var(--size-700) * 2));--open-duration:.16s;--padding:var(--size-300);--radius:var(--border-radius-400);--rise:4px;--scale:.94;--spacer:var(--size-300);--timing-function:cubic-bezier(.23, 1, .32, 1);--white-space:nowrap}.tooltip-shared--e{--box-translate:calc(var(--rise) * -1) 0}.tooltip-shared--interactive{--white-space:normal}.tooltip-shared--n{--box-translate:0 var(--rise)}.tooltip-shared--s{--box-translate:0 calc(var(--rise) * -1)}.tooltip-shared--w{--box-translate:var(--rise) 0}@media (prefers-reduced-motion:reduce){.tooltip-shared{--blur:0px;--glide-duration:0s;--rise:0px;--scale:1}}.tooltip{cursor:pointer;z-index:0;position:relative}.tooltip.--active:before{background:var(--safe-color);clip-path:var(--safe-area);content:"";height:var(--safe-height);left:var(--safe-left);top:var(--safe-top);width:var(--safe-width);z-index:-3;position:absolute}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{scale:-1 1}.tooltip.--active,.tooltip:not(.--active):hover{z-index:9}.tooltip--context,.tooltip--menu{cursor:inherit}.tooltip--morphing{filter:url(#tooltip-morph-goo)}.tooltip:has(>.tooltip-content--morph,>.tooltip-message--morph,>:not(.tooltip)>.tooltip-content--morph,>:not(.tooltip)>.tooltip-message--morph):after{background:inherit;content:"";z-index:-1;display:block}.tooltip-arrow{rotate:var(--rotate);margin-inline:-1px}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;scale:var(--scale);transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width);z-index:9;overflow:hidden}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1;scale:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content:where(.tooltip.tooltip--instant>*,.tooltip.tooltip--instant :not(.tooltip)>*),.tooltip-message:where(.tooltip.tooltip--instant>*,.tooltip.tooltip--instant :not(.tooltip)>*){transition:none}.tooltip-content--context,.tooltip-message--context{position:absolute}.tooltip-content--c,.tooltip-message--c{transform-origin:50%;position:absolute;bottom:50%;right:50%;translate:50% 50%}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{translate:var(--offset)}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% + var(--spacer) - var(--offset));transform-origin:0;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{translate:var(--offset) 50%}.tooltip-content--en,.tooltip-message--en{transform-origin:0 0;top:0}.tooltip-content--es,.tooltip-message--es{transform-origin:0 100%;bottom:0}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{translate:0 calc(var(--offset) * -1)}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% + var(--spacer) - var(--offset));transform-origin:bottom;position:absolute;right:50%;translate:50%}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{translate:50% calc(var(--offset) * -1)}.tooltip-content--ne,.tooltip-message--ne{transform-origin:100% 100%;right:0}.tooltip-content--nw,.tooltip-message--nw{transform-origin:0 100%;left:0}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{top:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{translate:0 var(--offset)}.tooltip-content--s,.tooltip-message--s{right:50%;top:calc(100% + var(--spacer) - var(--offset));transform-origin:top;position:absolute;translate:50%}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{translate:50% var(--offset)}.tooltip-content--se,.tooltip-message--se{transform-origin:100% 0;right:0}.tooltip-content--sw,.tooltip-message--sw{transform-origin:0 0;left:0}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{right:calc(100% + var(--spacer) - var(--offset));position:absolute}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{translate:calc(var(--offset) * -1)}.tooltip-content--w,.tooltip-message--w{bottom:50%;right:calc(100% + var(--spacer) - var(--offset));transform-origin:100%;position:absolute;translate:0 50%}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{translate:calc(var(--offset) * -1) 50%}.tooltip-content--wn,.tooltip-message--wn{transform-origin:100% 0;top:0}.tooltip-content--ws,.tooltip-message--ws{transform-origin:100% 100%;bottom:0}.tooltip-content--morph,.tooltip-message--morph{animation:tooltip-morph-close var(--morph-close-duration) linear;box-shadow:none;clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));filter:blur(var(--morph-blur));opacity:1;transition:filter var(--morph-close-duration) cubic-bezier(.16, 1, .3, 1), visibility 0s linear var(--morph-close-duration);visibility:hidden;z-index:-2;background:0 0;overflow:visible}.tooltip-content--morph:before,.tooltip-message--morph:before{background:var(--background);content:"";inset:min(var(--morph-blur) * -3, var(--morph-top) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-right) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-bottom) - var(--morph-land)) min(var(--morph-blur) * -3, var(--morph-left) - var(--morph-land));z-index:-1;position:absolute}.tooltip.--active>.tooltip-content--morph,.tooltip.--active :not(.tooltip)>.tooltip-content--morph,.tooltip.--active>.tooltip-message--morph,.tooltip.--active :not(.tooltip)>.tooltip-message--morph{clip-path:inset(0 round var(--border-radius));filter:none;transition:clip-path var(--morph-open-duration) var(--morph-timing-function), filter var(--morph-open-duration) var(--morph-focus-timing-function);visibility:visible;animation:none}.tooltip-message{color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);pointer-events:none;white-space:nowrap}@keyframes tooltip-morph-close{0%{clip-path:inset(0 round var(--border-radius));animation-timing-function:cubic-bezier(.3,0,.2,1)}55%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)))}80%{clip-path:inset(calc(var(--morph-top) - var(--morph-land)) calc(var(--morph-right) - var(--morph-land)) calc(var(--morph-bottom) - var(--morph-land)) calc(var(--morph-left) - var(--morph-land)) round calc(var(--morph-radius) + var(--morph-land)));animation-timing-function:cubic-bezier(.4,0,.2,1)}to{clip-path:inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius))}}}
 /*$vite$:1*/

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

@@ -0,0 +1,34 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import { type Delay } from './utilities.js';
+import '../frame/scss/index.scss';
+type Anchor = () => DOMRect;
+type Content = (() => Renderable<unknown>) | number | string;
+type Delegate = {
+    content?: (trigger: HTMLElement) => Renderable<unknown>;
+    edge?: boolean;
+    selector?: string;
+};
+type Direction = 'e' | 'n' | 's' | 'w';
+type Options = {
+    delay?: Delay;
+    direction?: Direction;
+    dismiss?: string;
+    interactive?: boolean;
+    keep?: boolean;
+    state?: State;
+};
+type State = {
+    active: boolean;
+    index: number;
+};
+declare const shared: ({ delay: { close: closing, open: opening }, direction, dismiss, interactive, keep, state }?: Options) => {
+    bind: (content: Content) => Attributes;
+    close: () => void;
+    delegate: ({ content, edge, selector }?: Delegate) => Attributes;
+    open: (trigger: HTMLElement, content: Content, anchor?: Anchor) => void;
+    release: (trigger?: HTMLElement) => void;
+    render: (attributes?: Attributes) => DocumentFragment | Text;
+    request: (trigger: HTMLElement, content: Content, anchor?: Anchor) => void;
+};
+export default shared;
+export type { Content, Delegate, Direction, Options, State };