@threadlabs/looma 0.1.15 → 0.1.17

package/dist/collection/components/ui-tooltip/ui-tooltip.js

@@ -1,56 +1,85 @@
 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 UITooltip {
     host;
     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();
@@ -69,31 +98,64 @@ export class UITooltip {
         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,
@@ -109,7 +171,7 @@ export class UITooltip {
         }
     };
     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 is() { return "ui-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -184,6 +246,73 @@ export class UITooltip {
                 "reflect": false,
                 "attribute": "default-open",
                 "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnchoredPlacement",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "AnchoredPlacement": {
+                            "location": "import",
+                            "path": "../../overlay/positioning",
+                            "id": "src/overlay/positioning.ts::AnchoredPlacement",
+                            "referenceLocation": "AnchoredPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'top-start'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pointer hover intent delay in milliseconds. Keyboard focus is immediate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "500"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pointer leave grace period in milliseconds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-delay",
+                "defaultValue": "100"
             }
         };
     }
@@ -197,6 +326,12 @@ export class UITooltip {
         return [{
                 "propName": "open",
                 "methodName": "syncFromProp"
+            }, {
+                "propName": "for",
+                "methodName": "resetSurface"
+            }, {
+                "propName": "placement",
+                "methodName": "resetSurface"
             }, {
                 "propName": "internalOpen",
                 "methodName": "syncOverlay"

package/dist/collection/components/ui-tree-item/ui-tree-item.css

@@ -1,6 +1,6 @@
 :host {
   --ui-tree-indent: 16px;
-  --ui-tree-row-min-height: 44px;
+  --ui-tree-row-min-height: 32px;
   --ui-tree-drop-color: var(--ui-accent-solid);
 
   position: relative;
@@ -16,13 +16,15 @@
   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);
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    min-block-size var(--ui-motion-base) var(--ui-motion-ease);
 }
 
 .row:hover,
@@ -198,10 +200,12 @@
   display: none;
 }
 
-@media (hover: none), (pointer: coarse) {
-  .drag-handle {
-    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) {

package/dist/collection/input-modality.js

@@ -0,0 +1,24 @@
+const initializedDocuments = new WeakSet();
+/**
+ * Reflects real touch use instead of guessing from device capability media
+ * queries. Hybrid devices therefore keep compact pointer affordances until the
+ * user actually touches the interface.
+ */
+export function initializeInputModality(owner = document) {
+    if (initializedDocuments.has(owner))
+        return;
+    initializedDocuments.add(owner);
+    const markTouch = () => {
+        if (owner.documentElement.getAttribute("data-ui-input-modality") === "touch")
+            return;
+        owner.documentElement.setAttribute("data-ui-input-modality", "touch");
+        owner.dispatchEvent(new CustomEvent("ui-input-modality-change", {
+            detail: { modality: "touch" },
+        }));
+    };
+    owner.addEventListener("pointerdown", (event) => {
+        if (event.pointerType === "touch")
+            markTouch();
+    }, { capture: true, passive: true });
+    owner.addEventListener("touchstart", markTouch, { capture: true, passive: true });
+}

package/dist/collection/overlay/manager.js

@@ -30,8 +30,11 @@ function handleLightDismiss(event) {
         return;
     }
     const target = event.target;
-    if (target instanceof Node && top.element.contains(target)) {
-        return;
+    if (target instanceof Node) {
+        if (top.element.contains(target))
+            return;
+        if (top.relatedElements?.some((element) => element.contains(target)))
+            return;
     }
     requestTopOverlayClose("light-dismiss", "pointer");
 }

package/dist/collection/overlay/positioning.js

@@ -1,4 +1,250 @@
 export 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.
+ */
+export 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,
+        right: unclampedLeft + rect.width,
+        bottom: unclampedTop + rect.height,
+        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.
+ */
+export 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,
+                width: 0,
+                height: 0,
+            }, "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);
+        },
+    };
+}
 export function getVisualViewportRect(owner = window) {
     const viewport = owner.visualViewport;
     const left = viewport?.offsetLeft ?? 0;

package/dist/components/p-CEYIKqYc.js

@@ -0,0 +1 @@
+import{p as e,H as t,h as i,c as s,t as a}from"./p-CIA4RyEp.js";import{d as r,e as o}from"./p-JwSoedEO.js";import{o as n,c as u,r as c}from"./p-PM9a74r7.js";import{c as l}from"./p-DOulVJT7.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}open=!1;defaultOpen=!1;for;placement="bottom-start";internalOpen=!1;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(),this.surface&&(this.internalOpen?(this.surface.show(),n({id:this.overlayId,modal:!1,element:this.host,relatedElements:this.anchor?[this.anchor]:void 0,dismissible:!0,requestClose:(e,t)=>this.closeMenu(e,t)})):(this.surface.hide(),u(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,u(this.overlayId)}setupSurface(){this.surface?.destroy(),this.surface=null,this.anchor=this.for?this.host.ownerDocument.getElementById(this.for):null,this.anchor&&(this.surface=l(this.host,{anchor:this.anchor,placement:this.placement}))}syncAnchorState(){this.anchor&&(this.anchor.setAttribute("aria-haspopup","menu"),this.anchor.setAttribute("aria-expanded",this.internalOpen?"true":"false"))}closeMenu(e,t){this.internalOpen&&(this.internalOpen=!1,r(this.host,"close",{open:!1,reason:e,trigger:t}),"escape"===e&&this.anchor?.focus())}getItems(){return Array.from(this.host.querySelectorAll("ui-menu-item"))}isItemDisabled(e){return"true"===e.getAttribute("aria-disabled")||e.hasAttribute("disabled")||"true"===e.getAttribute("disabled")||!0===e.disabled}onItemClick=e=>{const t=e.target.closest?.("ui-menu-item");if(!t||t.getRootNode()!==this.host.getRootNode())return;if(this.isItemDisabled(t))return;const i=t.getAttribute("value")??t.getAttribute("data-value")??"";r(this.host,"select",{value:i,trigger:o(e)}),r(this.host,"close",{open:!1,reason:"action",trigger:o(e)}),this.internalOpen=!1};onKeydown=e=>{if("Escape"===e.key)return e.preventDefault(),void c("escape","keyboard");const i=this.getItems().filter((e=>!this.isItemDisabled(e)));if(0===i.length)return;const s=e.target.closest?.("ui-menu-item"),a=s&&s instanceof t?i.indexOf(s):-1;if("Enter"!==e.key&&" "!==e.key)"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),i["ArrowDown"===e.key?a<0?0:Math.min(a+1,i.length-1):a<=0?i.length-1:a-1].focus());else if(e.preventDefault(),s&&a>=0){const e=s.getAttribute("value")??s.getAttribute("data-value")??"";r(this.host,"select",{value:e,trigger:"keyboard"}),r(this.host,"close",{open:!1,reason:"action",trigger:"keyboard"}),this.internalOpen=!1}};render(){return i(s,{key:"06ad0750df843cb874bd4f257d8567157c855493",role:"menu","aria-orientation":"vertical","data-open":this.internalOpen?"":void 0},i("slot",{key:"50118ac749a2747ca06f4d483499c4cd20125a89"}))}static get watchers(){return{open:[{syncFromProp:0}],for:[{resetSurface:0}],placement:[{resetSurface:0}],internalOpen:[{syncSurface:0}]}}static get style(){return":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}"}},[769,"ui-menu",{open:[4],defaultOpen:[4,"default-open"],for:[1],placement:[1],internalOpen:[32]},void 0,{open:[{syncFromProp:0}],for:[{resetSurface:0}],placement:[{resetSurface:0}],internalOpen:[{syncSurface:0}]}]);function p(){"undefined"!=typeof customElements&&["ui-menu"].forEach((e=>{"ui-menu"===e&&(customElements.get(a(e))||customElements.define(a(e),d))}))}export{d as U,p as d}

