@threadlabs/looma 0.26.26 → 0.27.0

package/components/ui-editor-slash-menu/ui-editor-slash-menu.js

@@ -1,3 +1,4 @@
+import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the slash and tracks the highlighted item; the template renders the items.
@@ -7,6 +8,7 @@ function connect(host) {
   const place = () => {
     if (host.state.visible) positionMenu(element, normalizeAnchor(host.props.anchorRect.value), 280);
   };
+  const surface = createViewportSurface(element, { position: place });
   const options = () => Array.from(element.querySelectorAll('[role="option"]'));
   const syncOptions = () => {
     const query = String(host.props.query.value || "").trim().toLocaleLowerCase();
@@ -31,7 +33,8 @@ function connect(host) {
     const visible = Boolean(host.props.open.value && normalizeAnchor(host.props.anchorRect.value)
       && (rows.length > 0 || host.refs.empty.children.length));
     if (host.state.visible !== visible) host.state.visible = visible;
-    place();
+    if (visible) surface.show();
+    else surface.hide();
   };
   const stop = host.effect(() => {
     const items = Array.isArray(host.props.items.value) ? host.props.items.value : [];
@@ -60,20 +63,13 @@ function connect(host) {
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
   element.addEventListener("mouseover", onMouseover);
-  window.addEventListener("resize", place);
-  window.addEventListener("scroll", place, true);
-  window.visualViewport?.addEventListener("resize", place);
-  window.visualViewport?.addEventListener("scroll", place);
   return () => {
     stop();
+    surface.destroy();
     observer.disconnect();
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
     element.removeEventListener("mouseover", onMouseover);
-    window.removeEventListener("resize", place);
-    window.removeEventListener("scroll", place, true);
-    window.visualViewport?.removeEventListener("resize", place);
-    window.visualViewport?.removeEventListener("scroll", place);
   };
 }
 

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -80,10 +80,16 @@
     </template>
   </div>
   <style>
+    :host[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+    }
+
     :host {
       /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
       box-sizing: border-box;
-      min-width: 14rem;
+      min-width: min(14rem, calc(100vw - 24px));
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
@@ -138,16 +144,22 @@
       color: var(--ui-danger);
     }
 
+    /* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
     .swatches {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      display: flex;
+      flex-wrap: wrap;
       gap: 3px;
     }
 
-    .swatch-button {
+    /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+    :host .swatch-button {
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
+      flex: 1 0 5rem;
+      min-width: 5rem;
+      max-width: calc((100% - 6px) / 3);
+      padding-inline-end: var(--ui-space-1);
     }
 
     .swatch {
@@ -194,6 +206,11 @@
       margin: var(--ui-space-1) 0;
     }
 
+    /* Separators divide sections, so none sits above the first. */
+    .sep:first-child {
+      display: none;
+    }
+
     :host[hidden] {
       display: none;
     }

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.js

@@ -1,3 +1,4 @@
+import { createViewportSurface, writtenPlace } from "../shared/overlay.js";
 import { backgrounds, normalizeCellBackground, viewport } from "../shared/editor.js";
 
 const sections = [
@@ -25,27 +26,55 @@ const sections = [
   ]],
 ];
 
-// Lists the actions the selection permits, and nudges the open menu back inside the viewport.
+// Shows the menu at the place it is written, keeping one in a floating box inside the viewport, and lists
+// the actions the selection permits.
 function connect(host) {
   const element = host.element;
-  let frame;
+  let place = null;
   const nudge = () => {
-    frame = undefined;
     element.style.translate = "";
+    if (!place) return;
     const rect = element.getBoundingClientRect();
-    const view = viewport();
-    const inset = 12;
-    let x = 0;
-    let y = 0;
-    if (rect.left < view.left + inset) x = view.left + inset - rect.left;
-    else if (rect.right > view.right - inset) x = view.right - inset - rect.right;
-    if (rect.top < view.top + inset) y = view.top + inset - rect.top;
-    else if (rect.bottom > view.bottom - inset) y = view.bottom - inset - rect.bottom;
+    const at = place.rect();
+    let x = at.left - rect.left;
+    let y = at.top - rect.top;
+    // Only a menu in a fixed or absolutely positioned box, as LoomaEditor places it, answers to the
+    // viewport; one in page flow travels with its place.
+    if (place.floating) {
+      const view = viewport();
+      const inset = 12;
+      const left = rect.left + x;
+      const top = rect.top + y;
+      if (left < view.left + inset) x += view.left + inset - left;
+      else if (left + rect.width > view.right - inset) x += view.right - inset - left - rect.width;
+      if (top < view.top + inset) y += view.top + inset - top;
+      else if (top + rect.height > view.bottom - inset) y += view.bottom - inset - top - rect.height;
+    }
     if (x || y) element.style.translate = `${x}px ${y}px`;
   };
-  const schedule = () => {
-    if (frame) cancelAnimationFrame(frame);
-    frame = requestAnimationFrame(nudge);
+  const surface = createViewportSurface(element, { position: nudge });
+  // Scroll and resize events do not report layout that moves the place; sample it while shown.
+  let frame = null;
+  let last = "";
+  const track = () => {
+    frame = null;
+    if (!place || !element.matches(":popover-open")) return;
+    const at = place.rect();
+    if (`${at.left},${at.top}` !== last) {
+      last = `${at.left},${at.top}`;
+      surface.refresh();
+    }
+    frame = requestAnimationFrame(track);
+  };
+  const untrack = () => {
+    if (frame !== null) cancelAnimationFrame(frame);
+    frame = null;
+    last = "";
+  };
+  const show = () => {
+    if (!element.matches(":popover-open")) place = writtenPlace(element, ["translate"]);
+    surface.show();
+    frame ??= requestAnimationFrame(track);
   };
   const stop = host.effect(() => {
     const scope = String(host.props.scope.value || "cell");
@@ -62,23 +91,22 @@ function connect(host) {
           .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.props.headerRow.value) : action === "toggle-header-column" ? Boolean(host.props.headerColumn.value) : false })),
       }))
       .filter((section) => section.items.length);
-    if (host.props.open.value) schedule();
+    if (host.props.open.value) queueMicrotask(() => { if (host.props.open.value) show(); });
+    else {
+      untrack();
+      surface.hide();
+    }
   });
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;
     if (action) host.dispatch("action", { action });
   };
   element.addEventListener("click", onClick);
