@threadlabs/looma 0.26.25 → 0.27.0

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

@@ -4,7 +4,7 @@ function inputFor(event) {
   return event.detail === 0 ? "keyboard" : "pointer";
 }
 
-/** Authored toasts request dismissal; their consumer owns removal from the rendered list. */
+/** An authored toast hides itself when dismissed, like a dialog closing; clearing hidden shows it again. */
 function connect(host) {
   const element = host.element;
   const { action } = host.refs;
@@ -19,11 +19,13 @@ function connect(host) {
     if (dismissed) return;
     dismissed = true;
     clearTimeout(timer);
+    element.hidden = true;
     host.dispatch("dismiss", { id: element.id, reason, trigger });
   };
   const start = () => {
     clearTimeout(timer);
-    if (paused || dismissed || remaining <= 0) return;
+    // The duration counts only while the toast is shown; a hidden toast has nothing to time out.
+    if (paused || dismissed || element.hidden || remaining <= 0) return;
     started = Date.now();
     timer = setTimeout(() => dismiss("timeout", "programmatic"), remaining);
   };
@@ -50,6 +52,19 @@ function connect(host) {
     remaining = duration;
     start();
   });
+  // Hidden by the app, the timer stops; shown (again), it is a fresh request with the full duration.
+  const shown = new MutationObserver(() => {
+    if (element.hidden) {
+      clearTimeout(timer);
+      timer = null;
+      return;
+    }
+    dismissed = false;
+    paused = false;
+    remaining = Math.max(0, Number(host.props.duration.value) || 0);
+    start();
+  });
+  shown.observe(element, { attributes: true, attributeFilter: ["hidden"] });
   element.addEventListener("click", onClick);
   element.addEventListener("pointerenter", pause);
   element.addEventListener("pointerleave", resume);
@@ -58,6 +73,7 @@ function connect(host) {
   start();
   return () => {
     stop();
+    shown.disconnect();
     clearTimeout(timer);
     element.removeEventListener("click", onClick);
     element.removeEventListener("pointerenter", pause);

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

@@ -5,13 +5,13 @@ let toastIds = 0;
 
 /**
  * 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.
+ * action or timeout; authored ui-toast children hide themselves, and a hidden one does not count.
  */
 function connect(host) {
   const element = host.element;
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
-  const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast"));
+  const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast") && !child.hidden);
   let announcedVisible = false;
   const sync = () => {
     const visible = authored() || toasts().length > 0;
@@ -86,8 +86,16 @@ function connect(host) {
     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);
+  // Children come and go, and an authored toast hides itself: watch each child's hidden, not the whole subtree.
+  const watchChildren = () => {
+    for (const child of element.children) observer.observe(child, { attributeFilter: ["hidden"] });
+  };
+  const observer = new MutationObserver(() => {
+    watchChildren();
+    sync();
+  });
   observer.observe(element, { childList: true });
+  watchChildren();
   element.addEventListener("click", onClick);
   element.addEventListener("command", onCommand);
   element.addEventListener("show-toast", onShowToast);

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

@@ -10,7 +10,8 @@
     >Positions the description around its trigger. Start and end on top or bottom follow the writing direction.</prop>
     <prop name="trigger" type="keyword" values="hover, click, focus" default="hover"
     >How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus
-      opens only while the trigger holds focus.</prop>
+      opens only on keyboard-visible focus. Action activation dismisses hover/focus hints without removing focus; a fresh hover or keyboard focus can open them
+      again.</prop>
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
     <prop name="hideDelay" type="number" default="100">Waits this many milliseconds before hiding after pointer exit.</prop>
     <prop name="inverse" type="boolean" default="false">Use the high-contrast inverse surface (dark on light themes, light on dark themes).</prop>

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

@@ -28,6 +28,7 @@ function connect(host) {
   const overlayId = element.id || `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
   if (!element.id) element.id = overlayId;
   let focused = false;
+  let pointerFocused = false;
   let trigger = null;
   let surface = null;
   let showTimer = null;
@@ -71,6 +72,8 @@ function connect(host) {
     }, Math.max(0, Number(host.props.hideDelay.value ?? 100)));
   };
   const onFocusin = () => {
+    // A pointer click may focus the action, but only visible keyboard focus keeps its hint open.
+    if (pointerFocused || !trigger?.matches(":focus-visible")) return;
     focused = true;
     clearTimers();
     setOpen(true, "keyboard");
@@ -78,6 +81,7 @@ function connect(host) {
   const onFocusout = (event) => {
     if (event.relatedTarget && element.contains(event.relatedTarget)) return;
     focused = false;
+    pointerFocused = false;
     clearTimers();
     setOpen(false, "keyboard");
   };
@@ -88,6 +92,8 @@ function connect(host) {
     else trigger.removeAttribute("aria-describedby");
     trigger.removeEventListener("keydown", onKeydown);
     trigger.removeEventListener("click", onClick);
+    trigger.removeEventListener("click", onActivate);
+    trigger.removeEventListener("pointerdown", onPointerDown);
     trigger.removeAttribute("aria-expanded");
     trigger.removeEventListener("pointerenter", onEnter);
     trigger.removeEventListener("pointerleave", onLeave);
@@ -98,6 +104,18 @@ function connect(host) {
     clearTimers();
     setOpen(!host.state.internalOpen, "pointer");
   };
+  const onPointerDown = () => {
+    pointerFocused = true;
+    focused = false;
+    clearTimers();
+    setOpen(false, "pointer");
+  };
+  const onActivate = (event) => {
+    // Action hints are spent once the action runs; the next hover or keyboard focus opens anew.
+    clearTimers();
+    focused = false;
+    setOpen(false, event.detail === 0 ? "keyboard" : "pointer");
+  };
   const attach = () => {
     if (!trigger) return;
     const ids = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
@@ -111,6 +129,8 @@ function connect(host) {
       trigger.setAttribute("aria-expanded", String(Boolean(host.state.internalOpen)));
       return;
     }
+    trigger.addEventListener("pointerdown", onPointerDown);
+    trigger.addEventListener("click", onActivate);
     if (how === "hover") {
       trigger.addEventListener("pointerenter", onEnter);
       trigger.addEventListener("pointerleave", onLeave);