package/dist/components/p-DOulVJT7.js

@@ -0,0 +1 @@
+const t=16;let n=0;const o=new WeakMap;function a(t){try{return t.matches(":popover-open")}catch{return!t.hidden}}function i(t){if(t.setAttribute("popover","manual"),t.hidden=!1,"function"==typeof t.showPopover&&!a(t))try{t.showPopover()}catch{}}function e(t){if("function"==typeof t.hidePopover&&a(t))try{t.hidePopover()}catch{}t.hidden=!0}function r(t){return t.setAttribute("popover","manual"),t.dataset.uiPositioning="viewport",{show(){i(t)},hide(){e(t)},destroy(){e(t)}}}function l(t,n,o,a,i){const e=u(t.ownerDocument.defaultView??window),r=t.getBoundingClientRect(),l=o.startsWith("top"),c=o.endsWith("end"),s=e.bottom-n.bottom-i,h=n.top-e.top-i,p=(l?!(h<r.height+a&&s>h):s<r.height+a&&h>s)?n.top-r.height-a:n.bottom+a,f=c?n.right-r.width:n.left,d=function(t,n=u(),o=0){const a=Math.max(0,n.width-2*o),i=Math.max(0,n.height-2*o),e=t.width>a?n.left+o:Math.min(Math.max(t.left,n.left+o),n.right-o-t.width),r=t.height>i?n.top+o:Math.min(Math.max(t.top,n.top+o),n.bottom-o-t.height);return{x:e-t.left,y:r-t.top}}({left:f,top:p,width:r.width,height:r.height},e,i);t.style.left=`${Math.round(f+d.x)}px`,t.style.top=`${Math.round(p+d.y)}px`,t.style.right="auto",t.style.bottom="auto"}function c(t,a={}){const r=t.ownerDocument.defaultView??window,c=a.placement??"bottom-start",u=Math.max(0,a.gap??4),s=Math.max(0,a.viewportGap??8),h=function(t){const n=t.CSS;return"function"==typeof n?.supports&&n.supports("anchor-name: --ui-anchor-test")&&n.supports("position-anchor: --ui-anchor-test")&&n.supports("top: anchor(bottom)")}(r),p="--ui-anchor-"+ ++n;let f=a.anchor??null,d=null,m=!1,g=null,y=null;t.setAttribute("popover","manual"),t.dataset.uiPositioning=h?"anchor":"fallback",t.style.position="fixed",t.style.margin="0";const w=n=>{f&&function(t,n){const a=o.get(t);if(a)if(a.names.delete(n),a.names.size){const n=[a.original,...a.names].filter(Boolean);t.style.setProperty("anchor-name",n.join(", "))}else a.original?t.style.setProperty("anchor-name",a.original):t.style.removeProperty("anchor-name"),o.delete(t)}(f,p),f=n,f?(function(t,n){const a=o.get(t)??{original:t.style.getPropertyValue("anchor-name"),names:new Set};a.names.add(n),o.set(t,a);const i=[a.original,...a.names].filter(Boolean);t.style.setProperty("anchor-name",i.join(", "))}(f,p),t.style.setProperty("position-anchor",p)):t.style.removeProperty("position-anchor")},v=()=>{g=null,m&&(d?l(t,{left:d.x,right:d.x,top:d.y,bottom:d.y},"bottom-start",u,s):f&&(h?(()=>{const n=c.startsWith("bottom"),o=c.endsWith("end");t.style.top=n?`calc(anchor(bottom) + ${u}px)`:"auto",t.style.bottom=n?"auto":`calc(anchor(top) + ${u}px)`,t.style.left=o?"auto":"anchor(left)",t.style.right=o?"anchor(right)":"auto",t.style.setProperty("position-try-fallbacks","flip-block, flip-inline")})():l(t,f.getBoundingClientRect(),c,u,s)))},b=()=>{m&&null===g&&(g=r.requestAnimationFrame(v))},M=()=>{if(!m||null===d&&h)return y?.abort(),void(y=null);if(y)return;y=new AbortController;const t=y.signal;r.addEventListener("resize",b,{passive:!0,signal:t}),r.addEventListener("scroll",b,{passive:!0,capture:!0,signal:t}),r.visualViewport?.addEventListener("resize",b,{passive:!0,signal:t}),r.visualViewport?.addEventListener("scroll",b,{passive:!0,signal:t})};return w(f),{setAnchor(t){d=null,w(t),M(),b()},show(){d=null,m=!0,M(),i(t),v()},showAtPoint(n){d=n,m=!0,M(),i(t),v()},hide(){m=!1,d=null,M(),null!==g&&r.cancelAnimationFrame(g),g=null,e(t)},refresh:b,destroy(){m=!1,y?.abort(),y=null,null!==g&&r.cancelAnimationFrame(g),g=null,e(t),w(null)}}}function u(t=window){const n=t.visualViewport,o=n?.offsetLeft??0,a=n?.offsetTop??0,i=n?.width??t.innerWidth,e=n?.height??t.innerHeight;return{left:o,top:a,right:o+i,bottom:a+e,width:i,height:e}}function s(t,n){const o=Math.max(n.left-t.x,0,t.x-n.right),a=Math.max(n.top-t.y,0,t.y-n.bottom);return Math.hypot(o,a)}function h(t,n={}){const o=t.ownerDocument.defaultView??window,a=n.pointerTarget??t,i=n.anchorSelector??"[data-ui-affordance]",e=n.nearRadius??16,r=Number.isFinite(e)?Math.max(0,e):16,l=new AbortController;let c=[],u=null,h=null,p=!1;const f=()=>{for(const{element:t}of c)t.hasAttribute("data-ui-proximity")&&t.removeAttribute("data-ui-proximity");t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},d=()=>{c=Array.from(t.querySelectorAll(i)).filter((t=>!t.hasAttribute("disabled")&&"true"!==t.getAttribute("aria-disabled"))).map((t=>({element:t,rect:t.getBoundingClientRect()}))),p=!1},m=()=>{if(u=null,p&&d(),!h)return void f();let n=!1;for(const t of c){const o=s(h,t.rect)<=r;o&&"near"!==t.element.getAttribute("data-ui-proximity")?t.element.setAttribute("data-ui-proximity","near"):!o&&t.element.hasAttribute("data-ui-proximity")&&t.element.removeAttribute("data-ui-proximity"),n||=o}n&&"engaged"!==t.getAttribute("data-ui-interaction")?t.setAttribute("data-ui-interaction","engaged"):!n&&t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},g=()=>{null===u&&(u=o.requestAnimationFrame(m))},y=()=>{p=!0,g()};return a.addEventListener("pointermove",(t=>{h="touch"===t.pointerType?null:{x:t.clientX,y:t.clientY},g()}),{passive:!0,signal:l.signal}),o.addEventListener("resize",y,{passive:!0,signal:l.signal}),o.addEventListener("scroll",y,{passive:!0,capture:!0,signal:l.signal}),o.visualViewport?.addEventListener("resize",y,{passive:!0,signal:l.signal}),o.visualViewport?.addEventListener("scroll",y,{passive:!0,signal:l.signal}),d(),{refresh:y,destroy(){l.abort(),null!==u&&o.cancelAnimationFrame(u),u=null,h=null,f(),c=[]}}}export{t as D,h as a,r as b,c}

