@threadlabs/looma 0.1.22 → 0.1.24

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

@@ -5,10 +5,12 @@ import { createViewportSurface } from "../../overlay/positioning";
 export class UIToastRegion {
     host;
     open = true;
-    internalOpen = true;
+    internalOpen = false;
     surface = null;
+    contentObserver = null;
+    pendingDismiss = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        this.syncContents();
     }
     syncSurface() {
         if (this.internalOpen)
@@ -18,22 +20,39 @@ export class UIToastRegion {
     }
     componentDidLoad() {
         this.surface = createViewportSurface(this.host);
-        this.syncFromProp();
+        this.contentObserver = new MutationObserver(this.syncContents);
+        this.contentObserver.observe(this.host, { childList: true, subtree: true });
+        this.syncContents();
         this.syncSurface();
         this.host.addEventListener('click', this.onClick);
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onClick);
+        this.contentObserver?.disconnect();
+        this.contentObserver = null;
         this.surface?.destroy();
         this.surface = null;
     }
     getToasts() {
         return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
     }
-    updateOpenState() {
-        const toasts = this.getToasts();
-        this.internalOpen = toasts.length > 0;
-    }
+    syncContents = () => {
+        const nextOpen = this.open && this.getToasts().length > 0;
+        const wasOpen = this.internalOpen;
+        const completedDismiss = this.pendingDismiss && !this.host.contains(this.pendingDismiss.toast)
+            ? this.pendingDismiss
+            : null;
+        this.internalOpen = nextOpen;
+        if (wasOpen && !nextOpen && completedDismiss) {
+            dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'action',
+                trigger: completedDismiss.trigger,
+            });
+        }
+        if (completedDismiss || !this.open)
+            this.pendingDismiss = null;
+    };
     onClick = (e) => {
         const dismissBtn = e.target.closest?.('[data-ui-toast-dismiss]');
         if (!dismissBtn)
@@ -42,24 +61,16 @@ export class UIToastRegion {
         if (!toast)
             return;
         const id = toast.id ?? '';
-        toast.setAttribute('aria-hidden', 'true');
-        toast.remove();
+        const trigger = eventToTrigger(e);
+        this.pendingDismiss = { toast: toast, trigger };
         dispatchDetail(this.host, 'dismiss', {
             id,
             reason: 'action',
-            trigger: eventToTrigger(e),
+            trigger,
         });
-        this.updateOpenState();
-        if (this.getToasts().length === 0) {
-            dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'action',
-                trigger: eventToTrigger(e),
-            });
-        }
     };
     render() {
-        return (h(Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
+        return (h(Host, { key: 'b4430aceacb7a66202c6a43ad7b0bbe31c51eb94', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '8bfb02d38366fab29a1668a53b7834ccd1a9aa65' })));
     }
     static get is() { return "ui-toast-region"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,13 +3,11 @@
   inset: auto;
   margin: 0;
   display: inline-block;
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-surface-elevated);
-  color: var(--ui-text-primary);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  font-size: var(--ui-font-size-sm);
-  box-shadow: var(--ui-shadow-md);
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   opacity: 0;
   transform: translateY(4px);
   transition:
@@ -19,6 +17,17 @@
     overlay var(--ui-motion-fast) allow-discrete;
 }
 
