@threadlabs/looma 0.1.23 → 0.1.24

package/dist/cjs/ui-toast-region.cjs.entry.js

@@ -12,10 +12,12 @@ const UIToastRegion = class {
     }
     get host() { return index.getElement(this); }
     open = true;
-    internalOpen = true;
+    internalOpen = false;
     surface = null;
+    contentObserver = null;
+    pendingDismiss = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        this.syncContents();
     }
     syncSurface() {
         if (this.internalOpen)
@@ -25,22 +27,39 @@ const UIToastRegion = class {
     }
     componentDidLoad() {
         this.surface = positioning.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) {
+            events.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)
@@ -49,24 +68,16 @@ const UIToastRegion = class {
         if (!toast)
             return;
         const id = toast.id ?? '';
-        toast.setAttribute('aria-hidden', 'true');
-        toast.remove();
+        const trigger = events.eventToTrigger(e);
+        this.pendingDismiss = { toast: toast, trigger };
         events.dispatchDetail(this.host, 'dismiss', {
             id,
             reason: 'action',
-            trigger: events.eventToTrigger(e),
+            trigger,
         });
-        this.updateOpenState();
-        if (this.getToasts().length === 0) {
-            events.dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'action',
-                trigger: events.eventToTrigger(e),
-            });
-        }
     };
     render() {
-        return (index.h(index.Host, { key: '9ec1cc51ecc4e7a256be5d89a09a10788e46db53', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '7b08656f3745a02f8e9f0935e47d6f2cffd88f9b' })));
+        return (index.h(index.Host, { key: 'b4430aceacb7a66202c6a43ad7b0bbe31c51eb94', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '8bfb02d38366fab29a1668a53b7834ccd1a9aa65' })));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-tooltip.cjs.entry.js

@@ -3,9 +3,10 @@
 var index = require('./index-BHG9Rpil.js');
 var manager = require('./manager-Ce25WRtl.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const uiTooltipCss = () => `:host{position:fixed;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);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}}`;
+const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;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}.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{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 
 const UITooltip = class {
     constructor(hostRef) {
@@ -15,7 +16,8 @@ const UITooltip = class {
     }
     get host() { return index.getElement(this); }
     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. */
@@ -36,7 +38,8 @@ const UITooltip = class {
     hideTimer = null;
     syncFromProp() {
         this.clearTimers();
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.syncTrigger();
@@ -63,8 +66,7 @@ const UITooltip = class {
     componentDidLoad() {
         if (!this.host.id)
             this.host.id = this.overlayId;
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.syncTrigger();
         this.setupSurface();
         this.host.addEventListener('pointerenter', this.onSurfaceEnter);
@@ -149,7 +151,8 @@ const UITooltip = class {
     setInteractionOpen(nextOpen, trigger) {
         if (this.internalOpen === nextOpen)
             return;
-        this.internalOpen = nextOpen;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = nextOpen;
         events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
             open: nextOpen,
             reason: 'action',
@@ -206,7 +209,8 @@ const UITooltip = class {
         if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
             this.pinned = false;
             this.clearTimers();
-            this.internalOpen = false;
+            if (!controlledState.isControlled(this.open))
+                this.internalOpen = false;
             events.dispatchDetail(this.host, 'close', {
                 open: false,
                 reason,
@@ -215,7 +219,7 @@ const UITooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b0199c23316a707ae3e1e7c361f2838872f62221', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'd0c7822f2f47848a509bf8e310806edbdb320f02' })));
+        return (index.h(index.Host, { key: 'ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: 'e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06', class: "tooltip__surface" }, index.h("slot", { key: 'bdb71bfcb0f72c212cbb5c64fb69510fdded4afb' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-top-bar.cjs.entry.js

@@ -35,7 +35,7 @@ const UITopBar = class {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (index.h(index.Host, { key: '730e45232ab2b86c2ac99dba773f4ca15d7c3c51' }, index.h("header", { key: 'f94f9b4f3f5930fda950895d2eec01d3ec175479', class: "top-bar", part: "base" }, index.h("div", { key: '038f6a404b0f159b4b826ada73d3c920266354c8', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '2d415368310c319eca3f3eb9b2c885ef79bb4107', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'dfd78b02066a91e9c610e4655a70da704ad65327', class: "top-bar__title" }, index.h("slot", { key: '499e24a864a31f6e400fd02aab4a3f960c87e572' })), index.h("div", { key: '5aa94952996487651dffecd2e351548631fa29b6', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: 'eddad95f8acf787ee0cead2a46e7961a06375d5c', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'dc69d492aa221a8beb888350bf101f8beeceede9', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '7cde7e062f487da8209738a32415636c7a6b72f0', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (index.h(index.Host, { key: 'b92aa4e03475b3e623212a1e98f45d5532860b51' }, index.h("header", { key: 'a3552708b0e424e762e100ee55fc6bfac4cd830a', class: "top-bar", part: "base" }, index.h("div", { key: '4c8a9e3a04ff23a615bf09e368f4212dd5b38157', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '64ecc99672b8fd37305810e0776a24bf87ea6f08', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '37fc003aba2b87f7c8c0e654cd6810d7f231f365', class: "top-bar__title" }, index.h("slot", { key: 'e6c901c15852e83340ca8ad1e264fd5e35445e84' })), index.h("div", { key: '37b1ac319367eeded4182ada401a31e0b9c2555a', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: '0a8b5ef500dd843909bb35a1133be548411f3b71', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '19fe59c5ba4da7f0ceda764948f1288bfaa2a41d', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UITopBar.style = uiTopBarCss();