@threadlabs/looma 0.26.26 → 0.27.1

package/components/shared/editor.js

@@ -1,3 +1,5 @@
+import { positionAnchoredSurface } from "./overlay.js";
+
 export const backgrounds = [
   ["background-none", "Default", ""], ["background-gray", "Gray", "#f3f4f6"],
   ["background-yellow", "Yellow", "#fef3c7"], ["background-blue", "Blue", "#dbeafe"],
@@ -47,9 +49,6 @@ export function positionMenu(element, rect, width) {
     Object.assign(element.style, { left: `${view.left}px`, right: "", bottom: "", top: `${view.top + view.height - height - 56}px`, width: `${view.width}px`, maxHeight: `${height}px` });
     return;
   }
-  const below = view.bottom - rect.bottom - 8;
-  const above = rect.top - view.top - 8;
-  const top = below >= 320 || below >= above ? rect.bottom + 8 : rect.top - 328;
-  const left = Math.max(view.left + 8, Math.min(rect.left, view.right - width - 8));
-  Object.assign(element.style, { top: `${Math.max(view.top + 8, top)}px`, left: `${left}px`, right: "", bottom: "", width: `${width}px`, maxHeight: "" });
+  Object.assign(element.style, { width: `${Math.min(width, Math.max(0, view.width - 16))}px`, maxHeight: `${Math.max(0, view.height - 16)}px` });
+  positionAnchoredSurface(element, rect, { placement: "bottom-start", gap: 8, viewportGap: 8 });
 }

package/components/shared/overlay.js

@@ -1,10 +1,11 @@
-const stacks = new WeakMap();
+const dialogInvokers = new WeakMap();
 
 function stateFor(document) {
-  let state = stacks.get(document);
+  const key = Symbol.for("@threadlabs/looma/overlay-stack/v1");
+  let state = document[key];
   if (state) return state;
   state = { records: [], modalCount: 0, listening: false };
-  stacks.set(document, state);
+  Object.defineProperty(document, key, { value: state });
   return state;
 }
 
@@ -132,6 +133,29 @@ function hide(surface) {
   surface.hidden = true;
 }
 
+/** Keeps both dialog modes in the native top layer; modality only controls inertness and backdrop. */
+export function showDialog(dialog, modal) {
+  if (dialog.open && dialog.matches(":modal") !== modal) closeDialog(dialog);
+  if (!dialog.open) dialogInvokers.set(dialog, dialog.ownerDocument.activeElement);
+  if (modal) {
+    dialog.removeAttribute("popover");
+    if (!dialog.open) dialog.showModal();
+  } else {
+    dialog.setAttribute("popover", "manual");
+    if (!dialog.open) dialog.show();
+    if (!topLayerOpen(dialog)) dialog.showPopover();
+  }
+}
+
+/** Releases popover presentation before native close restores focus and reports the close event. */
+export function closeDialog(dialog) {
+  if (topLayerOpen(dialog)) dialog.hidePopover();
+  if (dialog.open) dialog.close();
+  const invoker = dialogInvokers.get(dialog);
+  dialogInvokers.delete(dialog);
+  if (invoker?.isConnected) invoker.focus({ preventScroll: true });
+}
+
 function viewport(owner) {
   const visual = owner.visualViewport;
   const left = visual?.offsetLeft ?? 0;
@@ -160,6 +184,57 @@ function layoutRect(surface) {
   return { left, top, right: left + width, bottom: top + height, width, height };
 }
 
+/**
+ * Where an unanchored surface is written, for presenting it there in the top layer. The top layer
+ * takes a surface out of page flow, and engines disagree on its static position there (Chromium
+ * uses the viewport origin), so measure the surface in flow before it is shown, with the inline
+ * styles its caller owns cleared. `rect()` then carries that place with the box that holds it, so
+ * the surface travels with scrolling and with layout around it. A fixed surface keeps its measured
+ * place; one an integration places with inline insets the caller does not own keeps its live box.
+ * `floating` reports a surface placed that way or written in a fixed or absolute box, which answers to
+ * the viewport. Call it only while the surface is outside the top layer.
+ */
+export function writtenPlace(surface, ownedStyles = []) {
+  const owner = surface.ownerDocument.defaultView;
+  const up = (node) => node.assignedSlot ?? node.parentElement ?? node.getRootNode().host ?? null;
+  let parent = up(surface);
+  while (parent && owner.getComputedStyle(parent).display === "contents") parent = up(parent);
+  const popover = surface.getAttribute("popover");
+  const hidden = surface.hidden;
+  const saved = ownedStyles.map((name) => [name, surface.style.getPropertyValue(name)]);
+  if (popover !== null) surface.removeAttribute("popover");
+  if (hidden) surface.hidden = false;
+  for (const name of ownedStyles) surface.style.removeProperty(name);
+  const spot = layoutRect(surface);
+  const floats = (node) => node instanceof owner.Element && /^(fixed|absolute)$/.test(owner.getComputedStyle(node).position);
+  const placed = ["left", "top"].some((name) => !ownedStyles.includes(name) && surface.style.getPropertyValue(name));
+  const fixed = owner.getComputedStyle(surface).position === "fixed";
+  const floating = placed || floats(surface) || floats(surface.offsetParent);
+  for (const [name, value] of saved) if (value) surface.style.setProperty(name, value);
+  if (hidden) surface.hidden = true;
+  if (popover !== null) surface.setAttribute("popover", popover);
+  // Settle the restored style, so showing it next still starts its entry transition from hidden.
+  void surface.offsetWidth;
+  // The document scroller's own box moves when it scrolls; any other parent's content moves inside it.
+  const scroll = () => !parent || parent === surface.ownerDocument.documentElement || parent === surface.ownerDocument.scrollingElement
+    ? [0, 0] : [parent.scrollLeft, parent.scrollTop];
+  let offset = null;
+  const rect = () => {
+    let { left, top } = placed ? layoutRect(surface) : spot;
+    if (!placed && !fixed && parent) {
+      const base = parent.getBoundingClientRect();
+      const [x, y] = scroll();
+      // Taken on first use, once the surface has left the flow: a parent that shrinks or re-centres
+      // without it must not move the place.
+      offset ??= { left: spot.left - base.left + x, top: spot.top - base.top + y };
+      left = base.left + offset.left - x;
+      top = base.top + offset.top - y;
+    }
+    return { left, top, right: left, bottom: top, width: 0, height: 0 };
+  };
+  return { rect, floating };
+}
+
 function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface)) {
   const bounds = viewport(surface.ownerDocument.defaultView);
   const [preferred, align = "center"] = placement.split("-");
@@ -196,6 +271,109 @@ function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceR
   surface.style.bottom = "auto";
 }
 
