@threadlabs/looma 0.1.16 → 0.1.18

package/dist/cjs/positioning-i0WrCAdF.js

@@ -0,0 +1,384 @@
+'use strict';
+
+const DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
+let anchorSequence = 0;
+const anchorBindings = new WeakMap();
+function bindAnchorName(anchor, name) {
+    const binding = anchorBindings.get(anchor) ?? {
+        original: anchor.style.getPropertyValue("anchor-name"),
+        names: new Set(),
+    };
+    binding.names.add(name);
+    anchorBindings.set(anchor, binding);
+    const values = [binding.original, ...binding.names].filter(Boolean);
+    anchor.style.setProperty("anchor-name", values.join(", "));
+}
+function unbindAnchorName(anchor, name) {
+    const binding = anchorBindings.get(anchor);
+    if (!binding)
+        return;
+    binding.names.delete(name);
+    if (binding.names.size) {
+        const values = [binding.original, ...binding.names].filter(Boolean);
+        anchor.style.setProperty("anchor-name", values.join(", "));
+        return;
+    }
+    if (binding.original)
+        anchor.style.setProperty("anchor-name", binding.original);
+    else
+        anchor.style.removeProperty("anchor-name");
+    anchorBindings.delete(anchor);
+}
+function supportsAnchorPositioning(owner) {
+    const css = owner.CSS;
+    return typeof css?.supports === "function"
+        && css.supports("anchor-name: --ui-anchor-test")
+        && css.supports("position-anchor: --ui-anchor-test")
+        && css.supports("top: anchor(bottom)");
+}
+function topLayerOpen(surface) {
+    try {
+        return surface.matches(":popover-open");
+    }
+    catch {
+        return !surface.hidden;
+    }
+}
+function showInTopLayer(surface) {
+    surface.setAttribute("popover", "manual");
+    surface.hidden = false;
+    if (typeof surface.showPopover === "function" && !topLayerOpen(surface)) {
+        try {
+            surface.showPopover();
+        }
+        catch {
+            // A disconnected or already-transitioning surface still receives the
+            // fixed-position fallback below and will be retried on the next sync.
+        }
+    }
+}
+function hideFromTopLayer(surface) {
+    if (typeof surface.hidePopover === "function" && topLayerOpen(surface)) {
+        try {
+            surface.hidePopover();
+        }
+        catch {
+            // The surface may have been disconnected between state and DOM updates.
+        }
+    }
+    surface.hidden = true;
+}
+/**
+ * Places unanchored floating UI, such as a toast region, in the browser top
+ * layer. Its viewport position remains CSS-owned; the controller only provides
+ * the native Popover API boundary and its no-Popover fallback.
+ */
+function createViewportSurface(surface) {
+    surface.setAttribute("popover", "manual");
+    surface.dataset.uiPositioning = "viewport";
+    return {
+        show() {
+            showInTopLayer(surface);
+        },
+        hide() {
+            hideFromTopLayer(surface);
+        },
+        destroy() {
+            hideFromTopLayer(surface);
+        },
+    };
+}
+function fallbackPosition(surface, anchor, placement, gap, viewportGap) {
+    const owner = surface.ownerDocument.defaultView ?? window;
+    const viewport = getVisualViewportRect(owner);
+    const rect = surface.getBoundingClientRect();
+    const preferTop = placement.startsWith("top");
+    const preferEnd = placement.endsWith("end");
+    const spaceBelow = viewport.bottom - anchor.bottom - viewportGap;
+    const spaceAbove = anchor.top - viewport.top - viewportGap;
+    const useTop = preferTop
+        ? !(spaceAbove < rect.height + gap && spaceBelow > spaceAbove)
+        : spaceBelow < rect.height + gap && spaceAbove > spaceBelow;
+    const unclampedTop = useTop
+        ? anchor.top - rect.height - gap
+        : anchor.bottom + gap;
+    const unclampedLeft = preferEnd
+        ? anchor.right - rect.width
+        : anchor.left;
+    const shifted = clampRectToViewport({
+        left: unclampedLeft,
+        top: unclampedTop,
+        width: rect.width,
+        height: rect.height,
+    }, viewport, viewportGap);
+    surface.style.left = `${Math.round(unclampedLeft + shifted.x)}px`;
+    surface.style.top = `${Math.round(unclampedTop + shifted.y)}px`;
+    surface.style.right = "auto";
+    surface.style.bottom = "auto";
+}
+/**
+ * One lightweight positioning controller for Looma floating UI. Native
+ * Popover provides the top layer and CSS Anchor Positioning follows a named
+ * element. Browsers without Anchor Positioning use the same flip/shift
+ * geometry through scroll/resize listeners that exist only while open.
+ */
+function createAnchoredSurface(surface, options = {}) {
+    const owner = surface.ownerDocument.defaultView ?? window;
+    const placement = options.placement ?? "bottom-start";
+    const gap = Math.max(0, options.gap ?? 4);
+    const viewportGap = Math.max(0, options.viewportGap ?? 8);
+    const nativeAnchor = supportsAnchorPositioning(owner);
+    const anchorName = `--ui-anchor-${++anchorSequence}`;
+    let anchor = options.anchor ?? null;
+    let point = null;
+    let open = false;
+    let frame = null;
+    let listenerAbort = null;
+    surface.setAttribute("popover", "manual");
+    surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
+    surface.style.position = "fixed";
+    surface.style.margin = "0";
+    const bindAnchor = (next) => {
+        if (anchor)
+            unbindAnchorName(anchor, anchorName);
+        anchor = next;
+        if (!anchor) {
+            surface.style.removeProperty("position-anchor");
+            return;
+        }
+        bindAnchorName(anchor, anchorName);
+        surface.style.setProperty("position-anchor", anchorName);
+    };
+    const positionNative = () => {
+        const blockEnd = placement.startsWith("bottom");
+        const inlineEnd = placement.endsWith("end");
+        surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
+        surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
+        surface.style.left = inlineEnd ? "auto" : "anchor(left)";
+        surface.style.right = inlineEnd ? "anchor(right)" : "auto";
+        surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
+    };
+    const position = () => {
+        frame = null;
+        if (!open)
+            return;
+        if (point) {
+            fallbackPosition(surface, {
+                left: point.x,
+                right: point.x,
+                top: point.y,
+                bottom: point.y}, "bottom-start", gap, viewportGap);
+            return;
+        }
+        if (!anchor)
+            return;
+        if (nativeAnchor)
+            positionNative();
+        else
+            fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap);
+    };
+    const schedule = () => {
+        if (!open || frame !== null)
+            return;
+        frame = owner.requestAnimationFrame(position);
+    };
+    const syncFallbackListeners = () => {
+        const needsListeners = open && (point !== null || !nativeAnchor);
+        if (!needsListeners) {
+            listenerAbort?.abort();
+            listenerAbort = null;
+            return;
+        }
+        if (listenerAbort)
+            return;
+        listenerAbort = new AbortController();
+        const signal = listenerAbort.signal;
+        owner.addEventListener("resize", schedule, { passive: true, signal });
+        owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
+        owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
+        owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
+    };
+    bindAnchor(anchor);
+    return {
+        setAnchor(next) {
+            point = null;
+            bindAnchor(next);
+            syncFallbackListeners();
+            schedule();
+        },
+        show() {
+            point = null;
+            open = true;
+            syncFallbackListeners();
+            showInTopLayer(surface);
+            position();
+        },
+        showAtPoint(nextPoint) {
+            point = nextPoint;
+            open = true;
+            syncFallbackListeners();
+            showInTopLayer(surface);
+            position();
+        },
+        hide() {
+            open = false;
+            point = null;
+            syncFallbackListeners();
+            if (frame !== null)
+                owner.cancelAnimationFrame(frame);
+            frame = null;
+            hideFromTopLayer(surface);
+        },
+        refresh: schedule,
+        destroy() {
+            open = false;
+            listenerAbort?.abort();
+            listenerAbort = null;
+            if (frame !== null)
+                owner.cancelAnimationFrame(frame);
+            frame = null;
+            hideFromTopLayer(surface);
+            bindAnchor(null);
+        },
+    };
+}
+function getVisualViewportRect(owner = window) {
+    const viewport = owner.visualViewport;
+    const left = viewport?.offsetLeft ?? 0;
+    const top = viewport?.offsetTop ?? 0;
+    const width = viewport?.width ?? owner.innerWidth;
+    const height = viewport?.height ?? owner.innerHeight;
+    return {
+        left,
+        top,
+        right: left + width,
+        bottom: top + height,
+        width,
+        height,
+    };
+}
+function clampRectToViewport(rect, viewport = getVisualViewportRect(), gutter = 0) {
+    const availableWidth = Math.max(0, viewport.width - (gutter * 2));
+    const availableHeight = Math.max(0, viewport.height - (gutter * 2));
+    const targetLeft = rect.width > availableWidth
+        ? viewport.left + gutter
+        : Math.min(Math.max(rect.left, viewport.left + gutter), viewport.right - gutter - rect.width);
+    const targetTop = rect.height > availableHeight
+        ? viewport.top + gutter
+        : Math.min(Math.max(rect.top, viewport.top + gutter), viewport.bottom - gutter - rect.height);
+    return { x: targetLeft - rect.left, y: targetTop - rect.top };
+}
+function distanceFromPointToRect(point, rect) {
+    const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
+    const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
+    return Math.hypot(dx, dy);
+}
+/**
+ * Coordinates anticipatory UI within one interaction scope.
+ *
+ * The coordinator deliberately owns one pointer listener and one animation-frame
+ * update for the whole scope. Anchors remain the only hit-testable controls; the
+ * reflected state is presentation-only, so overlapping near regions do not steal
+ * pointer input from each other or from surrounding content.
+ */
+function createProximityCoordinator(scope, options = {}) {
+    const owner = scope.ownerDocument.defaultView ?? window;
+    const pointerTarget = options.pointerTarget ?? scope;
+    const anchorSelector = options.anchorSelector ?? "[data-ui-affordance]";
+    const configuredRadius = options.nearRadius ?? DEFAULT_AFFORDANCE_NEAR_RADIUS;
+    const nearRadius = Number.isFinite(configuredRadius)
+        ? Math.max(0, configuredRadius)
+        : DEFAULT_AFFORDANCE_NEAR_RADIUS;
+    const abort = new AbortController();
+    let anchors = [];
+    let frame = null;
+    let point = null;
+    let geometryDirty = false;
+    const clear = () => {
+        for (const { element } of anchors) {
+            if (element.hasAttribute("data-ui-proximity")) {
+                element.removeAttribute("data-ui-proximity");
+            }
+        }
+        if (scope.hasAttribute("data-ui-interaction")) {
+            scope.removeAttribute("data-ui-interaction");
+        }
+    };
+    const measure = () => {
+        anchors = Array.from(scope.querySelectorAll(anchorSelector))
+            .filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true")
+            .map((element) => ({ element, rect: element.getBoundingClientRect() }));
+        geometryDirty = false;
+    };
+    const update = () => {
+        frame = null;
+        if (geometryDirty)
+            measure();
+        if (!point) {
+            clear();
+            return;
+        }
+        let engaged = false;
+        for (const anchor of anchors) {
+            const near = distanceFromPointToRect(point, anchor.rect) <= nearRadius;
+            if (near && anchor.element.getAttribute("data-ui-proximity") !== "near") {
+                anchor.element.setAttribute("data-ui-proximity", "near");
+            }
+            else if (!near && anchor.element.hasAttribute("data-ui-proximity")) {
+                anchor.element.removeAttribute("data-ui-proximity");
+            }
+            engaged ||= near;
+        }
+        if (engaged && scope.getAttribute("data-ui-interaction") !== "engaged") {
+            scope.setAttribute("data-ui-interaction", "engaged");
+        }
+        else if (!engaged && scope.hasAttribute("data-ui-interaction")) {
+            scope.removeAttribute("data-ui-interaction");
+        }
+    };
+    const schedule = () => {
+        if (frame !== null)
+            return;
+        frame = owner.requestAnimationFrame(update);
+    };
+    const onPointerMove = (event) => {
+        const pointer = event;
+        if (pointer.pointerType === "touch") {
+            point = null;
+        }
+        else {
+            point = { x: pointer.clientX, y: pointer.clientY };
+        }
+        schedule();
+    };
+    const invalidate = () => {
+        geometryDirty = true;
+        schedule();
+    };
+    pointerTarget.addEventListener("pointermove", onPointerMove, {
+        passive: true,
+        signal: abort.signal,
+    });
+    owner.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
+    owner.addEventListener("scroll", invalidate, { passive: true, capture: true, signal: abort.signal });
+    owner.visualViewport?.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
+    owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true, signal: abort.signal });
+    measure();
+    return {
+        refresh: invalidate,
+        destroy() {
+            abort.abort();
+            if (frame !== null)
+                owner.cancelAnimationFrame(frame);
+            frame = null;
+            point = null;
+            clear();
+            anchors = [];
+        },
+    };
+}
+
+exports.DEFAULT_AFFORDANCE_NEAR_RADIUS = DEFAULT_AFFORDANCE_NEAR_RADIUS;
+exports.createAnchoredSurface = createAnchoredSurface;
+exports.createProximityCoordinator = createProximityCoordinator;
+exports.createViewportSurface = createViewportSurface;

