@threadlabs/looma 0.1.16 → 0.1.17

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; }
+}