@threadlabs/looma 0.1.16 → 0.1.18

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { createAnchoredSurface } from "../../overlay/positioning";
 export class UIContextMenu {
     host;
     /** Controls the menu when the consumer owns open state. */
@@ -10,11 +11,14 @@ export class UIContextMenu {
     /** 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;
     }
@@ -25,6 +29,12 @@ export class UIContextMenu {
     syncOverlay() {
         this.syncTriggerState();
         if (this.internalOpen) {
+            if (this.pointPositioned) {
+                this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
+            }
+            else {
+                this.surface?.show();
+            }
             openOverlay({
                 id: this.overlayId,
                 modal: false,
@@ -34,6 +44,7 @@ export class UIContextMenu {
             });
         }
         else {
+            this.surface?.hide();
             closeOverlay(this.overlayId);
         }
     }
@@ -42,18 +53,33 @@ export class UIContextMenu {
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.resolveTargets();
         this.attachTargetListeners();
+        this.setupSurface();
         this.syncTriggerState();
         this.syncOverlay();
     }
     componentDidUpdate() {
         this.resolveTargets();
         this.attachTargetListeners();
+        if (!this.pointPositioned)
+            this.surface?.setAnchor(this.trigger);
         this.syncTriggerState();
     }
     disconnectedCallback() {
         this.detachTargetListeners();
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
     }
+    setupSurface() {
+        const menu = this.host.shadowRoot?.querySelector('.menu');
+        if (!menu)
+            return;
+        this.surface?.destroy();
+        this.surface = createAnchoredSurface(menu, {
+            anchor: this.trigger,
+            placement: 'bottom-start',
+        });
+    }
     resolveTargets() {
         const previousTrigger = this.trigger;
         const previousContextTarget = this.contextTarget;
@@ -93,6 +119,11 @@ export class UIContextMenu {
     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;
         dispatchDetail(this.host, 'open', {
             open: true,
@@ -104,8 +135,14 @@ export class UIContextMenu {
     openFromTrigger(trigger) {
         if (!this.trigger)
             return;
-        const rect = this.trigger.getBoundingClientRect();
-        this.openMenu(rect.left, rect.bottom, trigger);
+        this.pointPositioned = false;
+        this.internalOpen = true;
+        dispatchDetail(this.host, 'open', {
+            open: true,
+            reason: 'action',
+            trigger,
+        });
+        this.focusFirstItem();
     }
     closeMenu(reason, trigger, returnFocus = true) {
         if (!this.internalOpen)
@@ -150,6 +187,7 @@ export class UIContextMenu {
     onKeydown = (event) => {
         if (!this.internalOpen)
             return;
+        this.focusTrigger = 'keyboard';
         if (event.key === 'Escape') {
             event.preventDefault();
             requestTopOverlayClose('escape', 'keyboard');
@@ -174,7 +212,7 @@ export class UIContextMenu {
         this.closeMenu('action', 'pointer');
     };
     render() {
-        return (h(Host, { key: '79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '9308cadfa155930e3e46dfb4a69a847ae388958b', name: "trigger" }), h("div", { key: '16cfba2b32444ac9e3cac1f040f81f17fd5db23c', class: "menu", "data-open": this.internalOpen ? '' : undefined, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, h("ui-menu", { key: '59f18e0df3bb1fe85efa8eeca00b336bbde47c70', open: this.internalOpen }, h("slot", { key: '5bdbb7773c9c1ae43ec2e05fca9558482815e28a' })))));
+        return (h(Host, { key: '4db0d5b55ead41925aa682b1e383b5735b49bf56', "data-open": this.internalOpen ? '' : undefined, "data-focus-trigger": this.internalOpen ? this.focusTrigger : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: '462925d53db169c13e485789ae91e28b0abd3e40', name: "trigger" }), h("div", { key: 'cac8f3b11c4872d38e976f210ce9a43fd854b335', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: 'ba50f74e11466da2240f7568479d5d10a614b394', open: this.internalOpen }, h("slot", { key: '1fcb45bf124e2377ac6c7fc236d2babf0d9e3bae' })))));
     }
     static get is() { return "ui-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -253,7 +291,8 @@ export class UIContextMenu {
     }
     static get states() {
         return {
-            "internalOpen": {}
+            "internalOpen": {},
+            "focusTrigger": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -12,6 +12,45 @@
   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%;

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

@@ -1,23 +1,90 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
+import { closeOverlay, openOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UIMenu {
     host;
     open = false;
     defaultOpen = false;
+    /** Id of the control that anchors this menu in the top layer. */
+    for;
+    /** Preferred placement; Looma flips and shifts when space is constrained. */
+    placement = 'bottom-start';
     internalOpen = false;
+    overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
+    anchor = null;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
+    resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+    }
+    syncSurface() {
+        this.syncAnchorState();
+        if (!this.surface)
+            return;
+        if (this.internalOpen) {
+            this.surface.show();
+            openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                relatedElements: this.anchor ? [this.anchor] : undefined,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.closeMenu(reason, trigger),
+            });
+        }
+        else {
+            this.surface.hide();
+            closeOverlay(this.overlayId);
+        }
+    }
     componentDidLoad() {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
+        this.setupSurface();
+        this.syncSurface();
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onItemClick);
         this.host.removeEventListener('keydown', this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
+        closeOverlay(this.overlayId);
+    }
+    setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+            return;
+        this.surface = createAnchoredSurface(this.host, {
+            anchor: this.anchor,
+            placement: this.placement,
+        });
+    }
+    syncAnchorState() {
+        if (!this.anchor)
+            return;
+        this.anchor.setAttribute('aria-haspopup', 'menu');
+        this.anchor.setAttribute('aria-expanded', this.internalOpen ? 'true' : 'false');
+    }
+    closeMenu(reason, trigger) {
+        if (!this.internalOpen)
+            return;
+        this.internalOpen = false;
+        dispatchDetail(this.host, 'close', {
+            open: false,
+            reason: reason,
+            trigger: trigger,
+        });
+        if (reason === 'escape')
+            this.anchor?.focus();
     }
     getItems() {
         return Array.from(this.host.querySelectorAll('ui-menu-item'));
@@ -44,6 +111,11 @@ export class UIMenu {
         this.internalOpen = false;
     };
     onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            requestTopOverlayClose('escape', 'keyboard');
+            return;
+        }
         const items = this.getItems().filter((i) => !this.isItemDisabled(i));
         if (items.length === 0)
             return;
