@threadlabs/looma 0.1.16 → 0.1.18

package/dist/looma/{p-ef9ca2ed.entry.js → p-d01960c2.entry.js}

@@ -1,4 +1,4 @@
-import{r as a,g as t,h as e,H as i}from"./p-CEeiinfk.js";import{d as r,e as d}from"./p-JwSoedEO.js";
+import{r as a,g as t,h as i,H as e}from"./p-CEeiinfk.js";import{d as r,e as d}from"./p-JwSoedEO.js";
 /**
  * @license lucide v0.554.0 - ISC
  *
@@ -10,4 +10,4 @@ import{r as a,g as t,h as e,H as i}from"./p-CEeiinfk.js";import{d as r,e as d}fr
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */function n(a){return String(a).replaceAll("&","&amp;").replaceAll('"',"&quot;")}function s(a){const[t,e]=a;return`<${t}${function(a){return Object.entries(a).map((([a,t])=>` ${a}="${n(t)}"`)).join("")}(e)}></${t}>`}function c(a,t="looma-icon"){return[`<svg class="${n(t)}" data-looma-icon="${a}" aria-hidden="true" focusable="false"`,' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"',' stroke-linecap="round" stroke-linejoin="round">',o[a].map(s).join(""),"</svg>"].join("")}const h=class{constructor(t){a(this,t)}get host(){return t(this)}itemId="";label="";depth=1;container=!1;sortable=!1;dragType="item";dropScope="";accepts="";expanded=!1;defaultExpanded=!1;selected=!1;disabled=!1;internalExpanded=!1;syncExpandedFromProp(){this.internalExpanded=this.expanded}componentWillLoad(){this.internalExpanded=this.expanded||this.defaultExpanded}componentDidLoad(){this.host.addEventListener("ui-tree-auto-expand",this.onAutoExpand)}disconnectedCallback(){this.host.removeEventListener("ui-tree-auto-expand",this.onAutoExpand)}setExpanded(a,t){this.container&&!this.disabled&&this.internalExpanded!==a&&(this.internalExpanded=a,r(this.host,"expand",{id:this.itemId,expanded:a,trigger:t}))}onAutoExpand=()=>{this.setExpanded(!0,"pointer")};onDisclosureClick=a=>{a.stopPropagation(),this.setExpanded(!this.internalExpanded,d(a))};onDisclosureKeydown=a=>{"ArrowRight"!==a.key&&"ArrowLeft"!==a.key||(a.preventDefault(),a.stopPropagation(),this.setExpanded("ArrowRight"===a.key,"keyboard"))};onRowClick=a=>{this.container&&!this.disabled&&(a.composedPath().some((a=>a instanceof HTMLElement&&(a.matches('a, button, input, select, textarea, [role="button"], [role="link"]')||"actions"===a.getAttribute("slot"))))||this.setExpanded(!this.internalExpanded,d(a)))};render(){const a=Math.max(1,Math.floor(this.depth)),t=`${this.internalExpanded?"Collapse":"Expand"} ${this.label||"item"}`,r=`Drag ${this.label||"item"} to reorder`;return e(i,{key:"ea8ed538aa3883c87257a25614a066965364693f",role:"treeitem","aria-level":String(a),"aria-expanded":this.container?String(this.internalExpanded):void 0,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":void 0,"data-container":this.container?"":void 0,"data-selected":this.selected?"":void 0,"data-disabled":this.disabled?"":void 0,"data-drag-type":this.dragType||"item","data-drop-scope":this.dropScope||void 0,"data-accepts":this.accepts||void 0,tabIndex:this.disabled?-1:0,style:{"--ui-tree-item-depth":String(a-1),"margin-inline-start":a>1?"var(--ui-tree-indent, 16px)":"0px"}},e("div",{key:"740b93aa47e65d8a1cb899d4b9c966d9ad1d456f",class:"row",part:"row",onClick:this.onRowClick},this.sortable&&!this.disabled?e("button",{class:"drag-handle",part:"drag-handle",type:"button",draggable:!0,"aria-label":r,title:r},e("span",{innerHTML:c("grip-vertical")})):null,this.container?e("button",{class:"disclosure",part:"disclosure",type:"button","aria-label":t,"aria-expanded":String(this.internalExpanded),disabled:this.disabled,onClick:this.onDisclosureClick,onKeyDown:this.onDisclosureKeydown},e("span",{class:{"disclosure-icon":!0,"disclosure-icon--expanded":this.internalExpanded},innerHTML:c("chevron-down")})):e("span",{class:"disclosure-spacer","aria-hidden":"true"}),e("span",{key:"37e1b7f1cdddf623734becef465ffde83d8b86f2",class:"leading",part:"leading"},e("slot",{key:"0ab3a60c98628f009918d0d720772154912d2709",name:"leading"})),e("span",{key:"defdd343f25a0f4354110e981f3889e1d09c27ee",class:"label",part:"label"},e("slot",{key:"bde46ccacc1a620348062fc300503c4f1736316b"})),e("span",{key:"caff9ada38c41be90aeb6e331f4c54a51f31d26c",class:"actions",part:"actions"},e("slot",{key:"e11704d6871445c91eaa29c99302d8b751be69d3",name:"actions"})),e("span",{key:"7e40559d6c5ba56710bc705083ad2ede3046e0b1",class:"drop-indicator",part:"drop-indicator","aria-hidden":"true"})),this.container?e("div",{class:"children",part:"children",role:"group",hidden:!this.internalExpanded},e("slot",{name:"children"})):null)}static get watchers(){return{expanded:[{syncExpandedFromProp:0}]}}};h.style=":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}}";export{h as ui_tree_item}
+ */function n(a){return String(a).replaceAll("&","&amp;").replaceAll('"',"&quot;")}function s(a){const[t,i]=a;return`<${t}${function(a){return Object.entries(a).map((([a,t])=>` ${a}="${n(t)}"`)).join("")}(i)}></${t}>`}function c(a,t="looma-icon"){return[`<svg class="${n(t)}" data-looma-icon="${a}" aria-hidden="true" focusable="false"`,' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"',' stroke-linecap="round" stroke-linejoin="round">',o[a].map(s).join(""),"</svg>"].join("")}const h=class{constructor(t){a(this,t)}get host(){return t(this)}itemId="";label="";depth=1;container=!1;sortable=!1;dragType="item";dropScope="";accepts="";expanded=!1;defaultExpanded=!1;selected=!1;disabled=!1;internalExpanded=!1;syncExpandedFromProp(){this.internalExpanded=this.expanded}componentWillLoad(){this.internalExpanded=this.expanded||this.defaultExpanded}componentDidLoad(){this.host.addEventListener("ui-tree-auto-expand",this.onAutoExpand)}disconnectedCallback(){this.host.removeEventListener("ui-tree-auto-expand",this.onAutoExpand)}setExpanded(a,t){this.container&&!this.disabled&&this.internalExpanded!==a&&(this.internalExpanded=a,r(this.host,"expand",{id:this.itemId,expanded:a,trigger:t}))}onAutoExpand=()=>{this.setExpanded(!0,"pointer")};onDisclosureClick=a=>{a.stopPropagation(),this.setExpanded(!this.internalExpanded,d(a))};onDisclosureKeydown=a=>{"ArrowRight"!==a.key&&"ArrowLeft"!==a.key||(a.preventDefault(),a.stopPropagation(),this.setExpanded("ArrowRight"===a.key,"keyboard"))};onRowClick=a=>{this.container&&!this.disabled&&(a.composedPath().some((a=>a instanceof HTMLElement&&(a.matches('a, button, input, select, textarea, [role="button"], [role="link"]')||"actions"===a.getAttribute("slot"))))||this.setExpanded(!this.internalExpanded,d(a)))};render(){const a=Math.max(1,Math.floor(this.depth)),t=`${this.internalExpanded?"Collapse":"Expand"} ${this.label||"item"}`,r=`Drag ${this.label||"item"} to reorder`;return i(e,{key:"ea8ed538aa3883c87257a25614a066965364693f",role:"treeitem","aria-level":String(a),"aria-expanded":this.container?String(this.internalExpanded):void 0,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":void 0,"data-container":this.container?"":void 0,"data-selected":this.selected?"":void 0,"data-disabled":this.disabled?"":void 0,"data-drag-type":this.dragType||"item","data-drop-scope":this.dropScope||void 0,"data-accepts":this.accepts||void 0,tabIndex:this.disabled?-1:0,style:{"--ui-tree-item-depth":String(a-1),"margin-inline-start":a>1?"var(--ui-tree-indent, 16px)":"0px"}},i("div",{key:"740b93aa47e65d8a1cb899d4b9c966d9ad1d456f",class:"row",part:"row",onClick:this.onRowClick},this.sortable&&!this.disabled?i("button",{class:"drag-handle",part:"drag-handle",type:"button",draggable:!0,"aria-label":r,title:r},i("span",{innerHTML:c("grip-vertical")})):null,this.container?i("button",{class:"disclosure",part:"disclosure",type:"button","aria-label":t,"aria-expanded":String(this.internalExpanded),disabled:this.disabled,onClick:this.onDisclosureClick,onKeyDown:this.onDisclosureKeydown},i("span",{class:{"disclosure-icon":!0,"disclosure-icon--expanded":this.internalExpanded},innerHTML:c("chevron-down")})):i("span",{class:"disclosure-spacer","aria-hidden":"true"}),i("span",{key:"37e1b7f1cdddf623734becef465ffde83d8b86f2",class:"leading",part:"leading"},i("slot",{key:"0ab3a60c98628f009918d0d720772154912d2709",name:"leading"})),i("span",{key:"defdd343f25a0f4354110e981f3889e1d09c27ee",class:"label",part:"label"},i("slot",{key:"bde46ccacc1a620348062fc300503c4f1736316b"})),i("span",{key:"caff9ada38c41be90aeb6e331f4c54a51f31d26c",class:"actions",part:"actions"},i("slot",{key:"e11704d6871445c91eaa29c99302d8b751be69d3",name:"actions"})),i("span",{key:"7e40559d6c5ba56710bc705083ad2ede3046e0b1",class:"drop-indicator",part:"drop-indicator","aria-hidden":"true"})),this.container?i("div",{class:"children",part:"children",role:"group",hidden:!this.internalExpanded},i("slot",{name:"children"})):null)}static get watchers(){return{expanded:[{syncExpandedFromProp:0}]}}};h.style=":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}}";export{h as ui_tree_item}

package/dist/types/components/ui-context-menu/ui-context-menu.d.ts

@@ -1,3 +1,4 @@
+type ContextMenuTrigger = 'keyboard' | 'pointer' | 'programmatic';
 export declare class UIContextMenu {
     host: HTMLElement;
     /** Controls the menu when the consumer owns open state. */
@@ -7,17 +8,21 @@ export declare class UIContextMenu {
     /** Optional id of the region that should also respond to a context-menu gesture. */
     for?: string;
     internalOpen: boolean;
+    focusTrigger: ContextMenuTrigger;
     private overlayId;
     private trigger;
     private contextTarget;
     private pointerX;
     private pointerY;
+    private pointPositioned;
+    private surface;
     syncFromProp(): void;
     syncTarget(): void;
     syncOverlay(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     disconnectedCallback(): void;
+    private setupSurface;
     private resolveTargets;
     private attachTargetListeners;
     private detachTargetListeners;
@@ -35,3 +40,4 @@ export declare class UIContextMenu {
     private onItemClick;
     render(): any;
 }
+export {};

package/dist/types/components/ui-menu/ui-menu.d.ts

@@ -1,11 +1,24 @@
+import { type AnchoredPlacement } from '../../overlay/positioning';
 export declare class UIMenu {
     host: HTMLElement;
     open: boolean;
     defaultOpen: boolean;
+    /** Id of the control that anchors this menu in the top layer. */
+    for?: string;
+    /** Preferred placement; Looma flips and shifts when space is constrained. */
+    placement: AnchoredPlacement;
     internalOpen: boolean;
+    private overlayId;
+    private anchor;
+    private surface;
     syncFromProp(): void;
+    resetSurface(): void;
+    syncSurface(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private setupSurface;
+    private syncAnchorState;
+    private closeMenu;
     private getItems;
     private isItemDisabled;
     private onItemClick;

package/dist/types/components/ui-popover/ui-popover.d.ts

@@ -1,11 +1,20 @@
+import { type AnchoredPlacement } from '../../overlay/positioning';
 export declare class UIPopover {
     host: HTMLElement;
     open: boolean;
     defaultOpen: boolean;
+    /** Optional id of the element this popover follows in the top layer. */
+    for?: string;
+    placement: AnchoredPlacement;
     internalOpen: boolean;
     private overlayId;
+    private anchor;
+    private surface;
     syncFromProp(): void;
     onOpenChange(): void;
+    resetSurface(): void;
+    private setupSurface;
+    private syncSurface;
     private syncOverlay;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/ui-toast-region/ui-toast-region.d.ts

@@ -2,7 +2,9 @@ export declare class UIToastRegion {
     host: HTMLElement;
     open: boolean;
     internalOpen: boolean;
+    private surface;
     syncFromProp(): void;
+    syncSurface(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private getToasts;

package/dist/types/components/ui-tooltip/ui-tooltip.d.ts

@@ -1,19 +1,34 @@
+import { type AnchoredPlacement } from '../../overlay/positioning';
 export declare class UITooltip {
     host: HTMLElement;
     for: string;
     open: boolean;
     defaultOpen: boolean;
+    placement: AnchoredPlacement;
+    /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
+    showDelay: number;
+    /** Pointer leave grace period in milliseconds. */
+    hideDelay: number;
     internalOpen: boolean;
     private overlayId;
     private trigger;
+    private surface;
+    private showTimer;
+    private hideTimer;
     syncFromProp(): void;
+    resetSurface(): void;
     syncOverlay(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     disconnectedCallback(): void;
-    private resolveTrigger;
+    private syncTrigger;
+    private setupSurface;
     private attachTriggerListeners;
     private detachTriggerListeners;
+    private clearShowTimer;
+    private clearHideTimer;
+    private clearTimers;
+    private setInteractionOpen;
     private onTriggerEnter;
     private onTriggerLeave;
     private onTriggerFocusIn;

package/dist/types/components.d.ts

@@ -5,6 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { AnchoredPlacement } from "./overlay/positioning";
+export { AnchoredPlacement } from "./overlay/positioning";
 export namespace Components {
     interface UiAffordanceScope {
         /**
@@ -212,10 +214,19 @@ export namespace Components {
           * @default false
          */
         "defaultOpen": boolean;
+        /**
+          * Id of the control that anchors this menu in the top layer.
+         */
+        "for"?: string;
         /**
           * @default false
          */
         "open": boolean;
+        /**
+          * Preferred placement; Looma flips and shifts when space is constrained.
+          * @default 'bottom-start'
+         */
+        "placement": AnchoredPlacement;
     }
     interface UiMenuItem {
         /**
@@ -232,10 +243,18 @@ export namespace Components {
           * @default false
          */
         "defaultOpen": boolean;
+        /**
+          * Optional id of the element this popover follows in the top layer.
+         */
+        "for"?: string;
         /**
           * @default false
          */
         "open": boolean;
+        /**
+          * @default 'bottom-start'
+         */
+        "placement": AnchoredPlacement;
     }
     interface UiRadio {
         /**
@@ -396,10 +415,24 @@ export namespace Components {
           * @default ''
          */
         "for": string;
+        /**
+          * Pointer leave grace period in milliseconds.
+          * @default 100
+         */
+        "hideDelay": number;
         /**
           * @default false
          */
         "open": boolean;
+        /**
+          * @default 'top-start'
+         */
+        "placement": AnchoredPlacement;
+        /**
+          * Pointer hover intent delay in milliseconds. Keyboard focus is immediate.
+          * @default 500
+         */
+        "showDelay": number;
     }
     interface UiTopBar {
     }
@@ -888,10 +921,19 @@ declare namespace LocalJSX {
           * @default false
          */
         "defaultOpen"?: boolean;
+        /**
+          * Id of the control that anchors this menu in the top layer.
+         */
+        "for"?: string;
         /**
           * @default false
          */
         "open"?: boolean;
+        /**
+          * Preferred placement; Looma flips and shifts when space is constrained.
+          * @default 'bottom-start'
+         */
+        "placement"?: AnchoredPlacement;
     }
     interface UiMenuItem {
         /**
@@ -908,10 +950,18 @@ declare namespace LocalJSX {
           * @default false
          */
         "defaultOpen"?: boolean;
+        /**
+          * Optional id of the element this popover follows in the top layer.
+         */
+        "for"?: string;
         /**
           * @default false
          */
         "open"?: boolean;
+        /**
+          * @default 'bottom-start'
+         */
+        "placement"?: AnchoredPlacement;
     }
     interface UiRadio {
         /**
@@ -1072,10 +1122,24 @@ declare namespace LocalJSX {
           * @default ''
          */
         "for"?: string;
+        /**
+          * Pointer leave grace period in milliseconds.
+          * @default 100
+         */
+        "hideDelay"?: number;
         /**
           * @default false
          */
         "open"?: boolean;
+        /**
+          * @default 'top-start'
+         */
+        "placement"?: AnchoredPlacement;
+        /**
+          * Pointer hover intent delay in milliseconds. Keyboard focus is immediate.
+          * @default 500
+         */
+        "showDelay"?: number;
     }
     interface UiTopBar {
     }
@@ -1224,6 +1288,8 @@ declare namespace LocalJSX {
     interface UiMenuAttributes {
         "open": boolean;
         "defaultOpen": boolean;
+        "for": string;
+        "placement": AnchoredPlacement;
     }
     interface UiMenuItemAttributes {
         "disabled": boolean;
@@ -1232,6 +1298,8 @@ declare namespace LocalJSX {
     interface UiPopoverAttributes {
         "open": boolean;
         "defaultOpen": boolean;
+        "for": string;
+        "placement": AnchoredPlacement;
     }
     interface UiRadioAttributes {
         "checked": boolean;
@@ -1286,6 +1354,9 @@ declare namespace LocalJSX {
         "for": string;
         "open": boolean;
         "defaultOpen": boolean;
+        "placement": AnchoredPlacement;
+        "showDelay": number;
+        "hideDelay": number;
     }
     interface UiTreeAttributes {
         "label": string;

package/dist/types/input-modality.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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 declare function initializeInputModality(owner?: Document): void;

package/dist/types/overlay/manager.d.ts

@@ -4,6 +4,9 @@ export interface OverlayRecord {
     id: string;
     modal: boolean;
     element: HTMLElement;
+    /** Controls that are part of the overlay interaction boundary (for example,
+     * the button that toggles an anchored menu). */
+    relatedElements?: readonly HTMLElement[];
     dismissible?: boolean;
     requestClose: (reason: OverlayCloseReason, trigger: OverlayTrigger) => void;
 }

package/dist/types/overlay/positioning.d.ts

@@ -26,7 +26,40 @@ export interface ProximityCoordinator {
     /** Removes the scope-level listeners and all reflected interaction state. */
     destroy(): void;
 }
+export type AnchoredPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+export interface AnchoredSurfaceOptions {
+    anchor?: HTMLElement | null;
+    placement?: AnchoredPlacement;
+    gap?: number;
+    viewportGap?: number;
+}
+export interface AnchoredSurface {
+    setAnchor(anchor: HTMLElement | null): void;
+    show(): void;
+    showAtPoint(point: Point): void;
+    hide(): void;
+    refresh(): void;
+    destroy(): void;
+}
+export interface ViewportSurface {
+    show(): void;
+    hide(): void;
+    destroy(): void;
+}
 export declare const DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
+/**
+ * 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 declare function createViewportSurface(surface: HTMLElement): ViewportSurface;
+/**
+ * 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 declare function createAnchoredSurface(surface: HTMLElement, options?: AnchoredSurfaceOptions): AnchoredSurface;
 export declare function getVisualViewportRect(owner?: Window): ViewportRect;
 export declare function clampRectToViewport(rect: RectLike, viewport?: ViewportRect, gutter?: number): Point;
 export declare function distanceFromPointToRect(point: Point, rect: RectLike): number;

package/dist/ui-affordance-scope.entry-2W7ZKAGK.js

@@ -0,0 +1,54 @@
+import {
+  DEFAULT_AFFORDANCE_NEAR_RADIUS,
+  createProximityCoordinator
+} from "./chunk-YHXJC5M5.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-DTQVRGVL.js";
+
+// dist/esm/ui-affordance-scope.entry.js
+var uiAffordanceScopeCss = () => `:host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}`;
+var UIAffordanceScope = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  /** Distance outside each registered affordance that reveals its near state. */
+  nearRadius = DEFAULT_AFFORDANCE_NEAR_RADIUS;
+  coordinator = null;
+  componentDidLoad() {
+    this.connectCoordinator();
+  }
+  disconnectedCallback() {
+    this.coordinator?.destroy();
+    this.coordinator = null;
+  }
+  connectCoordinator() {
+    this.coordinator?.destroy();
+    this.coordinator = createProximityCoordinator(this.host, {
+      nearRadius: this.nearRadius
+    });
+  }
+  onSlotChange = () => {
+    this.coordinator?.refresh();
+  };
+  render() {
+    return h(Host, { key: "184b0a908494d480ed23aa14b75d4f7b94e5275b" }, h("slot", { key: "570e810db588c1514c6fd85985c9bc4532993a2b", onSlotchange: this.onSlotChange }));
+  }
+  static get watchers() {
+    return {
+      "nearRadius": [{
+        "connectCoordinator": 0
+      }]
+    };
+  }
+};
+UIAffordanceScope.style = uiAffordanceScopeCss();
+export {
+  UIAffordanceScope as ui_affordance_scope
+};

package/dist/{ui-avatar-group.entry-DQDP325O.js → ui-avatar-group.entry-SE5JG2FT.js}

@@ -3,7 +3,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-avatar-group.entry.js
 var uiAvatarGroupCss = () => `:host{display:flex;align-items:center;flex-direction:row-reverse;gap:0}::slotted(*:not([data-ui-avatar-group-overflow])){margin-inline-end:-0.5rem;flex-shrink:0}::slotted(*:last-of-type:not([data-ui-avatar-group-overflow])){margin-inline-end:0}.overflow{margin-inline-end:-0.5rem;display:inline-flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;font-weight:600;flex-shrink:0}`;

package/dist/{ui-avatar.entry-WYIDMOFE.js → ui-avatar.entry-46JDI25A.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-avatar.entry.js
 function toInitials(value) {

package/dist/{ui-badge.entry-VGHXPEDT.js → ui-badge.entry-U7G3MEC5.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-badge.entry.js
 var uiBadgeCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;line-height:1;padding:0.25em 0.6em;white-space:nowrap}:host([data-tone='accent']){background:var(--ui-accent-solid);border-color:var(--ui-accent-solid);color:var(--ui-text-on-accent)}:host([data-tone='danger']){background:var(--ui-danger-solid);border-color:var(--ui-danger-solid);color:var(--ui-text-on-accent)}:host([data-tone='success']){background:var(--ui-success-solid);border-color:var(--ui-success-solid);color:var(--ui-text-on-accent)}:host([data-tone='warning']){background:var(--ui-warning-solid);border-color:var(--ui-warning-solid);color:var(--ui-text-primary)}:host([data-tone='info']){background:var(--ui-info-solid);border-color:var(--ui-info-solid);color:var(--ui-text-on-accent)}:host([data-variant='subtle'][data-tone='accent']){background:var(--ui-accent-soft);border-color:var(--ui-accent-soft);color:var(--ui-accent-solid)}:host([data-variant='subtle'][data-tone='danger']){background:var(--ui-danger-soft);border-color:var(--ui-danger-soft);color:var(--ui-danger-solid)}:host([data-variant='subtle'][data-tone='success']){background:var(--ui-success-soft);border-color:var(--ui-success-soft);color:var(--ui-success-solid)}:host([data-variant='subtle'][data-tone='warning']){background:var(--ui-warning-soft);border-color:var(--ui-warning-soft);color:var(--ui-warning-solid)}:host([data-variant='subtle'][data-tone='info']){background:var(--ui-info-soft);border-color:var(--ui-info-soft);color:var(--ui-info-solid)}`;

package/dist/{ui-button.entry-LKPLOJ22.js → ui-button.entry-DELD6KMH.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-button.entry.js
 var uiButtonCss = () => `:host{display:inline-flex;vertical-align:middle;color:var(--ui-text-primary)}:host([variant='outline'])::slotted(button),::slotted(button){appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-button-radius, var(--ui-radius-2));background:var(--ui-surface-default);color:inherit;font:inherit;font-weight:var(--ui-font-medium, 500);line-height:var(--ui-line-height-tight);padding:var(--ui-space-2) var(--ui-space-3);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host([data-size='sm'])::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg'])::slotted(button){padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:var(--ui-border-strong)}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([variant='solid'])::slotted(button){border-color:var(--ui-accent-solid);background:var(--ui-accent-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs))}:host([variant='solid'])::slotted(button:hover:enabled){background:var(--ui-accent-hover);border-color:var(--ui-accent-hover);box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([variant='solid'])::slotted(button:active:enabled){background:var(--ui-accent-active);border-color:var(--ui-accent-active);box-shadow:none;transform:translateY(0)}:host([variant='destructive'])::slotted(button){border-color:var(--ui-danger-solid);background:var(--ui-danger-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs))}:host([variant='destructive'])::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}:host([variant='destructive'])::slotted(button:active:enabled){box-shadow:none;transform:translateY(0)}:host([variant='ghost'])::slotted(button){border-color:transparent;background:transparent}:host([variant='ghost'])::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([variant='ghost'])::slotted(button:active:enabled){background:var(--ui-surface-subtle);border-color:transparent}::slotted(button:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(button:disabled),:host([data-disabled]){opacity:0.6;cursor:not-allowed}`;

package/dist/{ui-checkbox.entry-J74HEA22.js → ui-checkbox.entry-ZUG2P642.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-checkbox.entry.js
 var uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='checkbox']){accent-color:var(--ui-accent-solid);width:1.125em;height:1.125em;cursor:pointer}::slotted(input[type='checkbox']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;

package/dist/{ui-context-menu.entry-MQM2FCLI.js → ui-context-menu.entry-L4HTK3PV.js}

@@ -2,7 +2,10 @@ import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
-} from "./chunk-G53JEAQK.js";
+} from "./chunk-SZJQ3NPX.js";
+import {
+  createAnchoredSurface
+} from "./chunk-YHXJC5M5.js";
 import {
   dispatchDetail
 } from "./chunk-UL7UIUJZ.js";
@@ -11,10 +14,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-SVINNT3E.js";
+} from "./chunk-DTQVRGVL.js";
 
 // dist/esm/ui-context-menu.entry.js
-var 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}`;
+var 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}}`;
 var UIContextMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -29,11 +32,14 @@ var 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;
   }
@@ -44,6 +50,11 @@ var UIContextMenu = class {
   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,
@@ -52,6 +63,7 @@ var UIContextMenu = class {
         requestClose: (reason, trigger) => this.closeMenu(reason, trigger)
       });
     } else {
+      this.surface?.hide();
       closeOverlay(this.overlayId);
     }
   }
@@ -60,18 +72,33 @@ var 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;
     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;
@@ -111,6 +138,9 @@ var UIContextMenu = class {
   openMenu(x, y, trigger) {
     this.pointerX = x;
     this.pointerY = y;
+    this.focusTrigger = trigger;
+    this.pointPositioned = true;
+    this.surface?.showAtPoint({ x, y });
     this.internalOpen = true;
     dispatchDetail(this.host, "open", {
       open: true,
@@ -122,8 +152,14 @@ var 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;
+    dispatchDetail(this.host, "open", {
+      open: true,
+      reason: "action",
+      trigger
+    });
+    this.focusFirstItem();
   }
   closeMenu(reason, trigger, returnFocus = true) {
     if (!this.internalOpen)
@@ -165,6 +201,7 @@ var UIContextMenu = class {
   onKeydown = (event) => {
     if (!this.internalOpen)
       return;
+    this.focusTrigger = "keyboard";
     if (event.key === "Escape") {
       event.preventDefault();
       requestTopOverlayClose("escape", "keyboard");
@@ -189,7 +226,7 @@ var UIContextMenu = class {
     this.closeMenu("action", "pointer");
   };
   render() {
-    return h(Host, { key: "79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "9308cadfa155930e3e46dfb4a69a847ae388958b", name: "trigger" }), h("div", { key: "16cfba2b32444ac9e3cac1f040f81f17fd5db23c", class: "menu", "data-open": this.internalOpen ? "" : void 0, 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: "4db0d5b55ead41925aa682b1e383b5735b49bf56", "data-open": this.internalOpen ? "" : void 0, "data-focus-trigger": this.internalOpen ? this.focusTrigger : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "462925d53db169c13e485789ae91e28b0abd3e40", name: "trigger" }), h("div", { key: "cac8f3b11c4872d38e976f210ce9a43fd854b335", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "ba50f74e11466da2240f7568479d5d10a614b394", open: this.internalOpen }, h("slot", { key: "1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae" }))));
   }
   static get watchers() {
     return {