package/dist/cjs/ui-affordance-scope.cjs.entry.js

@@ -1,117 +1,7 @@
 'use strict';
 
 var index = require('./index-D07f6BOw.js');
-
-const DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
-function distanceFromPointToRect(point, rect) {
-    const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
-    const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
-    return Math.hypot(dx, dy);
-}
-/**
- * Coordinates anticipatory UI within one interaction scope.
- *
- * The coordinator deliberately owns one pointer listener and one animation-frame
- * update for the whole scope. Anchors remain the only hit-testable controls; the
- * reflected state is presentation-only, so overlapping near regions do not steal
- * pointer input from each other or from surrounding content.
- */
-function createProximityCoordinator(scope, options = {}) {
-    const owner = scope.ownerDocument.defaultView ?? window;
-    const pointerTarget = options.pointerTarget ?? scope;
-    const anchorSelector = options.anchorSelector ?? "[data-ui-affordance]";
-    const configuredRadius = options.nearRadius ?? DEFAULT_AFFORDANCE_NEAR_RADIUS;
-    const nearRadius = Number.isFinite(configuredRadius)
-        ? Math.max(0, configuredRadius)
-        : DEFAULT_AFFORDANCE_NEAR_RADIUS;
-    const abort = new AbortController();
-    let anchors = [];
-    let frame = null;
-    let point = null;
-    let geometryDirty = false;
-    const clear = () => {
-        for (const { element } of anchors) {
-            if (element.hasAttribute("data-ui-proximity")) {
-                element.removeAttribute("data-ui-proximity");
-            }
-        }
-        if (scope.hasAttribute("data-ui-interaction")) {
-            scope.removeAttribute("data-ui-interaction");
-        }
-    };
-    const measure = () => {
-        anchors = Array.from(scope.querySelectorAll(anchorSelector))
-            .filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true")
-            .map((element) => ({ element, rect: element.getBoundingClientRect() }));
-        geometryDirty = false;
-    };
-    const update = () => {
-        frame = null;
-        if (geometryDirty)
-            measure();
-        if (!point) {
-            clear();
-            return;
-        }
-        let engaged = false;
-        for (const anchor of anchors) {
-            const near = distanceFromPointToRect(point, anchor.rect) <= nearRadius;
-            if (near && anchor.element.getAttribute("data-ui-proximity") !== "near") {
-                anchor.element.setAttribute("data-ui-proximity", "near");
-            }
-            else if (!near && anchor.element.hasAttribute("data-ui-proximity")) {
-                anchor.element.removeAttribute("data-ui-proximity");
-            }
-            engaged ||= near;
-        }
-        if (engaged && scope.getAttribute("data-ui-interaction") !== "engaged") {
-            scope.setAttribute("data-ui-interaction", "engaged");
-        }
-        else if (!engaged && scope.hasAttribute("data-ui-interaction")) {
-            scope.removeAttribute("data-ui-interaction");
-        }
-    };
-    const schedule = () => {
-        if (frame !== null)
-            return;
-        frame = owner.requestAnimationFrame(update);
-    };
-    const onPointerMove = (event) => {
-        const pointer = event;
-        if (pointer.pointerType === "touch") {
-            point = null;
-        }
-        else {
-            point = { x: pointer.clientX, y: pointer.clientY };
-        }
-        schedule();
-    };
-    const invalidate = () => {
-        geometryDirty = true;
-        schedule();
-    };
-    pointerTarget.addEventListener("pointermove", onPointerMove, {
-        passive: true,
-        signal: abort.signal,
-    });
-    owner.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
-    owner.addEventListener("scroll", invalidate, { passive: true, capture: true, signal: abort.signal });
-    owner.visualViewport?.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
-    owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true, signal: abort.signal });
-    measure();
-    return {
-        refresh: invalidate,
-        destroy() {
-            abort.abort();
-            if (frame !== null)
-                owner.cancelAnimationFrame(frame);
-            frame = null;
-            point = null;
-            clear();
-            anchors = [];
-        },
-    };
-}
+var positioning = require('./positioning-i0WrCAdF.js');
 
 const uiAffordanceScopeCss = () => `:host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}`;
 