-  window.addEventListener("resize", schedule);
-  window.visualViewport?.addEventListener("resize", schedule);
-  window.visualViewport?.addEventListener("scroll", schedule);
   return () => {
     stop();
+    untrack();
+    surface.destroy();
     element.removeEventListener("click", onClick);
-    window.removeEventListener("resize", schedule);
-    window.visualViewport?.removeEventListener("resize", schedule);
-    window.visualViewport?.removeEventListener("scroll", schedule);
-    if (frame) cancelAnimationFrame(frame);
   };
 }
 

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -1,3 +1,5 @@
+import { observeOverlayViewport } from "../shared/overlay.js";
+
 function fallbackBoundaries(segments, length) {
   return Array.from({ length: segments + 1 }, (_, index) => (index * length) / segments);
 }
@@ -36,15 +38,11 @@ function createProximity(scope, selector = ".handle[data-ui-affordance]", radius
     point = event.pointerType === "touch" ? null : { x: event.clientX, y: event.clientY }; schedule();
   };
   pointerTarget.addEventListener("pointermove", onPointermove, { passive: true });
-  owner.addEventListener("resize", refresh, { passive: true });
-  owner.addEventListener("scroll", refresh, { passive: true, capture: true });
-  owner.visualViewport?.addEventListener("resize", refresh, { passive: true });
-  owner.visualViewport?.addEventListener("scroll", refresh, { passive: true });
+  const stopViewport = observeOverlayViewport(scope.ownerDocument, refresh);
   measure();
   return { refresh, destroy() {
     pointerTarget.removeEventListener("pointermove", onPointermove);
-    owner.removeEventListener("resize", refresh); owner.removeEventListener("scroll", refresh, true);
-    owner.visualViewport?.removeEventListener("resize", refresh); owner.visualViewport?.removeEventListener("scroll", refresh);
+    stopViewport();
     if (frame !== null) owner.cancelAnimationFrame(frame); clear();
   } };
 }

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -140,14 +140,6 @@
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
-    .looma-editor__mobile-toolbar-shell :host .menu {
-      top: auto;
-      right: 0;
-      bottom: calc(100% + var(--ui-space-2));
-      max-height: min(50dvh, 22rem);
-      overflow-y: auto;
-      overscroll-behavior: contain;
-    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -238,9 +230,9 @@
 
     .menu {
       box-sizing: border-box;
-      position: absolute;
-      top: calc(100% + var(--ui-space-2));
-      right: 0;
+      position: fixed;
+      inset: auto;
+      margin: 0;
       min-width: 12rem;
       max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -1,5 +1,5 @@
+import { closeOverlay, createViewportSurface, openOverlay, positionAnchoredSurface } from "../shared/overlay.js";
 import { backgrounds, normalizeCellBackground } from "../shared/editor.js";
-import { createAnchoredSurface } from "../shared/overlay.js";
 
 const overflowSections = [
   ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"], ["toggle-header-row", "Header row", "rows"], ["toggle-header-column", "Header column", "columns"], ["move-row-up", "Move row up", "rows"], ["move-row-down", "Move row down", "rows"], ["move-column-left", "Move column left", "columns"], ["move-column-right", "Move column right", "columns"]]],
@@ -10,19 +10,13 @@ const overflowSections = [
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
 function connect(host) {
   const element = host.element;
+  let alive = true;
+  let menu = null;
   let surface = null;
-  let surfaceMenu = null;
-  let positionFrame = null;
+  const document = element.ownerDocument;
   const positionMenu = () => {
-    if (!host.state.overflowOpen) return;
     const button = element.querySelector(".more");
-    const menu = element.querySelector(".menu");
     if (!button || !menu) return;
-    if (surfaceMenu !== menu) {
-      surface?.destroy();
-      surfaceMenu = menu;
-      surface = createAnchoredSurface(menu, { anchor: button, placement: "bottom-end", gap: 8, viewportGap: 12 });
-    }
     const rect = button.getBoundingClientRect();
     const viewport = window.visualViewport;
     const top = viewport?.offsetTop ?? 0;
@@ -30,12 +24,34 @@ function connect(host) {
     const above = rect.top - top - 20;
     const below = bottom - rect.bottom - 20;
     menu.style.maxHeight = `${Math.max(80, Math.floor(Math.max(above, below)))}px`;
-    surface.show();
+    positionAnchoredSurface(menu, rect, { placement: "bottom-end", gap: 8, viewportGap: 12 });
+  };
+  const close = (reason) => {
+    host.state.overflowOpen = false;
+    if (reason === "escape") element.querySelector(".more")?.focus();
   };
-  const schedulePosition = () => {
-    if (positionFrame !== null) cancelAnimationFrame(positionFrame);
-    positionFrame = requestAnimationFrame(() => { positionFrame = null; positionMenu(); });
+  const releasePresentation = () => {
+    surface?.destroy();
+    surface = null;
+    menu = null;
+    closeOverlay(document, element);
+  };
+  const syncPresentation = () => {
+    if (!alive || !host.state.overflowOpen) return;
+    const next = element.querySelector(".menu");
+    if (!next) return;
+    if (next !== menu) {
+      releasePresentation();
+      menu = next;
+      surface = createViewportSurface(menu, { position: positionMenu });
+    }
+    surface.show();
+    openOverlay({ id: element, modal: false, element: menu, relatedElements: [element], dismissible: true, requestClose: close });
   };
+  const stopPresentation = host.effect(() => {
+    if (host.state.overflowOpen) queueMicrotask(syncPresentation);
+    else releasePresentation();
+  });
   const stop = host.effect(() => {
     const enabled = new Set(Array.isArray(host.props.actions.value) ? host.props.actions.value : []);
     const alignment = host.props.cellAlignment.value === "center" || host.props.cellAlignment.value === "right" ? host.props.cellAlignment.value : "left";
@@ -58,14 +74,6 @@ function connect(host) {
     host.state.hasOverflow = host.state.swatches.length > 0 || host.state.sections.length > 0;
     if (!host.props.open.value || !host.state.hasOverflow) host.state.overflowOpen = false;
   });
-  const stopMenu = host.effect(() => {
-    if (host.state.overflowOpen) schedulePosition();
-    else {
-      surface?.destroy();
-      surface = null;
-      surfaceMenu = null;
-    }
-  });
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;
     if (!action) return;
@@ -76,32 +84,13 @@ function connect(host) {
     host.state.overflowOpen = false;
     host.dispatch("action", { action });
   };
-  const onOutside = (event) => {
-    if (host.state.overflowOpen && !event.composedPath().includes(element)) host.state.overflowOpen = false;
-  };
-  const onKeydown = (event) => {
-    if (event.key === "Escape" && host.state.overflowOpen) {
-      host.state.overflowOpen = false;
-      event.preventDefault();
-      event.stopPropagation();
-      element.querySelector(".more")?.focus();
-    }
-  };
   element.addEventListener("click", onClick);
-  document.addEventListener("pointerdown", onOutside, true);
-  document.addEventListener("keydown", onKeydown, true);
-  window.addEventListener("resize", positionMenu);
-  window.visualViewport?.addEventListener("resize", positionMenu);
   return () => {
+    alive = false;
     stop();
-    stopMenu();
-    surface?.destroy();
-    if (positionFrame !== null) cancelAnimationFrame(positionFrame);
+    stopPresentation();
+    releasePresentation();
     element.removeEventListener("click", onClick);
-    document.removeEventListener("pointerdown", onOutside, true);
-    document.removeEventListener("keydown", onKeydown, true);
-    window.removeEventListener("resize", positionMenu);
-    window.visualViewport?.removeEventListener("resize", positionMenu);
   };
 }
 

package/components/ui-listbox/ui-listbox.html

@@ -32,23 +32,25 @@
     from:aria-invalid="$invalid or $validationError"
     style:--_rows="$rows"
   >
-    <ui-scroll-area class="choices" $ref="choices">
-      <div
-        $each="choice of $choices"
-        $key="$choice.index"
-        class="option"
-        class:active="$choice.index = $active"
-        role="option"
-        data-ui-choice-option
-        from:data-multiple="$multiple"
-        from:id="concat($uid, '-option-', $choice.index)"
-        from:data-index="$choice.index"
-        from:aria-selected="$choice.selected"
-        from:aria-disabled="$choice.disabled"
-      >
-        <span>{$choice.label}</span>
-      </div>
-    </ui-scroll-area>
+    <div class="choices">
+      <ui-scroll-area $ref="choices">
+        <div
+          $each="choice of $choices"
+          $key="$choice.index"
+          class="option"
+          class:active="$choice.index = $active"
+          role="option"
+          data-ui-choice-option
+          from:data-multiple="$multiple"
+          from:id="concat($uid, '-option-', $choice.index)"
+          from:data-index="$choice.index"
+          from:aria-selected="$choice.selected"
+          from:aria-disabled="$choice.disabled"
+        >
+          <span>{$choice.label}</span>
+        </div>
+      </ui-scroll-area>
+    </div>
     <select
       class="fallback"
       $ref="options"
@@ -115,7 +117,10 @@
       outline: none;
     }
 
+    /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
     .choices {
+      display: flex;
+      flex-direction: column;
       max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
     }
 

package/components/ui-menu/ui-menu.js

@@ -53,7 +53,8 @@ function connect(host) {
   const setup = () => {
     const nextFor = host.props.inline.value ? "" : String(host.props.for.value ?? "");
     const nextPlacement = String(host.props.placement.value ?? "bottom-start");
-    if (nextFor === lastFor && nextPlacement === lastPlacement && surface) return;
+    if (nextFor === lastFor && nextPlacement === lastPlacement && surface
+      && (!nextFor || anchor === document.getElementById(nextFor))) return;
     lastFor = nextFor;
     lastPlacement = nextPlacement;
     surface?.destroy();
@@ -61,7 +62,7 @@ function connect(host) {
     anchor = ids.get(nextFor);
     if (anchor) anchorAria = { "aria-haspopup": anchor.getAttribute("aria-haspopup"), "aria-expanded": anchor.getAttribute("aria-expanded") };
     anchor?.addEventListener("click", onAnchorClick);
-    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+    surface = host.props.inline.value ? null : createAnchoredSurface(element, { anchor, placement: nextPlacement });
   };
   const apply = () => {
     const inline = Boolean(host.props.inline.value);
@@ -77,7 +78,8 @@ function connect(host) {
       anchor.setAttribute("aria-expanded", String(open));
     }
     if (inline) {
-      surface?.hide();
+      element.removeAttribute("popover");
+      element.hidden = false;
       closeOverlay(document, overlayId);
     } else if (open) {
       surface?.show();

package/components/ui-popover/ui-popover.js

@@ -49,7 +49,8 @@ function connect(host) {
   const setup = () => {
     const nextFor = String(host.props.for.value ?? "");
     const nextPlacement = String(host.props.placement.value ?? "bottom-start");
-    if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
+    if (surface && nextFor === lastFor && nextPlacement === lastPlacement
+      && (!nextFor || anchor === document.getElementById(nextFor))) return;
     lastFor = nextFor;
     lastPlacement = nextPlacement;
     surface?.destroy();
@@ -57,7 +58,7 @@ function connect(host) {
     anchor = ids.get(nextFor);
     if (anchor) anchorExpanded = anchor.getAttribute("aria-expanded");
     anchor?.addEventListener("click", onAnchorClick);
-    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset }) : null;
+    surface = createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset });
   };
   const apply = () => {
     const externalOpen = Boolean(host.props.open.value);

package/components/ui-scroll-area/ui-scroll-area.html

@@ -7,6 +7,9 @@
     <prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
     >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
       overflow.</prop>
+    <prop name="padding" type="keyword" values="none, xs, sm, md, lg" default="none"
+    >The space inside the scrolling region, on Card's scale: xs is 0.5rem, sm 0.75rem, md 1.5rem, and lg 2rem. It scrolls with the content, so the scrollbar and
+      fades stay at the edges.</prop>
     <prop name="trim" type="boolean" default="false"
     >Removes the outer block margins of the first and last projected items when the surrounding panel owns its edge padding. Margins between items remain
       intact.</prop>
@@ -73,6 +76,19 @@
       max-block-size: 30rem;
     }
 
+    :host([padding="xs"]) {
+      padding: var(--ui-space-2);
+    }
+    :host([padding="sm"]) {
+      padding: var(--ui-space-3);
+    }
+    :host([padding="md"]) {
+      padding: var(--ui-space-5);
+    }
+    :host([padding="lg"]) {
+      padding: var(--ui-space-6);
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-search-shell/ui-search-shell.html

@@ -101,7 +101,7 @@
       color: var(--ui-text-primary);
     }
 
-    dialog::backdrop {
+    dialog:modal::backdrop {
       background: var(--ui-overlay-backdrop);
     }
 

package/components/ui-search-shell/ui-search-shell.js

@@ -1,4 +1,4 @@
-import { closeOverlay, openOverlay } from "../shared/overlay.js";
+import { closeDialog, closeOverlay, openOverlay, showDialog } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 /** Owns native dialog state while leaving query and result state to the application. */
@@ -18,9 +18,8 @@ function connect(host) {
     host.dispatch("close", { open: false, reason, trigger: how });
   };
   const closeNative = () => {
-    if (!dialog.open) return;
     suppressNativeClose = true;
-    dialog.close();
+    closeDialog(dialog);
     suppressNativeClose = false;
   };
   const stop = host.effect(() => {
@@ -32,8 +31,7 @@ function connect(host) {
     if (dialog.open && modal !== activeModal) closeNative();
     activeModal = modal;
     if (host.state.internalOpen && !dialog.open) {
-      if (modal) dialog.showModal();
-      else dialog.show();
+      showDialog(dialog, modal);
     }
     if (host.state.internalOpen) {
       openOverlay({ id: overlayId, modal, element: dialog, modalElement: dialog, dismissible: false, requestClose: () => {} });

package/components/ui-section/ui-section.html

@@ -55,6 +55,9 @@
       --_ui-selection-context-text: var(--ui-text-primary);
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+      /* An accent edge keeps the corners on its side straight. */
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
       background: var(--ui-danger-soft);
     }
 

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

@@ -5,7 +5,8 @@
     <prop name="tone" type="keyword" values="neutral, info, success, warning, danger" default="neutral"
     >Semantic accent for this message. Danger uses an assertive alert role; the other tones use polite status semantics.</prop>
     <prop name="duration" type="number" default="0"
-    >Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.</prop>
+    >Milliseconds the toast is shown before it dismisses itself; 0 keeps it until an action dismisses it. The timer starts when the toast is shown, starts again
+      each time it is shown, and pauses on hover or focus.</prop>
     <event name="dismiss" type="object">
       <prop name="id" required type="string"></prop>
       <prop name="reason" required type="keyword" values="action, timeout"></prop>

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);