@threadlabs/looma 0.1.15 → 0.1.17

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

@@ -2,8 +2,10 @@
 
 var index = require('./index-D07f6BOw.js');
 var events = require('./events-TcQIzpNv.js');
+var manager = require('./manager-C9j3HZay.js');
+var positioning = require('./positioning-i0WrCAdF.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) {
@@ -12,19 +14,84 @@ const UIMenu = class {
     get host() { return index.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();
+            manager.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();
+            manager.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;
+        manager.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 = positioning.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;
+        events.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'));
@@ -51,6 +118,11 @@ const UIMenu = class {
         this.internalOpen = false;
     };
     onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            manager.requestTopOverlayClose('escape', 'keyboard');
+            return;
+        }
         const items = this.getItems().filter((i) => !this.isItemDisabled(i));
         if (items.length === 0)
             return;
@@ -83,11 +155,20 @@ const UIMenu = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '5e463cbbce272c6b6132a839b818deef3e39a532', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'feea6a21d41a7b27a6270814bcf0b3f3ded394a1' })));
+        return (index.h(index.Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
+            }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
+            }],
+        "internalOpen": [{
+                "syncSurface": 0
             }]
     }; }
 };

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-D07f6BOw.js');
-var manager = require('./manager-BOpVXb92.js');
+var manager = require('./manager-C9j3HZay.js');
 var events = require('./events-TcQIzpNv.js');
+var positioning = require('./positioning-i0WrCAdF.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) {
@@ -13,8 +14,13 @@ const UIPopover = class {
     get host() { return index.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;
     }
@@ -35,12 +41,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 = positioning.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) {
             manager.openOverlay({
                 id: this.overlayId,
                 modal: false,
                 element: this.host,
+                relatedElements: this.anchor ? [this.anchor] : undefined,
                 dismissible: true,
                 requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
             });
@@ -53,10 +84,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;
         manager.closeOverlay(this.overlayId);
     }
     componentDidUpdate() {
@@ -76,7 +110,7 @@ const UIPopover = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '67e7f52220db9d997fb11b686d6abcbdf9557a8d', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: 'd7c1fa2ab75994fe0a7dd63f8289754c7754c30f' })));
+        return (index.h(index.Host, { key: '8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: '3141729cd32c8dcdaec1fbd763eb034242563c8f' })));
     }
     static get watchers() { return {
         "open": [{
@@ -84,6 +118,12 @@ const UIPopover = class {
             }],
         "internalOpen": [{
                 "onOpenChange": 0
+            }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
             }]
     }; }
 };

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

@@ -2,8 +2,9 @@
 
 var index = require('./index-D07f6BOw.js');
 var events = require('./events-TcQIzpNv.js');
+var positioning = require('./positioning-i0WrCAdF.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) {
@@ -12,15 +13,26 @@ const UIToastRegion = class {
     get host() { return index.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 = positioning.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]'));
@@ -54,11 +66,14 @@ const UIToastRegion = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '0edcce54864ba991b092d004d3b45cf697b9c3ac', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '2e30794a05b018fb55c4313c8e17f7262ecee7da' })));
+        return (index.h(index.Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "syncSurface": 0
             }]
     }; }
 };

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-D07f6BOw.js');
-var manager = require('./manager-BOpVXb92.js');
+var manager = require('./manager-C9j3HZay.js');
 var events = require('./events-TcQIzpNv.js');
