@threadlabs/looma 0.24.0 → 0.25.0

package/components/ui-toast-region/ui-toast-region.html

@@ -3,7 +3,7 @@
 <template component="ui-toast-region" controller="./ui-toast-region.js">
   <defs>
     <prop name="duration" type="number" default="0"
-    >Default milliseconds for toasts added with show() or the show command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
+    >Default milliseconds for toasts added with the show-toast event or command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
     <prop name="placement" type="keyword" values="top, top-start, top-end, bottom, bottom-start, bottom-end" default="top"
     >Screen edge where the stack appears. Start and end follow the writing direction.</prop>
     <state
@@ -24,7 +24,12 @@
       <prop name="reason" required type="keyword" values="action, timeout"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
-    <method name="show" export="show" returns="promise(string)"></method>
+    <event name="show-toast" type="object">
+      <prop name="message" required type="string"></prop>
+      <prop name="id" type="string"></prop>
+      <prop name="tone" type="keyword" values="neutral, info, success, warning, danger"></prop>
+      <prop name="duration" type="number"></prop>
+    </event>
   </defs>
   <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">
     <slot></slot>
@@ -107,25 +112,25 @@
       display: none;
     }
 
-    :host-state([placement="top-start"]),
-    :host-state([placement="bottom-start"]) {
+    :host([placement="top-start"]),
+    :host([placement="bottom-start"]) {
       left: auto;
       right: auto;
       inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
       transform: none;
     }
 
-    :host-state([placement="top-end"]),
-    :host-state([placement="bottom-end"]) {
+    :host([placement="top-end"]),
+    :host([placement="bottom-end"]) {
       left: auto;
       right: auto;
       inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
       transform: none;
     }
 
-    :host-state([placement="bottom"]),
-    :host-state([placement="bottom-start"]),
-    :host-state([placement="bottom-end"]) {
+    :host([placement="bottom"]),
+    :host([placement="bottom-start"]),
+    :host([placement="bottom-end"]) {
       top: auto;
       bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
     }
@@ -168,11 +173,11 @@
       pointer-events: none;
     }
 
-    :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-state([placement="bottom-end"])) .toast {
+    :is(:host([placement="bottom"]), :host([placement="bottom-start"]), :host([placement="bottom-end"])) .toast {
       animation-name: ui-toast-enter-bottom;
     }
 
-    :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-state([placement="bottom-end"])) .toast.closing {
+    :is(:host([placement="bottom"]), :host([placement="bottom-start"]), :host([placement="bottom-end"])) .toast.closing {
       animation-name: ui-toast-exit-bottom;
     }
 

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

@@ -1,18 +1,13 @@
 import { announceOverlayOpen } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
-const instances = new WeakMap();
 let toastIds = 0;
 
-export async function show(host, message, options = {}) {
-  return instances.get(host.element)?.show(message, options);
-}
-
 /**
  * Shows the region while it has authored or generated messages. Generated messages dismiss by
  * action or timeout; authored ui-toast children own their removal through the dismiss event.
  */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
@@ -85,24 +80,28 @@ export default function controller(host) {
     if (id) dismiss(id, "action", trigger());
   };
   const onCommand = (event) => {
-    if (event.command === "--show-toast" && event.source?.value) add(event.source.value);
+    if (event.target === element && event.command === "--show-toast" && event.source?.value) add(event.source.value);
+  };
+  const onShowToast = (event) => {
+    if (event.target === element && typeof event.detail?.message === "string") add(event.detail.message, event.detail);
   };
   const stop = host.effect(sync);
   const observer = new MutationObserver(sync);
   observer.observe(element, { childList: true });
   element.addEventListener("click", onClick);
   element.addEventListener("command", onCommand);
+  element.addEventListener("show-toast", onShowToast);
   element.addEventListener("pointerenter", pauseTimers);
   element.addEventListener("pointerleave", resumeTimers);
   element.addEventListener("focusin", pauseTimers);
   element.addEventListener("focusout", resumeTimers);
-  instances.set(element, { show: add });
   return () => {
     stop();
     stopTracking();
     observer.disconnect();
     element.removeEventListener("click", onClick);
     element.removeEventListener("command", onCommand);
+    element.removeEventListener("show-toast", onShowToast);
     element.removeEventListener("pointerenter", pauseTimers);
     element.removeEventListener("pointerleave", resumeTimers);
     element.removeEventListener("focusin", pauseTimers);
@@ -110,6 +109,10 @@ export default function controller(host) {
     for (const timer of timers.values()) clearTimeout(timer.handle);
     timers.clear();
     if (element.matches(":popover-open")) element.hidePopover();
-    instances.delete(element);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-tooltip/ui-tooltip.html

@@ -152,7 +152,7 @@
       font: inherit;
     }
 
-    :host-state([inverse]) .surface {
+    :host([inverse]) .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));

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

@@ -2,7 +2,7 @@ import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, o
 
 const warmTooltips = new WeakMap();
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const warm = warmTooltips.get(document) ?? { active: 0, until: 0 };
@@ -190,3 +190,8 @@ export default function controller(host) {
     closeOverlay(document, overlayId);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-tree/ui-tree.html

@@ -75,12 +75,12 @@
 
     /* Reaches the items the way density does, so the setting lives on the tree the way a reader
        thinks about it: this list scrolls its long names. */
-    :host-state([marquee]) {
+    :host([marquee]) {
       --_ui-default-tree-item-marquee: 1;
     }
 
     /* The items' defaults for this density: an item's own hook still wins. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
       --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
       --_ui-default-tree-item-label-padding-block: 0;

package/components/ui-tree/ui-tree.js

@@ -16,7 +16,7 @@ function parentItem(item, tree) {
   return parent && tree.contains(parent) ? parent : null;
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const itemSelector = '[role="treeitem"]';
@@ -483,3 +483,8 @@ export default function controller(host) {
     element.removeEventListener("click", onMoveClick, true);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-tree-item/ui-tree-item.html

@@ -179,15 +179,15 @@
     }
 
     /* Selection is the same surface recipe as destination and choice rows. */
-    :host-state([selected]) > .row {
+    :host([selected]) > .row {
       color: var(--ui-selection-text);
       background: var(--ui-selection-surface);
     }
-    :host-state([selected]):not([aria-disabled="true"]) > .row > .leading {
+    :host([selected]):not([aria-disabled="true"]) > .row > .leading {
       color: var(--ui-selection-text);
     }
 
-    :host-state([disabled]) .row {
+    :host([disabled]) .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
     }
@@ -687,7 +687,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :host-state([selected]):not(:focus-visible):not([aria-disabled="true"]) > .row {
+      :host([selected]):not(:focus-visible):not([aria-disabled="true"]) > .row {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

package/components/ui-tree-item/ui-tree-item.js

@@ -17,7 +17,7 @@ const CONTROLS = [
     "radio", "switch", "tab", "slider", "spinbutton", "combobox", "textbox", "dialog"].map((role) => `[role="${role}"]`),
 ].join(", ");
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const { row, disclosure, children, leading, label, actions, labelText } = host.refs;
   // Touch use enlarges rows and hides drag handles (see the template's styles).
@@ -233,3 +233,8 @@ export default function controller(host) {
     row.removeEventListener("click", onRowClick);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}