package/dist/components/p-PM9a74r7.js

@@ -0,0 +1 @@
+const n=[],t="data-ui-scroll-lock";let e=0,o=!1;function c(){if("undefined"==typeof document)return;const n=document.documentElement;if(e>0)return n.setAttribute(t,"true"),void(n.style.overflow="hidden");n.removeAttribute(t),n.style.removeProperty("overflow")}function i(n){return n.dismissible??!0}function u(n){"Escape"===n.key&&a("escape","keyboard")}function r(n){const t=s();if(!t||!i(t))return;const e=n.target;if(e instanceof Node){if(t.element.contains(e))return;if(t.relatedElements?.some((n=>n.contains(e))))return}a("light-dismiss","pointer")}function d(t){f(t.id),n.push(t),t.modal&&(e+=1,c()),o||"undefined"==typeof document||(document.addEventListener("keydown",u),document.addEventListener("pointerdown",r,{capture:!0}),o=!0)}function f(t){const i=n.findIndex((n=>n.id===t));if(i>=0){const[t]=n.splice(i,1);t?.modal&&(e=Math.max(0,e-1),c())}!o||n.length>0||"undefined"==typeof document||(document.removeEventListener("keydown",u),document.removeEventListener("pointerdown",r,{capture:!0}),o=!1)}function s(){return n.at(-1)}function a(n,t){const e=s();return!!e&&!!(i(e)||"escape"!==n&&"light-dismiss"!==n)&&(e.requestClose(n,t),!0)}export{f as c,d as o,a as r}

