@threadlabs/looma 0.1.16 → 0.1.17

package/dist/esm/ui-menu.entry.js

@@ -1,7 +1,9 @@
 import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
+import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
 
-const uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
+const uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
 
 const UIMenu = class {
     constructor(hostRef) {
@@ -10,19 +12,84 @@ const UIMenu = class {
     get host() { return getElement(this); }
     open = false;
     defaultOpen = false;
+    /** Id of the control that anchors this menu in the top layer. */
+    for;
+    /** Preferred placement; Looma flips and shifts when space is constrained. */
+    placement = 'bottom-start';
     internalOpen = false;
+    overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
+    anchor = null;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
+    resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+    }
+    syncSurface() {
+        this.syncAnchorState();
+        if (!this.surface)
+            return;
+        if (this.internalOpen) {
+            this.surface.show();
+            openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                relatedElements: this.anchor ? [this.anchor] : undefined,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.closeMenu(reason, trigger),
+            });
+        }
+        else {
+            this.surface.hide();
+            closeOverlay(this.overlayId);
+        }
+    }
     componentDidLoad() {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
+        this.setupSurface();
+        this.syncSurface();
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onItemClick);
         this.host.removeEventListener('keydown', this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
+        closeOverlay(this.overlayId);
+    }
+    setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+            return;
+        this.surface = createAnchoredSurface(this.host, {
+            anchor: this.anchor,
+            placement: this.placement,
+        });
+    }
+    syncAnchorState() {
+        if (!this.anchor)
+            return;
+        this.anchor.setAttribute('aria-haspopup', 'menu');
+        this.anchor.setAttribute('aria-expanded', this.internalOpen ? 'true' : 'false');
+    }
+    closeMenu(reason, trigger) {
+        if (!this.internalOpen)
+            return;
+        this.internalOpen = false;
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+        if (reason === 'escape')
+            this.anchor?.focus();
     }
     getItems() {
         return Array.from(this.host.querySelectorAll('ui-menu-item'));
@@ -49,6 +116,11 @@ const UIMenu = class {
         this.internalOpen = false;
     };
     onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            requestTopOverlayClose('escape', 'keyboard');
+            return;
+        }
         const items = this.getItems().filter((i) => !this.isItemDisabled(i));
         if (items.length === 0)
             return;
@@ -81,11 +153,20 @@ const UIMenu = class {
         }
     };
     render() {
-        return (h(Host, { key: '5e463cbbce272c6b6132a839b818deef3e39a532', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'feea6a21d41a7b27a6270814bcf0b3f3ded394a1' })));
+        return (h(Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
+            }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
+            }],
+        "internalOpen": [{
+                "syncSurface": 0
             }]
     }; }
 };

package/dist/esm/ui-popover.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
-import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-CR7f2MQC.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
+import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
 
