@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/tooltip/menu.js

@@ -1,10 +1,49 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush, onCleanup } from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import onclick from './onclick.js';
-import render from './options.js';
-const template_0p4v5172 = template_u1.template(`<!--$--><div class='tooltip-content '>`);
+import overlay from '../overlay/index.js';
+import { flip, viewport } from '../../shared/viewport.js';
+import { morph } from './utilities.js';
+const template_0p4v5175 = template_u1.template(`<!--$--><span class='tooltip-menu-label'></span><!--$--><!--$-->`);
+const template_0p4v517b = template_u1.template(`<span class='tooltip-menu-icon'>`);
+const template_0p4v517e = template_u1.template(`<span class='tooltip-menu-hint'>`);
+const template_0p4v517g = template_u1.template(`<span class='tooltip-menu-chevron'>`);
+const template_0p4v517i = template_u1.template(`<div class='tooltip-menu-entry'><!--$-->`);
+const template_0p4v517m = template_u1.template(`<a class='tooltip-menu-item ' role='menuitem' tabindex='-1'>`);
+const template_0p4v517p = template_u1.template(`<button class='tooltip-menu-item ' role='menuitem' tabindex='-1' type='button'>`);
+const template_0p4v517s = template_u1.template(`<div class='tooltip-menu-panel ' role='menu'><!--$-->`);
+const template_0p4v517w = template_u1.template(`<div class='tooltip-menu-header'><!--$--><span class='tooltip-menu-title'><span class='tooltip-menu-title-regular'></span><span aria-hidden='true' class='tooltip-menu-title-bold'></span></span><span class='tooltip-menu-chevron tooltip-menu-chevron--down'>`);
+const template_0p4v51714 = template_u1.template(`<div class='tooltip tooltip--menu  '><!--$-->`);
+const template_0p4v51718 = template_u1.template(`<div class='tooltip-menu-trigger'>`);
+const template_0p4v5171b = template_u1.template(`<button aria-haspopup='menu' class='tooltip-menu-trigger' type='button'>`);
 class ReactiveObject_0p4v5170 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](false);
+    #render = this[reactivity_u0.SIGNAL](false);
+    #settled = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+    get render() {
+        return reactivity_u0.read(this.#render);
+    }
+    set render(_v1) {
+        reactivity_u0.write(this.#render, _v1);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v2) {
+        reactivity_u0.write(this.#settled, _v2);
+    }
+}
+class ReactiveObject_0p4v5171 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
@@ -16,17 +55,485 @@ class ReactiveObject_0p4v5170 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#active, _v0);
     }
 }