package/dist/components/ui-affordance-scope.js

@@ -1 +1 @@
-import{p as t,t as a,H as e,h as n,c as i}from"./p-CIA4RyEp.js";function o(t,a){return Math.hypot(Math.max(a.left-t.x,0,t.x-a.right),Math.max(a.top-t.y,0,t.y-a.bottom))}const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get host(){return this}nearRadius=16;coordinator=null;componentDidLoad(){this.connectCoordinator()}disconnectedCallback(){this.coordinator?.destroy(),this.coordinator=null}connectCoordinator(){this.coordinator?.destroy(),this.coordinator=function(t,a={}){const e=t.ownerDocument.defaultView??window,n=a.pointerTarget??t,i=a.anchorSelector??"[data-ui-affordance]",r=a.nearRadius??16,s=Number.isFinite(r)?Math.max(0,r):16,c=new AbortController;let d=[],u=null,l=null,p=!1;const f=()=>{for(const{element:t}of d)t.hasAttribute("data-ui-proximity")&&t.removeAttribute("data-ui-proximity");t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},h=()=>{d=Array.from(t.querySelectorAll(i)).filter((t=>!t.hasAttribute("disabled")&&"true"!==t.getAttribute("aria-disabled"))).map((t=>({element:t,rect:t.getBoundingClientRect()}))),p=!1},g=()=>{if(u=null,p&&h(),!l)return void f();let a=!1;for(const t of d){const e=o(l,t.rect)<=s;e&&"near"!==t.element.getAttribute("data-ui-proximity")?t.element.setAttribute("data-ui-proximity","near"):!e&&t.element.hasAttribute("data-ui-proximity")&&t.element.removeAttribute("data-ui-proximity"),a||=e}a&&"engaged"!==t.getAttribute("data-ui-interaction")?t.setAttribute("data-ui-interaction","engaged"):!a&&t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},m=()=>{null===u&&(u=e.requestAnimationFrame(g))},y=()=>{p=!0,m()};return n.addEventListener("pointermove",(t=>{l="touch"===t.pointerType?null:{x:t.clientX,y:t.clientY},m()}),{passive:!0,signal:c.signal}),e.addEventListener("resize",y,{passive:!0,signal:c.signal}),e.addEventListener("scroll",y,{passive:!0,capture:!0,signal:c.signal}),e.visualViewport?.addEventListener("resize",y,{passive:!0,signal:c.signal}),e.visualViewport?.addEventListener("scroll",y,{passive:!0,signal:c.signal}),h(),{refresh:y,destroy(){c.abort(),null!==u&&e.cancelAnimationFrame(u),u=null,l=null,f(),d=[]}}}(this.host,{nearRadius:this.nearRadius})}onSlotChange=()=>{this.coordinator?.refresh()};render(){return n(i,{key:"184b0a908494d480ed23aa14b75d4f7b94e5275b"},n("slot",{key:"570e810db588c1514c6fd85985c9bc4532993a2b",onSlotchange:this.onSlotChange}))}static get watchers(){return{nearRadius:[{connectCoordinator:0}]}}static get style(){return":host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}"}},[769,"ui-affordance-scope",{nearRadius:[514,"near-radius"]},void 0,{nearRadius:[{connectCoordinator:0}]}]),s=r,c=function(){"undefined"!=typeof customElements&&["ui-affordance-scope"].forEach((t=>{"ui-affordance-scope"===t&&(customElements.get(a(t))||customElements.define(a(t),r))}))};export{s as UiAffordanceScope,c as defineCustomElement}
+import{p as e,t,H as n,h as o,c as s}from"./p-CIA4RyEp.js";import{D as a,a as c}from"./p-DOulVJT7.js";const i=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}nearRadius=a;coordinator=null;componentDidLoad(){this.connectCoordinator()}disconnectedCallback(){this.coordinator?.destroy(),this.coordinator=null}connectCoordinator(){this.coordinator?.destroy(),this.coordinator=c(this.host,{nearRadius:this.nearRadius})}onSlotChange=()=>{this.coordinator?.refresh()};render(){return o(s,{key:"184b0a908494d480ed23aa14b75d4f7b94e5275b"},o("slot",{key:"570e810db588c1514c6fd85985c9bc4532993a2b",onSlotchange:this.onSlotChange}))}static get watchers(){return{nearRadius:[{connectCoordinator:0}]}}static get style(){return":host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}"}},[769,"ui-affordance-scope",{nearRadius:[514,"near-radius"]},void 0,{nearRadius:[{connectCoordinator:0}]}]),r=i,d=function(){"undefined"!=typeof customElements&&["ui-affordance-scope"].forEach((e=>{"ui-affordance-scope"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{r as UiAffordanceScope,d as defineCustomElement}