+.tooltip__surface {
+  box-sizing: border-box;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-elevated);
+  color: var(--ui-text-primary);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  font-size: var(--ui-font-size-sm);
+  box-shadow: var(--ui-shadow-md);
+}
+
 :host(:popover-open) { opacity: 1; transform: translateY(0); }
 
 @starting-style {

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

@@ -1,17 +1,25 @@
 import { Host, h } from "@stencil/core";
-import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
+import { openOverlay, closeOverlay } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UITooltip {
     host;
     for = '';
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     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;
+    /** Click or tap pins the description; activate again to dismiss. */
+    toggleOnClick = false;
+    pinned = false;
+    focused = false;
+    opened;
+    closed;
     internalOpen = false;
     overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
@@ -20,7 +28,8 @@ export class UITooltip {
     hideTimer = null;
     syncFromProp() {
         this.clearTimers();
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.syncTrigger();
@@ -45,11 +54,13 @@ export class UITooltip {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        if (!this.host.id)
+            this.host.id = this.overlayId;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.syncTrigger();
         this.setupSurface();
-        this.host.addEventListener('keydown', this.onKeydown);
+        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.addEventListener('pointerleave', this.onTriggerLeave);
         this.syncOverlay();
     }
     componentDidUpdate() {
@@ -60,12 +71,13 @@ export class UITooltip {
         this.detachTriggerListeners();
         this.surface?.destroy();
         this.surface = null;
-        this.host.removeEventListener('keydown', this.onKeydown);
+        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
         closeOverlay(this.overlayId);
     }
     syncTrigger() {
         const next = this.for
-            ? this.host.ownerDocument.getElementById(this.for)
+            ? this.host.getRootNode().getElementById(this.for)
             : this.host.previousElementSibling;
         if (next === this.trigger)
             return;
@@ -85,6 +97,11 @@ export class UITooltip {
         this.detachTriggerListeners();
         if (!this.trigger)
             return;
+        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
+        ids.add(this.host.id);
+        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
+        this.trigger.addEventListener('click', this.onTriggerClick);
+        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
         this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
@@ -93,6 +110,13 @@ export class UITooltip {
     detachTriggerListeners() {
         if (!this.trigger)
             return;
+        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
+        if (ids.length)
+            this.trigger.setAttribute('aria-describedby', ids.join(' '));
+        else
+            this.trigger.removeAttribute('aria-describedby');
+        this.trigger.removeEventListener('click', this.onTriggerClick);
+        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
         this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
@@ -117,14 +141,29 @@ export class UITooltip {
     setInteractionOpen(nextOpen, trigger) {
         if (this.internalOpen === nextOpen)
             return;
-        this.internalOpen = nextOpen;
+        if (!isControlled(this.open))
+            this.internalOpen = nextOpen;
         dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
             open: nextOpen,
             reason: 'action',
             trigger,
         });
     }
-    onTriggerEnter = () => {
+    onSurfaceEnter = () => this.clearHideTimer();
+    onTriggerClick = (event) => {
+        if (!this.toggleOnClick)
+            return;
+        this.clearTimers();
+        this.pinned = !this.pinned;
+        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key === 'Escape')
+            this.clearTimers();
+    };
+    onTriggerEnter = (event) => {
+        if (event.pointerType === 'touch')
+            return;
         this.clearHideTimer();
         if (this.internalOpen || this.showTimer !== null)
             return;
@@ -135,7 +174,7 @@ export class UITooltip {
     };
     onTriggerLeave = () => {
         this.clearShowTimer();
-        if (!this.internalOpen || this.hideTimer !== null)
+        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
             return;
         this.hideTimer = setTimeout(() => {
             this.hideTimer = null;
@@ -143,6 +182,7 @@ export class UITooltip {
         }, Math.max(0, this.hideDelay));
     };
     onTriggerFocusIn = () => {
+        this.focused = true;
         this.clearTimers();
         this.setInteractionOpen(true, 'keyboard');
     };
@@ -150,28 +190,26 @@ export class UITooltip {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
             return;
+        this.focused = false;
+        this.pinned = false;
         this.clearTimers();
         this.setInteractionOpen(false, 'keyboard');
     };
     handleRequestClose(reason, trigger) {
-        if (reason === 'escape') {
+        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
+            this.pinned = false;
             this.clearTimers();
-            this.internalOpen = false;
+            if (!isControlled(this.open))
+                this.internalOpen = false;
             dispatchDetail(this.host, 'close', {
                 open: false,
-                reason: 'escape',
+                reason,
                 trigger: trigger,
             });
-            this.trigger?.focus();
         }
     }
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            requestTopOverlayClose('escape', 'keyboard');
-        }
-    };
     render() {
-        return (h(Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
+        return (h(Host, { key: 'ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, h("div", { key: 'e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06', class: "tooltip__surface" }, h("slot", { key: 'bdb71bfcb0f72c212cbb5c64fb69510fdded4afb' }))));
     }
     static get is() { return "ui-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -216,16 +254,15 @@ export class UITooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",
@@ -313,6 +350,26 @@ export class UITooltip {
                 "reflect": false,
                 "attribute": "hide-delay",
                 "defaultValue": "100"
+            },
+            "toggleOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Click or tap pins the description; activate again to dismiss."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-on-click",
+                "defaultValue": "false"
             }
         };
     }
@@ -321,6 +378,39 @@ export class UITooltip {
             "internalOpen": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ open: boolean; reason: string; trigger: string }",
+                    "resolved": "{ open: boolean; reason: string; trigger: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ open: boolean; reason: string; trigger: string }",
+                    "resolved": "{ open: boolean; reason: string; trigger: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/ui-top-bar/ui-top-bar.js

@@ -27,7 +27,7 @@ export class UITopBar {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (h(Host, { key: '15c840c082724df0ec39ab6ad4e55f99192df5be' }, h("header", { key: '790afaeecdb3e598b8365391f57ee1e2d8ca69a2', class: "top-bar", part: "base" }, h("div", { key: 'fab822f5875c7e3b8e267be42c075597d79374fa', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '0723013c4b674964e4029442b715daa9eb0036db', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '77fc006257b7fa6a191191d9969ea66445b8bc3e', class: "top-bar__title" }, h("slot", { key: 'e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe' })), h("div", { key: 'bde5cdf797ae898f68eddeab362b8395f89bdf28', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '8b059d6123e94f3b7e18c15c88828ee9c6436136', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'c262446cf29873903530ea3f840de4de9db3de82', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: 'f417dbc8cc0115a455a72ce0feb5f32b323ce68f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (h(Host, { key: 'b92aa4e03475b3e623212a1e98f45d5532860b51' }, h("header", { key: 'a3552708b0e424e762e100ee55fc6bfac4cd830a', class: "top-bar", part: "base" }, h("div", { key: '4c8a9e3a04ff23a615bf09e368f4212dd5b38157', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '64ecc99672b8fd37305810e0776a24bf87ea6f08', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '37fc003aba2b87f7c8c0e654cd6810d7f231f365', class: "top-bar__title" }, h("slot", { key: 'e6c901c15852e83340ca8ad1e264fd5e35445e84' })), h("div", { key: '37b1ac319367eeded4182ada401a31e0b9c2555a', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '0a8b5ef500dd843909bb35a1133be548411f3b71', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: '19fe59c5ba4da7f0ceda764948f1288bfaa2a41d', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
     static get is() { return "ui-top-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,10 @@
 :host {
   --ui-tree-indent: 16px;
+  --ui-tree-gutter: 0px;
 
   display: block;
   min-inline-size: 0;
-  padding-inline-start: var(--ui-tree-gutter, 22px);
+  padding-inline-start: var(--ui-tree-gutter);
 }
 
 ::slotted(ui-tree-item) {