@@ -76,7 +148,7 @@ export class UIMenu {
         }
     };
     render() {
-        return (h(Host, { key: '5e463cbbce272c6b6132a839b818deef3e39a532', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'feea6a21d41a7b27a6270814bcf0b3f3ded394a1' })));
+        return (h(Host, { key: '06ad0750df843cb874bd4f257d8567157c855493', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '50118ac749a2747ca06f4d483499c4cd20125a89' })));
     }
     static get is() { return "ui-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -131,6 +203,52 @@ export class UIMenu {
                 "reflect": false,
                 "attribute": "default-open",
                 "defaultValue": "false"
+            },
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the control that anchors this menu in the top layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            },
+            "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": "Preferred placement; Looma flips and shifts when space is constrained."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
             }
         };
     }
@@ -144,6 +262,15 @@ export class UIMenu {
         return [{
                 "propName": "open",
                 "methodName": "syncFromProp"
+            }, {
+                "propName": "for",
+                "methodName": "resetSurface"
+            }, {
+                "propName": "placement",
+                "methodName": "resetSurface"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "syncSurface"
             }];
     }
 }

package/dist/collection/components/ui-popover/ui-popover.css

@@ -12,3 +12,34 @@
   max-block-size: calc(100dvh - (var(--ui-popover-viewport-gap) * 2));
   overflow: auto;
 }
+
+:host(:not([data-open])) {
+  display: none;
+}
+
+:host([popover]) {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.99);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    display var(--ui-motion-fast) allow-discrete,
+    overlay var(--ui-motion-fast) allow-discrete;
+}
+
+:host([popover]:popover-open) { opacity: 1; transform: translateY(0) scale(1); }
+
+@starting-style {
+  :host([popover]:popover-open) { opacity: 0; transform: translateY(-4px) scale(0.99); }
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([popover]) { transition: none; }
+}

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

@@ -1,12 +1,18 @@
 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 UIPopover {
     host;
     open = false;
     defaultOpen = false;
+    /** Optional id of the element this popover follows in the top layer. */
+    for;
+    placement = 'bottom-start';
     internalOpen = false;
     overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+    anchor = null;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
@@ -27,12 +33,37 @@ export class UIPopover {
             });
         }
     }