@@ -121,7 +11,7 @@ const UIAffordanceScope = class {
     }
     get host() { return index.getElement(this); }
     /** Distance outside each registered affordance that reveals its near state. */
-    nearRadius = DEFAULT_AFFORDANCE_NEAR_RADIUS;
+    nearRadius = positioning.DEFAULT_AFFORDANCE_NEAR_RADIUS;
     coordinator = null;
     componentDidLoad() {
         this.connectCoordinator();
@@ -132,7 +22,7 @@ const UIAffordanceScope = class {
     }
     connectCoordinator() {
         this.coordinator?.destroy();
-        this.coordinator = createProximityCoordinator(this.host, {
+        this.coordinator = positioning.createProximityCoordinator(this.host, {
             nearRadius: this.nearRadius,
         });
     }

package/dist/cjs/ui-context-menu.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 uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;z-index:var(--ui-z-overlay, 1000);min-width:12rem}.menu[data-open]{display:block}.menu:not([data-open]){display:none !important}`;
+const uiContextMenuCss = () => `:host{display:contents}:host([data-focus-trigger='pointer']) ::slotted(ui-menu-item:focus){outline:none}.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:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}`;
 
 const UIContextMenu = class {
     constructor(hostRef) {
@@ -18,11 +19,14 @@ const UIContextMenu = class {
     /** Optional id of the region that should also respond to a context-menu gesture. */
     for;
     internalOpen = false;
+    focusTrigger = 'programmatic';
     overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
     contextTarget = null;
     pointerX = 0;
     pointerY = 0;
+    pointPositioned = false;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
@@ -33,6 +37,12 @@ const UIContextMenu = class {
     syncOverlay() {
         this.syncTriggerState();
         if (this.internalOpen) {
+            if (this.pointPositioned) {
+                this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
+            }
+            else {
+                this.surface?.show();
+            }
             manager.openOverlay({
                 id: this.overlayId,
                 modal: false,
@@ -42,6 +52,7 @@ const UIContextMenu = class {
             });
         }
         else {
+            this.surface?.hide();
             manager.closeOverlay(this.overlayId);
         }
     }
@@ -50,18 +61,33 @@ const UIContextMenu = class {
         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;
         manager.closeOverlay(this.overlayId);
     }
+    setupSurface() {
+        const menu = this.host.shadowRoot?.querySelector('.menu');
+        if (!menu)
+            return;
+        this.surface?.destroy();
+        this.surface = positioning.createAnchoredSurface(menu, {
+            anchor: this.trigger,
+            placement: 'bottom-start',
+        });
+    }
     resolveTargets() {
         const previousTrigger = this.trigger;
         const previousContextTarget = this.contextTarget;
@@ -101,6 +127,11 @@ const UIContextMenu = class {
     openMenu(x, y, trigger) {
         this.pointerX = x;
         this.pointerY = y;
+        this.focusTrigger = trigger;
+        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;
         events.dispatchDetail(this.host, 'open', {
             open: true,
@@ -112,8 +143,14 @@ const UIContextMenu = class {
     openFromTrigger(trigger) {
         if (!this.trigger)
             return;
-        const rect = this.trigger.getBoundingClientRect();
-        this.openMenu(rect.left, rect.bottom, trigger);
+        this.pointPositioned = false;
+        this.internalOpen = true;
+        events.dispatchDetail(this.host, 'open', {
+            open: true,
+            reason: 'action',
+            trigger,
+        });
+        this.focusFirstItem();
     }
     closeMenu(reason, trigger, returnFocus = true) {
         if (!this.internalOpen)
@@ -158,6 +195,7 @@ const UIContextMenu = class {
     onKeydown = (event) => {
         if (!this.internalOpen)
             return;
+        this.focusTrigger = 'keyboard';
         if (event.key === 'Escape') {
             event.preventDefault();
             manager.requestTopOverlayClose('escape', 'keyboard');
@@ -182,7 +220,7 @@ const UIContextMenu = class {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (index.h(index.Host, { key: '79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, index.h("slot", { key: '9308cadfa155930e3e46dfb4a69a847ae388958b', name: "trigger" }), index.h("div", { key: '16cfba2b32444ac9e3cac1f040f81f17fd5db23c', class: "menu", "data-open": this.internalOpen ? '' : undefined, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, index.h("ui-menu", { key: '59f18e0df3bb1fe85efa8eeca00b336bbde47c70', open: this.internalOpen }, index.h("slot", { key: '5bdbb7773c9c1ae43ec2e05fca9558482815e28a' })))));
+        return (index.h(index.Host, { key: '4db0d5b55ead41925aa682b1e383b5735b49bf56', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, index.h("slot", { key: '462925d53db169c13e485789ae91e28b0abd3e40', name: "trigger" }), index.h("div", { key: 'cac8f3b11c4872d38e976f210ce9a43fd854b335', class: "menu", "data-open": this.internalOpen ? '' : undefined }, index.h("ui-menu", { key: 'ba50f74e11466da2240f7568479d5d10a614b394', open: this.internalOpen }, index.h("slot", { key: '1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,7 +1,7 @@
 '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');
 
 const uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;