+var positioning = require('./positioning-i0WrCAdF.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) {
@@ -14,51 +15,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();
             manager.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();
             manager.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);
         manager.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 = positioning.createAnchoredSurface(this.host, {
+            anchor: this.trigger,
+            placement: this.placement,
+        });
     }
     attachTriggerListeners() {
         this.detachTriggerListeners();
@@ -77,31 +106,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;
+        events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
+            open: nextOpen,
+            reason: 'action',
+            trigger,
+        });
+    }
     onTriggerEnter = () => {
-        this.internalOpen = true;
-        events.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;
-        events.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;
-        events.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;
-        events.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;
             events.dispatchDetail(this.host, 'close', {
                 open: false,
@@ -117,12 +179,18 @@ const UITooltip = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '64b5f4e7a56cbf5560edc6d7118022a49d5e2786', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: 'cf6f96689021a42a01b782f0e1d0730b5a9aa1f8' })));
+        return (index.h(index.Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
     }
     static get watchers() { return {
         "open": [{
                 "syncFromProp": 0
             }],
+        "for": [{
+                "resetSurface": 0
+            }],
+        "placement": [{
+                "resetSurface": 0
+            }],
         "internalOpen": [{
                 "syncOverlay": 0
             }]

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

@@ -603,7 +603,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) {

package/dist/collection/components/ui-context-menu/ui-context-menu.css

@@ -4,14 +4,27 @@
 
 .menu {
   position: fixed;
+  inset: auto;
+  margin: 0;
   z-index: var(--ui-z-overlay, 1000);
   min-width: 12rem;
+  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;
 }
 
-.menu[data-open] {
-  display: block;
+.menu:popover-open { opacity: 1; transform: translateY(0) scale(1); }
+
+@starting-style {
+  .menu:popover-open { opacity: 0; transform: translateY(-4px) scale(0.99); }
 }
 
-.menu:not([data-open]) {
-  display: none !important;
+.menu[hidden] { display: none !important; }
+
+@media (prefers-reduced-motion: reduce) {
+  .menu { transition: none; }
 }

package/dist/collection/components/ui-context-menu/ui-context-menu.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { createAnchoredSurface } from "../../overlay/positioning";
 export class UIContextMenu {
     host;
     /** Controls the menu when the consumer owns open state. */
@@ -15,6 +16,8 @@ export class UIContextMenu {
     contextTarget = null;
     pointerX = 0;
     pointerY = 0;
+    pointPositioned = false;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
@@ -25,6 +28,12 @@ export class UIContextMenu {
     syncOverlay() {
         this.syncTriggerState();
         if (this.internalOpen) {
+            if (this.pointPositioned) {
+                this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
+            }
+            else {
+                this.surface?.show();
+            }
             openOverlay({
                 id: this.overlayId,
                 modal: false,
@@ -34,6 +43,7 @@ export class UIContextMenu {
             });
         }
         else {
+            this.surface?.hide();
             closeOverlay(this.overlayId);
         }
     }
@@ -42,18 +52,33 @@ export class UIContextMenu {
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.resolveTargets();
         this.attachTargetListeners();
+        this.setupSurface();
         this.syncTriggerState();
         this.syncOverlay();
     }
     componentDidUpdate() {
         this.resolveTargets();
         this.attachTargetListeners();
+        if (!this.pointPositioned)
+            this.surface?.setAnchor(this.trigger);
         this.syncTriggerState();
     }
     disconnectedCallback() {
         this.detachTargetListeners();
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
     }
+    setupSurface() {
+        const menu = this.host.shadowRoot?.querySelector('.menu');
+        if (!menu)
+            return;
+        this.surface?.destroy();
+        this.surface = createAnchoredSurface(menu, {
+            anchor: this.trigger,
+            placement: 'bottom-start',
+        });
+    }
     resolveTargets() {
         const previousTrigger = this.trigger;
         const previousContextTarget = this.contextTarget;
@@ -93,6 +118,10 @@ export class UIContextMenu {
     openMenu(x, y, trigger) {
         this.pointerX = x;
         this.pointerY = y;
+        this.pointPositioned = true;
+        // Context-click can reposition an already-open trigger menu, so do not
+        // depend on a state transition to run the positioning controller.
+        this.surface?.showAtPoint({ x, y });
         this.internalOpen = true;
         dispatchDetail(this.host, 'open', {
             open: true,
@@ -104,8 +133,14 @@ export class UIContextMenu {
     openFromTrigger(trigger) {
         if (!this.trigger)
             return;
-        const rect = this.trigger.getBoundingClientRect();
-        this.openMenu(rect.left, rect.bottom, trigger);
+        this.pointPositioned = false;
+        this.internalOpen = true;
+        dispatchDetail(this.host, 'open', {
+            open: true,
+            reason: 'action',
+            trigger,
+        });
+        this.focusFirstItem();
     }
     closeMenu(reason, trigger, returnFocus = true) {
         if (!this.internalOpen)
@@ -174,7 +209,7 @@ export class UIContextMenu {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (h(Host, { key: '79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '9308cadfa155930e3e46dfb4a69a847ae388958b', name: "trigger" }), h("div", { key: '16cfba2b32444ac9e3cac1f040f81f17fd5db23c', class: "menu", "data-open": this.internalOpen ? '' : undefined, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, h("ui-menu", { key: '59f18e0df3bb1fe85efa8eeca00b336bbde47c70', open: this.internalOpen }, h("slot", { key: '5bdbb7773c9c1ae43ec2e05fca9558482815e28a' })))));
+        return (h(Host, { key: 'aee76fad23434fb3cdaf885c698f62237c2a9468', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: 'da047f870b7a93f1acbba5fa1628b5cb66139d99', name: "trigger" }), h("div", { key: '388a473ac7fb626a20d0feda14f0d8dd16f6ab94', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '67ca5c05ff40d2dd1d5f17a8634636503f98c02d', open: this.internalOpen }, h("slot", { key: 'b7c7dfac4342afa1df67459e94de7ac7dca4a251' })))));
     }
     static get is() { return "ui-context-menu"; }
     static get encapsulation() { return "shadow"; }