-const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}`;
+const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
 
 const UIPopover = class {
     constructor(hostRef) {
@@ -11,8 +12,13 @@ const UIPopover = class {
     get host() { return getElement(this); }
     open = false;
     defaultOpen = false;
+    /** Optional id of the element this popover follows in the top layer. */
+    for;
+    placement = 'bottom-start';
     internalOpen = false;
     overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+    anchor = null;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
@@ -33,12 +39,37 @@ const UIPopover = class {
             });
         }
     }
+    resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+    }
+    setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+            return;
+        this.surface = createAnchoredSurface(this.host, {
+            anchor: this.anchor,
+            placement: this.placement,
+        });
+    }
+    syncSurface() {
+        if (!this.surface)
+            return;
+        if (this.internalOpen)
+            this.surface.show();
+        else
+            this.surface.hide();
+    }
     syncOverlay() {
+        this.syncSurface();
         if (this.internalOpen) {
             openOverlay({
                 id: this.overlayId,
                 modal: false,
                 element: this.host,
+                relatedElements: this.anchor ? [this.anchor] : undefined,
                 dismissible: true,
                 requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
             });
@@ -51,10 +82,13 @@ const UIPopover = class {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener('keydown', this.onKeydown);
+        this.setupSurface();
         this.syncOverlay();
     }
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
     }
     componentDidUpdate() {
@@ -74,7 +108,7 @@ const UIPopover = class {
         }
     };
     render() {
-        return (h(Host, { key: '67e7f52220db9d997fb11b686d6abcbdf9557a8d', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'd7c1fa2ab75994fe0a7dd63f8289754c7754c30f' })));
+        return (h(Host, { key: '8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '3141729cd32c8dcdaec1fbd763eb034242563c8f' })));
     }
     static get watchers() { return {
         "open": [{
@@ -82,6 +116,12 @@ const UIPopover = class {
             }],
         "internalOpen": [{
                 "onOpenChange": 0
+            }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
             }]
     }; }
 };

package/dist/esm/ui-toast-region.entry.js

@@ -1,7 +1,8 @@
 import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+import { b as createViewportSurface } from './positioning-Bu0dmLBE.js';
 
-const uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
+const uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
 
 const UIToastRegion = class {
     constructor(hostRef) {
@@ -10,15 +11,26 @@ const UIToastRegion = class {
     get host() { return getElement(this); }
     open = true;
     internalOpen = true;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
+    syncSurface() {
+        if (this.internalOpen)
+            this.surface?.show();
+        else
+            this.surface?.hide();
+    }
     componentDidLoad() {
+        this.surface = createViewportSurface(this.host);
         this.syncFromProp();
+        this.syncSurface();
         this.host.addEventListener('click', this.onClick);
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onClick);
+        this.surface?.destroy();
+        this.surface = null;
     }
     getToasts() {
         return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
@@ -52,11 +64,14 @@ const UIToastRegion = class {
         }
     };
     render() {
-        return (h(Host, { key: '0edcce54864ba991b092d004d3b45cf697b9c3ac', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '2e30794a05b018fb55c4313c8e17f7262ecee7da' })));
+        return (h(Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "syncSurface": 0
             }]
     }; }
 };

package/dist/esm/ui-tooltip.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
-import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-CR7f2MQC.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
+import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
 
-const uiTooltipCss = () => `:host{display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host([hidden]){display:none !important}`;
+const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 
 const UITooltip = class {
     constructor(hostRef) {
@@ -12,51 +13,79 @@ const UITooltip = class {
     for = '';
     open = false;
     defaultOpen = false;
+    placement = 'top-start';
+    /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
+    showDelay = 500;
+    /** Pointer leave grace period in milliseconds. */
+    hideDelay = 100;
     internalOpen = false;
     overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
+    surface = null;
+    showTimer = null;
+    hideTimer = null;
     syncFromProp() {
+        this.clearTimers();
         this.internalOpen = this.open;
     }
+    resetSurface() {
+        this.syncTrigger();
+        this.setupSurface();
+        this.syncOverlay();
+    }
     syncOverlay() {
         if (this.internalOpen) {
+            this.surface?.show();
             openOverlay({
                 id: this.overlayId,
                 modal: false,
                 element: this.host,
+                relatedElements: this.trigger ? [this.trigger] : undefined,
                 dismissible: true,
                 requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
             });
         }
         else {
+            this.surface?.hide();
             closeOverlay(this.overlayId);
         }
     }
     componentDidLoad() {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
-        this.resolveTrigger();
-        this.attachTriggerListeners();
+        this.syncTrigger();
+        this.setupSurface();
         this.host.addEventListener('keydown', this.onKeydown);
         this.syncOverlay();
     }
     componentDidUpdate() {
-        this.resolveTrigger();
-        this.attachTriggerListeners();
-        this.syncOverlay();
+        this.syncTrigger();
     }
     disconnectedCallback() {
+        this.clearTimers();
         this.detachTriggerListeners();
+        this.surface?.destroy();
+        this.surface = null;
         this.host.removeEventListener('keydown', this.onKeydown);
         closeOverlay(this.overlayId);
     }
-    resolveTrigger() {
-        if (this.for) {
-            this.trigger = document.getElementById(this.for);
-        }
-        else {
-            this.trigger = this.host.previousElementSibling;
-        }
+    syncTrigger() {
+        const next = this.for
+            ? this.host.ownerDocument.getElementById(this.for)
+            : this.host.previousElementSibling;
+        if (next === this.trigger)
+            return;
+        this.detachTriggerListeners();
+        this.trigger = next;
+        this.attachTriggerListeners();
+        this.surface?.setAnchor(next);
+    }
+    setupSurface() {
+        this.surface?.destroy();
+        this.surface = createAnchoredSurface(this.host, {
+            anchor: this.trigger,
+            placement: this.placement,
+        });
     }
     attachTriggerListeners() {
         this.detachTriggerListeners();
@@ -75,31 +104,64 @@ const UITooltip = class {
         this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
         this.trigger.removeEventListener('focusout', this.onTriggerFocusOut);
     }
+    clearShowTimer() {
+        if (this.showTimer === null)
+            return;
+        clearTimeout(this.showTimer);
+        this.showTimer = null;
+    }
+    clearHideTimer() {
+        if (this.hideTimer === null)
+            return;
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+    }
+    clearTimers() {
+        this.clearShowTimer();
+        this.clearHideTimer();
+    }
+    setInteractionOpen(nextOpen, trigger) {
+        if (this.internalOpen === nextOpen)
+            return;
+        this.internalOpen = nextOpen;
+        dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
+            open: nextOpen,
+            reason: 'action',
+            trigger,
+        });
+    }
     onTriggerEnter = () => {
-        this.internalOpen = true;
-        dispatchDetail(this.host, 'open', { open: true, reason: 'action', trigger: 'pointer' });
-        this.syncOverlay();
+        this.clearHideTimer();
+        if (this.internalOpen || this.showTimer !== null)
+            return;
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            this.setInteractionOpen(true, 'pointer');
+        }, Math.max(0, this.showDelay));
     };
     onTriggerLeave = () => {
-        this.internalOpen = false;
-        dispatchDetail(this.host, 'close', { open: false, reason: 'action', trigger: 'pointer' });
-        this.syncOverlay();
+        this.clearShowTimer();
+        if (!this.internalOpen || this.hideTimer !== null)
+            return;
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.setInteractionOpen(false, 'pointer');
+        }, Math.max(0, this.hideDelay));
     };
     onTriggerFocusIn = () => {
-        this.internalOpen = true;
-        dispatchDetail(this.host, 'open', { open: true, reason: 'action', trigger: 'keyboard' });
-        this.syncOverlay();
+        this.clearTimers();
+        this.setInteractionOpen(true, 'keyboard');
     };
     onTriggerFocusOut = (e) => {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
             return;
-        this.internalOpen = false;
-        dispatchDetail(this.host, 'close', { open: false, reason: 'action', trigger: 'keyboard' });
-        this.syncOverlay();
+        this.clearTimers();
+        this.setInteractionOpen(false, 'keyboard');
     };
     handleRequestClose(reason, trigger) {
         if (reason === 'escape') {
+            this.clearTimers();
             this.internalOpen = false;
             dispatchDetail(this.host, 'close', {
                 open: false,
@@ -115,12 +177,18 @@ const UITooltip = class {
         }
     };
     render() {
-        return (h(Host, { key: '64b5f4e7a56cbf5560edc6d7118022a49d5e2786', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'cf6f96689021a42a01b782f0e1d0730b5a9aa1f8' })));
+        return (h(Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
             }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
+            }],
         "internalOpen": [{
                 "syncOverlay": 0
             }]

package/dist/esm/ui-tree-item.entry.js

@@ -601,7 +601,7 @@ function loomaIconMarkup(name, className = 'looma-icon') {
     ].join('');
 }
 
-const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:44px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}@media (hover: none), (pointer: coarse){.drag-handle{display:none}}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
+const uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
 
 const UITreeItem = class {
     constructor(hostRef) {