@jsenv/dom 0.17.90 → 0.17.91

package/dist/jsenv_dom.js

@@ -4987,7 +4987,9 @@ const getFocusVisibilityInfo = (node, { excludeAriaHidden } = {}) => {
     if (
       elementIsDialog(nodeOrAncestor) &&
       !nodeOrAncestor.open &&
-      !isOpenPopover
+      !isOpenPopover &&
+      // A closed PopupGroup is displayed in the page (see ancestor_open.js).
+      !nodeOrAncestor.hasAttribute("navi-popup-group")
     ) {
       return { visible: false, reason: "inside closed dialog element" };
     }
@@ -5102,6 +5104,11 @@ const elementIsFocusable = (node, { excludeAriaHidden } = {}) => {
   if (node.hasAttribute("navi-focus-delegate")) {
     return false;
   }
+  // A <dialog> because it is shown modal while one of its popups is open, not
+  // a surface of its own to focus (see ancestor_open.js).
+  if (node.hasAttribute("navi-popup-group")) {
+    return false;
+  }
   if (!canInteract(node)) {
     return false;
   }
@@ -5516,6 +5523,20 @@ const getKeyboardEventDefaultAction = (keyboardEvent) => {
   return "";
 };
 
+// Whether the keyboard follows macOS's conventions: there Home and End scroll
+// the page even from a text field, and a chord with Cmd or Option scrolls it to
+// an end or a page away.
+let isMac;
+const isMacPlatform = () => {
+  if (isMac === undefined) {
+    const { userAgentData, userAgent } = window.navigator;
+    isMac = userAgentData
+      ? userAgentData.platform === "macOS"
+      : /Mac|iPhone|iPad|iPod/.test(userAgent);
+  }
+  return isMac;
+};
+
 const isTypingIntent = (e) => {
   // Modifier keys used for shortcuts: skip
   if (e.metaKey || e.ctrlKey) {
@@ -5557,10 +5578,11 @@ const DEFAULT_BEHAVIORS = [
         return "activate";
       },
       enter: (e) => (e.target.form ? "form_submit" : ""),
-      arrowleft: "focus_nav",
-      arrowright: "focus_nav",
-      arrowup: "focus_nav",
-      arrowdown: "focus_nav",
+      // Moving through a radio group; a checkbox lets them scroll.
+      arrowleft: (e) => (e.target.type === "radio" ? "focus_nav" : undefined),
+      arrowright: (e) => (e.target.type === "radio" ? "focus_nav" : undefined),
+      arrowup: (e) => (e.target.type === "radio" ? "focus_nav" : undefined),
+      arrowdown: (e) => (e.target.type === "radio" ? "focus_nav" : undefined),
     },
   },
   {
@@ -5583,8 +5605,10 @@ const DEFAULT_BEHAVIORS = [
       arrowright: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
       arrowup: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
       arrowdown: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
-      home: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
-      end: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      home: (e) =>
+        e.target.readOnly || isMacPlatform() ? "scroll" : "cursor_move",
+      end: (e) =>
+        e.target.readOnly || isMacPlatform() ? "scroll" : "cursor_move",
     },
     fallback: (e) => (isTypingIntent(e) ? "type" : undefined),
   },
@@ -5669,13 +5693,17 @@ const DEFAULT_BEHAVIORS = [
     fallback: (e) => (isTypingIntent(e) ? "type" : undefined),
   },
   {
-    // Buttons and links: Space/Enter trigger the element's default action
+    // Buttons and links: Enter triggers the element's default action, Space
+    // only a button's — on a link it scrolls the page.
     test: (el) =>
       el.tagName === "BUTTON" ||
       el.tagName === "A" ||
       el.getAttribute("role") === "button",
     keys: {
-      space: "activate",
+      space: (e) =>
+        e.target.tagName === "A" && e.target.getAttribute("role") !== "button"
+          ? undefined
+          : "activate",
       enter: "activate",
     },
   },
@@ -7204,6 +7232,10 @@ const getScrollContainer = (arg, { includeHidden } = {}) => {
     return null;
   }
   if (isScrollBoundary(element)) {
+    const placeholder = findEngagedPopupGroupPlaceholder(element);
+    if (placeholder) {
+      return getScrollContainer(placeholder, { includeHidden });
+    }
     return getScrollingElement(element.ownerDocument);
   }
   return (
@@ -7234,12 +7266,18 @@ const findScrollContainer = (element, { includeHidden } = {}) => {
     if (parent === document) {
       return null;
     }
-    if (isScrollBoundary(parent)) {
-      return null;
-    }
+    // A boundary that scrolls is the scroll container of what it holds — a
+    // popup whose own box scrolls, a PopupGroup shown modal where it stands.
     if (isScrollable(parent, { includeHidden })) {
       return parent;
     }
+    if (isScrollBoundary(parent)) {
+      const placeholder = findEngagedPopupGroupPlaceholder(parent);
+      if (placeholder) {
+        return findScrollContainer(placeholder, { includeHidden });
+      }
+      return null;
+    }
     parent = parent.parentNode;
   }
   return null;
@@ -7263,6 +7301,29 @@ const isScrollBoundary = (node) => {
   return getStyle(node, "position") === "fixed";
 };
 
+// Except a PopupGroup shown modal (@jsenv/navi's popup_group.jsx): fixed in the
+// top layer at the place a placeholder holds for it in the page, it follows
+// that place, so what scrolls the placeholder moves the group and what it
+// holds. The placeholder is inserted just before it; something rendered
+// before the group meanwhile lands in between.
+const findEngagedPopupGroupPlaceholder = (node) => {
+  if (
+    node.tagName !== "DIALOG" ||
+    !node.hasAttribute("navi-popup-group") ||
+    !node.matches(":modal")
+  ) {
+    return null;
+  }
+  let previous = node.previousElementSibling;
+  while (previous) {
+    if (previous.hasAttribute("navi-popup-group-placeholder")) {
+      return previous;
+    }
+    previous = previous.previousElementSibling;
+  }
+  return null;
+};
+
 const getSelfAndAncestorScrolls = (element, startOnParent) => {
   let scrollX = 0;
   let scrollY = 0;
@@ -8197,18 +8258,23 @@ const TOP_LAYER_SELECTOR$1 = [
   ":fullscreen",
 ].join(",");
 
-// The keys that scroll the document when nothing focusable holds them.
-const SCROLL_KEY_SET = new Set([
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight",
-  "PageUp",
-  "PageDown",
-  "Home",
-  "End",
-  " ",
+// The keys that scroll the document when nothing focusable holds them, and
+// the way each one goes, as a wheel would: [deltaX, deltaY].
+const SCROLL_KEY_DELTA_MAP = new Map([
+  ["ArrowUp", [0, -1]],
+  ["ArrowDown", [0, 1]],
+  ["ArrowLeft", [-1, 0]],
+  ["ArrowRight", [1, 0]],
+  ["PageUp", [0, -1]],
+  ["PageDown", [0, 1]],
+  ["Home", [0, -1]],
+  ["End", [0, 1]],
+  [" ", [0, 1]],
 ]);
+// What a scroll key does by itself on these, whatever it would scroll: a
+// closed <select> changes its value with the arrows, a media element's
+// controls seek with them.
+const KEY_OWNER_SELECTOR = "select, audio, video";
 
 /**
  * Stops the background from scrolling by cancelling the scroll gestures that
@@ -8242,14 +8308,33 @@ const SCROLL_KEY_SET = new Set([
  *   background, when it is one of ours (a modal dialog covers it with its own
  *   `::backdrop` and there is nothing to pass). It is in the top layer like the
  *   overlay itself, yet a gesture on it aims at the background behind it.
+ * @param {() => {left: number, top: number, right: number, bottom: number}} [options.getElementBox]
+ *   - Where `element` is on screen, when that is less than its border box (an
+ *   overlay clipped by a clip-path): a gesture outside that box but reported on
+ *   `element` landed on its `::backdrop`.
+ * @param {boolean} [options.containInside] - Also cancel a gesture landing on
+ *   or inside `element` that nothing between it and `element` can scroll in
+ *   its direction, and a scroll key pressed there the same way. For an overlay
+ *   that is not a scroll container itself (a box of the page shown in the top
+ *   layer where it stood): its scroll chain goes straight to the viewport, and
+ *   no `overscroll-behavior` of its own can stop it there. Decided once what
+ *   the gesture landed on has had its say: what takes it from a listener of
+ *   its own (a control moving by transform, a drag) cancels it there, and a
+ *   gesture cancelled before it gets there is one it refuses.
  * @returns {() => void} Cleanup function removing the listeners.
  */
 
 const trapScrollGestureInside = (
   element,
-  { boundaryElement, backdropElement } = {},
+  {
+    boundaryElement,
+    backdropElement,
+    getElementBox = () => element.getBoundingClientRect(),
+    containInside = false,
+  } = {},
 ) => {
   const { ownerDocument } = element;
+  const { defaultView } = ownerDocument;
   const lockedRegion = boundaryElement || ownerDocument.documentElement;
 
   const isBackgroundGesture = (target, clientX, clientY) => {
@@ -8264,7 +8349,7 @@ const trapScrollGestureInside = (
       if (target !== element) {
         return false;
       }
-      const { left, right, top, bottom } = element.getBoundingClientRect();
+      const { left, right, top, bottom } = getElementBox();
       return (
         clientX < left || clientX > right || clientY < top || clientY > bottom
       );
@@ -8282,6 +8367,42 @@ const trapScrollGestureInside = (
     return true;
   };
 
+  // Whether something on the event's way from what it landed on up to
+  // `element` scrolls the way the gesture mostly goes, with room left to go
+  // there. The composed path, not the parents: a scroller inside a shadow
+  // root, or the shadow scroller a slotted element shows in, is on it. A box
+  // in the top layer, or fixed, ends the walk: its scroll chain goes on to the
+  // viewport, not to its parent in the DOM.
+  const isTakenInside = (event, deltaX, deltaY) => {
+    const axis = Math.abs(deltaY) >= Math.abs(deltaX) ? "y" : "x";
+    const delta = axis === "y" ? deltaY : deltaX;
+    for (const node of event.composedPath()) {
+      if (node.nodeType !== 1) {
+        continue;
+      }
+      if (canScroll(node, axis) && hasRoomToScroll(node, axis, delta)) {
+        return true;
+      }
+      if (node === element) {
+        return false;
+      }
+      if (
+        node.matches(TOP_LAYER_SELECTOR$1) ||
+        getComputedStyle(node).position === "fixed"
+      ) {
+        return false;
+      }
+    }
+    return false;
+  };
+  // On `element` itself too, inside its box: on its padding, between what it
+  // holds. Outside that box it is the wall, decided first (isBackgroundGesture).
+  const leaksFromInside = (event, deltaX, deltaY) =>
+    // A move with no direction scrolls nothing.
+    (deltaX !== 0 || deltaY !== 0) &&
+    element.contains(event.target) &&
+    !isTakenInside(event, deltaX, deltaY);
+
   const onWheel = (wheelEvent) => {
     if (wheelEvent.ctrlKey) {
       // Browser zoom, not a scroll — cancelling it would take zoom away from
@@ -8298,25 +8419,71 @@ const trapScrollGestureInside = (
       wheelEvent.preventDefault();
     }
   };
+  const onWheelInside = (wheelEvent) => {
+    if (
+      wheelEvent.ctrlKey ||
+      wheelEvent.defaultPrevented ||
+      !wheelEvent.cancelable
+    ) {
+      return;
+    }
+    if (leaksFromInside(wheelEvent, wheelEvent.deltaX, wheelEvent.deltaY)) {
+      wheelEvent.preventDefault();
+    }
+  };
+  // Where the finger was at the previous touch event: a touchmove carries no
+  // delta of its own. Read in the capture phase, which every touchmove goes
+  // through, for the decision taken once it has been through its target.
+  let previousTouch = null;
+  let touchMoveDelta = null;
+  const onTouchStart = (touchStartEvent) => {
+    const { touches } = touchStartEvent;
+    previousTouch =
+      touches.length === 1
+        ? { x: touches[0].clientX, y: touches[0].clientY }
+        : null;
+  };
   const onTouchMove = (touchMoveEvent) => {
     const { touches } = touchMoveEvent;
     if (touches.length !== 1) {
       return; // pinch
     }
     const [touch] = touches;
+    // The content moves against the finger.
+    touchMoveDelta = {
+      touchMoveEvent,
+      deltaX: previousTouch ? previousTouch.x - touch.clientX : 0,
+      deltaY: previousTouch ? previousTouch.y - touch.clientY : 0,
+    };
+    previousTouch = { x: touch.clientX, y: touch.clientY };
     if (
       isBackgroundGesture(touchMoveEvent.target, touch.clientX, touch.clientY)
     ) {
       touchMoveEvent.preventDefault();
     }
   };
+  const onTouchMoveInside = (touchMoveEvent) => {
+    if (touchMoveDelta?.touchMoveEvent !== touchMoveEvent) {
+      return; // pinch
+    }
+    const { deltaX, deltaY } = touchMoveDelta;
+    touchMoveDelta = null;
+    if (touchMoveEvent.defaultPrevented || !touchMoveEvent.cancelable) {
+      return;
+    }
+    if (leaksFromInside(touchMoveEvent, deltaX, deltaY)) {
+      touchMoveEvent.preventDefault();
+    }
+  };
   const onKeyDown = (keydownEvent) => {
-    if (!SCROLL_KEY_SET.has(keydownEvent.key)) {
+    if (!SCROLL_KEY_DELTA_MAP.has(keydownEvent.key)) {
       return;
     }
     const { target } = keydownEvent;
     // Anything else focused (a field, a scrollable box, a button) owns the key
-    // press; only a document with nothing focused scrolls on it.
+    // press; only a document with nothing focused scrolls on it. Inside
+    // `element`, with containInside, what really owns it is asked
+    // (onKeyDownInside).
     if (
       target !== ownerDocument.body &&
       target !== ownerDocument.documentElement
@@ -8327,6 +8494,37 @@ const trapScrollGestureInside = (
       keydownEvent.preventDefault();
     }
   };
+  // A key whose default would scroll, pressed where nothing between there and
+  // `element` scrolls that way.
+  const onKeyDownInside = (keydownEvent) => {
+    if (keydownEvent.defaultPrevented) {
+      return;
+    }
+    const scrollDelta = readKeyScrollDelta(keydownEvent);
+    if (!scrollDelta) {
+      return;
+    }
+    const { target } = keydownEvent;
+    if (!element.contains(target)) {
+      return;
+    }
+    if (keydownEvent.composedPath()[0] !== target) {
+      // Pressed in a shadow tree, whose host the target is: what the key does
+      // in there is not known from here.
+      return;
+    }
+    if (target.matches(KEY_OWNER_SELECTOR)) {
+      return;
+    }
+    const defaultAction = getKeyboardEventDefaultAction(keydownEvent);
+    if (defaultAction !== "scroll" && defaultAction !== "scroll_self") {
+      return;
+    }
+    const [deltaX, deltaY] = scrollDelta;
+    if (!isTakenInside(keydownEvent, deltaX, deltaY)) {
+      keydownEvent.preventDefault();
+    }
+  };
 
   // Capture phase: the gesture must be cancelled before whatever it landed on
   // gets a chance to act on it. passive: false is what makes preventDefault
@@ -8335,7 +8533,24 @@ const trapScrollGestureInside = (
   ownerDocument.addEventListener("wheel", onWheel, listenerOptions);
   ownerDocument.addEventListener("touchmove", onTouchMove, listenerOptions);
   ownerDocument.addEventListener("keydown", onKeyDown, listenerOptions);
+  if (containInside) {
+    ownerDocument.addEventListener("touchstart", onTouchStart, {
+      capture: true,
+      passive: true,
+    });
+    // On the window, after every listener on the way: what is inside has had
+    // its say. passive: false said out loud — a wheel or touch listener on the
+    // window is passive unless told otherwise.
+    defaultView.addEventListener("wheel", onWheelInside, { passive: false });
+    defaultView.addEventListener("touchmove", onTouchMoveInside, {
+      passive: false,
+    });
+    defaultView.addEventListener("keydown", onKeyDownInside);
+  }
   return () => {
+    ownerDocument.removeEventListener("touchstart", onTouchStart, {
+      capture: true,
+    });
     ownerDocument.removeEventListener("wheel", onWheel, listenerOptions);
     ownerDocument.removeEventListener(
       "touchmove",
@@ -8343,9 +8558,97 @@ const trapScrollGestureInside = (
       listenerOptions,
     );
     ownerDocument.removeEventListener("keydown", onKeyDown, listenerOptions);
+    defaultView.removeEventListener("wheel", onWheelInside);
+    defaultView.removeEventListener("touchmove", onTouchMoveInside);
+    defaultView.removeEventListener("keydown", onKeyDownInside);
   };
 };
 
+// Whether `scroller` has room left on `axis` the way `delta` goes, with a
+// pixel of slack against rounded sizes. Its scroll position counts from its
+// scroll origin, which is on the right of a right-to-left box and at the bottom
+// of some vertical writing modes: from there it reads 0, then negative.
+const hasRoomToScroll = (scroller, axis, delta) => {
+  const range =
+    axis === "y"
+      ? scroller.scrollHeight - scroller.clientHeight
+      : scroller.scrollWidth - scroller.clientWidth;
+  const position = axis === "y" ? scroller.scrollTop : scroller.scrollLeft;
+  // From the top, or the left.
+  const fromStart = isScrollOriginAtTheEnd(getComputedStyle(scroller), axis)
+    ? range + position
+    : position;
+  return delta < 0 ? fromStart > 1 : fromStart < range - 1;
+};
+const isScrollOriginAtTheEnd = (
+  { writingMode, direction, display, flexDirection, flexWrap },
+  axis,
+) => {
+  const vertical =
+    writingMode.startsWith("vertical") || writingMode.startsWith("sideways");
+  let atTheEnd;
+  if (!vertical) {
+    atTheEnd = axis === "x" && direction === "rtl";
+  } else if (axis === "x") {
+    // Lines stacked from the right.
+    atTheEnd = writingMode.endsWith("-rl");
+  } else {
+    // sideways-lr runs its text bottom to top.
+    atTheEnd =
+      writingMode === "sideways-lr" ? direction !== "rtl" : direction === "rtl";
+  }
+  // A reversed flex container starts at the other end of that axis: its main
+  // axis for a reversed direction (a log resting on its newest item), its
+  // cross axis for wrap-reverse.
+  if (display === "flex" || display === "inline-flex") {
+    const inlineAxis = vertical ? "y" : "x";
+    const blockAxis = vertical ? "x" : "y";
+    const mainAxis = flexDirection.startsWith("row") ? inlineAxis : blockAxis;
+    const reversed =
+      axis === mainAxis
+        ? flexDirection.endsWith("-reverse")
+        : flexWrap === "wrap-reverse";
+    if (reversed) {
+      atTheEnd = !atTheEnd;
+    }
+  }
+  return atTheEnd;
+};
+
+// The way a key scrolls, as a wheel would: [deltaX, deltaY], or null for a key
+// that scrolls nothing. With a modifier, only the platform's own chords to the
+// top, the bottom or a page away; never the arrows sideways, which go back and
+// forward in the history.
+const readKeyScrollDelta = (keydownEvent) => {
+  const { key, altKey, ctrlKey, metaKey, shiftKey } = keydownEvent;
+  if (!altKey && !ctrlKey && !metaKey) {
+    if (key === " " && shiftKey) {
+      return [0, -1];
+    }
+    return SCROLL_KEY_DELTA_MAP.get(key) || null;
+  }
+  if (isMacPlatform()) {
+    if (!ctrlKey && (metaKey || altKey)) {
+      if (key === "ArrowUp") {
+        return [0, -1];
+      }
+      if (key === "ArrowDown") {
+        return [0, 1];
+      }
+    }
+    return null;
+  }
+  if (ctrlKey && !altKey && !metaKey) {
+    if (key === "Home") {
+      return [0, -1];
+    }
+    if (key === "End") {
+      return [0, 1];
+    }
+  }
+  return null;
+};
+
 // "gesture": cancel the scroll gestures aimed at the background, keeping it
 // scrollable (see scroll_gesture_trap.js) — only possible when a backdrop
 // covers it.
@@ -8395,16 +8698,24 @@ const SCROLL_LOCK_STRATEGY = "gesture";
  *   while the overlay is open: the backdrop element, or `true` when the browser
  *   paints it itself (a modal dialog's `::backdrop`). Enables the gesture
  *   strategy described above.
+ * @param {Function} [options.getElementBox] - Forwarded to
+ *   trapScrollGestureInside: where `element` is on screen when that is less
+ *   than its border box.
+ * @param {boolean} [options.containInside] - Forwarded to
+ *   trapScrollGestureInside: a gesture or a scroll key inside `element` that
+ *   nothing in it can scroll does not reach the background either.
  * @returns {() => void} Cleanup function that restores all modified styles.
  */
 const trapScrollInside = (
   element,
-  { boundaryElement, backdrop } = {},
+  { boundaryElement, backdrop, getElementBox, containInside } = {},
 ) => {
   if (backdrop && SCROLL_LOCK_STRATEGY === "gesture") {
     return trapScrollGestureInside(element, {
       boundaryElement,
       backdropElement: backdrop === true ? null : backdrop,
+      getElementBox,
+      containInside,
     });
   }
 
@@ -10047,11 +10358,20 @@ const css$5 = /* css */ `[data-drag-handle], [data-drag-source] {
   user-select: none;
 }
 
-[data-drag-on-contact] [data-drag-ignore], [data-drag-on-contact] [popover], [data-drag-on-contact] dialog, [data-drag-on-contact] :is(input:not([data-press-only]), textarea), [data-drag-on-contact] :is([contenteditable=""], [contenteditable="true"]) {
+[data-drag-on-contact] [data-drag-ignore], [data-drag-on-contact] [popover], [data-drag-on-contact] :is(input:not([data-press-only]), textarea), [data-drag-on-contact] :is([contenteditable=""], [contenteditable="true"]) {
   user-select: text;
 }
 
-[data-drag-ignore], [data-self-interactions~="drag"], [data-self-interactions~="*"], [data-drag-source] [popover], [data-drag-source] dialog {
+[data-drag-on-contact] dialog:not([navi-popup-group]:not(:modal)) {
+  user-select: text;
+}
+
+[data-drag-ignore], [data-self-interactions~="drag"], [data-self-interactions~="*"], [data-drag-source] [popover] {
+  -webkit-touch-callout: default;
+  touch-action: auto;
+}
+
+[data-drag-source] dialog:not([navi-popup-group]:not(:modal)) {
   -webkit-touch-callout: default;
   touch-action: auto;
 }
@@ -12612,7 +12932,8 @@ const DRAG_EXCLUDED_SELECTOR = [
   '[data-self-interactions~="drag"]',
   '[data-self-interactions~="*"]',
   "[popover]",
-  "dialog",
+  // An idle PopupGroup is part of the page (see DRAG_IGNORED_SELECTOR).
+  "dialog:not([navi-popup-group]:not(:modal))",
 ].join(",");
 
 // Which axes a box travels on, one attribute per gesture, said in the DOM by
@@ -14379,7 +14700,11 @@ const css$1 = /* css */ `.navi_drop_hint {
   cursor: default;
 }
 
-[data-drag-ignore], [data-self-interactions~="drag"], [data-self-interactions~="*"], [data-drag-source] [popover], [data-drag-source] dialog {
+[data-drag-ignore], [data-self-interactions~="drag"], [data-self-interactions~="*"], [data-drag-source] [popover] {
+  cursor: auto;
+}
+
+[data-drag-source] dialog:not([navi-popup-group]:not(:modal)) {
   cursor: auto;
 }
 
@@ -14467,8 +14792,10 @@ import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_to.js"];
 // stays a descendant of whatever it is anchored in (a callout next to a button,
 // in the card that carries both), and the press bubbles through the surface as
 // if it had landed on it.
+// An idle PopupGroup is a closed <dialog> that is part of the page, not a layer
+// over it (see @jsenv/navi's popup_group.jsx).
 const DRAG_IGNORED_SELECTOR =
-  '[data-drag-ignore],[data-self-interactions~="drag"],[data-self-interactions~="*"],[popover],dialog';
+  '[data-drag-ignore],[data-self-interactions~="drag"],[data-self-interactions~="*"],[popover],dialog:not([navi-popup-group]:not(:modal))';
 
 /**
  * Creates a gesture controller that moves elements via drag.
@@ -16341,7 +16668,11 @@ const getResizeDirection = (element) => {
 // directions: hide when a container closes, recheck when it reopens) — the
 // selector/open-detection/timing primitives are identical for both, only
 // what each does with a transition differs.
-const OPENABLE_SELECTOR = "dialog, details, [popover], [aria-expanded]";
+// Not a PopupGroup (@jsenv/navi's popup_group.jsx): a <dialog> that is a box
+// of the page, closed or shown modal where it stands. Its `open` says nothing
+// about whether what it holds is on screen.
+const OPENABLE_SELECTOR =
+  "dialog:not([navi-popup-group]), details, [popover], [aria-expanded]";
 
 // An element that IS openable is closed in exactly the same way an element
 // inside one is — which matters for anything positioned against it, e.g. a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.90",
+  "version": "0.17.91",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {