@jsenv/navi 0.29.464 → 0.29.465

package/dist/jsenv_navi.js

@@ -3,7 +3,7 @@
  * using @jsenv/navi as intended.
  */
 import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
-import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, ELEMENT_SIZE_CHANGE, getScrollContainer, scrollIntoViewScoped, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, trapScrollInside, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
+import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
@@ -79,7 +79,7 @@ installImportMetaCssBuild(import.meta);
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$18 = /* css */ `@layer navi {
+const css$19 = /* css */ `@layer navi {
   :root {
     --navi-z-index-control-hovered: 1;
     --navi-z-index-control-focused: 2;
@@ -92,7 +92,7 @@ const css$18 = /* css */ `@layer navi {
   }
 }
 `;
-import.meta.css = [css$18, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$19, "@jsenv/navi/src/navi_z_indexes.js"];
 
 /**
  * A navigation is ABOUT to be applied — said before its very first write.
@@ -446,7 +446,7 @@ installImportMetaCssBuild(import.meta);
 
 const URL_TARGET_ATTRIBUTE = "data-url-target";
 
-const css$17 = /* css */ `@layer navi {
+const css$18 = /* css */ `@layer navi {
   [data-url-target] {
     animation: navi_url_target var(--navi-url-target-duration, 2s)
         ease-out;
@@ -464,7 +464,7 @@ const css$17 = /* css */ `@layer navi {
   }
 }
 `;
-import.meta.css = [css$17, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$18, "@jsenv/navi/src/nav/url_target/url_target.js"];
 
 let urlTargetOptions = {
   block: "start",
@@ -2105,7 +2105,7 @@ const useActionStatus = (action) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$16 = /* css */`.action_error {
+const css$17 = /* css */`.action_error {
   background: #fdd;
   border: 1px solid red;
   margin-top: 0;
@@ -2129,7 +2129,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$16, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$17, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -15838,6 +15838,48 @@ const createOpenController = (
   // armSuppressNextOpenRequest below.
   let suppressNextOpenRequest = false;
   let disarmSuppressNextOpenRequest = null;
+  // The press a press-close came from, for as long as that press lasts (see
+  // open() for what it is read for).
+  let pressCountAtPressClose = null;
+  let releaseThisPress = null;
+  const holdReopenForThisPress = (closeEvent) => {
+    releaseThisPress?.();
+    pressCountAtPressClose = pressCount;
+    let timeout = null;
+    const release = () => {
+      clearTimeout(timeout);
+      document.removeEventListener("click", onPressEnd, { capture: true });
+      document.removeEventListener("pointercancel", onPressEnd, {
+        capture: true,
+      });
+      document.removeEventListener("pointerdown", release, { capture: true });
+      pressCountAtPressClose = null;
+      releaseThisPress = null;
+    };
+    // Once the task the press ends in is over: every reaction to the closing
+    // press is synchronous to it, while an open asked for later — a command a
+    // button runs once its action resolves — is somebody asking again.
+    const onPressEnd = () => {
+      document.removeEventListener("click", onPressEnd, { capture: true });
+      document.removeEventListener("pointercancel", onPressEnd, {
+        capture: true,
+      });
+      timeout = setTimeout(release);
+    };
+    if (findEvent(closeEvent, "click")) {
+      // Closed by the press's own click: a listener added during its dispatch
+      // would only hear the next one.
+      timeout = setTimeout(release);
+    } else {
+      document.addEventListener("click", onPressEnd, { capture: true });
+      document.addEventListener("pointercancel", onPressEnd, {
+        capture: true,
+      });
+    }
+    // A press whose click was swallowed (a gesture) ends with the next one.
+    document.addEventListener("pointerdown", release, { capture: true });
+    releaseThisPress = release;
+  };
 
   // When the popup closes because of a press (clicking the backdrop, or a
   // press outside a popup with no backdrop), the browser still dispatches the
@@ -15993,6 +16035,7 @@ const createOpenController = (
           `closed by ${pressEvent.type} -> ignore next click`,
         );
         armSuppressNextOpenRequest();
+        holdReopenForThisPress(closeEvent);
         break prevent_reopen;
       }
 
@@ -16127,7 +16170,9 @@ const createOpenController = (
     // called once the open/close has fully happened rather than mid-sequence.
     onOpenedChange: null,
     open: (e, detail) => {
-      flushChangeAwaitingTransition();
+      // The refusals below read the decision (`opened`), which is written
+      // before a change waiting for its view transition runs: a refused open
+      // must not force that change through and take its picture away.
       if (controller.opened || !controller.openEffect) {
         return;
       }
@@ -16135,6 +16180,20 @@ const createOpenController = (
         suppressNextOpenRequest = false;
         return;
       }
+      if (
+        pressCountAtPressClose === pressCount &&
+        findEvent(e, isEventOfAPress)
+      ) {
+        // The press that closed it, heard again by what opens it. With nothing
+        // between a popup and its own trigger (no wall, or a PopupGroup), the
+        // press is still on its way when the popup closes, and the trigger's
+        // own reaction to that same press asks to open it again: at its
+        // mousedown, before the click the suppression above waits for — or at
+        // the very click that closed it, whose suppression is armed during its
+        // own dispatch and so only hears the next one.
+        return;
+      }
+      flushChangeAwaitingTransition();
       const requestOpenEvent = new CustomEvent("navi_request_open", {
         detail: { event: e, ...detail },
         cancelable: true,
@@ -16266,6 +16325,18 @@ const createOpenController = (
       });
       chainEvent(requestCloseEvent, e);
       closeHandlers?.onRequestClose?.(requestCloseEvent);
+      // An Escape this popup answered, by closing or by refusing: dispatched
+      // on, it would also be the browser's close request for a modal around
+      // the popup (a PopupGroup, a dialog), closing what this popup kept open,
+      // or what is still closing with it (a lifting dialog closes a frame
+      // later).
+      const escapeKeydown = findEvent(
+        requestCloseEvent,
+        (event) => event.type === "keydown" && event.key === "Escape",
+      );
+      if (escapeKeydown) {
+        escapeKeydown.preventDefault();
+      }
       if (requestCloseEvent.defaultPrevented) {
         // The native <dialog> "cancel" event (Escape key) closes the dialog
         // by default; prevent that default so denial actually keeps it open.
@@ -16294,13 +16365,24 @@ const createOpenController = (
   return controller;
 };
 
+// A click a keyboard made (detail 0) is not one: nothing pressed for it.
+const isEventOfAPress = (event) =>
+  event.type === "pointerdown" ||
+  event.type === "mousedown" ||
+  (event.type === "click" && event.detail > 0);
+
 // Inside a popup that is open right now — the popup being closed, in practice,
 // since that is the one the key press was delivered to.
 const isInsideOpenPopup = (element) => {
   if (!element || element.nodeType !== 1) {
     return false;
   }
-  return Boolean(element.closest("dialog[open], [popover]:popover-open"));
+  // An engaged PopupGroup is open too, around peers that are not the popup.
+  return Boolean(
+    element.closest(
+      "dialog[open]:not([navi-popup-group]), [popover]:popover-open",
+    ),
+  );
 };
 
 // What Enter is about to do when it is about to activate something: press the
@@ -16766,572 +16848,6 @@ const useOpenControllerByProps = (props, name) => {
   return openController;
 };
 
-/**
- * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
- * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
- * of which of the two owns it.
- */
-
-
-/**
- * Whether a visibleRectEffect delivery is one that can have taken height away
- * from a popup, and so pushed whatever holds focus out of sight:
- * - "resize": the window/visual viewport settled — which is also how the
- *   on-screen keyboard arrives, overlay or not (window_size.js);
- * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
- * - "focusin": the focus-settled re-measure, for the room that changes with
- *   nothing announcing it (subscribeFocusSettled in window_size.js).
- *
- * Everything else is a scroll of one kind or another, where nothing got
- * smaller and scrolling the focused element back would fight the very gesture
- * that fired it.
- */
-const mayHaveHiddenFocus = (event) => {
-  const type = event?.type;
-  return (
-    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
-  );
-};
-
-const scrollportHeightMap = new WeakMap();
-/**
- * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
- * getting shorter has pushed it out.
- *
- * The case this exists for: a field low in the scrolling body of a popup that
- * also has a footer (box.jsx — with a body, the body is the only thing that
- * scrolls and the footer is a sibling sitting right under it). Focusing the
- * field makes the browser scroll it into view, which it does against the
- * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
- * that height away. The body shrinks, its scrollTop does not move, so the
- * content slides down relative to the shorter scrollport and the field ends up
- * past its bottom edge — visually, swallowed by the footer. The browser does
- * not redo a scroll-into-view it already answered, so this does.
- *
- * Only what the shrink itself hid, though: with the keyboard up the user reads
- * the rest of the popup by scrolling the field away — to reach the submit under
- * it, typically — and the room keeps changing while they do (a keyboard settling
- * in two steps, a suggestion strip, a browser bar). Answering each of those by
- * scrolling the field back takes the popup away from wherever they had just
- * scrolled it, over and over: what they were reading cannot be reached at all
- * without blurring the field first, and the popup reads as unscrollable. So the
- * field is brought back only when it was in view before the room shrank, which
- * one remembered number answers: a resize moves neither scrollTop nor the
- * element's offset inside the scrolled content, so measuring against the height
- * the scrollport HAD is measuring the state before the change.
- *
- * Scoped to the field's own scroll container (never the page): a popup traps
- * scrolling precisely so the document underneath cannot move, and a plain
- * scrollIntoView walks past a container whose scrollbar isn't visible — see
- * scrollIntoViewScoped's own doc.
- *
- * "nearest": the smallest scroll that makes it visible, and none at all when it
- * already is. Where it lands is the container's own business — a navi scroller
- * keeps a band free at its edges so a field never comes back glued to one (see
- * scroll-padding in box.jsx).
- */
-const keepFocusedElementVisible = (popupEl) => {
-  const { activeElement } = document;
-  if (!activeElement || activeElement === popupEl) {
-    return;
-  }
-  if (!popupEl.contains(activeElement)) {
-    return;
-  }
-  const scrollContainer = getScrollContainer(activeElement);
-  if (!scrollContainer || !popupEl.contains(scrollContainer)) {
-    // What scrolls the field is outside the popup, which means the page: a
-    // popup holds it still on purpose (trapScrollInside), so there is nothing
-    // here to scroll back.
-    return;
-  }
-  const scrollportHeight = scrollContainer.clientHeight;
-  const scrollportHeightBefore = scrollportHeightMap.get(scrollContainer);
-  scrollportHeightMap.set(scrollContainer, scrollportHeight);
-  if (scrollportHeightBefore !== undefined) {
-    if (scrollportHeight >= scrollportHeightBefore) {
-      // Nothing was taken away, so nothing was hidden by this.
-      return;
-    }
-    if (
-      !isVisibleInScrollport(
-        activeElement,
-        scrollContainer,
-        scrollportHeightBefore,
-      )
-    ) {
-      return;
-    }
-  }
-  scrollIntoViewScoped(activeElement, {
-    container: scrollContainer,
-    block: "nearest",
-  });
-};
-
-// Whether any part of `el` was showing in `container` back when its scrollport
-// was `scrollportHeight` tall. Both boxes are read now: the container may have
-// moved as well as shrunk (a centered dialog re-centers itself), and the
-// difference between the two tops is what that move leaves alone.
-const isVisibleInScrollport = (el, container, scrollportHeight) => {
-  const elRect = el.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const elTop = elRect.top - containerRect.top + container.scrollTop;
-  const elBottom = elTop + elRect.height;
-  const scrollportTop = container.scrollTop;
-  const scrollportBottom = scrollportTop + scrollportHeight;
-  return elBottom > scrollportTop && elTop < scrollportBottom;
-};
-
-/**
- * Calls `onSettled` once `el`'s current CSS transition is over — via
- * `transitionend`, with a safety `setTimeout` fallback matching the longest
- * `transition-duration`, in case nothing actually transitions or an event is
- * missed.
- *
- * Returns a "cancel" function, so a caller whose instance has been superseded
- * (a fresh open/close about to set its own state) can keep this stale one from
- * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
- * did up front is that fresh call's business, not this one's.
- */
-const whenTransitionSettles = (el, onSettled) => {
-  let settled = false;
-  const onTransitionEnd = (transitionEvent) => {
-    if (transitionEvent.target === el) {
-      finish();
-    }
-  };
-  const stopWatching = () => {
-    settled = true;
-    el.removeEventListener("transitionend", onTransitionEnd);
-    clearTimeout(safetyTimeoutId);
-  };
-  const finish = () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
-    onSettled();
-  };
-  el.addEventListener("transitionend", onTransitionEnd);
-  const durationsInSeconds = getComputedStyle(el)
-    .transitionDuration.split(",")
-    .map((value) => parseFloat(value) || 0);
-  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
-  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
-  return () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
-  };
-};
-
-/**
- * Drops the document's text selection when it lives inside `el`, leaving a
- * selection made elsewhere on the page alone.
- *
- * A popup being closed takes its content with it, and a selection is a claim
- * on content the user can still act on: kept, it would outlive the surface it
- * was made on — painted on the box for the length of its exit transition, with
- * the handles and the copy toolbar a phone draws from the live selection
- * hanging over something that is going away — and reappear with the box on
- * the next opening. Dropping the selection is the only way to remove that
- * chrome: a `user-select: none` on the closing box hides the highlight in some
- * browsers only, and the handles are the browser's own, drawn from the
- * selection object rather than from any style.
- */
-const clearTextSelectionInside = (el) => {
-  const selection = window.getSelection();
-  if (!selection || selection.rangeCount === 0) {
-    return;
-  }
-  const range = selection.getRangeAt(0);
-  if (!el.contains(range.commonAncestorContainer)) {
-    return;
-  }
-  selection.removeAllRanges();
-};
-
-/**
- * Disables pointer-events on `el` until its current CSS transition settles —
- * avoids the cursor changing/something becoming clickable while the popup is
- * still visually moving into or out of place.
- *
- * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
- * pointer-events, since a fresh call for the next open/close is about to set
- * its own state.
- */
-const suppressPointerEventsDuringTransition = (el) => {
-  el.style.pointerEvents = "none";
-  return whenTransitionSettles(el, () => {
-    el.style.pointerEvents = "";
-  });
-};
-
-/**
- * Hides the backdrop, deferring until the browser's matching "click" fires
- * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
- * comment for why) — same capture-phase-on-document pattern as
- * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
- * can't safely replace: mouseup (and the click that follows it) can land an
- * arbitrarily long time after mousedown (the user is still holding the
- * button down), so a short timeout can fire first and hide the backdrop
- * before its own click ever arrives. A capture-phase listener on document
- * fires for every click regardless of what any bubble-phase handler does
- * downstream, so no fallback timer is needed.
- *
- * `hide` is the caller's own way to actually hide the backdrop
- * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
- * for a plain div) — this helper only owns the mousedown/click timing.
- *
- * Returns a disarm function (or undefined if hidden immediately), so a
- * fresh open can cancel a pending hide it's about to make redundant.
- */
-const armPointerDownOutsideClose = (closeEvent, hide) => {
-  const mousedownEvent = findEvent(closeEvent, "mousedown");
-  if (!mousedownEvent) {
-    hide();
-    return undefined;
-  }
-  // `hide` is handed the click, for a wall with peers to re-aim it (see
-  // handWallClickToPeer).
-  const onClick = (clickEvent) => {
-    document.removeEventListener("click", onClick, { capture: true });
-    hide(clickEvent);
-  };
-  document.addEventListener("click", onClick, { capture: true });
-  return () => {
-    document.removeEventListener("click", onClick, { capture: true });
-  };
-};
-
-/**
- * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
- * `prefix` plus a direction word), or `null` if both axes overlap the anchor
- * (no direction at all — that's `resolvedAnimationKind === "scaling"`
- * territory instead, see resolveAutoAnimationKind below).
- *
- * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
- * when docked) keeps the word as the compass direction the popup comes
- * from: placed "top" (a point/corner), it slides in from the top.
- * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
- * direction instead, the opposite compass point: placed "top" of the
- * anchor, it moves/grows up, away from the anchor (which sits below it).
- *
- * "inset-*"/"center" contribute no direction on their axis either way.
- */
-const resolveDirectionValue = (y, x, { prefix }) => {
-  const yWord =
-    y === "top"
-      ? prefix === "expand"
-        ? "up"
-        : "top"
-      : y === "bottom"
-        ? prefix === "expand"
-          ? "down"
-          : "bottom"
-        : null;
-  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
-  if (!yWord && !xWord) {
-    return null;
-  }
-  return yWord && xWord
-    ? `${prefix}-${yWord}-${xWord}`
-    : `${prefix}-${yWord || xWord}`;
-};
-
-/**
- * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
- * — picked for any real anchor, or for a point/corner placed dead-center
- * (both positionArea axes overlapping — there's no sensible direction to
- * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
- * for any no-anchor/docked case (Dialog always, Popover's own custom
- * renderer when there's no real anchor), so this collapses to "scaling"
- * there only for the dead-center case, "sliding" otherwise. The two
- * "overlapping" booleans below describe the *positionArea* itself (a bare
- * word vs. "inset-"/"center"), not anything about the anchor — they'd
- * mean exactly the same thing even with no anchor at all, since it's the
- * position strategy, not the anchor, that decides whether there's a
- * direction to slide from.
- */
-const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
-  const yIsOverlapping =
-    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
-  const xIsOverlapping =
-    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
-  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
-};
-
-/**
- * A popup reads "outside" from its own border box: what a press lands on
- * decides nothing on its own (a genuine backdrop press and a press on the
- * popup's padding both report the popup element as their target, there being
- * no real ::backdrop node to be one), so the rectangle is what tells them
- * apart. That holds as long as the box and what the popup paints are the same
- * thing — which stops being true for a popup with no surface of its own
- * (`backgroundColor="transparent"`, no shadow, no padding): what the eye reads
- * as backdrop is then inside the box, and a press there stays a press on the
- * popup.
- *
- * `data-navi-popup-outside` is how a caller says which of its own boxes are
- * not the surface. It is opt-in because navi cannot infer it — a background
- * can come from anywhere — while the caller who made the popup see-through
- * knows exactly which box is decoration and which is paper.
- *
- * The marker answers for the element it is on, never for its descendants: a
- * box painted inside a marked one is still surface, so a row can be marked and
- * its empty halves read as backdrop while presses on the controls it holds do
- * not dismiss anything. A descendant with `pointer-events: none` never becomes
- * a press target at all, so the marked box answers in its place — while the
- * same declaration on the marked box itself takes it out of hit-testing and
- * makes the marker unreachable (see warnAboutUnreachableOutsideRegions).
- */
-const OUTSIDE_REGION_ATTRIBUTE = "data-navi-popup-outside";
-
-/**
- * `data-navi-popup-inside` is the other direction: a box of the PAGE the
- * caller says belongs to a popup, so a press on it is not outside that popup
- * even though it lies beyond the border box — a card whose press is what
- * fills the one panel of a board. Its value names the popup by `id`, the way
- * `commandfor` does (several ids, space separated), because the exemption is
- * one popup's: a menu open beside the board still closes on the same press.
- *
- * Unlike the outside marker it answers for its whole subtree: the outside
- * marker carves free space out of a surface whose controls stay surface, this
- * one adds a whole thing — the card, its count, its buttons — to the popup's
- * own ground, and nothing in it is a dismissal.
- */
-const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
-
-/**
- * `data-navi-popup-group` names the peers of a popup: the triggers of the other
- * popups a press goes to from this one — a menu bar, where pressing another
- * menu while one is open switches to it, in that one press. A trigger joins by
- * carrying the name (a Picker's `popupGroup` writes it on its own), and a popup
- * reads it off what the press landed on.
- *
- * Returns the peer `target` is in, or null.
- */
-const findPopupPeer = (target, group) => {
-  if (!group || !target || typeof target.closest !== "function") {
-    return null;
-  }
-  return target.closest(`[data-navi-popup-group="${CSS.escape(group)}"]`);
-};
-
-/**
- * The click a wall took, handed to the peer (see findPopupPeer) it covered.
- *
- * A wall cannot let one press through and not another: it is what the pointer
- * hits, and that is the whole of how it spends a press. So it goes on taking
- * every one — the page behind stays as unhoverable and unpressable as it looks
- * — and once the press is over, its click is re-aimed at what the wall stood
- * over at that point, when that is a peer. The click alone, for the reason
- * transition_press.js gives: a pointer stream made up with no pointer behind it
- * starts gestures (a hold, a drag) that nothing ever ends, and a click is what
- * opens a popup's trigger.
- *
- * Called with the click that takes the wall down after a press closed the
- * popup (see armPointerDownOutsideClose), so the peer opens as the popup it
- * replaces goes.
- */
-const handWallClickToPeer = (
-  clickEvent,
-  { wallEl, popupEl, anchorEl, group },
-) => {
-  if (!clickEvent.isTrusted || clickEvent.target !== wallEl) {
-    // A click dispatched by hand is already aimed, and one that did not land
-    // on the wall (a press on the popup's own outside region) was no wall's.
-    return;
-  }
-  // The topmost element under the wall at that point: what the press would
-  // have landed on with no wall. Asked past the wall rather than after hiding
-  // it, which a fading wall may not be yet.
-  const covered = document
-    .elementsFromPoint(clickEvent.clientX, clickEvent.clientY)
-    .find((el) => el !== wallEl && !popupEl.contains(el));
-  const peer = findPopupPeer(covered, group);
-  if (!peer) {
-    return;
-  }
-  if (peer.contains(popupEl) || (anchorEl && peer.contains(anchorEl))) {
-    // The popup's own trigger — the one holding it (a picker renders its
-    // popup inside itself) or the one it opened against: the press through
-    // the wall closed the popup, and handing the trigger its click would open
-    // it again.
-    return;
-  }
-  // The page sees one click, on the peer, rather than two.
-  clickEvent.stopPropagation();
-  // A PointerEvent where the browser makes clicks of them, a MouseEvent
-  // elsewhere: the same kind, copied field by field.
-  const ClickEvent = clickEvent.constructor;
-  covered.dispatchEvent(new ClickEvent(clickEvent.type, clickEvent));
-};
-
-/**
- * What a press landing on a region the caller declared as not-its-surface
- * does: exactly what the same press on the backdrop would do.
- *
- * Lives on the popup's own content element rather than in the backdrop's
- * handler, for both renderers: the backdrop is a sibling behind the popup
- * (never an ancestor), so a press inside the popup's box never reaches it.
- */
-const handlePressOnOutsideRegion = (
-  mouseDownEvent,
-  { popupEl, openController, pressOutside },
-) => {
-  if (mouseDownEvent.button !== 0) {
-    return;
-  }
-  const { target } = mouseDownEvent;
-  if (!target.hasAttribute(OUTSIDE_REGION_ATTRIBUTE)) {
-    return;
-  }
-  if (openedDuringThisPress(openController)) {
-    // The release of the press that opened it is not somebody dismissing it
-    // (see openedDuringThisPress).
-    return;
-  }
-  // A popup opens inside its opener's own subtree, so a press on a region
-  // belonging to a popup nested in this one bubbles through here too — and it
-  // is a press on what is in front, not on this popup's own decoration.
-  if (
-    target.closest(`[navi-control="dialog"], [navi-control="popover"]`) !==
-    popupEl
-  ) {
-    return;
-  }
-  if (pressOutside === "capture") {
-    mouseDownEvent.preventDefault();
-    return;
-  }
-  if (pressOutside === "close" || pressOutside === "cancel") {
-    openController.requestClose(mouseDownEvent, {
-      isCancel: pressOutside === "cancel",
-    });
-  }
-};
-
-/**
- * Hears an outside press from the document itself, for a popup with no
- * backdrop of its own to catch one: a modal `<dialog>` (whose native
- * `::backdrop` dispatches nothing a handler can be put on) and any popup the
- * caller asked to leave the page reachable (`backdrop={false}`).
- *
- * The press is read and never taken: no `preventDefault`, no
- * `stopPropagation`, and the listener is on `document` rather than on
- * anything covering the page — so what the press landed on hears it too, in
- * the same gesture, and the popup only takes note. That is the whole point of
- * a popup with no wall: a press outside is a press on the page, and the page
- * answers it. The one popup where that cannot hold is the modal dialog, where
- * the browser has already made everything behind inert before this runs.
- *
- * `pressEventType` says which event IS the press, and the two callers want
- * opposite ones:
- *
- * - `"pointerdown"` for a popup with no wall: a page with no wall over it is
- *   a page whose own elements arbitrate their presses, and cancelling a
- *   `pointerdown` — what a drag source and a control keeping the focus where
- *   it is both do — suppresses every compatibility mouse event that would have
- *   followed it. The press happens, reaches its target, and no `mousedown` is
- *   ever dispatched for it. Reading the pointer event is reading the press
- *   itself, whatever anything does with it afterwards, and it is the same
- *   event the drag and surface detectors read.
- * - `"mousedown"` for the modal dialog, whose native `::backdrop` exists to
- *   spend the press. The page's controls act on `mousedown`, and on a touch
- *   screen that is not the same moment as `pointerdown`: the compatibility
- *   mouse events are synthesized at `touchend` and hit-tested again then.
- *   Closing on `pointerdown` takes the `::backdrop` away before that second
- *   hit-test, so the `mousedown` lands on whatever the page holds under the
- *   finger, and one tap both dismisses the dialog and presses the page. Read
- *   on `mousedown`, the wall is still up when the press the page acts on is
- *   aimed, and it catches it. Nothing behind a modal wall can cancel that
- *   press, since nothing behind it hears the `pointerdown` at all.
- *
- * Capture phase, so a handler downstream that stops propagation cannot keep
- * the popup open either — the press is still outside whatever is made of it.
- *
- * Returns a cleanup that removes the listener.
- */
-const armOutsidePressClose = (
-  popupEl,
-  { openController, pressOutside, pressEventType = "pointerdown" },
-) => {
-  const onDocumentPointerDown = (pointerDownEvent) => {
-    if (pointerDownEvent.button !== 0) {
-      return;
-    }
-    if (openedDuringThisPress(openController)) {
-      // The release of the press that opened it is not somebody dismissing it
-      // (see openedDuringThisPress).
-      return;
-    }
-    // The press landed inside another popup: that is a press on what is in
-    // front, not outside. Asking the target where it lives rather than asking
-    // this popup whether it was pushed — a popup in front does not have to be
-    // one this popup knows about. In front means neither inside nor around: a
-    // popup nested in this one falls to the containment check below as the
-    // inside press it is, and one this popup opened INSIDE (a bubble rendered
-    // in a sheet's content) is around it, so what that popup holds is outside
-    // this one exactly like the rest of the page.
-    const popupUnderPointer = pointerDownEvent.target.closest?.(
-      `[navi-control="dialog"], [navi-control="popover"]`,
-    );
-    if (
-      popupUnderPointer &&
-      popupUnderPointer !== popupEl &&
-      !popupEl.contains(popupUnderPointer) &&
-      !popupUnderPointer.contains(popupEl)
-    ) {
-      return;
-    }
-    if (
-      popupEl.id &&
-      pointerDownEvent.target.closest?.(
-        `[${INSIDE_ATTRIBUTE}~="${CSS.escape(popupEl.id)}"]`,
-      )
-    ) {
-      return;
-    }
-    // Real DOM containment wins over the rectangle below — an element
-    // genuinely inside the popup (`overflow: visible`, a negative margin, an
-    // absolutely-positioned child) can be painted outside its border box, and
-    // a press there is not outside just because its coordinates are. The
-    // popup element itself is excluded (contains() answers true for it): a
-    // press on a modal dialog's native backdrop reports the dialog as its
-    // target, there being no `::backdrop` node to be one, so treating that as
-    // contained would keep the rectangle from ever running.
-    if (
-      pointerDownEvent.target !== popupEl &&
-      popupEl.contains(pointerDownEvent.target)
-    ) {
-      return;
-    }
-    const rect = popupEl.getBoundingClientRect();
-    const isOutside =
-      pointerDownEvent.clientX < rect.left ||
-      pointerDownEvent.clientX > rect.right ||
-      pointerDownEvent.clientY < rect.top ||
-      pointerDownEvent.clientY > rect.bottom;
-    if (!isOutside) {
-      return;
-    }
-    openController.requestClose(pointerDownEvent, {
-      isCancel: pressOutside === "cancel",
-    });
-  };
-  document.addEventListener(pressEventType, onDocumentPointerDown, {
-    capture: true,
-  });
-  return () => {
-    document.removeEventListener(pressEventType, onDocumentPointerDown, {
-      capture: true,
-    });
-  };
-};
-
 /**
  * Typography reset shared by the surfaces a control opens: callout, popover,
  * dialog.
@@ -17454,7 +16970,7 @@ installImportMetaCssBuild(import.meta);
  * (see calloutTemplate in callout.js).
  */
 
-const css$15 = /* css */`.navi_callout_status_icon {
+const css$16 = /* css */`.navi_callout_status_icon {
   --x-callout-status-icon-color: var(--navi-callout-neutral-color);
   box-sizing: border-box;
   aspect-ratio: 1;
@@ -17525,7 +17041,7 @@ const CalloutStatusIcon = ({
   status = "info",
   shape = "square"
 }) => {
-  import.meta.css = [css$15, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
+  import.meta.css = [css$16, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
   return jsx("span", {
     className: "navi_callout_status_icon",
     "data-status": status === "none" ? undefined : status,
@@ -17566,11 +17082,13 @@ const SPENT_PRESS_EVENT_TYPES = [
   "contextmenu",
 ];
 // Where a press lands on something drawn over the page rather than on the page
-// itself: a popup of navi's (either layer) or a native top-layer element.
+// itself: a popup of navi's (either layer) or a native top-layer element. An
+// idle PopupGroup is a closed <dialog> that is part of the page (see
+// popup_group.jsx).
 const LAYER_SELECTOR =
-  '[popover], dialog, [navi-control="popover"], [navi-control="dialog"]';
+  '[popover], dialog:not([navi-popup-group]:not(:modal)), [navi-control="popover"], [navi-control="dialog"]';
 
-const css$14 = /* css */ `
+const css$15 = /* css */ `
   /* jsenv-css-opaque: same as dialog.jsx, cascade order. */
   @layer navi {
     .navi_callout {
@@ -17843,6 +17361,10 @@ const css$14 = /* css */ `
  *   If not provided or too big, callout will be centered in viewport. It says where the
  *   callout is drawn, not what dismisses it: see `openingEvent` for what a container anchor
  *   costs
+ * @param {HTMLElement} [options.containerElement] - Where the callout element goes in the
+ *   DOM, when that is not where the anchor puts it (the anchor itself, or beside it). What
+ *   holds a callout decides what it inherits and whether it can be reached at all: outside
+ *   an engaged PopupGroup it is inert. The anchor still says where it points
  * @param {string} [options.status=""] - Callout status: "info" | "warning" | "error" | "success"
  * @param {string} [options.testId] - `data-testid` on the callout element. The callout is
  *   drawn by navi, so nothing the caller renders can carry the name a test needs — same
@@ -17864,10 +17386,6 @@ const css$14 = /* css */ `
  *   still scrolls, a press on a layer drawn over the page (a sheet the callout's content
  *   opened) is that layer's, and a press that does not close the callout (an "error" one) is
  *   not spent either
- * @param {string} [options.group] - With `backdrop`: the name the callout's peers carry in
- *   `data-navi-popup-group` — the triggers of other popups, callouts or not. A press inside a
- *   peer still closes the callout but is not spent, so the peer it landed on opens its own
- *   popup in the same press — a menu bar, where pressing another menu switches to it
  * @param {Event} [options.openingEvent] - The gesture the callout belongs to. It names the
  *   opener — `currentTarget` while the event is still dispatching, `target` once it is over,
  *   so awaiting before opening changes nothing — and the opener is the one part of the anchor
@@ -17928,12 +17446,12 @@ const openCallout = (
     // "" - neutral information
     status = "",
     testId,
+    containerElement,
     onClose,
     closeByPressOutside = status === "info",
     closeOnFocusLeave = closeByPressOutside,
     closeByScroll = false,
     backdrop = false,
-    group,
     closeButton = true,
     openingEvent,
     reopen = "toggle",
@@ -17943,7 +17461,7 @@ const openCallout = (
     debug = () => {},
   } = {},
 ) => {
-  import.meta.css = [css$14, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$15, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -18245,10 +17763,11 @@ const openCallout = (
     }
   }
   const calloutContainer = (() => {
-    if (!anchorElement || anchorElement === document.body) {
+    const holder = containerElement || anchorElement;
+    if (!holder || holder === document.body) {
       return document.body;
     }
-    const closestLabel = anchorElement.closest("label");
+    const closestLabel = holder.closest("label");
     if (closestLabel) {
       // Putting callout inside label would be problematic:
       // - Click on callout would be catched by the browser and re-dispatched to the label
@@ -18260,10 +17779,10 @@ const openCallout = (
       return labelParent;
     }
     // Some elements (e.g. <input>) cannot have children
-    if (canContainCallout(anchorElement)) {
-      return anchorElement;
+    if (canContainCallout(holder)) {
+      return holder;
     }
-    return anchorElement.parentNode || document.body;
+    return holder.parentNode || document.body;
   })();
 
   {
@@ -18310,8 +17829,7 @@ const openCallout = (
     // Whether an outside press on `target` is spent on closing the callout
     // (`backdrop`). What is not the page behind the callout keeps its press: a
     // layer the callout is not part of — its own page may well be a sheet, a
-    // sheet its content opened is in front of it — and a peer, which the press
-    // is meant to open.
+    // sheet its content opened is in front of it.
     const spendsPressOn = (target) => {
       if (!backdrop || !pressOutsideCloses()) {
         return false;
@@ -18320,9 +17838,6 @@ const openCallout = (
       if (layer && !layer.contains(calloutElement)) {
         return false;
       }
-      if (findPopupPeer(target, group)) {
-        return false;
-      }
       return true;
     };
     const spend = (event) => {
@@ -19538,7 +19053,7 @@ const generateSvgWithoutArrow = (width, height) => {
  *
  * Usage:
  *   const myToken = createOpenToken();
- *   calloutManager.addOpenToken(myToken, { message, status, testId, closeByScroll, backdrop, group, anchorElement, event, skipFocus, onClose });
+ *   calloutManager.addOpenToken(myToken, { message, status, testId, closeByScroll, backdrop, closeByPressOutside, containerElement, anchorElement, event, skipFocus, onClose });
  *   calloutManager.removeOpenToken(myToken, event);
  *   calloutManager.requestCloseCallout(event, debugReason); // force-close all
  *   calloutManager.callout  // current open callout or null
@@ -19594,10 +19109,15 @@ const createCalloutManager = (
       testId: tokenData.testId,
       icon: tokenData.icon,
       closeButton: tokenData.closeButton,
-      closeByPressOutside: tokenData.status !== "error",
+      // Unless the token says otherwise: what a press outside a picker's
+      // callout does inside a PopupGroup is the group's to decide. Focus
+      // leaving stays the callout's own way out, whoever answers the press.
+      closeByPressOutside:
+        tokenData.closeByPressOutside ?? tokenData.status !== "error",
+      closeOnFocusLeave: tokenData.status !== "error",
+      containerElement: tokenData.containerElement,
       closeByScroll: tokenData.closeByScroll,
       backdrop: tokenData.backdrop,
-      group: tokenData.group,
       anchorElement,
       openingEvent: event,
       skipFocus: tokenData.skipFocus,
@@ -19727,7 +19247,8 @@ const createCalloutManager = (
       closeButton,
       closeByScroll,
       backdrop,
-      group,
+      closeByPressOutside,
+      containerElement,
       anchorElement,
       event,
       skipFocus,
@@ -19746,7 +19267,8 @@ const createCalloutManager = (
       closeButton,
       closeByScroll,
       backdrop,
-      group,
+      closeByPressOutside,
+      containerElement,
       skipFocus,
       onClose,
       // Resolved as the token is added, and kept with it: a token shown later
@@ -22066,7 +21588,10 @@ const readNumberFromDom = (element, attribute, defaultValue) => {
  * what a popup outside the top layer says for itself).
  */
 
-const LAYER_OVER_SELECTOR = "[data-drag-ignore],[popover],dialog";
+// An idle PopupGroup is a closed <dialog> that is part of the page, not a layer
+// over it (see popup_group.jsx).
+const LAYER_OVER_SELECTOR =
+  "[data-drag-ignore],[popover],dialog:not([navi-popup-group]:not(:modal))";
 
 /**
  * The nearest word wins: a layer INSIDE the element takes the press away from
@@ -22245,7 +21770,7 @@ import.meta.css = /* css */ [`@property --swipe-progress {
   user-select: none;
 }
 
-:is([data-longpress], [data-swipe], [data-double-click]) :is([data-drag-ignore], [popover], dialog), :is([data-longpress], [data-swipe], [data-double-click]) :is(input:not([data-press-only]), textarea), :is([data-longpress], [data-swipe], [data-double-click]) :is([contenteditable=""], [contenteditable="true"]) {
+:is([data-longpress], [data-swipe], [data-double-click]) :is([data-drag-ignore], [popover], dialog:not([navi-popup-group]:not(:modal))), :is([data-longpress], [data-swipe], [data-double-click]) :is(input:not([data-press-only]), textarea), :is([data-longpress], [data-swipe], [data-double-click]) :is([contenteditable=""], [contenteditable="true"]) {
   user-select: text;
 }
 
@@ -33184,7 +32709,7 @@ const keepLeavingPages = () => {
   };
 };
 const LEAVING_ATTRIBUTE = "data-navi-route-leaving";
-const css$13 = /* css */`[data-navi-route-leaving] {
+const css$14 = /* css */`[data-navi-route-leaving] {
   display: none !important;
 }
 `;
@@ -33456,7 +32981,7 @@ const useContentKeepingLeavingPages = (branch, readShownBranch, parentPage) => {
   if (leaving.length === 0) {
     return vnode ? [vnode] : null;
   }
-  import.meta.css = [css$13, "@jsenv/navi/src/nav/route.jsx"];
+  import.meta.css = [css$14, "@jsenv/navi/src/nav/route.jsx"];
   const children = vnode ? [vnode] : [];
   for (const entry of leaving) {
     children.push(h("template", {
@@ -33951,20 +33476,21 @@ const TOP_LAYER_SELECTOR = ":modal, :popover-open";
 // stands over the pages in the top layer. A sticky row inside the pages needs
 // none of this — it lives in the area, so it is already part of the pages' own
 // picture, and so is a popup rendered with layer="local".
-const FURNITURE_SELECTOR = `.navi_fixed_bar, .navi_popover:is(${TOP_LAYER_SELECTOR}), .navi_dialog:is(${TOP_LAYER_SELECTOR})`;
+const FURNITURE_SELECTOR = `.navi_fixed_bar, .navi_popover:is(${TOP_LAYER_SELECTOR}), .navi_dialog:is(${TOP_LAYER_SELECTOR}), .navi_popup_group:is(${TOP_LAYER_SELECTOR})`;
 // Worn by the root for the length of a route transition (route_transition.jsx
 // owns it). Written out rather than imported: importing the module that owns
 // it back into this one would close a cycle.
 const TRANSITION_ATTRIBUTE$1 = "data-navi-route-transition";
 const NAME_PROPERTY$1 = "view-transition-name";
 const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
-// The walls painted in the top layer: a modal dialog's, which is its
-// ::backdrop, and a popover's, which is a real element shown as a popover
+// The walls painted in the top layer: a modal dialog's (a PopupGroup's too,
+// layout/popup_group.jsx), which is its ::backdrop, and a popover's, which is
+// a real element shown as a popover
 // beside it (layout/popover.jsx) — unnamed, so covered by the pictures for
 // the length of the movement all the same. A top-layer dialog without a wall
 // is shown as a popover and has nothing to stand in for.
 const TOP_LAYER_WALL_SELECTOR =
-  ".navi_dialog:modal, .navi_popover_backdrop:popover-open";
+  ".navi_dialog:modal, .navi_popover_backdrop:popover-open, .navi_popup_group:modal";
 const WALL_ATTRIBUTE = "data-navi-transition-wall";
 // Which side of the movement a bar is on, worn by the bar and read by the
 // browser as the class of its group (the CSS below): "leaving" from the first
@@ -34026,7 +33552,7 @@ const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition
 }
 
 :root[data-navi-route-transition-target="area"] {
-  & .navi_dialog::backdrop, & .navi_popover_backdrop {
+  & .navi_dialog::backdrop, & .navi_popup_group::backdrop, & .navi_popover_backdrop {
     backdrop-filter: none;
     background: none;
   }
@@ -35127,7 +34653,7 @@ const ROUTE_TRAVEL_ATTRIBUTE = "data-navi-route-travel";
 // the root pictures must NOT move (they carry the whole viewport, blank bands
 // included).
 
-const css$12 = /* css */`@property --navi-route-transition-leave {
+const css$13 = /* css */`@property --navi-route-transition-leave {
   syntax: "*";
   inherits: false
 }
@@ -36709,7 +36235,7 @@ const describePage = ({
 // is the application's element as often as <RouteTransitionArea>, and is
 // only found as a movement starts.
 const installRouteTransitionCss = () => {
-  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$13, "@jsenv/navi/src/nav/route_transition.jsx"];
   installTransitionWindowCss();
   installTransitionFurnitureCss();
 };
@@ -36746,7 +36272,7 @@ const DRAGGED_ATTRIBUTE = "data-navi-route-travel-dragged";
 const TURNED_ATTRIBUTE = "data-navi-route-travel-turned";
 // The name the box wears while it travels, and only then (see nameForTravel).
 const TRAVEL_NAME = "navi-route-travel";
-const css$11 = /* css */`.navi_route_travel {
+const css$12 = /* css */`.navi_route_travel {
   position: relative;
 
   &[data-travel-by-drag="x"] {
@@ -37044,7 +36570,7 @@ const RouteTravel = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$11, "@jsenv/navi/src/nav/route_travel.jsx"];
+  import.meta.css = [css$12, "@jsenv/navi/src/nav/route_travel.jsx"];
   installTransitionWindowCss();
   const elementRef = useRef();
   const gestureRef = useRef(null);
@@ -40444,6 +39970,504 @@ const NAVI_COMMANDS = {
   "--navi-unselect": unselectCommand,
 };
 
+/**
+ * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
+ * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
+ * of which of the two owns it.
+ */
+
+
+/**
+ * Whether a visibleRectEffect delivery is one that can have taken height away
+ * from a popup, and so pushed whatever holds focus out of sight:
+ * - "resize": the window/visual viewport settled — which is also how the
+ *   on-screen keyboard arrives, overlay or not (window_size.js);
+ * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
+ * - "focusin": the focus-settled re-measure, for the room that changes with
+ *   nothing announcing it (subscribeFocusSettled in window_size.js).
+ *
+ * Everything else is a scroll of one kind or another, where nothing got
+ * smaller and scrolling the focused element back would fight the very gesture
+ * that fired it.
+ */
+const mayHaveHiddenFocus = (event) => {
+  const type = event?.type;
+  return (
+    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
+  );
+};
+
+const scrollportHeightMap = new WeakMap();
+/**
+ * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
+ * getting shorter has pushed it out.
+ *
+ * The case this exists for: a field low in the scrolling body of a popup that
+ * also has a footer (box.jsx — with a body, the body is the only thing that
+ * scrolls and the footer is a sibling sitting right under it). Focusing the
+ * field makes the browser scroll it into view, which it does against the
+ * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
+ * that height away. The body shrinks, its scrollTop does not move, so the
+ * content slides down relative to the shorter scrollport and the field ends up
+ * past its bottom edge — visually, swallowed by the footer. The browser does
+ * not redo a scroll-into-view it already answered, so this does.
+ *
+ * Only what the shrink itself hid, though: with the keyboard up the user reads
+ * the rest of the popup by scrolling the field away — to reach the submit under
+ * it, typically — and the room keeps changing while they do (a keyboard settling
+ * in two steps, a suggestion strip, a browser bar). Answering each of those by
+ * scrolling the field back takes the popup away from wherever they had just
+ * scrolled it, over and over: what they were reading cannot be reached at all
+ * without blurring the field first, and the popup reads as unscrollable. So the
+ * field is brought back only when it was in view before the room shrank, which
+ * one remembered number answers: a resize moves neither scrollTop nor the
+ * element's offset inside the scrolled content, so measuring against the height
+ * the scrollport HAD is measuring the state before the change.
+ *
+ * Scoped to the field's own scroll container (never the page): a popup traps
+ * scrolling precisely so the document underneath cannot move, and a plain
+ * scrollIntoView walks past a container whose scrollbar isn't visible — see
+ * scrollIntoViewScoped's own doc.
+ *
+ * "nearest": the smallest scroll that makes it visible, and none at all when it
+ * already is. Where it lands is the container's own business — a navi scroller
+ * keeps a band free at its edges so a field never comes back glued to one (see
+ * scroll-padding in box.jsx).
+ */
+const keepFocusedElementVisible = (popupEl) => {
+  const { activeElement } = document;
+  if (!activeElement || activeElement === popupEl) {
+    return;
+  }
+  if (!popupEl.contains(activeElement)) {
+    return;
+  }
+  const scrollContainer = getScrollContainer(activeElement);
+  if (!scrollContainer || !popupEl.contains(scrollContainer)) {
+    // What scrolls the field is outside the popup, which means the page: a
+    // popup holds it still on purpose (trapScrollInside), so there is nothing
+    // here to scroll back.
+    return;
+  }
+  const scrollportHeight = scrollContainer.clientHeight;
+  const scrollportHeightBefore = scrollportHeightMap.get(scrollContainer);
+  scrollportHeightMap.set(scrollContainer, scrollportHeight);
+  if (scrollportHeightBefore !== undefined) {
+    if (scrollportHeight >= scrollportHeightBefore) {
+      // Nothing was taken away, so nothing was hidden by this.
+      return;
+    }
+    if (
+      !isVisibleInScrollport(
+        activeElement,
+        scrollContainer,
+        scrollportHeightBefore,
+      )
+    ) {
+      return;
+    }
+  }
+  scrollIntoViewScoped(activeElement, {
+    container: scrollContainer,
+    block: "nearest",
+  });
+};
+
+// Whether any part of `el` was showing in `container` back when its scrollport
+// was `scrollportHeight` tall. Both boxes are read now: the container may have
+// moved as well as shrunk (a centered dialog re-centers itself), and the
+// difference between the two tops is what that move leaves alone.
+const isVisibleInScrollport = (el, container, scrollportHeight) => {
+  const elRect = el.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const elTop = elRect.top - containerRect.top + container.scrollTop;
+  const elBottom = elTop + elRect.height;
+  const scrollportTop = container.scrollTop;
+  const scrollportBottom = scrollportTop + scrollportHeight;
+  return elBottom > scrollportTop && elTop < scrollportBottom;
+};
+
+/**
+ * Calls `onSettled` once `el`'s current CSS transition is over — via
+ * `transitionend`, with a safety `setTimeout` fallback matching the longest
+ * `transition-duration`, in case nothing actually transitions or an event is
+ * missed.
+ *
+ * Returns a "cancel" function, so a caller whose instance has been superseded
+ * (a fresh open/close about to set its own state) can keep this stale one from
+ * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
+ * did up front is that fresh call's business, not this one's.
+ */
+const whenTransitionSettles = (el, onSettled) => {
+  let settled = false;
+  const onTransitionEnd = (transitionEvent) => {
+    if (transitionEvent.target === el) {
+      finish();
+    }
+  };
+  const stopWatching = () => {
+    settled = true;
+    el.removeEventListener("transitionend", onTransitionEnd);
+    clearTimeout(safetyTimeoutId);
+  };
+  const finish = () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+    onSettled();
+  };
+  el.addEventListener("transitionend", onTransitionEnd);
+  const durationsInSeconds = getComputedStyle(el)
+    .transitionDuration.split(",")
+    .map((value) => parseFloat(value) || 0);
+  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
+  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
+  return () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+  };
+};
+
+/**
+ * Drops the document's text selection when it lives inside `el`, leaving a
+ * selection made elsewhere on the page alone.
+ *
+ * A popup being closed takes its content with it, and a selection is a claim
+ * on content the user can still act on: kept, it would outlive the surface it
+ * was made on — painted on the box for the length of its exit transition, with
+ * the handles and the copy toolbar a phone draws from the live selection
+ * hanging over something that is going away — and reappear with the box on
+ * the next opening. Dropping the selection is the only way to remove that
+ * chrome: a `user-select: none` on the closing box hides the highlight in some
+ * browsers only, and the handles are the browser's own, drawn from the
+ * selection object rather than from any style.
+ */
+const clearTextSelectionInside = (el) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  if (!el.contains(range.commonAncestorContainer)) {
+    return;
+  }
+  selection.removeAllRanges();
+};
+
+/**
+ * Disables pointer-events on `el` until its current CSS transition settles —
+ * avoids the cursor changing/something becoming clickable while the popup is
+ * still visually moving into or out of place.
+ *
+ * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
+ * pointer-events, since a fresh call for the next open/close is about to set
+ * its own state.
+ */
+const suppressPointerEventsDuringTransition = (el) => {
+  el.style.pointerEvents = "none";
+  return whenTransitionSettles(el, () => {
+    el.style.pointerEvents = "";
+  });
+};
+
+/**
+ * Hides the backdrop, deferring until the browser's matching "click" fires
+ * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
+ * comment for why) — same capture-phase-on-document pattern as
+ * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
+ * can't safely replace: mouseup (and the click that follows it) can land an
+ * arbitrarily long time after mousedown (the user is still holding the
+ * button down), so a short timeout can fire first and hide the backdrop
+ * before its own click ever arrives. A capture-phase listener on document
+ * fires for every click regardless of what any bubble-phase handler does
+ * downstream, so no fallback timer is needed.
+ *
+ * `hide` is the caller's own way to actually hide the backdrop
+ * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
+ * for a plain div) — this helper only owns the mousedown/click timing.
+ *
+ * Returns a disarm function (or undefined if hidden immediately), so a
+ * fresh open can cancel a pending hide it's about to make redundant.
+ */
+const armPointerDownOutsideClose = (closeEvent, hide) => {
+  const mousedownEvent = findEvent(closeEvent, "mousedown");
+  if (!mousedownEvent) {
+    hide();
+    return undefined;
+  }
+  const onClick = () => {
+    document.removeEventListener("click", onClick, { capture: true });
+    hide();
+  };
+  document.addEventListener("click", onClick, { capture: true });
+  return () => {
+    document.removeEventListener("click", onClick, { capture: true });
+  };
+};
+
+/**
+ * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
+ * `prefix` plus a direction word), or `null` if both axes overlap the anchor
+ * (no direction at all — that's `resolvedAnimationKind === "scaling"`
+ * territory instead, see resolveAutoAnimationKind below).
+ *
+ * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
+ * when docked) keeps the word as the compass direction the popup comes
+ * from: placed "top" (a point/corner), it slides in from the top.
+ * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
+ * direction instead, the opposite compass point: placed "top" of the
+ * anchor, it moves/grows up, away from the anchor (which sits below it).
+ *
+ * "inset-*"/"center" contribute no direction on their axis either way.
+ */
+const resolveDirectionValue = (y, x, { prefix }) => {
+  const yWord =
+    y === "top"
+      ? prefix === "expand"
+        ? "up"
+        : "top"
+      : y === "bottom"
+        ? prefix === "expand"
+          ? "down"
+          : "bottom"
+        : null;
+  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
+  if (!yWord && !xWord) {
+    return null;
+  }
+  return yWord && xWord
+    ? `${prefix}-${yWord}-${xWord}`
+    : `${prefix}-${yWord || xWord}`;
+};
+
+/**
+ * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
+ * — picked for any real anchor, or for a point/corner placed dead-center
+ * (both positionArea axes overlapping — there's no sensible direction to
+ * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
+ * for any no-anchor/docked case (Dialog always, Popover's own custom
+ * renderer when there's no real anchor), so this collapses to "scaling"
+ * there only for the dead-center case, "sliding" otherwise. The two
+ * "overlapping" booleans below describe the *positionArea* itself (a bare
+ * word vs. "inset-"/"center"), not anything about the anchor — they'd
+ * mean exactly the same thing even with no anchor at all, since it's the
+ * position strategy, not the anchor, that decides whether there's a
+ * direction to slide from.
+ */
+const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
+  const yIsOverlapping =
+    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
+  const xIsOverlapping =
+    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
+  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
+};
+
+/**
+ * A popup reads "outside" from its own border box: what a press lands on
+ * decides nothing on its own (a genuine backdrop press and a press on the
+ * popup's padding both report the popup element as their target, there being
+ * no real ::backdrop node to be one), so the rectangle is what tells them
+ * apart. That holds as long as the box and what the popup paints are the same
+ * thing — which stops being true for a popup with no surface of its own
+ * (`backgroundColor="transparent"`, no shadow, no padding): what the eye reads
+ * as backdrop is then inside the box, and a press there stays a press on the
+ * popup.
+ *
+ * `data-navi-popup-outside` is how a caller says which of its own boxes are
+ * not the surface. It is opt-in because navi cannot infer it — a background
+ * can come from anywhere — while the caller who made the popup see-through
+ * knows exactly which box is decoration and which is paper.
+ *
+ * The marker answers for the element it is on, never for its descendants: a
+ * box painted inside a marked one is still surface, so a row can be marked and
+ * its empty halves read as backdrop while presses on the controls it holds do
+ * not dismiss anything. A descendant with `pointer-events: none` never becomes
+ * a press target at all, so the marked box answers in its place — while the
+ * same declaration on the marked box itself takes it out of hit-testing and
+ * makes the marker unreachable (see warnAboutUnreachableOutsideRegions).
+ */
+const OUTSIDE_REGION_ATTRIBUTE = "data-navi-popup-outside";
+
+/**
+ * `data-navi-popup-inside` is the other direction: a box of the PAGE the
+ * caller says belongs to a popup, so a press on it is not outside that popup
+ * even though it lies beyond the border box — a card whose press is what
+ * fills the one panel of a board. Its value names the popup by `id`, the way
+ * `commandfor` does (several ids, space separated), because the exemption is
+ * one popup's: a menu open beside the board still closes on the same press.
+ *
+ * Unlike the outside marker it answers for its whole subtree: the outside
+ * marker carves free space out of a surface whose controls stay surface, this
+ * one adds a whole thing — the card, its count, its buttons — to the popup's
+ * own ground, and nothing in it is a dismissal.
+ */
+const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
+// Whether `target` is in a box of the page declared as part of the popup
+// named `popupId`.
+const isDeclaredInsidePopup = (target, popupId) =>
+  Boolean(popupId) &&
+  Boolean(target?.closest?.(`[${INSIDE_ATTRIBUTE}~="${CSS.escape(popupId)}"]`));
+
+/**
+ * What a press landing on a region the caller declared as not-its-surface
+ * does: exactly what the same press on the backdrop would do.
+ *
+ * Lives on the popup's own content element rather than in the backdrop's
+ * handler, for both renderers: the backdrop is a sibling behind the popup
+ * (never an ancestor), so a press inside the popup's box never reaches it.
+ */
+const handlePressOnOutsideRegion = (
+  mouseDownEvent,
+  { popupEl, openController, pressOutside },
+) => {
+  if (mouseDownEvent.button !== 0) {
+    return;
+  }
+  const { target } = mouseDownEvent;
+  if (!target.hasAttribute(OUTSIDE_REGION_ATTRIBUTE)) {
+    return;
+  }
+  if (openedDuringThisPress(openController)) {
+    // The release of the press that opened it is not somebody dismissing it
+    // (see openedDuringThisPress).
+    return;
+  }
+  // A popup opens inside its opener's own subtree, so a press on a region
+  // belonging to a popup nested in this one bubbles through here too — and it
+  // is a press on what is in front, not on this popup's own decoration.
+  if (
+    target.closest(`[navi-control="dialog"], [navi-control="popover"]`) !==
+    popupEl
+  ) {
+    return;
+  }
+  if (pressOutside === "capture") {
+    mouseDownEvent.preventDefault();
+    return;
+  }
+  if (pressOutside === "close" || pressOutside === "cancel") {
+    openController.requestClose(mouseDownEvent, {
+      isCancel: pressOutside === "cancel",
+    });
+  }
+};
+
+/**
+ * Hears an outside press from the document itself, for a popup with no
+ * backdrop of its own to catch one: a modal `<dialog>` (whose native
+ * `::backdrop` dispatches nothing a handler can be put on) and any popup the
+ * caller asked to leave the page reachable (`backdrop={false}`).
+ *
+ * The press is read and never taken: no `preventDefault`, no
+ * `stopPropagation`, and the listener is on `document` rather than on
+ * anything covering the page — so what the press landed on hears it too, in
+ * the same gesture, and the popup only takes note. That is the whole point of
+ * a popup with no wall: a press outside is a press on the page, and the page
+ * answers it. The one popup where that cannot hold is the modal dialog, where
+ * the browser has already made everything behind inert before this runs.
+ *
+ * `pressEventType` says which event IS the press, and the two callers want
+ * opposite ones:
+ *
+ * - `"pointerdown"` for a popup with no wall: a page with no wall over it is
+ *   a page whose own elements arbitrate their presses, and cancelling a
+ *   `pointerdown` — what a drag source and a control keeping the focus where
+ *   it is both do — suppresses every compatibility mouse event that would have
+ *   followed it. The press happens, reaches its target, and no `mousedown` is
+ *   ever dispatched for it. Reading the pointer event is reading the press
+ *   itself, whatever anything does with it afterwards, and it is the same
+ *   event the drag and surface detectors read.
+ * - `"mousedown"` for the modal dialog, whose native `::backdrop` exists to
+ *   spend the press. The page's controls act on `mousedown`, and on a touch
+ *   screen that is not the same moment as `pointerdown`: the compatibility
+ *   mouse events are synthesized at `touchend` and hit-tested again then.
+ *   Closing on `pointerdown` takes the `::backdrop` away before that second
+ *   hit-test, so the `mousedown` lands on whatever the page holds under the
+ *   finger, and one tap both dismisses the dialog and presses the page. Read
+ *   on `mousedown`, the wall is still up when the press the page acts on is
+ *   aimed, and it catches it. Nothing behind a modal wall can cancel that
+ *   press, since nothing behind it hears the `pointerdown` at all.
+ *
+ * Capture phase, so a handler downstream that stops propagation cannot keep
+ * the popup open either — the press is still outside whatever is made of it.
+ *
+ * Returns a cleanup that removes the listener.
+ */
+const armOutsidePressClose = (
+  popupEl,
+  { openController, pressOutside, pressEventType = "pointerdown" },
+) => {
+  const onDocumentPointerDown = (pointerDownEvent) => {
+    if (pointerDownEvent.button !== 0) {
+      return;
+    }
+    if (openedDuringThisPress(openController)) {
+      // The release of the press that opened it is not somebody dismissing it
+      // (see openedDuringThisPress).
+      return;
+    }
+    // The press landed inside another popup: that is a press on what is in
+    // front, not outside. Asking the target where it lives rather than asking
+    // this popup whether it was pushed — a popup in front does not have to be
+    // one this popup knows about. In front means neither inside nor around: a
+    // popup nested in this one falls to the containment check below as the
+    // inside press it is, and one this popup opened INSIDE (a bubble rendered
+    // in a sheet's content) is around it, so what that popup holds is outside
+    // this one exactly like the rest of the page.
+    const popupUnderPointer = pointerDownEvent.target.closest?.(
+      `[navi-control="dialog"], [navi-control="popover"]`,
+    );
+    if (
+      popupUnderPointer &&
+      popupUnderPointer !== popupEl &&
+      !popupEl.contains(popupUnderPointer) &&
+      !popupUnderPointer.contains(popupEl)
+    ) {
+      return;
+    }
+    if (isDeclaredInsidePopup(pointerDownEvent.target, popupEl.id)) {
+      return;
+    }
+    // Real DOM containment wins over the rectangle below — an element
+    // genuinely inside the popup (`overflow: visible`, a negative margin, an
+    // absolutely-positioned child) can be painted outside its border box, and
+    // a press there is not outside just because its coordinates are. The
+    // popup element itself is excluded (contains() answers true for it): a
+    // press on a modal dialog's native backdrop reports the dialog as its
+    // target, there being no `::backdrop` node to be one, so treating that as
+    // contained would keep the rectangle from ever running.
+    if (
+      pointerDownEvent.target !== popupEl &&
+      popupEl.contains(pointerDownEvent.target)
+    ) {
+      return;
+    }
+    const rect = popupEl.getBoundingClientRect();
+    const isOutside =
+      pointerDownEvent.clientX < rect.left ||
+      pointerDownEvent.clientX > rect.right ||
+      pointerDownEvent.clientY < rect.top ||
+      pointerDownEvent.clientY > rect.bottom;
+    if (!isOutside) {
+      return;
+    }
+    openController.requestClose(pointerDownEvent, {
+      isCancel: pressOutside === "cancel",
+    });
+  };
+  document.addEventListener(pressEventType, onDocumentPointerDown, {
+    capture: true,
+  });
+  return () => {
+    document.removeEventListener(pressEventType, onDocumentPointerDown, {
+      capture: true,
+    });
+  };
+};
+
 /**
  * When a popup builds what it holds, and when it throws it away.
  *
@@ -49161,7 +49185,7 @@ const startNetworkMonitoring = () => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$10 = /* css */`.navi_loading_indicator_fluid_container {
+const css$11 = /* css */`.navi_loading_indicator_fluid_container {
   border-radius: inherit;
   opacity: 1;
   width: 100%;
@@ -49192,7 +49216,7 @@ const LoadingIndicatorFluid = ({
   visuallyHidden,
   ...rest
 }) => {
-  import.meta.css = [css$10, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
+  import.meta.css = [css$11, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
   const ref = useRef(null);
   // The container dimensions can be deduced from the ref itself as the indicator is absolute inset 0
   const [containerWidth, setContainerWidth] = useState(0);
@@ -49394,7 +49418,7 @@ const LoadingRectangleSvg = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$$ = /* css */`.navi_loading_outline_wrapper {
+const css$10 = /* css */`.navi_loading_outline_wrapper {
   top: max(var(--loading-outline-min-inset, -100vh),
       var(--loading-rectangle-top, 0px));
   right: max(var(--loading-outline-min-inset, -100vh),
@@ -49415,7 +49439,7 @@ const css$$ = /* css */`.navi_loading_outline_wrapper {
 }
 `;
 const LoadingOutline = props => {
-  import.meta.css = [css$$, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
+  import.meta.css = [css$10, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
   if (props.containerRef) {
     const container = props.containerRef.current;
     if (!container) {
@@ -49617,7 +49641,7 @@ const flush = () => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$_ = /* css */`.navi_text_anchor {
+const css$$ = /* css */`.navi_text_anchor {
   vertical-align: baseline;
   user-select: none;
   overflow: hidden;
@@ -49655,7 +49679,7 @@ const TextAnchor = ({
   textSize,
   lineLayout
 }) => {
-  import.meta.css = [css$_, "@jsenv/navi/src/text/text_anchor.jsx"];
+  import.meta.css = [css$$, "@jsenv/navi/src/text/text_anchor.jsx"];
   const anchorRef = useRef();
   // The correction reads the layout, with the other reads of the commit (see
   // layout_batch.js) — an anchor per icon, each measured between two writes,
@@ -49906,7 +49930,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$Z = /* css */`@layer navi {
+const css$_ = /* css */`@layer navi {
   .navi_text {
     &[data-skeleton] {
       border-radius: .2em;
@@ -50498,7 +50522,7 @@ const TextShrinkWrap = props => {
   });
 };
 const TextUI = props => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
   let {
     ref,
     spacing,
@@ -50736,7 +50760,7 @@ const Icon = ({
   fillLine,
   ...props
 }) => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
   const innerChildren = href ? jsx("svg", {
     width: "100%",
     height: "100%",
@@ -51070,7 +51094,7 @@ const useDimColorWhen = (elementRef, shouldDim) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$Y = /* css */`@layer navi {
+const css$Z = /* css */`@layer navi {
   .navi_link {
     --link-border-radius: unset;
     --link-outline-color: var(--navi-focus-outline-color);
@@ -51544,7 +51568,7 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  * @param {boolean} [props.readOnly]
  */
 const Link = props => {
-  import.meta.css = [css$Y, "@jsenv/navi/src/nav/link/link.jsx"];
+  import.meta.css = [css$Z, "@jsenv/navi/src/nav/link/link.jsx"];
   if (props.route) {
     return jsx(LinkWithRoute, {
       ...props
@@ -52104,7 +52128,7 @@ const rememberProgressAnimation = (navElement, travel) => {
   travel.progressAnimation = animation;
   travel.progressFrom = animation ? parseFloat(animation.effect.getKeyframes()[0]["--slide-travel-progress"]) || 0 : 0;
 };
-const css$X = /* css */`@layer navi {
+const css$Y = /* css */`@layer navi {
   .navi_nav {
     --nav-border: none;
     --nav-padding: 0px;
@@ -52373,7 +52397,7 @@ const Nav = ({
   slideContainer,
   ...props
 }) => {
-  import.meta.css = [css$X, "@jsenv/navi/src/nav/link/nav.jsx"];
+  import.meta.css = [css$Y, "@jsenv/navi/src/nav/link/nav.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const navRef = props.ref;
@@ -53249,7 +53273,7 @@ const buildBinderCenterlinePathBelow = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$W = /* css */`@layer navi {
+const css$X = /* css */`@layer navi {
   .navi_binder {
     --binder-border-width: var(--navi-control-border-width);
     --binder-border-radius: var(--navi-control-border-radius);
@@ -53536,7 +53560,7 @@ const Binder = ({
   pagePadding,
   ...props
 }) => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/binder/binder.jsx"];
+  import.meta.css = [css$X, "@jsenv/navi/src/nav/binder/binder.jsx"];
   const items = toChildArray(children).map((child, index) => {
     const {
       value: itemValue,
@@ -53986,7 +54010,7 @@ const writeSpace = (area) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$V = /* css */`@layer navi {
+const css$W = /* css */`@layer navi {
   :root {
     --navi-fixed-bar-width: 56px;
     --navi-fixed-bar-height: 56px;
@@ -54109,7 +54133,7 @@ const FixedBar = ({
   border = true,
   ...props
 }) => {
-  import.meta.css = [css$V, "@jsenv/navi/src/layout/fixed_bar/fixed_bar.jsx"];
+  import.meta.css = [css$W, "@jsenv/navi/src/layout/fixed_bar/fixed_bar.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   // Said with the width the border rule reads rather than with an attribute of
@@ -54203,7 +54227,7 @@ const FixedBar = ({
 // Subpixel layout rounds rectangles up on boxes that fit exactly.
 const OVERFLOW_TOLERANCE = 1;
 
-const css$U = /* css */ `
+const css$V = /* css */ `
   [data-navi-overflow-x] {
     outline: 2px dashed #e74c3c;
     outline-offset: -2px;
@@ -54227,7 +54251,7 @@ const detectHorizontalOverflow = ({
   let styleEl = null;
   if (highlight) {
     styleEl = document.createElement("style");
-    styleEl.textContent = css$U;
+    styleEl.textContent = css$V;
     document.head.appendChild(styleEl);
   }
 
@@ -54317,7 +54341,11 @@ const findOverflows = (root) => {
       if (style.display === "none" || style.position === "fixed") {
         continue;
       }
-      if (el.hasAttribute("popover") || el.tagName === "DIALOG") {
+      if (
+        el.hasAttribute("popover") ||
+        // An idle PopupGroup is a box of the page (see popup_group.jsx).
+        (el.tagName === "DIALOG" && !el.hasAttribute("navi-popup-group"))
+      ) {
         continue;
       }
       const rect = el.getBoundingClientRect();
@@ -54383,7 +54411,7 @@ const useFocusGroup = (
 
 installImportMetaCssBuild(import.meta);
 const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
-const css$T = /* css */`.navi_summary_marker {
+const css$U = /* css */`.navi_summary_marker {
   flex-shrink: 0;
   width: 1em;
   height: 1em;
@@ -54475,7 +54503,7 @@ const SummaryMarker = ({
   loading,
   openDirection = "down"
 }) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/control/details/summary_marker.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/control/details/summary_marker.jsx"];
   const showLoading = useDebounceTrue(loading, 300);
   return jsx("span", {
     className: "navi_summary_marker",
@@ -54521,7 +54549,7 @@ const SummaryMarker = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$S = /* css */`.navi_details {
+const css$T = /* css */`.navi_details {
   z-index: 1;
   flex-direction: column;
   flex-shrink: 0;
@@ -54566,7 +54594,7 @@ const Details = props => {
   return details;
 };
 const DetailsField = props => {
-  import.meta.css = [css$S, "@jsenv/navi/src/control/details/details.jsx"];
+  import.meta.css = [css$T, "@jsenv/navi/src/control/details/details.jsx"];
   const {
     ref,
     persists,
@@ -54732,7 +54760,7 @@ const DetailsFieldContent = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$R = /* css */`.navi_expandable {
+const css$S = /* css */`.navi_expandable {
   flex-direction: column;
   flex-shrink: 0;
   display: flex;
@@ -54976,7 +55004,7 @@ const useExpandableContext = partName => {
  *   around them (docs/control_object.md, "A control that is not there").
  */
 const Expandable = props => {
-  import.meta.css = [css$R, "@jsenv/navi/src/control/expandable/expandable.jsx"];
+  import.meta.css = [css$S, "@jsenv/navi/src/control/expandable/expandable.jsx"];
   /* The open props are read from `props` by the open controller below; they
      are named here only to keep them out of `rest`, and so out of the DOM. */
   /* eslint-disable no-unused-vars */
@@ -55957,7 +55985,7 @@ const useAccentColorAttributes = (
 };
 
 installImportMetaCssBuild(import.meta);
-const css$Q = /* css */`@layer navi {
+const css$R = /* css */`@layer navi {
   .navi_button {
     --button-border-radius: var(--navi-control-border-radius);
     --button-border-width: var(--navi-control-border-width);
@@ -56261,7 +56289,7 @@ a.navi_button {
 }
 `;
 const ButtonUI = props => {
-  import.meta.css = [css$Q, "@jsenv/navi/src/control/input/button_ui.jsx"];
+  import.meta.css = [css$R, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -56476,7 +56504,7 @@ const ButtonShadow = () => {
 markAsOutsideTextFlow(ButtonShadow);
 
 installImportMetaCssBuild(import.meta);
-const css$P = /* css */`.navi_button_confirm {
+const css$Q = /* css */`.navi_button_confirm {
   align-items: center;
   gap: var(--navi-s);
   flex-wrap: wrap;
@@ -56504,7 +56532,7 @@ const ButtonConfirm = ({
   cancelTestId,
   ...props
 }) => {
-  import.meta.css = [css$P, "@jsenv/navi/src/control/input/button_confirm.jsx"];
+  import.meta.css = [css$Q, "@jsenv/navi/src/control/input/button_confirm.jsx"];
   const [asking, setAsking] = useState(false);
   const askingRef = useRef(null);
   const cancelRef = useRef(null);
@@ -56965,7 +56993,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
 const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonHrefResolver, ButtonUI]);
 
 installImportMetaCssBuild(import.meta);
-const css$O = /* css */`.navi_control_swap {
+const css$P = /* css */`.navi_control_swap {
   font-size: var(--navi-control-font-size);
   --x-control-swap-size: var(--navi-control-swap-size, calc(var(--navi-control-line-height) + 2 * var(--navi-s) + 2 *
           var(--navi-control-border-width)));
@@ -57070,7 +57098,7 @@ const css$O = /* css */`.navi_control_swap {
  * is the space between the boxes.
  */
 const ControlSwap = props => {
-  import.meta.css = [css$O, "@jsenv/navi/src/control/control_swap/control_swap.jsx"];
+  import.meta.css = [css$P, "@jsenv/navi/src/control/control_swap/control_swap.jsx"];
   const {
     value,
     defaultValue,
@@ -57446,7 +57474,7 @@ const ControlGroup = props => {
 const CONTROL_GROUP_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
 
 installImportMetaCssBuild(import.meta);
-const css$N = /* css */`@layer navi {
+const css$O = /* css */`@layer navi {
   .navi_checkbox {
     --switch-margin: 0;
     --switch-padding: 2px;
@@ -57503,7 +57531,7 @@ const css$N = /* css */`@layer navi {
 }
 `;
 const SwitchUI = () => {
-  import.meta.css = [css$N, "@jsenv/navi/src/control/input/switch_ui.jsx"];
+  import.meta.css = [css$O, "@jsenv/navi/src/control/input/switch_ui.jsx"];
   return jsx(Box, {
     className: "navi_switch",
     as: "svg",
@@ -57546,7 +57574,7 @@ const useCheckableProps = (props, options) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$M = /* css */`@layer navi {
+const css$N = /* css */`@layer navi {
   .navi_checkbox {
     --border-radius: var(--navi-checkbox-border-radius);
     --border-width: var(--navi-control-border-width);
@@ -57819,7 +57847,7 @@ const InputCheckboxHeadless = props => {
   });
 };
 const InputCheckboxFieldInterface = props => {
-  import.meta.css = [css$M, "@jsenv/navi/src/control/input/input_checkbox.jsx"];
+  import.meta.css = [css$N, "@jsenv/navi/src/control/input/input_checkbox.jsx"];
   const [checkboxRootProps, checkboxHostProps] = useCheckableProps(props);
   const {
     icon,
@@ -57941,7 +57969,7 @@ const CheckboxPseudoClasses = [":hover", ":active", ":focus", ":focus-visible",
 const CheckboxPseudoElements = ["::-navi-loader", "::-navi-checkmark"];
 
 installImportMetaCssBuild(import.meta);
-const css$L = /* css */`@layer navi {
+const css$M = /* css */`@layer navi {
   .navi_label {
     --label-required-indicator-color: var(--navi-color-danger, #b42318);
 
@@ -58019,7 +58047,7 @@ const css$L = /* css */`@layer navi {
  * </Field>
  */
 const Field = props => {
-  import.meta.css = [css$L, "@jsenv/navi/src/control/field.jsx"];
+  import.meta.css = [css$M, "@jsenv/navi/src/control/field.jsx"];
   const refDefault = useRef();
   props.ref = props.ref || refDefault;
   const {
@@ -58054,7 +58082,7 @@ const FieldCSSVars = {
   spacingWithControl: ["--spacing-with-control", "padding"]
 };
 const FieldAsContainer = props => {
-  import.meta.css = [css$L, "@jsenv/navi/src/control/field.jsx"];
+  import.meta.css = [css$M, "@jsenv/navi/src/control/field.jsx"];
   const {
     children
   } = props;
@@ -58085,7 +58113,7 @@ const FieldAsContainer = props => {
 };
 const FIELD_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
 const Label = props => {
-  import.meta.css = [css$L, "@jsenv/navi/src/control/field.jsx"];
+  import.meta.css = [css$M, "@jsenv/navi/src/control/field.jsx"];
   const {
     children,
     // Marks the label when its control is required. Takes what to show, or
@@ -58253,7 +58281,7 @@ const InputSlot = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$K = /* css */`@layer navi {
+const css$L = /* css */`@layer navi {
   .navi_radio {
     --margin: 3px 3px 3px 5px;
     --outline-offset: 1px;
@@ -58559,7 +58587,7 @@ const InputRadioHeadless = props => {
 };
 const VARIANT_SET = new Set(["icon", "button", "radio"]);
 const InputRadioFieldInterface = props => {
-  import.meta.css = [css$K, "@jsenv/navi/src/control/input/input_radio.jsx"];
+  import.meta.css = [css$L, "@jsenv/navi/src/control/input/input_radio.jsx"];
   const [radioRootProps, radioHostProps] = useCheckableProps(props);
   const {
     icon,
@@ -58705,7 +58733,7 @@ const RadioPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":r
 const RadioPseudoElements = ["::-navi-loader", "::-navi-radiomark"];
 
 installImportMetaCssBuild(import.meta);
-const css$J = /* css */`@layer navi {
+const css$K = /* css */`@layer navi {
   .navi_input_range {
     --border-radius: 6px;
     --border-width: var(--navi-control-border-width);
@@ -58944,7 +58972,7 @@ const InputRange = props => {
   });
 };
 const InputRangeFieldInterface = props => {
-  import.meta.css = [css$J, "@jsenv/navi/src/control/input/input_range.jsx"];
+  import.meta.css = [css$K, "@jsenv/navi/src/control/input/input_range.jsx"];
   const {
     ref
   } = props;
@@ -60453,7 +60481,7 @@ Input.UI = {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$I = /* css */`.navi_textarea {
+const css$J = /* css */`.navi_textarea {
   & textarea {
     min-height: calc(var(--textarea-min-rows, 1.5) * 1lh);
     max-height: calc(var(--textarea-max-rows, 99999) * 1lh);
@@ -60540,7 +60568,7 @@ const Textarea = ({
   ...props
 }) => {
   installInputCss();
-  import.meta.css = [css$I, "@jsenv/navi/src/control/input/textarea.jsx"];
+  import.meta.css = [css$J, "@jsenv/navi/src/control/input/textarea.jsx"];
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
   usePlaceholderHeight(props.ref, props.placeholder);
@@ -60622,7 +60650,7 @@ const TextareaCharCount = ({
   maxLength,
   ...rest
 }) => {
-  import.meta.css = [css$I, "@jsenv/navi/src/control/input/textarea.jsx"];
+  import.meta.css = [css$J, "@jsenv/navi/src/control/input/textarea.jsx"];
   const resolvedValue = signal ? signal.value : value;
   const length = typeof resolvedValue === "string" ? resolvedValue.length : 0;
   return jsx(Box, {
@@ -60732,7 +60760,7 @@ const RealTextarea = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$H = /* css */`.navi_editable_wrapper {
+const css$I = /* css */`.navi_editable_wrapper {
   --inset-top: 0px;
   --inset-right: 0px;
   --inset-bottom: 0px;
@@ -60902,7 +60930,7 @@ const useEditionController = () => {
  *   Every other unknown prop goes to the field itself, styling props included.
  */
 const Editable = props => {
-  import.meta.css = [css$H, "@jsenv/navi/src/control/edition/editable.jsx"];
+  import.meta.css = [css$I, "@jsenv/navi/src/control/edition/editable.jsx"];
   let {
     children,
     action,
@@ -61513,7 +61541,7 @@ const useRequestSubmitThroughGates = ref => {
 // };
 
 installImportMetaCssBuild(import.meta);
-const css$G = /* css */`.navi_group {
+const css$H = /* css */`.navi_group {
   --group-border-width: var(--navi-control-border-width);
 
   & > :not([navi-out-of-flow]) {
@@ -61574,7 +61602,7 @@ const Group = ({
   vertical = row,
   ...props
 }) => {
-  import.meta.css = [css$G, "@jsenv/navi/src/control/group.jsx"];
+  import.meta.css = [css$H, "@jsenv/navi/src/control/group.jsx"];
   return jsx(Box, {
     baseClassName: "navi_group",
     "data-vertical": vertical ? "" : undefined
@@ -61706,7 +61734,7 @@ const unfreezeSize = (el) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$F = /* css */`@property --slide-travel-progress {
+const css$G = /* css */`@property --slide-travel-progress {
   syntax: "<number>";
   inherits: true;
   initial-value: 0;
@@ -62193,7 +62221,7 @@ const SlideContainer = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$F, "@jsenv/navi/src/layout/slide_container.jsx"];
+  import.meta.css = [css$G, "@jsenv/navi/src/layout/slide_container.jsx"];
   const debugFocus = useDebugFocus();
   const trackRef = useRef();
   // The box itself: it is what takes the keyboard when what is on screen holds
@@ -65544,6 +65572,1269 @@ const renderSafe = (value) => {
   return String(value);
 };
 
+installImportMetaCssBuild(import.meta);
+const PopupGroupContext = createContext(null);
+
+/**
+ * What a press outside a popup of the group does, read against a wall that is
+ * always up: "ignore" closes, as "close" does. For a press the group does not
+ * see itself, on a region the popup declared outside
+ * (handlePressOnOutsideRegion).
+ */
+const readPressOutsideInPopupGroup = pressOutside => pressOutside === "ignore" ? "close" : pressOutside;
+
+// The groups shown modal right now, for the popup around one of them to close
+// it first (see closePopupGroupsInside).
+const engagedGroupSet = new Set();
+
+/**
+ * Takes the groups engaged inside `popupElement` down, with what they have
+ * open, before that popup gives the focus back: while a group is the topmost
+ * modal everything else is inert, the element the focus goes back to
+ * included. Called by Dialog and Popover as they close.
+ */
+const closePopupGroupsInside = (popupElement, closeEvent) => {
+  for (const group of engagedGroupSet) {
+    if (popupElement.contains(group.getElement())) {
+      group.closeEverything(closeEvent);
+    }
+  }
+};
+const css$F = /* css */`@property --x-popup-group-top {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-popup-group-left {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-popup-group-width {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-popup-group-height {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-popup-group-padding {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-popup-group-clip {
+  syntax: "*";
+  inherits: false
+}
+
+@layer navi {
+  .navi_popup_group {
+    --backdrop-background: var(--navi-backdrop-close-background);
+    --backdrop-filter: var(--navi-backdrop-close-backdrop-filter);
+    width: auto;
+    max-width: none;
+    height: auto;
+    max-height: none;
+    color: inherit;
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flow-root;
+    position: static;
+    inset: auto;
+    overflow: visible;
+  }
+}
+
+.navi_popup_group:modal {
+  inset: auto !important;
+  top: var(--x-popup-group-top) !important;
+  left: var(--x-popup-group-left) !important;
+  box-sizing: border-box !important;
+  width: var(--x-popup-group-width) !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: var(--x-popup-group-height) !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  padding: var(--x-popup-group-padding) !important;
+  clip-path: var(--x-popup-group-clip, none) !important;
+  margin: 0 !important;
+  position: fixed !important;
+}
+
+.navi_popup_group[data-backdrop-variant="lift"] {
+  --backdrop-background: var(--navi-backdrop-lift-background);
+  --backdrop-filter: var(--navi-backdrop-lift-backdrop-filter);
+}
+
+.navi_popup_group[data-backdrop-variant="discrete"] {
+  --backdrop-background: var(--navi-backdrop-discrete-background);
+  --backdrop-filter: var(--navi-backdrop-discrete-backdrop-filter);
+}
+
+.navi_popup_group[data-backdrop-variant="invisible"] {
+  --backdrop-background: transparent;
+  --backdrop-filter: none;
+}
+
+.navi_popup_group::backdrop {
+  background: var(--backdrop-background);
+  opacity: 1;
+  backdrop-filter: var(--backdrop-filter);
+  transition: opacity var(--popup-animation-duration, .18s) ease;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+.navi_popup_group[navi-transitions-off]::backdrop {
+  transition: none;
+}
+
+:is(:root[data-navi-route-transition] .navi_popup_group:modal, :root[data-navi-route-travel] .navi_popup_group:modal) {
+  view-transition-class: navi_popup;
+}
+
+@supports (view-transition-name: match-element) {
+  :root[data-navi-route-transition]:not([data-navi-route-transition-target="area"]) .navi_popup_group:modal {
+    view-transition-name: match-element;
+  }
+
+  :root[data-navi-route-travel] .navi_popup_group:modal {
+    view-transition-name: match-element;
+  }
+}
+`;
+
+/**
+ * The box around popups that hand over to each other: score cells, a menu bar,
+ * a toolbar. Being inside it is what makes a popup and a button peers: no name
+ * to give.
+ *
+ * While one of its popups is open, the group is shown modal where it stands:
+ * what it holds stays lit and live, the rest of the screen is behind its wall,
+ * and a press on another of its popups' triggers closes the open one and opens
+ * that one in the same press. Its popups draw no wall of their own (their
+ * backdrop props are not read), and a Dialog in it is never modal. The page
+ * behind stays still while one of its Popovers or Dialogs is open; a callout
+ * of it lets the page scroll, as a callout does anywhere.
+ *
+ * Its element is a `<dialog>`, closed at rest and laid out like any box: the
+ * app styles it as it would a `<div>`. While engaged, an invisible placeholder
+ * holds its place in the page, as the element before it, marked
+ * `navi-out-of-flow` like everything navi adds to a tree. See
+ * docs/popup_backdrop.md.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   backdropVariant?: "auto" | "lift" | "discrete" | "invisible",
+ *   backdropColor?: string,
+ *   backdropFilter?: string,
+ *   themeColor?: string | false,
+ *   role?: string,
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [props.backdropVariant="auto"] -
+ *   How visible the wall is: `"auto"` is the wash a popup closing on an
+ *   outside press paints, `"lift"` the opaque blurred wall, `"discrete"` a
+ *   barely-there dim, `"invisible"` a wall that is not seen and still takes the
+ *   press.
+ * @param {string} [props.backdropColor] - The wash itself, over the tokens.
+ * @param {string} [props.backdropFilter] - What that wash does to what is
+ *   behind it.
+ * @param {string|false} [props.themeColor] - The browser's colour while the
+ *   wall is up (see docs/popup_backdrop.md): worked out from the wash by
+ *   default.
+ * @param {string} [props.role="group"] - A box of the page, not a dialog: the
+ *   element is a `<dialog>` for its modality alone.
+ */
+const PopupGroup = props => {
+  import.meta.css = [css$F, "@jsenv/navi/src/layout/popup_group.jsx"];
+  const {
+    backdropVariant = "auto",
+    backdropColor,
+    backdropFilter,
+    themeColor,
+    role = "group",
+    children,
+    ...rest
+  } = props;
+  const group = useMemo(createPopupGroup, []);
+  group.themeColor = themeColor;
+  // Unmounted or parked while engaged: a modal left open with its tree gone
+  // keeps the whole document inert.
+  useLayoutEffect(() => {
+    return () => {
+      group.disengage({
+        leavingTree: true
+      });
+    };
+  }, [group]);
+  return jsx(Box, {
+    as: "dialog",
+    ...rest,
+    // A callback ignoring null: a Suspense park nulls an object ref and
+    // gives it back only when its identity changes.
+    ref: group.captureElement,
+    baseClassName: "navi_popup_group",
+    "navi-popup-group": "",
+    role: role,
+    "data-backdrop-variant": backdropVariant === "auto" ? undefined : backdropVariant,
+    backdropColor: backdropColor,
+    backdropFilter: backdropFilter,
+    styleCSSVars: POPUP_GROUP_STYLE_CSS_VARS,
+    children: jsx(PopupGroupContext.Provider, {
+      value: group,
+      children: children
+    })
+  });
+};
+const POPUP_GROUP_STYLE_CSS_VARS = {
+  backdropColor: "--backdrop-background",
+  backdropFilter: "--backdrop-filter"
+};
+
+// How long after the release a press that closed a popup may still bring the
+// click that ends it: the compatibility events of a tap come after touchend,
+// in a task of their own.
+const END_OF_PRESS_SAFETY_MS = 1000;
+const createPopupGroup = () => {
+  let groupEl = null;
+  // Every popup rendered in the group, open or not: "is one of them open" is
+  // their own decision, read before any of them shows (a lifting dialog shows a
+  // frame after it decided).
+  const memberControllerSet = new Set();
+  // The popups of the group that are open, as their openEffect described
+  // them, the last one to open last. One at a time, except when the open one
+  // refuses to close as another opens (a value it cannot note): it is kept
+  // here, so the group can still close it.
+  const openMemberMap = new Map();
+  let engagement = null;
+  const noMemberOpen = () => {
+    for (const openController of memberControllerSet) {
+      if (openController.opened) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const getOpenMembers = () => {
+    const openMembers = [];
+    for (const [openController, member] of openMemberMap) {
+      if (openController.opened) {
+        openMembers.push(member);
+      } else {
+        openMemberMap.delete(openController);
+      }
+    }
+    return openMembers;
+  };
+  // The page behind is held still unless what is open is a callout, which
+  // lets it scroll as it does anywhere (its closeByScroll answers that
+  // scroll). Kept as it is while nothing is open: the wall stays up until the
+  // press that closed the last popup ends.
+  const followScrollLock = () => {
+    const openMembers = getOpenMembers();
+    if (openMembers.length === 0) {
+      return;
+    }
+    engagement.followScrollLock(openMembers.some(openMember => !openMember.pageScrolls));
+  };
+  const group = {
+    themeColor: undefined,
+    captureElement: element => {
+      if (element) {
+        groupEl = element;
+      }
+    },
+    getElement: () => groupEl,
+    register: openController => {
+      memberControllerSet.add(openController);
+      return () => {
+        memberControllerSet.delete(openController);
+      };
+    },
+    /**
+     * Called by a popup of the group as it opens, before it shows itself.
+     * `member`: { openController, popupElement, pressOutside, event,
+     * pageScrolls, popupId }. `popupElement` is read at each press, so a
+     * member whose element is drawn after it engaged (a callout) passes a
+     * getter. `pageScrolls`: the page behind may scroll while it is open.
+     * `popupId`: the id a data-navi-popup-inside names it by, when it is not
+     * the popup element's own.
+     */
+    engage: member => {
+      // One popup of the group at a time. A press on a peer has closed the
+      // open one already (see armPressArbiter): this one opened from the
+      // keyboard or from code.
+      for (const openMember of getOpenMembers()) {
+        if (openMember.openController === member.openController) {
+          continue;
+        }
+        if (openMember.openController.requestClose(member.event)) {
+          openMemberMap.delete(openMember.openController);
+        }
+      }
+      openMemberMap.delete(member.openController);
+      openMemberMap.set(member.openController, member);
+      if (engagement) {
+        engagement.cancelPendingCheck();
+      } else {
+        if (!groupEl || !groupEl.isConnected) {
+          return;
+        }
+        engagement = engageGroup(groupEl, group, {
+          silent: Boolean(member.event?.detail?.silent)
+        });
+        engagedGroupSet.add(group);
+      }
+      followScrollLock();
+    },
+    /**
+     * Called by a popup of the group as it closes. Whether the group goes back
+     * into the page is decided once nothing of the group is open — at the end
+     * of the press that closed it when a press did, since that same press may
+     * be opening a peer.
+     */
+    release: (openController, closeEvent) => {
+      openMemberMap.delete(openController);
+      if (!engagement) {
+        return;
+      }
+      followScrollLock();
+      if (findEvent(closeEvent, ["pointerdown", "mousedown", "pointerup", "mouseup", "click"])) {
+        if (findEvent(closeEvent, "click") || !engagement.pressInFlight) {
+          // Closed from inside the click, or after the press ended (a lifting
+          // Dialog closes in a view transition's update callback, a frame
+          // later): what is left of the press is over once this task is.
+          engagement.checkAfterTask();
+          return;
+        }
+        engagement.pressClosed = true;
+        return;
+      }
+      // Not a press (Escape, a command, code): a peer opening in the same
+      // stack, from the keyboard, is the only thing to wait for.
+      engagement.checkAfterMicrotask();
+    },
+    getOpenMember: () => {
+      const openMembers = getOpenMembers();
+      return openMembers.length ? openMembers[openMembers.length - 1] : null;
+    },
+    disengageIfNothingOpen: () => {
+      if (engagement && noMemberOpen()) {
+        group.disengage();
+      }
+    },
+    // Nothing of the group may stay open over a page that is live again.
+    closeEverything: closeEvent => {
+      for (const openMember of getOpenMembers()) {
+        openMember.openController.close(closeEvent);
+      }
+      openMemberMap.clear();
+      group.disengage();
+    },
+    disengage: ({
+      leavingTree = false
+    } = {}) => {
+      if (!engagement) {
+        return;
+      }
+      const leavingEngagement = engagement;
+      engagement = null;
+      engagedGroupSet.delete(group);
+      leavingEngagement.cleanup({
+        leavingTree
+      });
+    }
+  };
+  return group;
+};
+const engageGroup = (groupEl, group, {
+  silent
+}) => {
+  // Everything read before anything is written.
+  const rect = groupEl.getBoundingClientRect();
+  const groupStyle = getComputedStyle(groupEl);
+  // Copied out: the style is live, and shown modal the group has its margins
+  // and its bounds forced.
+  const {
+    marginLeft,
+    marginRight,
+    minWidth,
+    maxWidth
+  } = groupStyle;
+  const ancestorClip = readAncestorClip(groupEl, groupStyle);
+  const baselineDescent = readBaselineDescent(groupEl, groupStyle, rect);
+  const themeColor = readPopupThemeColor(groupEl, group.themeColor);
+  const focusedBefore = document.activeElement;
+  const focusWasInGroup = Boolean(focusedBefore) && focusedBefore !== groupEl && groupEl.contains(focusedBefore);
+  const ringBefore = Boolean(focusedBefore?.matches?.(":focus-visible"));
+  const {
+    scrollTop,
+    scrollLeft
+  } = groupEl;
+  // A gesture on a box fixed in the top layer goes to the viewport: only a
+  // place that scrolls with the viewport moves under it.
+  const placeScroller = getScrollContainer(groupEl);
+  const placeScrollsWithViewport = (placeScroller === document.scrollingElement ||
+  // Reported as a scroll container on an app setting `body {
+  // overflow-x: hidden }` (its computed overflow-y turns auto), it never
+  // scrolls itself: the viewport does.
+  placeScroller === document.body && bodyOverflowIsTheViewports()) && !findSelfOrAncestorFixedPosition(groupEl);
+  const placeholder = createPlaceholder(groupStyle, rect, baselineDescent);
+  groupEl.before(placeholder);
+  groupEl.style.setProperty("--x-popup-group-padding", `${groupStyle.paddingTop} ${groupStyle.paddingRight} ${groupStyle.paddingBottom} ${groupStyle.paddingLeft}`);
+  const visibleBox = writePlacement(groupEl, rect, ancestorClip);
+  if (silent) {
+    groupEl.setAttribute("navi-transitions-off", "");
+  }
+  // showModal() runs the dialog focusing steps: it focuses the first element
+  // marked autofocus, or else the first focusable the group holds — and
+  // scrolls the group's own scroller to it. Pointed at what already has the
+  // focus, or at the group itself, with any other mark set aside for the
+  // call, so nothing moves. A native autofocus is otherwise never used (see
+  // the focus skill): this one exists for the length of the call, to steer
+  // the browser's own pick, not to transfer anything.
+  const autofocusTarget = focusWasInGroup ? focusedBefore : groupEl;
+  const autofocusWasSet = autofocusTarget.hasAttribute("autofocus");
+  const autofocusSetAside = focusWasInGroup ? [...groupEl.querySelectorAll("[autofocus]")].filter(element => element !== autofocusTarget) : [];
+  for (const element of autofocusSetAside) {
+    element.removeAttribute("autofocus");
+  }
+  if (!autofocusWasSet) {
+    autofocusTarget.setAttribute("autofocus", "");
+  }
+  try {
+    groupEl.showModal();
+  } catch (error) {
+    placeholder.remove();
+    clearPlacement(groupEl);
+    groupEl.removeAttribute("navi-transitions-off");
+    throw error;
+  } finally {
+    if (!autofocusWasSet) {
+      autofocusTarget.removeAttribute("autofocus");
+    }
+    for (const element of autofocusSetAside) {
+      element.setAttribute("autofocus", "");
+    }
+  }
+  // Measured once the group has left the flow, where a parent sized by its
+  // content no longer counts it. Only a box given its width by what holds it
+  // goes on following that width (a rotation while engaged); one sized by its
+  // content, bounded by a min or max width the placeholder does not carry, or
+  // placed by margins read here as px (auto ones, percentages), is held at
+  // the width it has.
+  const placeholderWidth = placeholder.getBoundingClientRect().width;
+  if (parseFloat(marginLeft) !== 0 || parseFloat(marginRight) !== 0 || maxWidth !== "none" || minWidth !== "auto" && parseFloat(minWidth) !== 0 || placeholderWidth < rect.width - 0.5 || placeholderWidth > rect.width + 0.5) {
+    placeholder.style.width = `${rect.width}px`;
+  }
+  // Where the engine focused something else anyway.
+  if (groupEl.scrollTop !== scrollTop) {
+    groupEl.scrollTop = scrollTop;
+  }
+  if (groupEl.scrollLeft !== scrollLeft) {
+    groupEl.scrollLeft = scrollLeft;
+  }
+  if (focusWasInGroup && document.activeElement !== focusedBefore) {
+    moveFocusTo(focusedBefore, {
+      focusVisible: ringBefore
+    });
+  }
+  // What showModal() left focused when the focus came from outside: that is
+  // the browser's pick, not a restore of navi's, at the close (see cleanup).
+  const focusLeftByShowModal = focusWasInGroup ? null : document.activeElement;
+  if (silent) {
+    // The wall's starting style is resolved with no transition to play from
+    // it; giving the transition back afterwards changes no value, so nothing
+    // fades.
+    groupEl.getBoundingClientRect();
+    groupEl.removeAttribute("navi-transitions-off");
+  }
+  // Top-layer order is the order things were shown in: whatever was already
+  // open inside the group (a callout on a peer) is now under it, and goes back
+  // on top.
+  for (const topLayerEl of groupEl.querySelectorAll(":popover-open")) {
+    topLayerEl.hidePopover();
+    topLayerEl.showPopover();
+  }
+  const [cleanups, addCleanup] = createCleanupList();
+  const engagement = {
+    // From a press's pointerdown to its click (or its pointercancel).
+    pressInFlight: false,
+    // A popup closed during the press in flight: its end decides.
+    pressClosed: false,
+    visibleBox,
+    cleanup: ({
+      leavingTree
+    }) => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+      clearPlacement(groupEl);
+      placeholder.remove();
+      if (leavingTree) {
+        // Closed once the commit is over, as a Dialog leaving the tree is (see
+        // its close cleanup): closing now would hand the focus to what held it
+        // at showModal() time, often leaving in this same commit. A park
+        // takes the group out of the top layer and leaves its `open`
+        // attribute, which the reveal would show.
+        queueMicrotask(() => {
+          if (groupEl.open) {
+            groupEl.close();
+          }
+        });
+        return;
+      }
+      // close() hands the focus back to whatever held it at showModal() time
+      // (focusedBefore), undoing where a popup of the group, or the user, put
+      // it since. Unless no popup moved the focus since showModal() did, that
+      // element is made no focus target for the call, so the focus stays where
+      // it is: inert — or, when the focus is inside it (the sheet around the
+      // popover around the group, focused by a press on its blank), without
+      // its tabindex, inert taking the focus with it. A <dialog> stays
+      // focusable without one: around a Dialog sheet, close() focuses it and
+      // the moveFocusTo below brings the focus back.
+      const focusedBeforeClose = document.activeElement;
+      const ringBeforeClose = Boolean(focusedBeforeClose?.matches?.(":focus-visible"));
+      const focusMovedSinceShowModal = focusedBeforeClose && focusedBeforeClose !== document.body && focusedBeforeClose !== groupEl && focusedBeforeClose !== focusLeftByShowModal && focusedBeforeClose.isConnected;
+      const keepsFocusWhereItIs = focusMovedSinceShowModal && focusedBefore && focusedBefore !== focusedBeforeClose && focusedBefore !== document.body && focusedBefore.isConnected;
+      const holdsFocusInside = keepsFocusWhereItIs && focusedBefore.contains(focusedBeforeClose);
+      const madeInert = keepsFocusWhereItIs && !holdsFocusInside && !focusedBefore.inert;
+      const tabindexSetAside = holdsFocusInside && focusedBefore.tagName !== "DIALOG" ? focusedBefore.getAttribute("tabindex") : null;
+      if (madeInert) {
+        focusedBefore.inert = true;
+      }
+      if (tabindexSetAside !== null) {
+        focusedBefore.removeAttribute("tabindex");
+      }
+      try {
+        if (groupEl.open) {
+          groupEl.close();
+        }
+      } finally {
+        if (madeInert) {
+          focusedBefore.inert = false;
+        }
+        if (tabindexSetAside !== null) {
+          focusedBefore.setAttribute("tabindex", tabindexSetAside);
+        }
+      }
+      // Where the engine moved it anyway (an element focusable without a
+      // tabindex).
+      if (focusMovedSinceShowModal && document.activeElement !== focusedBeforeClose) {
+        moveFocusTo(focusedBeforeClose, {
+          focusVisible: ringBeforeClose
+        });
+      }
+    }
+  };
+  let pendingCheck = null;
+  engagement.cancelPendingCheck = () => {
+    if (pendingCheck) {
+      pendingCheck.cancel();
+      pendingCheck = null;
+    }
+  };
+  engagement.checkAfterTask = (delay = 0) => {
+    engagement.cancelPendingCheck();
+    const timeout = setTimeout(() => {
+      pendingCheck = null;
+      group.disengageIfNothingOpen();
+    }, delay);
+    pendingCheck = {
+      cancel: () => {
+        clearTimeout(timeout);
+      }
+    };
+  };
+  engagement.checkAfterMicrotask = () => {
+    engagement.cancelPendingCheck();
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) {
+        return;
+      }
+      pendingCheck = null;
+      group.disengageIfNothingOpen();
+    });
+    pendingCheck = {
+      cancel: () => {
+        cancelled = true;
+      }
+    };
+  };
+  addCleanup(engagement.cancelPendingCheck);
+  addCleanup(armPressArbiter(groupEl, group, engagement));
+  addCleanup(followPlaceholder(groupEl, placeholder, engagement));
+  // A wheel or a finger on the wall would scroll the page behind, and with it
+  // the place the group is pinned to. On the wall means outside what is shown
+  // of the group, which a clip can make less than its box. Let go for a
+  // callout only where the group's place scrolls with the viewport: in a
+  // sheet, a list scrolling on its own, a fixed bar, the gesture would scroll
+  // the document behind and never the box the group stands in.
+  let releaseScrollLock = null;
+  const letGoOfScroll = () => {
+    if (releaseScrollLock) {
+      releaseScrollLock();
+      releaseScrollLock = null;
+    }
+  };
+  engagement.followScrollLock = openMemberHoldsPage => {
+    if (!openMemberHoldsPage && placeScrollsWithViewport) {
+      letGoOfScroll();
+      return;
+    }
+    if (!releaseScrollLock) {
+      releaseScrollLock = trapScrollInside(groupEl, {
+        backdrop: true,
+        getElementBox: () => engagement.visibleBox,
+        // The group is no scroll container: shown fixed in the top layer, a
+        // gesture over what it holds, or a scroll key pressed in it, would go
+        // straight on to the page.
+        containInside: true
+      });
+    }
+  };
+  addCleanup(letGoOfScroll);
+  if (themeColor !== "none") {
+    addCleanup(pushPopupThemeColor({
+      themeColor,
+      backdropColor: readBackdropColor(groupEl)
+    }));
+  }
+
+  // Escape and the back gesture reach the topmost modal, which is the group:
+  // they are the open popup's to answer, as they would be with focus in it.
+  // Escape is answered at its keydown, before it becomes the browser's close
+  // request: a cancel can be prevented only while the page has a user
+  // activation to spend, and Escape gives none — at the second one the
+  // browser closes the group itself, whatever the open popup said. A keydown
+  // prevented is no close request at all. Left to what the key was pressed in
+  // when that uses it (a search field clearing itself), as the open popup's
+  // own shortcut leaves it.
+  const onKeyDown = keydownEvent => {
+    if (keydownEvent.key !== "Escape" || keydownEvent.defaultPrevented) {
+      // Answered already: by the open popup's own shortcut, when the focus is
+      // in it.
+      return;
+    }
+    if (keydownEvent.target !== groupEl) {
+      const defaultAction = getKeyboardEventDefaultAction(keydownEvent);
+      if (defaultAction && defaultAction !== "dismiss") {
+        return;
+      }
+    }
+    const openMember = group.getOpenMember();
+    if (!openMember) {
+      return;
+    }
+    // requestClose prevents the keydown, whether the popup closes or refuses.
+    openMember.openController.requestClose(keydownEvent, {
+      isCancel: true
+    });
+  };
+  groupEl.addEventListener("keydown", onKeyDown);
+  addCleanup(() => {
+    groupEl.removeEventListener("keydown", onKeyDown);
+  });
+  // What still reaches the group as a close request: the back gesture, an
+  // Escape with nothing of the group open.
+  const onCancel = cancelEvent => {
+    if (cancelEvent.target !== cancelEvent.currentTarget) {
+      // A file input inside the group cancelling its own picker.
+      return;
+    }
+    cancelEvent.preventDefault();
+    const openMember = group.getOpenMember();
+    if (openMember) {
+      openMember.openController.requestClose(cancelEvent, {
+        isCancel: true
+      });
+      return;
+    }
+    group.disengageIfNothingOpen();
+  };
+  groupEl.addEventListener("cancel", onCancel);
+  addCleanup(() => {
+    groupEl.removeEventListener("cancel", onCancel);
+  });
+  // The browser may close the group itself: a close request with no user
+  // activation left to spend (a second back gesture) ignores preventDefault.
+  const onNativeClose = closeEvent => {
+    if (groupEl.open) {
+      // Queued by an earlier engagement's close(): the group has been shown
+      // modal again since, and nothing closed it.
+      return;
+    }
+    group.closeEverything(closeEvent);
+  };
+  groupEl.addEventListener("close", onNativeClose);
+  addCleanup(() => {
+    groupEl.removeEventListener("close", onNativeClose);
+  });
+  // What holds the group closing (the sheet it is in) does not close the
+  // group: a modal left open in a closed dialog keeps the whole document inert
+  // with nothing on screen to dismiss. A navi popup closes the groups inside it
+  // itself, before it gives the focus back (closePopupGroupsInside); this is
+  // for any other.
+  const openableAncestor = closestOpenableAncestor(groupEl);
+  if (openableAncestor) {
+    addCleanup(observeAncestorOpenState(openableAncestor, ({
+      isOpen
+    }) => {
+      if (isOpen) {
+        return;
+      }
+      group.closeEverything(new CustomEvent("popup_group_ancestor_close", {
+        detail: {}
+      }));
+    }));
+  }
+  return engagement;
+};
+
+/**
+ * Hears every press while the group is engaged, for the popup of the group
+ * that is open. A press outside that popup closes it, per its pressOutside,
+ * and goes on to what it landed on: another popup's trigger opens it, a button
+ * does its thing. A press on the wall — the ::backdrop reports the group as its
+ * target, outside its box — closes and reaches nothing else, everything behind
+ * being inert.
+ *
+ * Decided on the press's mousedown, the event the page acts on: on a touch
+ * screen it is synthesized at touchend and hit-tested again, with the group
+ * still up, so a finger that scrolled the group (pointercancel, no mousedown)
+ * closes nothing. A pointerdown cancelled downstream (a drag source) brings no
+ * mousedown: its click decides instead. A popup that captures the outside is
+ * answered at the pointerdown itself: nothing of that press may reach a peer.
+ */
+const armPressArbiter = (groupEl, group, engagement) => {
+  let press = null;
+  const isOnWall = event => {
+    if (event.target !== groupEl) {
+      return false;
+    }
+    const {
+      left,
+      top,
+      right,
+      bottom
+    } = engagement.visibleBox;
+    return event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom;
+  };
+  const spend = event => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  // The open popup this press is outside of, or null.
+  const findMemberPressedOutside = event => {
+    const openMember = group.getOpenMember();
+    if (!openMember) {
+      return null;
+    }
+    if (openedDuringThisPress(openMember.openController)) {
+      // The release of the press that opened it.
+      return null;
+    }
+    const {
+      target
+    } = event;
+    const {
+      popupElement
+    } = openMember;
+    if (popupElement.contains(target)) {
+      return null;
+    }
+    if (isDeclaredInsidePopup(target, openMember.popupId || popupElement.id)) {
+      return null;
+    }
+    // In front of the open popup: something open inside the group that is
+    // neither that popup nor around it (a callout on a peer).
+    const layerUnderPointer = target.closest?.(':popover-open, dialog[open]:not([navi-popup-group]), [navi-control="popover"][aria-expanded="true"]');
+    if (layerUnderPointer && !layerUnderPointer.contains(popupElement) && !popupElement.contains(layerUnderPointer)) {
+      return null;
+    }
+    return openMember;
+  };
+  const readPressOutside = openMember => readPressOutsideInPopupGroup(openMember.pressOutside);
+  const arbitrate = event => {
+    const openMember = findMemberPressedOutside(event);
+    if (!openMember) {
+      return;
+    }
+    const pressOutside = readPressOutside(openMember);
+    if (pressOutside === "capture") {
+      spend(event);
+      press.spendClick = true;
+      return;
+    }
+    // A press on a peer goes on to it, so the close is told the pointerdown:
+    // told the mousedown, the focus restore cancels that mousedown, and the
+    // peer's own reaction to it with it (a picker opening at mousedown).
+    let closeEvent;
+    if (isOnWall(event)) {
+      closeEvent = event;
+    } else if (event.type === "click" && press.pointerdown) {
+      // Decided at the click (the pointerdown was cancelled): the close is
+      // told both, so what holds a reopen back for this press knows the press
+      // ends with this very click.
+      closeEvent = new CustomEvent("popup_group_press_outside", {
+        detail: {
+          event,
+          eventChain: [press.pointerdown, event]
+        }
+      });
+    } else {
+      closeEvent = press.pointerdown || event;
+    }
+    const closed = openMember.openController.requestClose(closeEvent, {
+      isCancel: pressOutside === "cancel"
+    });
+    if (!closed) {
+      // The popup refuses to be left (a value it cannot note): the press must
+      // not go on to open a peer next to it.
+      spend(event);
+      press.spendClick = true;
+    }
+  };
+  const onPointerDown = pointerDownEvent => {
+    if (engagement.pressClosed) {
+      // The press that closed the last popup ended without a click (a gesture
+      // swallowed it): this one is a new press.
+      engagement.pressClosed = false;
+      group.disengageIfNothingOpen();
+      if (!groupEl.open) {
+        return;
+      }
+    }
+    press = {
+      pointerdown: pointerDownEvent,
+      mousedown: null,
+      spendClick: false
+    };
+    if (pointerDownEvent.button !== 0) {
+      return;
+    }
+    engagement.pressInFlight = true;
+    const openMember = findMemberPressedOutside(pointerDownEvent);
+    if (openMember && readPressOutside(openMember) === "capture") {
+      // Cancelling the pointerdown also cancels the mousedown it would bring.
+      spend(pointerDownEvent);
+      press.spendClick = true;
+    }
+  };
+  const onMouseDown = mouseDownEvent => {
+    if (mouseDownEvent.button !== 0) {
+      return;
+    }
+    if (!press) {
+      press = {
+        pointerdown: null,
+        mousedown: null,
+        spendClick: false
+      };
+    }
+    engagement.pressInFlight = true;
+    press.mousedown = mouseDownEvent;
+    if (press.spendClick) {
+      spend(mouseDownEvent);
+      return;
+    }
+    arbitrate(mouseDownEvent);
+  };
+  const onClick = clickEvent => {
+    if (!isPressDrivenClick(clickEvent)) {
+      // A keyboard activation or a click() from code: not the click of the
+      // press in flight, which the next pointerdown replaces anyway.
+      return;
+    }
+    if (press?.spendClick) {
+      spend(clickEvent);
+    } else if (press && !press.mousedown) {
+      arbitrate(clickEvent);
+    }
+    press = null;
+    engagement.pressInFlight = false;
+    if (engagement.pressClosed) {
+      engagement.pressClosed = false;
+      // After the click's dispatch: a peer it opens counts.
+      engagement.checkAfterTask();
+    }
+  };
+  const onPointerUp = () => {
+    if (engagement.pressClosed) {
+      engagement.checkAfterTask(END_OF_PRESS_SAFETY_MS);
+    }
+  };
+  const onPointerCancel = () => {
+    press = null;
+    engagement.pressInFlight = false;
+    if (engagement.pressClosed) {
+      engagement.pressClosed = false;
+      engagement.checkAfterTask();
+    }
+  };
+  const listeners = [["pointerdown", onPointerDown], ["mousedown", onMouseDown], ["click", onClick], ["pointerup", onPointerUp], ["pointercancel", onPointerCancel]];
+  for (const [type, listener] of listeners) {
+    document.addEventListener(type, listener, {
+      capture: true
+    });
+  }
+  return () => {
+    for (const [type, listener] of listeners) {
+      document.removeEventListener(type, listener, {
+        capture: true
+      });
+    }
+  };
+};
+
+// The group follows the place it holds in the page: a scroll of what holds it,
+// the viewport resizing (a keyboard, a rotation), the page reflowing around
+// it, a popup it is in being placed again. Its own scroll moves nothing.
+const followPlaceholder = (groupEl, placeholder, engagement) => {
+  const [cleanups, addCleanup] = createCleanupList();
+  // An ancestor's movement may end after this engagement did, and the group a
+  // later one engaged is the same element.
+  let disposed = false;
+  addCleanup(() => {
+    disposed = true;
+  });
+  const update = () => {
+    if (disposed) {
+      return;
+    }
+    const rect = placeholder.getBoundingClientRect();
+    const ancestorClip = readAncestorClip(placeholder, getComputedStyle(placeholder));
+    engagement.visibleBox = writePlacement(groupEl, rect, ancestorClip);
+  };
+  const onScroll = scrollEvent => {
+    if (scrollEvent.target === groupEl || groupEl.contains(scrollEvent.target)) {
+      return;
+    }
+    update();
+  };
+  document.addEventListener("scroll", onScroll, {
+    capture: true,
+    passive: true
+  });
+  window.addEventListener("resize", update);
+  const {
+    visualViewport
+  } = window;
+  visualViewport?.addEventListener("resize", update);
+  addCleanup(() => {
+    document.removeEventListener("scroll", onScroll, {
+      capture: true
+    });
+    window.removeEventListener("resize", update);
+    visualViewport?.removeEventListener("resize", update);
+  });
+  const resizeObserver = new ResizeObserver(update);
+  if (placeholder.parentElement) {
+    resizeObserver.observe(placeholder.parentElement);
+  }
+  addCleanup(() => {
+    resizeObserver.disconnect();
+  });
+  // A popup the group is in moves by a translate, animated, and says so only
+  // to itself (applyNewPosition): followed frame by frame while it moves, as
+  // visibleRectEffect follows it for what is anchored inside it.
+  let ancestor = closestOpenableAncestor(groupEl);
+  while (ancestor) {
+    const openableAncestor = ancestor;
+    let positionTransitionFrame = null;
+    const onPositionChange = () => {
+      update();
+    };
+    const onPositionTransition = positionTransitionEvent => {
+      cancelAnimationFrame(positionTransitionFrame);
+      const loop = () => {
+        update();
+        positionTransitionFrame = requestAnimationFrame(loop);
+      };
+      loop();
+      positionTransitionEvent.detail.onEnd(() => {
+        cancelAnimationFrame(positionTransitionFrame);
+        positionTransitionFrame = null;
+        update();
+      });
+    };
+    openableAncestor.addEventListener("navi_position_change", onPositionChange);
+    openableAncestor.addEventListener("navi_position_transition", onPositionTransition);
+    addCleanup(() => {
+      cancelAnimationFrame(positionTransitionFrame);
+      openableAncestor.removeEventListener("navi_position_change", onPositionChange);
+      openableAncestor.removeEventListener("navi_position_transition", onPositionTransition);
+    });
+    ancestor = closestOpenableAncestor(openableAncestor);
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+};
+
+// What stands in the page for the group while it is in the top layer: the same
+// outer box at the height it had, invisible, counted by nothing that skips
+// what navi puts in a tree (css_architecture.md, "Counting children").
+const createPlaceholder = (groupStyle, rect, baselineDescent) => {
+  const placeholder = document.createElement("div");
+  placeholder.setAttribute("navi-popup-group-placeholder", "");
+  placeholder.setAttribute("navi-out-of-flow", "");
+  placeholder.setAttribute("aria-hidden", "true");
+  const {
+    style
+  } = placeholder;
+  if (groupStyle.display.startsWith("inline")) {
+    style.display = "inline-block";
+  } else if (establishesFormattingContext(groupStyle)) {
+    // Such a box keeps clear of a float beside it, where a plain block slides
+    // under it.
+    style.display = "flow-root";
+  } else {
+    style.display = "block";
+  }
+  style.visibility = "hidden";
+  style.pointerEvents = "none";
+  style.boxSizing = "border-box";
+  style.height = `${rect.height}px`;
+  style.flex = "none";
+  for (const property of PLACEHOLDER_COPIED_PROPERTIES) {
+    style[property] = groupStyle[property];
+  }
+  if (baselineDescent !== null) {
+    // An empty inline box sits on its bottom edge; the group sat on its own
+    // baseline, this far above its bottom.
+    style.verticalAlign = `${-baselineDescent}px`;
+  }
+  return placeholder;
+};
+const establishesFormattingContext = style => {
+  const {
+    display,
+    overflowX,
+    overflowY,
+    contain,
+    containerType,
+    contentVisibility,
+    columnCount,
+    columnWidth
+  } = style;
+  if (display === "flow-root" || display === "flex" || display === "grid" || display === "table" || display.includes("flow-root")) {
+    return true;
+  }
+  if (overflowX !== "visible" && overflowX !== "clip" || overflowY !== "visible" && overflowY !== "clip") {
+    return true;
+  }
+  // Containment the computed `contain` does not show: a size container, a box
+  // whose content-visibility skips its content.
+  if (/\b(?:size|inline-size)\b/.test(containerType) || contentVisibility === "auto" || contentVisibility === "hidden") {
+    return true;
+  }
+  // A multi-column box.
+  if (columnCount !== "auto" || columnWidth !== "auto") {
+    return true;
+  }
+  return /\b(?:layout|paint|strict|content)\b/.test(contain);
+};
+const PLACEHOLDER_COPIED_PROPERTIES = ["position", "top", "right", "bottom", "left", "marginTop", "marginRight", "marginBottom", "marginLeft", "alignSelf", "justifySelf", "order", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "float", "verticalAlign"];
+
+// How far below the line's baseline an inline-level group on that baseline
+// reaches: what the placeholder, which has no line of its own, has to sink by.
+const readBaselineDescent = (groupEl, groupStyle, rect) => {
+  if (!groupStyle.display.startsWith("inline") || groupStyle.verticalAlign !== "baseline") {
+    return null;
+  }
+  const marginTop = parseFloat(groupStyle.marginTop) || 0;
+  const marginBottom = parseFloat(groupStyle.marginBottom) || 0;
+  const readBaselineY = insert => {
+    const probe = document.createElement("span");
+    probe.style.cssText = "display:inline-block;width:0;height:0;vertical-align:baseline";
+    insert(probe);
+    const baselineY = probe.getBoundingClientRect().bottom;
+    probe.remove();
+    return baselineY;
+  };
+  // On the group's own line, between its top and its bottom margin edge: a
+  // probe that takes no room can stay at the end of the line before it.
+  const isOnGroupLine = y => y >= rect.top - marginTop - 0.5 && y <= rect.bottom + marginBottom + 0.5;
+  let baselineY = readBaselineY(probe => groupEl.before(probe));
+  if (!isOnGroupLine(baselineY)) {
+    baselineY = readBaselineY(probe => groupEl.after(probe));
+    if (!isOnGroupLine(baselineY)) {
+      return null;
+    }
+  }
+  // Down to the margin edge: that is what an empty inline box sits on.
+  return rect.bottom + marginBottom - baselineY;
+};
+
+// Writes where the group stands and how its ancestors clip it; returns what of
+// it is on screen.
+const writePlacement = (groupEl, rect, ancestorClip) => {
+  const {
+    style
+  } = groupEl;
+  style.setProperty("--x-popup-group-top", `${rect.top}px`);
+  style.setProperty("--x-popup-group-left", `${rect.left}px`);
+  style.setProperty("--x-popup-group-width", `${rect.width}px`);
+  style.setProperty("--x-popup-group-height", `${rect.height}px`);
+  if (ancestorClip) {
+    // From the group's border box, reaching past it on a side nothing clips:
+    // what overflows the group was painted up to its ancestors' edge.
+    const toInset = distance => distance === -Infinity ? "-100vmax" : `${distance}px`;
+    style.setProperty("--x-popup-group-clip", `inset(${toInset(ancestorClip.top - rect.top)} ${toInset(rect.right - ancestorClip.right)} ${toInset(rect.bottom - ancestorClip.bottom)} ${toInset(ancestorClip.left - rect.left)})`);
+  } else {
+    style.removeProperty("--x-popup-group-clip");
+  }
+  return intersectBox(rect, ancestorClip);
+};
+const clearPlacement = groupEl => {
+  const {
+    style
+  } = groupEl;
+  style.removeProperty("--x-popup-group-top");
+  style.removeProperty("--x-popup-group-left");
+  style.removeProperty("--x-popup-group-width");
+  style.removeProperty("--x-popup-group-height");
+  style.removeProperty("--x-popup-group-padding");
+  style.removeProperty("--x-popup-group-clip");
+};
+
+// The clip the ancestors of `element` put on it, up to the first box nothing
+// around clips (a top-layer or fixed one), -Infinity/Infinity on a side
+// nothing clips — or null when nothing clips it at all.
+const readAncestorClip = (element, elementStyle) => {
+  if (elementStyle.position === "fixed") {
+    return null;
+  }
+  // Read on body, an overflow that is the viewport's clips nothing.
+  const bodyClipsNothing = bodyOverflowIsTheViewports();
+  let left = -Infinity;
+  let top = -Infinity;
+  let right = Infinity;
+  let bottom = Infinity;
+  let clipped = false;
+  // An absolutely placed box escapes the clip of every ancestor between it
+  // and its containing block: those are skipped.
+  let skipUntilContainingBlock = elementStyle.position === "absolute";
+  let ancestor = element.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    const ancestorStyle = getComputedStyle(ancestor);
+    if (skipUntilContainingBlock && !isContainingBlockForAbsolute(ancestorStyle)) {
+      ancestor = ancestor.parentElement;
+      continue;
+    }
+    skipUntilContainingBlock = false;
+    const {
+      overflowX,
+      overflowY,
+      position
+    } = ancestorStyle;
+    const overflowGoesToViewport = ancestor === document.body && bodyClipsNothing;
+    const clipsX = !overflowGoesToViewport && overflowX !== "visible";
+    const clipsY = !overflowGoesToViewport && overflowY !== "visible";
+    if (clipsX || clipsY) {
+      clipped = true;
+      const ancestorRect = ancestor.getBoundingClientRect();
+      const innerLeft = ancestorRect.left + ancestor.clientLeft;
+      const innerTop = ancestorRect.top + ancestor.clientTop;
+      if (clipsX) {
+        const innerRight = innerLeft + ancestor.clientWidth;
+        if (innerLeft > left) {
+          left = innerLeft;
+        }
+        if (innerRight < right) {
+          right = innerRight;
+        }
+      }
+      if (clipsY) {
+        const innerBottom = innerTop + ancestor.clientHeight;
+        if (innerTop > top) {
+          top = innerTop;
+        }
+        if (innerBottom < bottom) {
+          bottom = innerBottom;
+        }
+      }
+    }
+    if (position === "fixed" || ancestor.matches(":popover-open, dialog:modal")) {
+      break;
+    }
+    if (position === "absolute") {
+      skipUntilContainingBlock = true;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return clipped ? {
+    left,
+    top,
+    right,
+    bottom
+  } : null;
+};
+// The overflow of <body> is the viewport's when the root leaves its own
+// visible: body itself then neither scrolls nor clips.
+const bodyOverflowIsTheViewports = () => {
+  const rootStyle = getComputedStyle(document.documentElement);
+  return rootStyle.overflowX === "visible" && rootStyle.overflowY === "visible";
+};
+const isContainingBlockForAbsolute = style => style.position !== "static" || style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" ||
+// Prefixed alone before Safari 18.
+(style.backdropFilter ?? style.webkitBackdropFilter ?? "none") !== "none" || /\b(?:layout|paint|strict|content)\b/.test(style.contain) ||
+// Layout containment the computed `contain` does not show.
+style.contentVisibility === "auto" || /\b(?:size|inline-size)\b/.test(style.containerType) || /\b(?:transform|translate|rotate|scale|perspective|filter|backdrop-filter|contain)\b/.test(style.willChange);
+const intersectBox = (rect, clip) => {
+  let {
+    left,
+    top,
+    right,
+    bottom
+  } = rect;
+  if (clip) {
+    if (clip.left > left) {
+      left = clip.left;
+    }
+    if (clip.top > top) {
+      top = clip.top;
+    }
+    if (clip.right < right) {
+      right = clip.right;
+    }
+    if (clip.bottom < bottom) {
+      bottom = clip.bottom;
+    }
+  }
+  if (right < left) {
+    right = left;
+  }
+  if (bottom < top) {
+    bottom = top;
+  }
+  return {
+    left,
+    top,
+    right,
+    bottom
+  };
+};
+const createCleanupList = () => {
+  const cleanups = [];
+  return [cleanups, cleanup => {
+    cleanups.push(cleanup);
+  }];
+};
+
 /**
  * Where the "popover or dialog?" answer lives, for both the components that
  * decide it and the content that renders inside one.
@@ -67294,7 +68585,8 @@ const css$E = /* css */`
  *   wall is shown through the Popover API rather than `showModal()`, which is
  *   what a sheet docked to the screen's bottom edge over a still-readable map
  *   needs. What it gives up is what only a modal gets natively: the hardware
- *   back button no longer dismisses it. See docs/popup_backdrop.md.
+ *   back button no longer dismisses it. Not read inside a `<PopupGroup>`,
+ *   whose wall it is. See docs/popup_backdrop.md.
  * @param {"close"|"cancel"|"capture"|"ignore"} [props.pressOutside="close"]
  *   - `"close"` closes the dialog on an outside press, `"cancel"` closes it
  *   as a cancel (what it holds reverts, as on Escape). `"capture"`/`"ignore"`
@@ -67851,7 +69143,7 @@ const useDialogProps = props => {
     // before how it is painted (backdropVariant below). It also picks the show
     // call for layer="top": a wall is what showModal() is for, and without one
     // the dialog goes to the same top layer through the Popover API instead.
-    backdrop = true,
+    backdrop: backdropProp = true,
     // How loudly the backdrop says it is there — independent of what it
     // *does* (that's pressOutside above). "lift" is the
     // opaque wall at one end, "invisible" a wall that is not seen at the
@@ -67919,9 +69211,20 @@ const useDialogProps = props => {
   // Where it is placed, and whether there is a wall — the two questions that
   // pick the show call (see this file's top comment).
   const isTopLayer = layer === "top";
+  // Inside a <PopupGroup> the wall is the group's (see popup_group.jsx): the
+  // dialog takes the wall-less path, never showModal() — a modal dialog makes
+  // everything outside it inert, the group's other popups included.
+  const popupGroup = useContext(PopupGroupContext);
+  useLayoutEffect(() => {
+    if (!popupGroup) {
+      return undefined;
+    }
+    return popupGroup.register(openController);
+  }, [popupGroup, openController]);
+  const backdrop = backdropProp && !popupGroup;
   const isModal = isTopLayer && backdrop;
   const isTopLayerPopover = isTopLayer && !backdrop;
-  if (!backdrop && pressOutside === "capture") {
+  if (!popupGroup && !backdrop && pressOutside === "capture") {
     console.warn(`Dialog: pressOutside="capture" needs a backdrop. Absorbing a press is what a wall does, and backdrop={false} takes it away.`);
   }
   const ref = props.ref;
@@ -68158,6 +69461,14 @@ const useDialogProps = props => {
     if (!dialogEl) {
       return undefined;
     }
+    // First, so the group already stands where it stands in the top layer
+    // when this dialog shows itself above it.
+    popupGroup?.engage({
+      openController,
+      popupElement: dialogEl,
+      pressOutside,
+      event: e
+    });
 
     // Set by useOpenControllerByProps for the very first open triggered by
     // `open`/`defaultOpen` already being truthy at mount, and for an open a
@@ -68248,7 +69559,8 @@ const useDialogProps = props => {
       // A modal dialog always has its own ::backdrop; a local one has the
       // backdrop element when it renders one.
       addCleanup(trapScrollInside(dialogEl, {
-        backdrop: isModal || backdropEl
+        // A group's ::backdrop covers the page while this dialog is open.
+        backdrop: popupGroup ? true : isModal || backdropEl
       }));
     } else if (!isTopLayer) {
       // A local dialog is confined to its positioned ancestor, and so is its
@@ -68479,7 +69791,9 @@ const useDialogProps = props => {
     // file's top comment), and a local one the caller asked to leave the page
     // reachable. Active for the dialog's entire open lifetime, not just
     // mid-transition.
-    if ((isModal || !backdrop) && (pressOutside === "close" || pressOutside === "cancel")) {
+    if ((isModal || !backdrop) &&
+    // The group's wall is up, and the group hears the press itself.
+    !popupGroup && (pressOutside === "close" || pressOutside === "cancel")) {
       addCleanup(armOutsidePressClose(dialogEl, {
         openController,
         pressOutside,
@@ -68518,6 +69832,11 @@ const useDialogProps = props => {
           dialogEl.close();
         }
       };
+      if (!findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+        // Before its own focus restore: a group engaged inside it is the
+        // topmost modal, and keeps everything else inert until it goes.
+        closePopupGroupsInside(dialogEl, closeEvent);
+      }
       if (findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
         // Leaving the tree: hidden natively once the commit is over. Its
         // removal takes it out of the top layer and hands the focus to
@@ -68547,9 +69866,11 @@ const useDialogProps = props => {
       if (backdropEl) {
         backdropEl.setAttribute("aria-expanded", "false");
         disarmBackdropHideRef.current = armPointerDownOutsideClose(closeEvent, () => {
+          disarmBackdropHideRef.current = null;
           backdropEl.setAttribute("navi-hidden", "");
         });
       }
+      popupGroup?.release(openController, closeEvent);
       restoreFocus(closeEvent);
       cleanup();
       if (silent) {
@@ -68610,8 +69931,9 @@ const useDialogProps = props => {
     // there's no gap for the browser to ever paint this plain-div backdrop
     // visible before anything has actually opened it — see popover.jsx's
     // own identical prop for the full reasoning, and this file's own CSS
-    // for the rule it drives.
-    "navi-hidden": openController.openedInDom ? undefined : "",
+    // for the rule it drives. Left up while the press that closed the dialog
+    // has its click still to come, as popover.jsx's own wall is.
+    "navi-hidden": openController.openedInDom || disarmBackdropHideRef.current ? undefined : "",
     "styleCSSVars": DIALOG_STYLE_CSS_VARS,
     "animationDuration": rest.animationDuration,
     "data-press-outside": pressOutside,
@@ -68738,7 +70060,8 @@ const useDialogProps = props => {
       handlePressOnOutsideRegion(e, {
         popupEl: ref.current,
         openController,
-        pressOutside
+        // In a group, the press the group's wall would get.
+        pressOutside: popupGroup ? readPressOutsideInPopupGroup(pressOutside) : pressOutside
       });
     },
     "onKeyDown": e => {
@@ -68766,7 +70089,12 @@ const useDialogProps = props => {
       // prevented it already (see requestClose).
       e.preventDefault();
     },
-    children
+    // A popup opened from inside this one is in front of it, not a peer of
+    // it: the group stops here.
+    "children": popupGroup ? jsx(PopupGroupContext.Provider, {
+      value: null,
+      children: children
+    }) : children
   });
 
   // Outside-click handling for the wall we render ourselves. A modal's is a
@@ -69260,13 +70588,6 @@ const css$D = /* css */`
  *   is a `Popover`-level answer only for `"close"`/`"cancel"`; `"capture"` has
  *   nothing left to absorb without a wall, and `"ignore"` renders no wall anyway.
  *   See docs/popup_backdrop.md.
- * @param {string} [props.group] - The popover's peers: the triggers carrying
- *   `data-navi-popup-group` with this name. A press on one, while the popover
- *   is open, closes it and opens the peer's popup in that same press — a
- *   menu bar, where pressing another menu switches to it. The wall still
- *   takes the press (the page behind stays out of reach, hover included) and
- *   hands its click to the peer it covered. Without a wall there is nothing
- *   to ask: the press reaches the peer on its own.
  * @param {"close"|"cancel"|"capture"|"ignore"} [props.pressOutside="ignore"]
  *   - `"ignore"` (default): no backdrop at all, outside presses pass straight
  *   through. `"close"` closes the popover on an outside press, `"cancel"`
@@ -69654,7 +70975,6 @@ const usePopoverProps = props => {
     // Read at the opening, with the backdrop it would otherwise be worked out
     // from (see openEffect).
     themeColor,
-    group,
     scrollCapture,
     focusCapture,
     // "auto" (default) → the popover follows its content. "frozen" → measured
@@ -69716,8 +71036,18 @@ const usePopoverProps = props => {
   // animation={true} or "auto" always resolves to "sliding" or "scaling"
   // (see resolveAutoAnimationKind).
   const isAutoAnimation = animation === true || animation === "auto";
-  const hasBackdrop = pressOutside !== "ignore" && backdrop;
-  if (!backdrop && pressOutside === "capture") {
+
+  // Inside a <PopupGroup> the wall is the group's (see popup_group.jsx): this
+  // popover draws none, and the group decides what a press outside does.
+  const popupGroup = useContext(PopupGroupContext);
+  useLayoutEffect(() => {
+    if (!popupGroup) {
+      return undefined;
+    }
+    return popupGroup.register(openController);
+  }, [popupGroup, openController]);
+  const hasBackdrop = pressOutside !== "ignore" && backdrop && !popupGroup;
+  if (!popupGroup && !backdrop && pressOutside === "capture") {
     console.warn(`Popover: pressOutside="capture" needs a backdrop. Absorbing a press is what a wall does, and backdrop={false} takes it away — every press outside reaches the page, exactly as with "ignore".`);
   }
   // positionPopover lives in openEffect's closure — created once, when the
@@ -69781,6 +71111,14 @@ const usePopoverProps = props => {
     if (!popoverEl) {
       return undefined;
     }
+    // First, so the group already stands where it stands in the top layer
+    // when this popover reads its anchor and shows itself above it.
+    popupGroup?.engage({
+      openController,
+      popupElement: popoverEl,
+      pressOutside,
+      event: e
+    });
 
     // Set by useOpenControllerByProps for the very first open triggered by
     // `open`/`defaultOpen` already being truthy at mount — there's nothing
@@ -70068,8 +71406,9 @@ const usePopoverProps = props => {
 
     // With no backdrop of its own to catch a press, the popover hears an
     // outside one from the document and takes nothing from it: it closes, and
-    // the press goes on to whatever it landed on (armOutsidePressClose).
-    if (!hasBackdrop && (pressOutside === "close" || pressOutside === "cancel")) {
+    // the press goes on to whatever it landed on (armOutsidePressClose). Not
+    // inside a group: the group's wall is up, and the group hears the press.
+    if (!hasBackdrop && !popupGroup && (pressOutside === "close" || pressOutside === "cancel")) {
       addCleanup(armOutsidePressClose(popoverEl, {
         openController,
         pressOutside
@@ -70077,7 +71416,8 @@ const usePopoverProps = props => {
     }
     if (scrollCapture) {
       addCleanup(trapScrollInside(popoverEl, {
-        backdrop: backdropEl
+        // A group's ::backdrop covers the page while this popover is open.
+        backdrop: popupGroup ? true : backdropEl
       }));
     }
     if (focusCapture) {
@@ -70297,6 +71637,11 @@ const usePopoverProps = props => {
       // comment (openEffect above) for why hidePopover() alone isn't
       // reliably sufficient once a consumer's own CSS also sets display.
       popoverEl.setAttribute("navi-hidden", "");
+      if (!findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+        // Before its own focus restore: a group engaged inside it is the
+        // topmost modal, and keeps everything else inert until it goes.
+        closePopupGroupsInside(popoverEl, closeEvent);
+      }
       if (isTopLayer) {
         // Left to its removal when the popover leaves the tree: that hides it
         // and hands the focus to nobody, where hidePopover() hands the focus
@@ -70323,23 +71668,17 @@ const usePopoverProps = props => {
       }
       if (backdropEl) {
         backdropEl.setAttribute("aria-expanded", "false");
-        disarmBackdropHideRef.current = armPointerDownOutsideClose(closeEvent, clickEvent => {
+        disarmBackdropHideRef.current = armPointerDownOutsideClose(closeEvent, () => {
+          disarmBackdropHideRef.current = null;
           // Set regardless of isTopLayer — see openEffect's own identical
           // comment for why hidePopover() alone isn't reliably sufficient.
           backdropEl.setAttribute("navi-hidden", "");
           if (isTopLayer) {
             backdropEl.hidePopover();
           }
-          if (group && clickEvent) {
-            handWallClickToPeer(clickEvent, {
-              wallEl: backdropEl,
-              popupEl: popoverEl,
-              anchorEl: anchorElement,
-              group
-            });
-          }
         });
       }
+      popupGroup?.release(openController, closeEvent);
       restoreFocus?.(closeEvent);
 
       // pickPositionRelativeTo (visible_rect.js) writes data-position-y/x-
@@ -70418,8 +71757,11 @@ const usePopoverProps = props => {
     // Read fresh on every render (not frozen at mount), so it stays
     // correct even across a re-render that happens to occur while open —
     // see contentProps' own identical prop just below for the full
-    // reasoning (kept once, not repeated here).
-    "navi-hidden": openController.openedInDom ? undefined : "",
+    // reasoning (kept once, not repeated here). The wall outlives its popup
+    // by the press that closed it (armPointerDownOutsideClose): a render
+    // before that press's click must leave it up — a popup's owner commonly
+    // renders on its close, in a microtask the release comes after.
+    "navi-hidden": openController.openedInDom || disarmBackdropHideRef.current ? undefined : "",
     "styleCSSVars": POPUP_STYLE_CSS_VARS,
     "animationDuration": rest.animationDuration,
     "data-press-outside": pressOutside,
@@ -70517,14 +71859,20 @@ const usePopoverProps = props => {
       handlePressOnOutsideRegion(e, {
         popupEl: ref.current,
         openController,
-        pressOutside
+        // In a group, the press the group's wall would get.
+        pressOutside: popupGroup ? readPressOutsideInPopupGroup(pressOutside) : pressOutside
       });
     },
     "onKeyDown": e => {
       onKeyDown?.(e);
       onKeyDownShortcuts(e);
     },
-    children
+    // A popup opened from inside this one is in front of it, not a peer of
+    // it: the group stops here.
+    "children": popupGroup ? jsx(PopupGroupContext.Provider, {
+      value: null,
+      children: children
+    }) : children
     // onnavi_request_open/onnavi_request_close/onnavi_open_press: for the
     // uncontrolled case,
     // already arrive here as plain props via ...rest (wired by
@@ -70774,10 +72122,6 @@ const Popup = props => {
     scrollCapture,
     positionAreaFixed,
     positionAreaWhenAnchorIsInvalid,
-    // A top-layer dialog's wall is its native ::backdrop, which goes with the
-    // dialog on the press that closes it: no click is left on it to hand to a
-    // peer (see handWallClickToPeer).
-    group,
     // Dialog-only, destructured out for the same reason: forwarded below only
     // in the dialog branch, so they never reach the popover element.
     dockedOnSmallTouchScreen,
@@ -70827,7 +72171,6 @@ const Popup = props => {
     positionAreaWhenAnchorIsInvalid: positionAreaWhenAnchorIsInvalid,
     scrollCapture: scrollCapture === "popover" || scrollCapture,
     positionAreaFixed: positionAreaFixed,
-    group: group,
     className: withPropsClassName("navi_popup", className),
     expand: expand,
     expandX: expandX,
@@ -71739,7 +73082,10 @@ const PickerCustom = props => {
   }
   return renderResolver(PickerContentInsidePopup, {
     ...pickerProps,
-    mode
+    mode,
+    // What a callout's own Escape means (see PickerCalloutPopup): the bubble
+    // answers the key itself when the focus is in it.
+    escapeEffect
   });
 };
 
@@ -71854,18 +73200,14 @@ const PickerContentInsidePopup = props => {
     calloutIcon,
     calloutCloseButton,
     calloutCloseByScroll,
-    popupGroup,
+    escapeEffect,
     ...rest
   } = props;
   const isPopover = mode === "popover";
   const isCallout = mode === "callout";
   return jsx(Next, {
     "aria-haspopup": isPopover ? "listbox" : "dialog",
-    "navi-popover-mode": isPopover ? popoverMode : undefined
-    // On the trigger, whatever the mode: a peer's popup reads it off the
-    // press that lands here (see `group` in callout.js).
-    ,
-    "data-navi-popup-group": popupGroup,
+    "navi-popover-mode": isPopover ? popoverMode : undefined,
     ...rest,
     // On popupProps already (see the picker's popup assembly); they mean
     // nothing to the picker element.
@@ -71906,7 +73248,8 @@ const PickerContentInsidePopup = props => {
       // nothing, so the page looks as pressable as it did before.
       ,
       backdrop: backdrop,
-      group: popupGroup,
+      pressOutside: pressOutside,
+      escapeEffect: escapeEffect,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -71943,7 +73286,6 @@ const PickerContentInsidePopup = props => {
       backdropVariant: backdropVariant,
       backdropColor: backdropColor,
       backdropFilter: backdropFilter,
-      group: popupGroup,
       focusCapture: isPopover ? focusCapture : undefined,
       expand: isPopover ? undefined : dialogExpand,
       expandX: isPopover ? undefined : dialogExpandX,
@@ -72004,7 +73346,8 @@ const PickerCalloutPopup = ({
   closeButton,
   closeByScroll,
   backdrop,
-  group,
+  pressOutside,
+  escapeEffect,
   onnavi_request_open,
   onnavi_request_close,
   onnavi_request_confirm,
@@ -72021,6 +73364,16 @@ const PickerCalloutPopup = ({
     anchor
   });
   const children = contentMounted ? childrenProp : null;
+  // Inside a <PopupGroup> the wall is the group's (see popup_group.jsx): it
+  // decides what a press outside the callout does, and the callout spends and
+  // closes on none of its own.
+  const popupGroup = useContext(PopupGroupContext);
+  useLayoutEffect(() => {
+    if (!popupGroup) {
+      return undefined;
+    }
+    return popupGroup.register(openController);
+  }, [popupGroup, openController]);
   // Reassigned on every render, like Popover's own, so it closes over the
   // latest props.
   openController.getElement = () => pickerRef.current;
@@ -72035,6 +73388,23 @@ const PickerCalloutPopup = ({
     // picker's own input — which is where the data-callout-* attributes a
     // caller puts on the picker land, and where the callout reads them.
     const anchorElement = anchor === pickerRef ? undefined : anchor && "current" in anchor ? anchor.current : anchor;
+    // First, so the group already stands where it stands in the top layer
+    // when the callout reads its anchor and shows itself above it.
+    popupGroup?.engage({
+      openController,
+      // Drawn by the manager below, once the group stands.
+      get popupElement() {
+        return calloutManager.callout.element;
+      },
+      // What a data-navi-popup-inside names this popup by (aria-controls
+      // names it too): the dock, not the callout drawn for it.
+      popupId: id,
+      pressOutside,
+      event: openEvent,
+      // A callout never holds the page still: a scroll is its own
+      // closeByScroll's to answer.
+      pageScrolls: true
+    });
     calloutManager.addOpenToken(PICKER_CALLOUT_CONTENT_TOKEN, {
       message: host,
       // The popup a `popupTestId` names is this callout: it is the surface the
@@ -72046,8 +73416,11 @@ const PickerCalloutPopup = ({
       icon,
       closeButton,
       closeByScroll,
-      backdrop,
-      group,
+      backdrop: popupGroup ? false : backdrop,
+      closeByPressOutside: popupGroup ? false : undefined,
+      // Inside the group whatever it points at: what is not a descendant of
+      // an engaged group is inert, a bubble drawn there included.
+      containerElement: popupGroup ? pickerEl : undefined,
       anchorElement,
       // The request, chained to the press that made it: the callout reads the
       // mousedown off it to wait for the release before listening for a click
@@ -72056,10 +73429,15 @@ const PickerCalloutPopup = ({
       // Not skipped: the callout moves the focus into the picker when it is
       // elsewhere, which is what lets Escape find the callout right away.
       skipFocus: false,
+      // An Escape the callout answered itself (the focus in the bubble) means
+      // what the picker's own Escape means.
       onClose: ({
-        event
+        event,
+        reason
       }) => {
-        openController.close(event);
+        openController.close(event, {
+          isCancel: reason === "escape_key" && escapeEffect === "cancel"
+        });
       }
     });
     // A --navi-confirm said inside the callout is aimed at the callout (its
@@ -72077,9 +73455,15 @@ const PickerCalloutPopup = ({
     dock.setAttribute("aria-expanded", "true");
     return closeEvent => {
       calloutElement.removeEventListener("navi_request_confirm", forwardConfirm);
+      if (!findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+        // Before the content goes back to the dock: a group engaged in there
+        // would leave the top layer with it, its arbiter still listening.
+        closePopupGroupsInside(calloutElement, closeEvent);
+      }
       calloutManager.removeOpenToken(PICKER_CALLOUT_CONTENT_TOKEN, closeEvent);
       dock.appendChild(host);
       dock.setAttribute("aria-expanded", "false");
+      popupGroup?.release(openController, closeEvent);
     };
   };
   return (
@@ -72107,7 +73491,10 @@ const PickerCalloutPopup = ({
       children: jsx("div", {
         ref: hostRef,
         "data-picker-content": "",
-        children: children
+        children: popupGroup ? jsx(PopupGroupContext.Provider, {
+          value: null,
+          children: children
+        }) : children
       })
     })
   );
@@ -73631,7 +75018,11 @@ const css$y = /* css */`@layer navi {
       }
     }
 
-    & dialog, & [popover] {
+    & [popover] {
+      pointer-events: auto;
+    }
+
+    & dialog:not([navi-popup-group]:not(:modal)) {
       pointer-events: auto;
     }
   }
@@ -74429,7 +75820,7 @@ const css$x = /* css */`@property --list-group-label-height {
   background: var(--list-background-color);
 }
 
-:where([popover], dialog) > .navi_list_container, .navi_list_container[popover] {
+:where([popover], dialog:not([navi-popup-group])) > .navi_list_container, .navi_list_container[popover] {
   --list-border-width-default: 0px;
 }
 
@@ -95830,8 +97221,9 @@ const css = /* css */`.navi_side_panel {
  *   interaction only makes sense paired with not letting focus silently
  *   leave the panel first. A box of the page whose press must not close the
  *   panel (a card that fills it) names the panel:
- *   `data-navi-popup-inside={id}`, read when the panel has no wall
- *   (`backdrop={false}`) — see docs/popup_backdrop.md.
+ *   `data-navi-popup-inside={id}`, read when the panel has no wall of its own
+ *   (`backdrop={false}`, or inside a `<PopupGroup>`) — see
+ *   docs/popup_backdrop.md.
  * @param {boolean} [props.closeByDrag=true] - Pushing the panel back
  *   towards the edge it is docked to closes it: the panel follows the
  *   pointer and finishes leaving (or comes back to rest) when it is
@@ -96277,5 +97669,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, activeRouteActionsSignal, activeRouteReadsSignal, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isRowSelected, isScrolling, isToday, keepPageOnScreen, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useHoldScrollRestoration, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, PopupGroup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, activeRouteActionsSignal, activeRouteReadsSignal, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isRowSelected, isScrolling, isToday, keepPageOnScreen, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useHoldScrollRestoration, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map