+    resetSurface() {
+        this.setupSurface();
+        this.syncSurface();
+    }
+    setupSurface() {
+        this.surface?.destroy();
+        this.surface = null;
+        this.anchor = this.for ? this.host.ownerDocument.getElementById(this.for) : null;
+        if (!this.anchor)
+            return;
+        this.surface = createAnchoredSurface(this.host, {
+            anchor: this.anchor,
+            placement: this.placement,
+        });
+    }
+    syncSurface() {
+        if (!this.surface)
+            return;
+        if (this.internalOpen)
+            this.surface.show();
+        else
+            this.surface.hide();
+    }
     syncOverlay() {
+        this.syncSurface();
         if (this.internalOpen) {
             openOverlay({
                 id: this.overlayId,
                 modal: false,
                 element: this.host,
+                relatedElements: this.anchor ? [this.anchor] : undefined,
                 dismissible: true,
                 requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
             });
@@ -45,10 +76,13 @@ export class UIPopover {
         this.syncFromProp();
         this.internalOpen = this.internalOpen || this.defaultOpen;
         this.host.addEventListener('keydown', this.onKeydown);
+        this.setupSurface();
         this.syncOverlay();
     }
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.onKeydown);
+        this.surface?.destroy();
+        this.surface = null;
         closeOverlay(this.overlayId);
     }
     componentDidUpdate() {
@@ -68,7 +102,7 @@ export class UIPopover {
         }
     };
     render() {
-        return (h(Host, { key: '67e7f52220db9d997fb11b686d6abcbdf9557a8d', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'd7c1fa2ab75994fe0a7dd63f8289754c7754c30f' })));
+        return (h(Host, { key: '8e45be54147ff8f76a0d5e7fd875c3f4cf5ac40a', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '3141729cd32c8dcdaec1fbd763eb034242563c8f' })));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -123,6 +157,52 @@ export class UIPopover {
                 "reflect": false,
                 "attribute": "default-open",
                 "defaultValue": "false"
+            },
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional id of the element this popover follows in the top layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            },
+            "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": "'bottom-start'"
             }
         };
     }
@@ -139,6 +219,12 @@ export class UIPopover {
             }, {
                 "propName": "internalOpen",
                 "methodName": "onOpenChange"
+            }, {
+                "propName": "for",
+                "methodName": "resetSurface"
+            }, {
+                "propName": "placement",
+                "methodName": "resetSurface"
             }];
     }
 }

package/dist/collection/components/ui-toast-region/ui-toast-region.css

@@ -11,6 +11,12 @@
   pointer-events: none;
 }
 
+:host([popover]) {
+  right: auto;
+  bottom: auto;
+  margin: 0;
+}
+
 :host > * {
   pointer-events: auto;
 }

package/dist/collection/components/ui-toast-region/ui-toast-region.js

@@ -1,19 +1,31 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger } from "../../utils/events";
 import { dispatchDetail } from "../../utils/events";
+import { createViewportSurface } from "../../overlay/positioning";
 export class UIToastRegion {
     host;
     open = true;
     internalOpen = true;
+    surface = null;
     syncFromProp() {
         this.internalOpen = this.open;
     }
+    syncSurface() {
+        if (this.internalOpen)
+            this.surface?.show();
+        else
+            this.surface?.hide();
+    }
     componentDidLoad() {
+        this.surface = createViewportSurface(this.host);
         this.syncFromProp();
+        this.syncSurface();
         this.host.addEventListener('click', this.onClick);
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onClick);
+        this.surface?.destroy();
+        this.surface = null;
     }
     getToasts() {
         return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
@@ -47,7 +59,7 @@ export class UIToastRegion {
         }
     };
     render() {
-        return (h(Host, { key: '0edcce54864ba991b092d004d3b45cf697b9c3ac', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '2e30794a05b018fb55c4313c8e17f7262ecee7da' })));
+        return (h(Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
     }
     static get is() { return "ui-toast-region"; }
     static get encapsulation() { return "shadow"; }
@@ -95,6 +107,9 @@ export class UIToastRegion {
         return [{
                 "propName": "open",
                 "methodName": "syncFromProp"
+            }, {
+                "propName": "internalOpen",
+                "methodName": "syncSurface"
             }];
     }
 }

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

@@ -1,4 +1,7 @@
 :host {
+  position: fixed;
+  inset: auto;
+  margin: 0;
   display: inline-block;
   border: 1px solid var(--ui-border-default);
   border-radius: var(--ui-radius-2);
@@ -7,8 +10,25 @@
   padding: var(--ui-space-2) var(--ui-space-3);
   font-size: var(--ui-font-size-sm);
   box-shadow: var(--ui-shadow-md);
+  opacity: 0;
+  transform: translateY(4px);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    display var(--ui-motion-fast) allow-discrete,
+    overlay var(--ui-motion-fast) allow-discrete;
+}
+
+:host(:popover-open) { opacity: 1; transform: translateY(0); }
+
+@starting-style {
+  :host(:popover-open) { opacity: 0; transform: translateY(4px); }
 }
 
 :host([hidden]) {
   display: none !important;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}