+/** Applies the shared flip/shift policy to a live element or consumer-supplied virtual rectangle. */
+export function positionAnchoredSurface(surface, rect, options = {}) {
+  fallbackPosition(surface, rect, options.placement ?? "bottom-start", options.gap ?? 4, options.viewportGap ?? 8);
+}
+
+/**
+ * One document-scoped scroll/resize listener and one frame for all active floating surfaces.
+ * The registry lives on the document so HTML and Vue bundles share the same coordinator.
+ * Each subscriber rereads its own live anchor and applies its viewport containment policy.
+ */
+export function observeOverlayViewport(document, update) {
+  const key = Symbol.for("@threadlabs/looma/overlay-viewport/v1");
+  const owner = document.defaultView;
+  let state = document[key];
+  if (!state) {
+    state = { clients: new Set(), pending: new Map(), frame: null, abort: null };
+    Object.defineProperty(document, key, { value: state });
+  }
+  const schedule = (event) => {
+    for (const client of state.clients) state.pending.set(client, event);
+    if (state.frame !== null) return;
+    state.frame = owner.requestAnimationFrame(() => {
+      state.frame = null;
+      const pending = Array.from(state.pending);
+      state.pending.clear();
+      for (const [client, event] of pending) if (state.clients.has(client)) client(event);
+    });
+  };
+  state.clients.add(update);
+  if (!state.abort) {
+    state.abort = new owner.AbortController();
+    const signal = state.abort.signal;
+    owner.addEventListener("resize", schedule, { passive: true, signal });
+    owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
+    owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
+    owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
+  }
+  return () => {
+    state.clients.delete(update);
+    state.pending.delete(update);
+    if (state.clients.size) return;
+    state.abort?.abort();
+    state.abort = null;
+    if (state.frame !== null) owner.cancelAnimationFrame(state.frame);
+    state.frame = null;
+  };
+}
+
+/** Presents an unanchored or virtual-anchor surface in the top layer, using the shared viewport pass. */
+export function createViewportSurface(surface, options = {}) {
+  const owner = surface.ownerDocument.defaultView;
+  let destroyed = false;
+  let stop = null;
+  let sizeObserver = null;
+  let frame = null;
+  const position = () => {
+    frame = null;
+    if (stop) options.position?.();
+  };
+  const refresh = () => {
+    if (stop && frame === null) frame = owner.requestAnimationFrame(position);
+  };
+  const chrome = options.preserveChrome ? owner.getComputedStyle(surface) : null;
+  const absentBorders = chrome ? ["Top", "Right", "Bottom", "Left"].filter(side => chrome[`border${side}Width`] === "0px") : [];
+  surface.setAttribute("popover", "manual");
+  if (options.bare) {
+    // Foreign shells need the UA positioning reset. Some own chrome; others delegate it to a child.
+    Object.assign(surface.style, {
+      position: "fixed", margin: "0",
+      top: surface.style.top || "auto", right: surface.style.right || "auto",
+      bottom: surface.style.bottom || "auto", left: surface.style.left || "auto",
+    });
+    if (chrome) {
+      // Suppress newly introduced UA borders without overriding authored theme-dependent chrome.
+      for (const side of absentBorders) surface.style[`border${side}Width`] = "0";
+    } else {
+      Object.assign(surface.style, { padding: "0", border: "0", background: "transparent" });
+    }
+  }
+  const hideSurface = () => {
+    stop?.(); stop = null;
+    sizeObserver?.disconnect(); sizeObserver = null;
+    if (frame !== null) owner.cancelAnimationFrame(frame);
+    frame = null;
+    hide(surface);
+  };
+  return {
+    show() {
+      if (destroyed) return;
+      show(surface);
+      stop ??= observeOverlayViewport(surface.ownerDocument, position);
+      options.position?.();
+      if (!sizeObserver && owner.ResizeObserver) {
+        sizeObserver = new owner.ResizeObserver(refresh);
+        sizeObserver.observe(surface);
+      }
+    },
+    hide: hideSurface,
+    refresh,
+    destroy() { destroyed = true; hideSurface(); },
+  };
+}
+
 export function createAnchoredSurface(surface, options = {}) {
   const owner = surface.ownerDocument.defaultView;
   let placement = options.placement ?? "bottom-start";
@@ -204,44 +382,45 @@ export function createAnchoredSurface(surface, options = {}) {
   let anchor = options.anchor ?? null;
   let point = null;
   let open = false;
-  let frame = null;
+  let destroyed = false;
   let anchorFrame = null;
   let lastAnchorRect = null;
-  let abort = null;
-  let sizeObserver = null;
-  surface.setAttribute("popover", "manual");
-  surface.style.position = "fixed";
-  surface.style.margin = "0";
+  // Without an anchor, the surface stays at the place it is written (measured on each show).
+  let written = null;
+  const anchorRect = () => typeof anchor === "function" ? anchor() : anchor ? anchor.getBoundingClientRect() : written?.rect();
   const position = () => {
-    frame = null;
-    if (!open) return;
-    if (point) {
-      fallbackPosition(surface, { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }, "bottom-start", gap(), viewportGap);
+    if (!anchor && !point) {
+      if (!written) return;
+      show(surface);
+      // No flip or shift: the surface is at its place, which scrolling may carry out of view.
+      const rect = lastAnchorRect = written.rect();
+      Object.assign(surface.style, { left: `${Math.round(rect.left)}px`, top: `${Math.round(rect.top)}px`, right: "auto", bottom: "auto" });
       return;
     }
-    const rect = anchor?.getBoundingClientRect();
+    const rect = point ? { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 } : anchorRect();
+    if (!rect) return;
     // A disappearing trigger has no usable position. Keep the last valid position, or wait before first opening.
-    if (!anchor || anchor.isConnected === false || !rect || rect.width === 0 && rect.height === 0
-      || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible") {
-      if (lastAnchorRect) fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
+    if (!point && typeof anchor !== "function" && (anchor.isConnected === false || rect.width === 0 && rect.height === 0
+      || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible")) {
+      if (lastAnchorRect) positionAnchoredSurface(surface, lastAnchorRect, { placement, gap: gap(), viewportGap });
       else hide(surface);
       return;
     }
-    lastAnchorRect = rect;
+    lastAnchorRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height };
     show(surface);
-    fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
-  };
-  const schedule = () => {
-    if (open && frame === null) frame = owner.requestAnimationFrame(position);
+    positionAnchoredSurface(surface, rect, { placement: point ? "bottom-start" : placement, gap: gap(), viewportGap });
   };
+  surface.style.position = "fixed";
+  surface.style.margin = "0";
+  const presentation = createViewportSurface(surface, { position });
   // Resize and scroll events do not report an ancestor's transition or layout shift.
-  // While visible, sample the anchor and only re-position when its bounds change.
+  // While visible, sample the live anchor and only re-position when its bounds change.
   const trackAnchor = () => {
     anchorFrame = null;
-    if (!open || !anchor || point) return;
-    const rect = anchor.getBoundingClientRect();
-    if (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top
-      || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height) schedule();
+    if (!open || !(anchor || written) || point) return;
+    const rect = anchorRect();
+    if (rect && (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top
+      || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height)) presentation.refresh();
     anchorFrame = owner.requestAnimationFrame(trackAnchor);
   };
   const stopTracking = () => {
@@ -249,38 +428,35 @@ export function createAnchoredSurface(surface, options = {}) {
     anchorFrame = null;
     lastAnchorRect = null;
   };
-  const syncListeners = () => {
-    if (open && anchor && !point) {
+  const syncTracking = () => {
+    if (open && (anchor || written) && !point) {
       if (anchorFrame === null) anchorFrame = owner.requestAnimationFrame(trackAnchor);
     } else stopTracking();
-    const needed = open && (point || anchor);
-    if (!needed) {
-      abort?.abort();
-      abort = null;
-      return;
-    }
-    if (abort) return;
-    abort = new AbortController();
-    const signal = abort.signal;
-    owner.addEventListener("resize", schedule, { passive: true, signal });
-    owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
-    owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
-    owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
-  };
-  const observeSize = () => {
-    if (sizeObserver || !owner.ResizeObserver) return;
-    sizeObserver = new owner.ResizeObserver(schedule);
-    sizeObserver.observe(surface);
   };
-  const stopSize = () => { sizeObserver?.disconnect(); sizeObserver = null; };
   return {
-    setAnchor(next) { point = null; anchor = next; syncListeners(); schedule(); },
-    setPlacement(next) { placement = next || "bottom-start"; schedule(); },
-    show() { point = null; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
-    showAtPoint(next) { point = next; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
-    hide() { open = false; point = null; syncListeners(); stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); },
-    refresh: schedule,
-    destroy() { open = false; stopTracking(); abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
+    setAnchor(next) { point = null; anchor = next; syncTracking(); presentation.refresh(); },
+    setPlacement(next) { placement = next || "bottom-start"; presentation.refresh(); },
+    show() {
+      if (destroyed) return;
+      point = null;
+      open = true;
+      if (anchor || topLayerOpen(surface)) {
+        presentation.show();
+        syncTracking();
+        return;
+      }
+      // Measure the written place a microtask later, once the host's open state styles it.
+      queueMicrotask(() => {
+        if (destroyed || !open || point || anchor || topLayerOpen(surface)) return;
+        written = writtenPlace(surface, ["position", "margin", "left", "top", "right", "bottom"]);
+        presentation.show();
+        syncTracking();
+      });
+    },
+    showAtPoint(next) { if (destroyed) return; point = next; open = true; syncTracking(); presentation.show(); },
+    hide() { open = false; point = null; syncTracking(); presentation.hide(); },
+    refresh: presentation.refresh,
+    destroy() { destroyed = true; open = false; stopTracking(); presentation.destroy(); anchor = null; },
   };
 }
 

package/components/ui-affordance-scope/ui-affordance-scope.js

@@ -1,3 +1,5 @@
+import { observeOverlayViewport } from "../shared/overlay.js";
+
 function distance(point, rect) {
   const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
   const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
@@ -52,10 +54,7 @@ function connect(host) {
   const observer = new MutationObserver(invalidate);
   observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-ui-affordance", "disabled", "aria-disabled"] });
   element.ownerDocument.addEventListener("pointermove", onPointermove, { passive: true });
-  owner.addEventListener("resize", invalidate, { passive: true });
-  owner.addEventListener("scroll", invalidate, { passive: true, capture: true });
-  owner.visualViewport?.addEventListener("resize", invalidate, { passive: true });
-  owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true });
+  const stopViewport = observeOverlayViewport(element.ownerDocument, invalidate);
   const stop = host.effect(() => {
     const configured = Number(host.props.nearRadius.value ?? 16);
     nearRadius = Number.isFinite(configured) ? Math.max(0, configured) : 16;
@@ -64,12 +63,9 @@ function connect(host) {
   measure();
   return () => {
     stop();
+    stopViewport();
     observer.disconnect();
     element.ownerDocument.removeEventListener("pointermove", onPointermove);
-    owner.removeEventListener("resize", invalidate);
-    owner.removeEventListener("scroll", invalidate, true);
-    owner.visualViewport?.removeEventListener("resize", invalidate);
-    owner.visualViewport?.removeEventListener("scroll", invalidate);
     if (frame !== null) owner.cancelAnimationFrame(frame);
     clear();
   };

package/components/ui-badge/ui-badge.html

@@ -1,9 +1,10 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="keyword" values="solid, subtle, outline, inverse" default="subtle"
+    <prop name="variant" type="keyword" values="solid, subtle, outline, inverse, overlay" default="subtle"
     >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
       inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and
-      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
+      subtle. overlay inherits the containing filled control's text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is
+      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
@@ -16,7 +17,7 @@
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text
       badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,
-      24px at sm and md, and 32px at lg.</prop>
+      24px at sm and md, and 32px at lg. A small overlay circle is 20px.</prop>
   </defs>
   <span>
     <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
@@ -315,6 +316,15 @@
       box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
     }
 
+    /* A count can keep its containing control's contrasting ink instead of reversing it.
+       The faint fill is painted over that control; no second rim or shadow competes with it. */
+    :host([variant="overlay"]) {
+      --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 10%, transparent));
+      color: var(--ui-badge-text, inherit);
+      border-color: var(--ui-badge-border, transparent);
+      box-shadow: none;
+    }
+
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
        surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
     :host([variant="inverse"][tone="neutral"]) {
@@ -406,6 +416,10 @@
       text-box-trim: none;
     }
 
+    :host([shape="circle"][size="sm"][variant="overlay"]) {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
+    }
+
     :host([shape="circle"][size="xs"]) {
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }

package/components/ui-card/ui-card.html

@@ -89,6 +89,9 @@
     :host([tone="danger"]) {
       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;
       --_ui-card-surface: var(--ui-danger-soft);
     }
 

package/components/ui-dialog/ui-dialog.html

@@ -36,12 +36,12 @@
     </event>
   </defs>
   <dialog from:aria-label="$accessibleLabel">
-    <header>
+    <header $ref="header">
       <h2 class="title" $if="$label">{$label}</h2>
       <button class="close" $ref="close" type="button" aria-label="Close"></button>
     </header>
-    <div class="body"><ui-scroll-area from:trim="true"><slot></slot></ui-scroll-area></div>
-    <footer><slot name="actions"></slot></footer>
+    <div class="body" $ref="body"><ui-scroll-area from:trim="true"><slot></slot></ui-scroll-area></div>
+    <footer $ref="footer"><slot name="actions"></slot></footer>
   </dialog>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
@@ -143,7 +143,9 @@
       align-items: center;
       gap: var(--ui-space-3);
       flex: none;
-      padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+      /* The title's ink sits inside its line box and the taller close target. Balance that
+         visible top inset against the action row's bottom inset, not just the boxes. */
+      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -251,7 +253,7 @@
         overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
-    :host[open]::backdrop {
+    :host[open]:modal::backdrop {
       background-color: var(--ui-overlay-backdrop);
       animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }

package/components/ui-dialog/ui-dialog.js

@@ -1,10 +1,59 @@
-import { closeOverlay, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+import { closeDialog, closeOverlay, createIdResolver, openOverlay, requestTopOverlayClose, showDialog } from "../shared/overlay.js";
 
 function inferredLabel(element, explicit) {
   if (String(explicit ?? "").trim()) return String(explicit).trim();
   return element.querySelector("h1, h2, h3, h4, h5, h6")?.textContent?.trim() || "Dialog";
 }
 
+/** Animates intrinsic content changes while leaving CSS in charge of the final viewport cap. */
+function observeContentHeight(dialog, refs) {
+  const owner = dialog.ownerDocument.defaultView;
+  const motion = owner.matchMedia("(prefers-reduced-motion: reduce)");
+  let lastHeight = null;
+  let animation = null;
+  const reset = () => {
+    animation?.cancel();
+    animation = null;
+    lastHeight = null;
+  };
+  const observer = new owner.ResizeObserver(() => {
+    if (!dialog.open) { reset(); return; }
+    const previous = animation ? parseFloat(owner.getComputedStyle(dialog).height) : lastHeight;
+    animation?.cancel();
+    animation = null;
+    // Cancel before measuring: auto sizing now includes the latest content and native CSS constraints.
+    const style = owner.getComputedStyle(dialog);
+    const next = parseFloat(style.height);
+    lastHeight = next;
+    if (previous === null || !Number.isFinite(previous) || !Number.isFinite(next) || Math.abs(next - previous) < 1 || motion.matches) return;
+    const time = style.transitionDuration.split(",")[0].trim();
+    const duration = parseFloat(time) * (time.endsWith("ms") ? 1 : 1000);
+    if (!(duration > 0)) return;
+    const current = dialog.animate([{ height: `${previous}px` }, { height: `${next}px` }], {
+      duration, easing: style.getPropertyValue("--ui-motion-ease").trim() || "ease",
+    });
+    animation = current;
+    current.onfinish = () => {
+      if (animation !== current) return;
+      animation = null;
+      current.cancel();
+      lastHeight = dialog.open ? parseFloat(owner.getComputedStyle(dialog).height) : null;
+    };
+  });
+  // Observe Scroll Area's intrinsic flow wrapper, not its constrained scrolling viewport.
+  // Watching the dialog or body would feed animation frames back into the resize observer.
+  // Scroll Area offers no public hook for that wrapper, so this reads its rendered structure.
+  for (const region of [refs.header, refs.body?.firstElementChild?.firstElementChild, refs.footer]) {
+    if (region) observer.observe(region);
+  }
+  const onMotionChange = () => {
+    reset();
+    if (dialog.open) lastHeight = parseFloat(owner.getComputedStyle(dialog).height);
+  };
+  motion.addEventListener("change", onMotionChange);
+  return { reset, destroy() { reset(); observer.disconnect(); motion.removeEventListener("change", onMotionChange); } };
+}
+
 function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
@@ -23,6 +72,15 @@ function connect(host) {
   };
   const closeButton = host.refs.close;
   const onCloseClick = (event) => requestClose("action", event.detail === 0 ? "keyboard" : "pointer");
+  // A popover dialog does not receive native dialog command defaults in every browser.
+  // Keep authored close actions equivalent in both presentation modes.
+  const onActionClick = (event) => {
+    if (event.defaultPrevented) return;
+    const action = event.target.closest?.('button[command="close"]');
+    if (!action || !dialog?.id || action.getAttribute("commandfor") !== dialog.id) return;
+    event.preventDefault();
+    onCloseClick(event);
+  };
   const onTriggerClick = (event) => {
     if (host.state.internalOpen) return;
     host.state.internalOpen = true;
@@ -67,14 +125,11 @@ function connect(host) {
     if (!dialog) return;
     dialog.setAttribute("closedby", closedBy);
     if (open) {
-      if (dialog.open && dialog.matches(":modal") !== modal) dialog.close();
-      if (!dialog.open) {
-        if (modal) dialog.showModal();
-        else dialog.show();
-      }
+      showDialog(dialog, modal);
       openOverlay({ id: overlayId, modal, element, modalElement: dialog, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
     } else {
-      if (dialog.open) dialog.close();
+      resize.reset();
+      closeDialog(dialog);
       closeOverlay(document, overlayId);
     }
     if (lastOpen !== undefined && lastOpen !== open) {
@@ -112,17 +167,22 @@ function connect(host) {
   dialog?.addEventListener("cancel", onCancel);
   closeButton?.addEventListener("click", onCloseClick);
   element.addEventListener("keydown", onKeydown);
+  document.addEventListener("click", onActionClick);
+  const resize = observeContentHeight(dialog, host.refs);
   const stop = host.effect(apply);
   apply();
   return () => {
     stop();
     ids.stop();
     observer.disconnect();
+    resize.destroy();
     dialog?.removeEventListener("close", onClose, true);
     dialog?.removeEventListener("cancel", onCancel);
     closeButton?.removeEventListener("click", onCloseClick);
     trigger?.removeEventListener("click", onTriggerClick);
     element.removeEventListener("keydown", onKeydown);
+    document.removeEventListener("click", onActionClick);
+    closeDialog(dialog);
     closeOverlay(document, overlayId);
   };
 }

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -44,6 +44,12 @@
     <div class="empty" $ref="empty"><slot name="empty"></slot></div>
   </div>
   <style>
+    :host[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+    }
+
     :host {
       user-select: none;
     }