-const MENU_OPTION = Symbol.for('@esportsplus/ui/tooltip.menu.option');
-const MENU_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.menu.tooltip-content');
-export default component(({ options, state = new ReactiveObject_0p4v5170(), ...attributes }, content) => {
-    let { direction = 'nw', ...tooltipContent } = attributes[MENU_TOOLTIP_CONTENT] ?? {};
-    return onclick({ ...attributes, state }, (() => {
-        let root_0p4v5171 = template_0p4v5172(), element_0p4v5173 = root_0p4v5171.firstChild, element_0p4v5174 = element_0p4v5173.nextSibling;
-        template_u1.slot(element_0p4v5173, content);
-        template_u1.setList(element_0p4v5174, 'class', `tooltip-content--${direction}`);
-        template_u1.setProperties(element_0p4v5174, tooltipContent);
-        template_u1.setProperty(element_0p4v5174, 'inert', () => !state.active);
-        template_u1.slot(element_0p4v5174, render(options, attributes[MENU_OPTION]), 1);
-        return root_0p4v5171;
-    })());
-}, { option: MENU_OPTION, tooltipContent: MENU_TOOLTIP_CONTENT });
+class ReactiveObject_0p4v5172 extends reactivity_u0.ReactiveObject {
+    #open = this[reactivity_u0.SIGNAL](true);
+    #render = this[reactivity_u0.SIGNAL](true);
+    #settled = this[reactivity_u0.SIGNAL](true);
+    constructor() {
+        super(null);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+    get render() {
+        return reactivity_u0.read(this.#render);
+    }
+    set render(_v1) {
+        reactivity_u0.write(this.#render, _v1);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v2) {
+        reactivity_u0.write(this.#settled, _v2);
+    }
+}
+class ReactiveObject_0p4v5173 extends reactivity_u0.ReactiveObject {
+    #style = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get style() {
+        return reactivity_u0.read(this.#style);
+    }
+    set style(_v0) {
+        reactivity_u0.write(this.#style, _v0);
+    }
+}
+const MENU_TRIGGER = Symbol.for('@esportsplus/ui/tooltip.menu.trigger');
+const MENU_ITEM = Symbol.for('@esportsplus/ui/tooltip.menu.item');
+const MENU_PANEL = Symbol.for('@esportsplus/ui/tooltip.menu.panel');
+const VIEWPORT_MARGIN = 8;
+function covered(node) {
+    for (let i = 0, n = node.children.length; i < n; i++) {
+        if (node.children[i].state.open) {
+            return true;
+        }
+    }
+    return false;
+}
+function enabled(node) {
+    let nodes = [];
+    for (let i = 0, n = node.children.length; i < n; i++) {
+        let child = node.children[i];
+        if (child.button && !child.button.hidden && !child.item?.disabled) {
+            nodes.push(child);
+        }
+    }
+    return nodes;
+}
+function tree(items, parent) {
+    let nodes = [];
+    for (let i = 0, n = items.length; i < n; i++) {
+        let node = {
+            children: [],
+            item: items[i],
+            parent,
+            state: new ReactiveObject_0p4v5170()
+        };
+        node.children = tree(items[i].items ?? [], node);
+        nodes.push(node);
+    }
+    return nodes;
+}
+function createMenu(context = false) {
+    return component(({ animate = true, controller, expand: expansion = false, items, onselect, openOn = 'click', state = new ReactiveObject_0p4v5171(), ...attributes }, content) => {
+        let root = { children: [], state: new ReactiveObject_0p4v5172() }, stack = [root], host, leaving, pending, placement = new ReactiveObject_0p4v5173(), trigger;
+        root.children = tree(items, root);
+        onCleanup(() => {
+            clearTimeout(leaving);
+            pending?.();
+        });
+        controller?.({
+            close: () => {
+                if (state.active || pending) {
+                    close(!!root.panel?.contains(document.activeElement));
+                }
+            },
+            open: (position) => {
+                if (!context) {
+                    open();
+                }
+                else if (position) {
+                    place(position);
+                }
+                else if (host) {
+                    let focused = document.activeElement;
+                    place(anchor(focused && host.contains(focused) && !root.panel?.contains(focused) ? focused : host));
+                }
+            }
+        });
+        function stay() {
+            clearTimeout(leaving);
+            leaving = undefined;
+        }
+        function anchor(element) {
+            let bounds = element.getBoundingClientRect();
+            return { x: bounds.left, y: element === host ? bounds.top : bounds.bottom };
+        }
+        function close(focus) {
+            stay();
+            pending?.();
+            pending = undefined;
+            if (expansion && state.active) {
+                root.state.settled = false;
+                flush();
+                root.panel?.getBoundingClientRect();
+            }
+            state.active = false;
+            if (!animate) {
+                reset();
+            }
+            if (focus) {
+                trigger?.focus({ preventScroll: true });
+            }
+        }
+        function drill(node) {
+            if (!node.children.length || node.item?.disabled) {
+                return;
+            }
+            stack.push(node);
+            if (node.state.render) {
+                expand(node);
+                return;
+            }
+            node.state.render = true;
+        }
+        function entry(node) {
+            let branch = node.children.length > 0, { danger, disabled, hint, icon, items: _items, label, onselect: _onselect, ...itemAttributes } = node.item, contents = (() => {
+                let root_0p4v5174 = template_0p4v5175(), element_0p4v5176 = root_0p4v5174.firstChild, element_0p4v5177 = element_0p4v5176.nextSibling, element_0p4v5178 = element_0p4v5177.nextSibling, element_0p4v5179 = element_0p4v5178.nextSibling;
+                template_u1.slot(element_0p4v5176, icon && (() => {
+                    let root_0p4v517a = template_0p4v517b(), element_0p4v517c = root_0p4v517a.firstChild;
+                    template_u1.slot(element_0p4v517c, icon(), 1);
+                    return root_0p4v517a;
+                })());
+                template_u1.slot(element_0p4v5177, label, 1);
+                template_u1.slot(element_0p4v5178, hint && (() => {
+                    let root_0p4v517d = template_0p4v517e(), element_0p4v517f = root_0p4v517d.firstChild;
+                    template_u1.slot(element_0p4v517f, hint, 1);
+                    return root_0p4v517d;
+                })());
+                template_u1.slot(element_0p4v5179, branch && template_0p4v517g());
+                return root_0p4v5174;
+            })(), bindings = {
+                'aria-expanded': branch && (() => String(node.state.open)),
+                'aria-haspopup': branch && 'menu',
+                'aria-disabled': disabled === true && 'true',
+                onclick: (event) => {
+                    if (disabled) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (branch) {
+                        event.preventDefault();
+                        drill(node);
+                    }
+                    else {
+                        select(node, event);
+                    }
+                },
+                onconnect: (element) => {
+                    node.button = element;
+                }
+            };
+            return (() => {
+                let root_0p4v517h = template_0p4v517i(), element_0p4v517j = root_0p4v517h.firstChild, element_0p4v517k = element_0p4v517j.firstChild;
+                element_0p4v517k.parentNode.insertBefore(itemAttributes.href ? (() => {
+                    let root_0p4v517l = template_0p4v517m(), element_0p4v517n = root_0p4v517l.firstChild;
+                    template_u1.slot(element_0p4v517n, contents, 1);
+                    template_u1.setList(element_0p4v517n, 'class', danger && 'tooltip-menu-item--danger');
+                    template_u1.setProperties(element_0p4v517n, attributes[MENU_ITEM]);
+                    template_u1.setProperties(element_0p4v517n, itemAttributes);
+                    template_u1.setProperties(element_0p4v517n, bindings);
+                    return root_0p4v517l;
+                })() : (() => {
+                    let root_0p4v517o = template_0p4v517p(), element_0p4v517q = root_0p4v517o.firstChild;
+                    template_u1.slot(element_0p4v517q, contents, 1);
+                    template_u1.setList(element_0p4v517q, 'class', danger && 'tooltip-menu-item--danger');
+                    template_u1.setProperties(element_0p4v517q, attributes[MENU_ITEM]);
+                    template_u1.setProperties(element_0p4v517q, itemAttributes);
+                    template_u1.setProperties(element_0p4v517q, { ...bindings, disabled: disabled === true });
+                    return root_0p4v517o;
+                })(), element_0p4v517k);
+                new template_u1.EffectSlot(element_0p4v517j, () => branch && node.state.render && panel(node), 2);
+                template_u1.setList(element_0p4v517j, 'class', () => node.state.open && 'tooltip-menu-entry--open');
+                return root_0p4v517h;
+            })();
+        }
+        function expand(node) {
+            node.state.settled = node.state.open || instant();
+            node.state.open = true;
+            flush();
+            enabled(node)[0]?.button?.focus();
+        }
+        function instant() {
+            return !root.panel || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0;
+        }
+        function open(focus = true) {
+            stay();
+            if (state.active || pending) {
+                return;
+            }
+            reset();
+            root.state.settled = !expansion || instant();
+            flush();
+            shift();
+            function reveal() {
+                pending = undefined;
+                state.active = true;
+                flush();
+                if (focus) {
+                    enabled(root)[0]?.button?.focus({ preventScroll: true });
+                }
+            }
+            if (expansion && host && trigger) {
+                pending = morph(host, reveal, root.panel, context ? host : trigger);
+            }
+            else {
+                reveal();
+            }
+        }
+        function contextmenu(event) {
+            if (!host || !root.panel || root.panel.contains(event.target)) {
+                return;
+            }
+            event.preventDefault();
+            if (event.clientX === 0 && event.clientY === 0) {
+                place(anchor(event.target instanceof Element ? event.target : host));
+            }
+            else {
+                place({ x: event.clientX, y: event.clientY });
+            }
+        }
+        function panel(node) {
+            let item = node.item;
+            return (() => {
+                let root_0p4v517r = template_0p4v517s(), element_0p4v517t = root_0p4v517r.firstChild, element_0p4v517u = element_0p4v517t.firstChild;
+                template_u1.slot(element_0p4v517u, item && (() => {
+                    let root_0p4v517v = template_0p4v517w(), element_0p4v517x = root_0p4v517v.firstChild, element_0p4v517y = element_0p4v517x.firstChild, element_0p4v517z = element_0p4v517x.firstElementChild.firstElementChild, element_0p4v51710 = element_0p4v517z.nextElementSibling;
+                    template_u1.slot(element_0p4v517y, item.icon && (() => {
+                        let root_0p4v51711 = template_0p4v517b(), element_0p4v51712 = root_0p4v51711.firstChild;
+                        template_u1.slot(element_0p4v51712, item.icon(), 1);
+                        return root_0p4v51711;
+                    })());
+                    template_u1.slot(element_0p4v517z, item.label, 1);
+                    template_u1.slot(element_0p4v51710, item.label, 1);
+                    template_u1.delegate(element_0p4v517x, 'click', pop);
+                    return root_0p4v517v;
+                })());
+                template_u1.slot(element_0p4v517t, node.children.map(entry), 2);
+                template_u1.setList(element_0p4v517t, 'class', node === root && expansion && `tooltip-content tooltip-menu-panel--expand tooltip-content--${expansion === true ? 'se' : expansion}`);
+                template_u1.setProperties(element_0p4v517t, node === root && attributes[MENU_PANEL]);
+                template_u1.setList(element_0p4v517t, 'class', [
+                    () => (node === root ? state.active : node.state.open) && '--active',
+                    () => covered(node) && 'tooltip-menu-panel--covered',
+                    () => node.state.settled && 'tooltip-menu-panel--settled'
+                ]);
+                template_u1.setProperty(element_0p4v517t, 'inert', () => node === root ? !state.active : !node.state.open);
+                template_u1.setList(element_0p4v517t, 'style', node === root && [attributes[MENU_PANEL]?.style, () => placement.style].flat());
+                template_u1.delegate(element_0p4v517t, 'click', (event) => {
+                    if (event.target === node.panel && node !== stack[stack.length - 1]) {
+                        popTo(node);
+                    }
+                });
+                template_u1.onconnect(element_0p4v517t, (element) => {
+                    node.panel = element;
+                });
+                template_u1.onfirstpaint(element_0p4v517t, () => {
+                    if (node !== root && stack.includes(node)) {
+                        expand(node);
+                    }
+                });
+                template_u1.delegate(element_0p4v517t, 'transitionend', (e) => {
+                    if (e.target !== node.panel) {
+                        return;
+                    }
+                    if (node === root) {
+                        if (e.propertyName === 'opacity' && !state.active) {
+                            reset();
+                        }
+                        else if (e.propertyName === 'clip-path' && state.active) {
+                            root.state.settled = true;
+                        }
+                    }
+                    else if (e.propertyName === 'clip-path' && node.state.open) {
+                        node.state.settled = true;
+                    }
+                });
+                return root_0p4v517r;
+            })();
+        }
+        function place({ x, y }) {
+            if (!host || !root.panel) {
+                return;
+            }
+            let focused = document.activeElement;
+            if (!root.panel.contains(focused)) {
+                trigger = focused instanceof HTMLElement && focused !== document.body ? focused : host;
+            }
+            reset();
+            root.panel.style.setProperty('--shift-x', '0px');
+            let bounds = host.getBoundingClientRect(), scale = bounds.width / host.offsetWidth || 1, width = root.panel.offsetWidth * scale, height = root.panel.offsetHeight * scale, view = viewport();
+            x = flip(x, width, view.width, VIEWPORT_MARGIN);
+            y = flip(y, height, view.height, VIEWPORT_MARGIN);
+            placement.style = `left: ${(x - bounds.left) / scale - host.clientLeft + host.scrollLeft}px; top: ${(y - bounds.top) / scale - host.clientTop + host.scrollTop}px;`;
+            open();
+        }
+        function pop() {
+            if (stack.length < 2) {
+                return;
+            }
+            let node = stack.pop();
+            node.state.settled = false;
+            node.button?.focus();
+            requestAnimationFrame(() => {
+                if (!stack.includes(node)) {
+                    node.state.open = false;
+                }
+            });
+        }
+        function popTo(node) {
+            while (stack.length > 1 && stack[stack.length - 1] !== node) {
+                pop();
+            }
+        }
+        function reset() {
+            while (stack.length > 1) {
+                let node = stack.pop();
+                node.state.open = false;
+                node.state.settled = false;
+            }
+        }
+        function select(node, event) {
+            let item = node.item;
+            if (item.disabled) {
+                return;
+            }
+            close(true);
+            item.onselect?.(item, event);
+            onselect?.(item);
+        }
+        function shift() {
+            let element = root.panel;
+            if (!element) {
+                return;
+            }
+            let current = parseFloat(element.style.getPropertyValue('--shift-x')) || 0, rect = element.getBoundingClientRect(), left = rect.left - current, right = rect.right - current, width = viewport().width, x = 0;
+            if (right > width - VIEWPORT_MARGIN) {
+                x = width - VIEWPORT_MARGIN - right;
+            }
+            if (left + x < VIEWPORT_MARGIN) {
+                x = VIEWPORT_MARGIN - left;
+            }
+            element.style.setProperty('--shift-x', `${x}px`);
+        }
+        return (() => {
+            let root_0p4v51713 = template_0p4v51714(), element_0p4v51715 = root_0p4v51713.firstChild, element_0p4v51716 = element_0p4v51715.firstChild;
+            element_0p4v51716.parentNode.insertBefore(context ? (() => {
+                let root_0p4v51717 = template_0p4v51718(), element_0p4v51719 = root_0p4v51717.firstChild;
+                template_u1.slot(element_0p4v51719, content, 1);
+                template_u1.onconnect(element_0p4v51719, (element) => { host = element.parentElement ?? undefined; trigger = host; });
+                return root_0p4v51717;
+            })() : (() => {
+                let root_0p4v5171a = template_0p4v5171b(), element_0p4v5171c = root_0p4v5171a.firstChild;
+                template_u1.slot(element_0p4v5171c, content, 1);
+                template_u1.setProperties(element_0p4v5171c, attributes[MENU_TRIGGER]);
+                template_u1.setProperty(element_0p4v5171c, 'aria-expanded', () => String(state.active));
+                template_u1.delegate(element_0p4v5171c, 'click', () => {
+                    if (state.active || pending) {
+                        close(false);
+                    }
+                    else {
+                        open();
+                    }
+                });
+                template_u1.onconnect(element_0p4v5171c, (element) => {
+                    trigger = element;
+                    host = element.parentElement ?? undefined;
+                });
+                return root_0p4v5171a;
+            })(), element_0p4v51716);
+            template_u1.slot(element_0p4v51715, panel(root), 2);
+            template_u1.setList(element_0p4v51715, 'class', context && 'tooltip--context');
+            template_u1.setList(element_0p4v51715, 'class', !animate && 'tooltip--instant');
+            template_u1.setProperties(element_0p4v51715, attributes);
+            template_u1.setProperties(element_0p4v51715, {
+                ...overlay.popup({
+                    canDismiss: () => !!pending,
+                    ondismiss: (reason) => close(reason === 'escape'),
+                    state,
+                    target: (root) => root.querySelector(':scope > .tooltip-menu-panel') ?? undefined
+                }),
+                oncontextmenu: context ? contextmenu : undefined,
+                onfocusout: (event) => {
+                    if ((state.active || pending) && !event.currentTarget.contains(event.relatedTarget)) {
+                        close(false);
+                    }
+                },
+                onpointerenter: !context && openOn === 'hover' ? ((event) => {
+                    if (event.pointerType !== 'touch') {
+                        open(false);
+                    }
+                }) : undefined,
+                onpointerleave: !context && openOn === 'hover' ? ((event) => {
+                    if (event.pointerType !== 'touch') {
+                        leaving = setTimeout(() => close(false), 150);
+                    }
+                }) : undefined,
+                onwindowresize: () => state.active && shift(),
+                onkeydown: (e) => {
+                    if (context && (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey))) {
+                        e.preventDefault();
+                        if (!root.panel?.contains(e.target)) {
+                            place(anchor(e.target));
+                        }
+                        return;
+                    }
+                    if (!state.active) {
+                        if (e.key === 'ArrowDown' && e.target === trigger) {
+                            e.preventDefault();
+                            open();
+                        }
+                        return;
+                    }
+                    let nodes = enabled(stack[stack.length - 1]), index = nodes.findIndex((node) => node.button === document.activeElement), n = nodes.length;
+                    switch (e.key) {
+                        case 'ArrowDown':
+                            nodes[(index + 1) % n]?.button?.focus();
+                            break;
+                        case 'ArrowUp':
+                            nodes[index < 1 ? n - 1 : index - 1]?.button?.focus();
+                            break;
+                        case 'ArrowLeft':
+                        case 'Backspace':
+                            pop();
+                            break;
+                        case 'ArrowRight':
+                            if (index !== -1) {
+                                drill(nodes[index]);
+                            }
+                            break;
+                        case 'End':
+                            nodes[n - 1]?.button?.focus();
+                            break;
+                        case 'Escape':
+                            if (stack.length > 1) {
+                                pop();
+                            }
+                            else {
+                                close(true);
+                            }
+                            break;
+                        case 'Home':
+                            nodes[0]?.button?.focus();
+                            break;
+                        case 'Tab':
+                            close(true);
+                            break;
+                        default:
+                            return;
+                    }
+                    e.preventDefault();
+                }
+            });
+            return root_0p4v51713;
+        })();
+    }, { item: MENU_ITEM, panel: MENU_PANEL, trigger: MENU_TRIGGER });
+}
+const menu = createMenu();
+const context = createMenu(true);
+export default menu;
+export { context };

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

@@ -1,6 +1,7 @@
 import * as template_u1 from '@esportsplus/template';
 import { type Attributes } from '@esportsplus/template';
 type A = Attributes & {
+    manual?: boolean;
     onanimationcancel?: never;
     onanimationend?: never;
     onanimationstart?: never;

package/build/components/tooltip/onclick.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 { morph, morphing } from './utilities.js';
-const template_0p6u8352 = template_u1.template(`<div class='tooltip'>`);
+import { onCleanup } from '@esportsplus/reactivity';
+import overlay from '../overlay/index.js';
+import { content as surface, morph, morphs } from './utilities.js';
+const template_0p6u8353 = template_u1.template(`<div class='tooltip'>`);
 class ReactiveObject_0p6u8350 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {
@@ -15,40 +17,55 @@ class ReactiveObject_0p6u8350 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#active, _v0);
     }
 }
-export default component(({ state = new ReactiveObject_0p6u8350(), toggle = false, ...attributes }, content) => {
-    let cancel;
-    return (() => {
-        let root_0p6u8351 = template_0p6u8352(), element_0p6u8353 = root_0p6u8351.firstChild;
-        template_u1.setProperties(element_0p6u8353, attributes);
-        template_u1.setList(element_0p6u8353, 'class', () => state.active && '--active');
-        template_u1.delegate(element_0p6u8353, 'animationcancel', morphing(false));
-        template_u1.delegate(element_0p6u8353, 'animationend', morphing(false));
-        template_u1.delegate(element_0p6u8353, 'animationstart', morphing(true));
-        template_u1.delegate(element_0p6u8353, 'click', function (e) {
-            let active = this === e.target || toggle ? !state.active : true;
+class ReactiveObject_0p6u8351 extends reactivity_u0.ReactiveObject {
+    #morphing = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get morphing() {
+        return reactivity_u0.read(this.#morphing);
+    }
+    set morphing(_v0) {
+        reactivity_u0.write(this.#morphing, _v0);
+    }
+}
+export default component(({ manual = false, state = new ReactiveObject_0p6u8350(), toggle = false, ...attributes }, content) => {
+    let cancel, local = new ReactiveObject_0p6u8351();
+    onCleanup(() => cancel?.());
+    let popup = overlay.popup({
+        canDismiss: () => !!cancel,
+        ondismiss: () => {
             cancel?.();
             cancel = undefined;
-            if (active && !state.active) {
-                cancel = morph(this, () => {
+        },
+        state,
+        target: surface
+    });
+    return (() => {
+        let root_0p6u8352 = template_0p6u8353(), element_0p6u8354 = root_0p6u8352.firstChild;
+        template_u1.slot(element_0p6u8354, content, 1);
+        template_u1.setProperties(element_0p6u8354, attributes);
+        template_u1.setProperties(element_0p6u8354, {
+            ...popup,
+            ...morphs(local),
+            class: [
+                popup.class,
+                () => local.morphing && 'tooltip--morphing'
+            ].flat(),
+            ...(!manual && { onclick: function (e) {
+                    let active = this === e.target || toggle ? !state.active : true;
+                    cancel?.();
                     cancel = undefined;
-                    state.active = true;
-                });
-                return;
-            }
-            state.active = active;
-        });
-        template_u1.ondocument(element_0p6u8353, 'click', function (event) {
-            if (!this?.isConnected || !state.active) {
-                return;
-            }
-            if (!this.contains(event.target)) {
-                state.active = false;
-            }
+                    if (active && !state.active) {
+                        cancel = morph(this, () => {
+                            cancel = undefined;
+                            state.active = true;
+                        });
+                        return;
+                    }
+                    state.active = active;
+                } })
         });
-        template_u1.delegate(element_0p6u8353, 'transitioncancel', morphing(false));
-        template_u1.delegate(element_0p6u8353, 'transitionend', morphing(false));
-        template_u1.delegate(element_0p6u8353, 'transitionrun', morphing(true));
-        template_u1.slot(element_0p6u8353, content, 1);
-        return root_0p6u8351;
+        return root_0p6u8352;
     })();
 });