@jsenv/navi 0.29.465 → 0.29.467

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, 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";
+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, overflowGoesToViewport, 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";
@@ -6554,6 +6554,12 @@ const isAimedAtSelfInteractionsBelow = (
   if (!target || typeof target.closest !== "function") {
     return false;
   }
+  if (event.type === "keydown" || event.type === "keyup") {
+    // A key is no press: the claim is the pointer's. An Escape pressed while
+    // the focus rests on the claimer asks the controls around it — the sheet
+    // it sits in closing.
+    return false;
+  }
   const claimer = target.closest(CLICK_SELECTOR);
   if (!claimer) {
     return false;
@@ -16120,6 +16126,17 @@ const createOpenController = (
       { opened: false, event: closeEvent },
     );
   };
+  // A cancel an Escape asked for, read with what Escape means for this popup.
+  const readCloseDetail = (e, detail) => {
+    if (
+      detail?.isCancel &&
+      controller.escapeEffect !== "cancel" &&
+      findEvent(e, isEscapeKeydown)
+    ) {
+      return { ...detail, isCancel: false };
+    }
+    return detail;
+  };
   const controller = {
     opened: false,
     // What the DOM currently shows, as opposed to what the controller has
@@ -16151,6 +16168,11 @@ const createOpenController = (
     // whole point: learning it afterwards means the content mounted on the
     // previous subject first.
     onOpen: null,
+    // What an Escape means for this popup, whoever heard the key — its own
+    // shortcut, its trigger's, the group it stands in, a bubble's: a cancel
+    // (what it holds reverts), unless its owner says otherwise (a Picker's
+    // escapeEffect="close"). Read from the close the key asked for.
+    escapeEffect: "cancel",
     // The counterpart, set only when the popup was told to throw its content
     // away on close (`mount="while-opened"`). Called from performClose above.
     unmountContent: null,
@@ -16320,7 +16342,7 @@ const createOpenController = (
         return true;
       }
       const requestCloseEvent = new CustomEvent("navi_request_close", {
-        detail: { event: e, ...detail },
+        detail: { event: e, ...readCloseDetail(e, detail) },
         cancelable: true,
       });
       chainEvent(requestCloseEvent, e);
@@ -16330,10 +16352,7 @@ const createOpenController = (
       // 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",
-      );
+      const escapeKeydown = findEvent(requestCloseEvent, isEscapeKeydown);
       if (escapeKeydown) {
         escapeKeydown.preventDefault();
       }
@@ -16355,7 +16374,7 @@ const createOpenController = (
         return;
       }
       const closeEvent = new CustomEvent("navi_close", {
-        detail: { event: e, ...detail },
+        detail: { event: e, ...readCloseDetail(e, detail) },
       });
       chainEvent(closeEvent, e);
       // Skips onRequestClose entirely — there is no choice here.
@@ -16366,6 +16385,9 @@ const createOpenController = (
 };
 
 // A click a keyboard made (detail 0) is not one: nothing pressed for it.
+const isEscapeKeydown = (event) =>
+  event.type === "keydown" && event.key === "Escape";
+
 const isEventOfAPress = (event) =>
   event.type === "pointerdown" ||
   event.type === "mousedown" ||
@@ -18006,8 +18028,10 @@ const openCallout = (
     }
     calloutCloseButton.tabIndex = -1;
     calloutCloseButton.setAttribute("navi-focus-delegate", "");
+    // One Escape closes one popup: an Escape already spent by one in front
+    // of the callout — a menu opened from its content — is not this one's.
     const onAnchorKeydown = (e) => {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && !e.defaultPrevented) {
         requestClose(e, "escape_key");
         e.stopPropagation();
         e.preventDefault();
@@ -18022,7 +18046,7 @@ const openCallout = (
     // Usually callout is inside anchor so the anchor would see the escape being pressed
     // but callout can be appended outside anchor when anchor cannot receive children
     const onCalloutKeydown = (e) => {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && !e.defaultPrevented) {
         requestClose(e, "escape_key");
         e.stopPropagation();
         e.preventDefault();
@@ -18068,21 +18092,23 @@ const openCallout = (
     //
     // Only for the ones that cannot be heard otherwise, and only while they are
     // open: a callout the anchor can hear about is left to the anchor, so
-    // Escape goes on meaning what it means where the user is.
+    // Escape goes on meaning what it means where the user is. Heard once the
+    // key has been through what it was pressed in: one that answered it (a
+    // popup closing, a field clearing) spent it.
     if (anchorElement && anchorElement.contains(document.activeElement)) {
       break close_on_escape_from_anywhere;
     }
     const onDocumentKeydown = (e) => {
-      if (e.key !== "Escape") {
+      if (e.key !== "Escape" || e.defaultPrevented) {
         return;
       }
       requestClose(e, "escape_key");
       e.stopPropagation();
       e.preventDefault();
     };
-    document.addEventListener("keydown", onDocumentKeydown, true);
+    document.addEventListener("keydown", onDocumentKeydown);
     addTeardown(() => {
-      document.removeEventListener("keydown", onDocumentKeydown, true);
+      document.removeEventListener("keydown", onDocumentKeydown);
     });
   }
   {
@@ -33380,8 +33406,9 @@ const onDocumentClick = (clickEvent) => {
     // application sees ONE click, on the control it was aimed at, rather than
     // two: this one falling through and the one below.
     clickEvent.stopPropagation();
+    const ClickEventConstructor = clickEvent.constructor;
     pressable.dispatchEvent(
-      new clickEvent.constructor(clickEvent.type, clickEvent),
+      new ClickEventConstructor(clickEvent.type, clickEvent),
     );
     return;
   }
@@ -34354,7 +34381,7 @@ const readOuterScroll = (element) => {
 };
 
 const isDocumentScroller = (node) => {
-  return node === document.documentElement || node === document.body;
+  return node === document.documentElement;
 };
 
 const isPinnedToViewport = (node) => {
@@ -37580,12 +37607,12 @@ const whilePageRenders = async (page, change, wait = armRouteRenderWait()) => {
 // (`overflow: clip`) holds nothing and is walked straight through — see
 // is_scrollable.js.
 const pagesScrollTheDocument = element => {
-  const scrollContainer = getScrollContainer(element, {
+  // What window.scrollTo moves. A body whose overflow is the viewport's is
+  // walked through to it (see overflowGoesToViewport in @jsenv/dom); a body
+  // the walk stops on scrolls itself, out of the viewport's reach.
+  return getScrollContainer(element, {
     includeHidden: true
-  });
-  // html and body are one answer: whichever of them the walk stops on, what
-  // scrolls is the viewport, which is what window.scrollTo moves.
-  return scrollContainer === document.documentElement || scrollContainer === document.body;
+  }) === document.documentElement;
 };
 
 // A page of the row: a route, and the params that say which of its tabs when
@@ -65975,6 +66002,8 @@ const engageGroup = (groupEl, group, {
   const themeColor = readPopupThemeColor(groupEl, group.themeColor);
   const focusedBefore = document.activeElement;
   const focusWasInGroup = Boolean(focusedBefore) && focusedBefore !== groupEl && groupEl.contains(focusedBefore);
+  // What the focus goes back to, when nothing holds it any more at the close.
+  const focusOrigin = !focusWasInGroup && focusedBefore && focusedBefore !== document.body && focusedBefore !== groupEl ? focusedBefore : null;
   const ringBefore = Boolean(focusedBefore?.matches?.(":focus-visible"));
   const {
     scrollTop,
@@ -65982,12 +66011,7 @@ const engageGroup = (groupEl, group, {
   } = 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 placeScrollsWithViewport = getScrollContainer(groupEl) === document.scrollingElement && !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}`);
@@ -65995,25 +66019,49 @@ const engageGroup = (groupEl, group, {
   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;
+  // 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 — and records what held the focus,
+  // for close() to give it back there. A native autofocus is otherwise never
+  // used (see the focus skill): these exist for the length of the call, to
+  // steer the browser's own pick, not to transfer anything.
+  //
+  // From inside the group the pick is what holds the focus already, any other
+  // mark set aside, so nothing moves. From outside, a stop is put first in the
+  // group and focused: it is what showModal() picks and records, and it is
+  // gone by the close, which then moves nothing (see cleanup) — what the focus
+  // came from, a sheet around the group, could not be kept from taking it
+  // back. The focus goes on to the group itself, so no peer is focused on the
+  // way.
+  let focusStop = null;
+  if (!focusWasInGroup) {
+    focusStop = document.createElement("span");
+    focusStop.setAttribute("navi-out-of-flow", "");
+    focusStop.setAttribute("aria-hidden", "true");
+    focusStop.tabIndex = -1;
+    focusStop.style.cssText = "position: absolute; width: 0; height: 0; overflow: hidden";
+    groupEl.prepend(focusStop);
+    moveFocusTo(focusStop, {
+      focusVisible: false
+    });
+  }
+  const autofocusTarget = focusWasInGroup ? focusedBefore : focusStop;
   const autofocusWasSet = autofocusTarget.hasAttribute("autofocus");
-  const autofocusSetAside = focusWasInGroup ? [...groupEl.querySelectorAll("[autofocus]")].filter(element => element !== autofocusTarget) : [];
+  const autofocusSetAside = [...groupEl.querySelectorAll("[autofocus]")].filter(element => element !== autofocusTarget);
   for (const element of autofocusSetAside) {
     element.removeAttribute("autofocus");
   }
   if (!autofocusWasSet) {
     autofocusTarget.setAttribute("autofocus", "");
   }
+  // Chromium takes a <dialog> without a tabindex for no focus target. Lent
+  // for the whole engagement: taken back from the group holding the focus,
+  // it would lose it.
+  const tabindexLent = Boolean(focusStop) && !groupEl.hasAttribute("tabindex");
   try {
     groupEl.showModal();
   } catch (error) {
+    focusStop?.remove();
     placeholder.remove();
     clearPlacement(groupEl);
     groupEl.removeAttribute("navi-transitions-off");
@@ -66026,6 +66074,15 @@ const engageGroup = (groupEl, group, {
       element.setAttribute("autofocus", "");
     }
   }
+  if (focusStop) {
+    if (tabindexLent) {
+      groupEl.tabIndex = -1;
+    }
+    moveFocusTo(groupEl, {
+      focusVisible: false
+    });
+    focusStop.remove();
+  }
   // 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
@@ -66048,9 +66105,6 @@ const engageGroup = (groupEl, group, {
       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
@@ -66082,33 +66136,55 @@ const engageGroup = (groupEl, group, {
       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.
+        // its close cleanup). 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();
           }
+          if (tabindexLent) {
+            groupEl.removeAttribute("tabindex");
+          }
         });
+        if (focusOrigin) {
+          // The focus left with the group: back where it was, if that stays.
+          giveFocusBackAfterCommit(focusOrigin, () => {
+            moveFocusTo(focusOrigin, {
+              focusVisible: ringBefore
+            });
+          });
+        }
         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;
+      if (!focusWasInGroup) {
+        // What showModal() recorded is the stop, gone by now: close() moves
+        // nothing, and the focus stays where a popup of the group, or the
+        // user, put it. Only one still on the group, or lost, goes back to
+        // where it came from.
+        if (groupEl.open) {
+          groupEl.close();
+        }
+        if (focusOrigin && focusOrigin.isConnected && (!focusedBeforeClose || focusedBeforeClose === document.body || focusedBeforeClose === groupEl)) {
+          moveFocusTo(focusOrigin, {
+            focusVisible: ringBefore
+          });
+        }
+        if (tabindexLent) {
+          groupEl.removeAttribute("tabindex");
+        }
+        return;
+      }
+      // Coming from inside the group, the focus was recorded where it was,
+      // and close() gives it back there, undoing where a popup of the group,
+      // or the user, put it since. Unless nothing moved it, that element is
+      // made no focus target for the call: inert — or, holding the focus
+      // inside it, without its tabindex, inert taking the focus with it.
       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;
+      const focusMovedInGroup = focusWasInGroup && focusedBeforeClose && focusedBeforeClose !== document.body && focusedBeforeClose !== groupEl && focusedBeforeClose !== focusedBefore && focusedBeforeClose.isConnected && focusedBefore.isConnected;
+      const holdsFocusInside = focusMovedInGroup && focusedBefore.contains(focusedBeforeClose);
+      const madeInert = focusMovedInGroup && !holdsFocusInside && !focusedBefore.inert;
+      const tabindexSetAside = holdsFocusInside ? focusedBefore.getAttribute("tabindex") : null;
       if (madeInert) {
         focusedBefore.inert = true;
       }
@@ -66126,10 +66202,13 @@ const engageGroup = (groupEl, group, {
         if (tabindexSetAside !== null) {
           focusedBefore.setAttribute("tabindex", tabindexSetAside);
         }
+        if (tabindexLent) {
+          groupEl.removeAttribute("tabindex");
+        }
       }
-      // Where the engine moved it anyway (an element focusable without a
-      // tabindex).
-      if (focusMovedSinceShowModal && document.activeElement !== focusedBeforeClose) {
+      // Where the engine moved it anyway: an element focusable without a
+      // tabindex.
+      if (focusMovedInGroup && document.activeElement !== focusedBeforeClose) {
         moveFocusTo(focusedBeforeClose, {
           focusVisible: ringBeforeClose
         });
@@ -66313,7 +66392,8 @@ const engageGroup = (groupEl, group, {
  * 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
+ * mousedown: its click decides instead, or the start of the drag it turns
+ * into, which brings no click. 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) => {
@@ -66482,7 +66562,28 @@ const armPressArbiter = (groupEl, group, engagement) => {
       engagement.checkAfterTask();
     }
   };
-  const listeners = [["pointerdown", onPointerDown], ["mousedown", onMouseDown], ["click", onClick], ["pointerup", onPointerUp], ["pointercancel", onPointerCancel]];
+  // A press that becomes a drag brings no click: decided at the click, it
+  // would leave the open popup over a card being carried away, its own
+  // trigger maybe. A drag starting outside the open popup closes it, as a
+  // press there does. Nothing is left to hand over to then, so the group goes
+  // back into the page at once — where the drag can land: what is outside the
+  // group is inert while it is engaged.
+  const onDragStart = dragStartEvent => {
+    const openMember = findMemberPressedOutside(dragStartEvent);
+    if (openMember) {
+      const pressOutside = readPressOutside(openMember);
+      if (pressOutside !== "capture") {
+        openMember.openController.requestClose(dragStartEvent, {
+          isCancel: pressOutside === "cancel"
+        });
+      }
+    }
+    if (engagement.pressClosed) {
+      engagement.pressClosed = false;
+      group.disengageIfNothingOpen();
+    }
+  };
+  const listeners = [["pointerdown", onPointerDown], ["mousedown", onMouseDown], ["click", onClick], ["pointerup", onPointerUp], ["pointercancel", onPointerCancel], ["navi_drag_start", onDragStart]];
   for (const [type, listener] of listeners) {
     document.addEventListener(type, listener, {
       capture: true
@@ -66718,8 +66819,6 @@ 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;
@@ -66741,9 +66840,10 @@ const readAncestorClip = (element, elementStyle) => {
       overflowY,
       position
     } = ancestorStyle;
-    const overflowGoesToViewport = ancestor === document.body && bodyClipsNothing;
-    const clipsX = !overflowGoesToViewport && overflowX !== "visible";
-    const clipsY = !overflowGoesToViewport && overflowY !== "visible";
+    // Read on a body whose overflow is the viewport's, it clips nothing.
+    const clipsNothing = overflowGoesToViewport(ancestor);
+    const clipsX = !clipsNothing && overflowX !== "visible";
+    const clipsY = !clipsNothing && overflowY !== "visible";
     if (clipsX || clipsY) {
       clipped = true;
       const ancestorRect = ancestor.getBoundingClientRect();
@@ -66783,12 +66883,6 @@ const readAncestorClip = (element, elementStyle) => {
     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) ||
@@ -69886,9 +69980,13 @@ const useDialogProps = props => {
   };
   const onKeyDownShortcuts = createOnKeyDownForShortcuts({
     escape: e => {
-      // Only a modal <dialog> fires "cancel" on Escape natively (handled via
-      // onCancel below); neither a .show()n nor a showPopover()n one does.
-      if (isModal || !openController.opened) {
+      // Answered at the keydown, modal or not: the innermost popup takes the
+      // key and spends it (requestClose prevents it), so one Escape closes
+      // one popup. A modal's native "cancel" comes only once the keydown has
+      // been dispatched, and the key would reach a popup around this one
+      // first — a picker whose drawing holds this dialog. onCancel below is
+      // left the close requests that are no keydown: the back gesture.
+      if (!openController.opened) {
         return null;
       }
       return {
@@ -70069,9 +70167,9 @@ const useDialogProps = props => {
       onKeyDownShortcuts(e);
     },
     "onCancel": e => {
-      // The dialog's own "cancel" (Escape on a modal showModal() dialog —
-      // the Escape handling for the other two shows lives in
-      // onKeyDownShortcuts above) fires on the dialog element itself. But a child
+      // The dialog's own "cancel" — a close request that is no keydown (the
+      // back gesture), an Escape being answered at its keydown (see
+      // onKeyDownShortcuts above) — fires on the dialog element itself. But a child
       // <input type="file"> also fires a BUBBLING "cancel" when the user
       // dismisses the file chooser (per the HTML spec), and it lands here
       // too; only the dialog's own cancel means "close".
@@ -72700,6 +72798,10 @@ const PickerCustom = props => {
         }
       };
     });
+    // Whoever hears the Escape — this picker's trigger, its popup, the group
+    // it stands in, its bubble — asks for a cancel; the controller reads it
+    // with this (see escapeEffect in open_controller.js).
+    openController.escapeEffect = escapeEffect;
     // scroll <button> of the picker into view when opening it
     // -> would be overriden by dialog.jsx or popover.jsx
     // so ideally openEffect should be either protective or a pubSub to allow multiple callbacks
@@ -72925,13 +73027,13 @@ const PickerCustom = props => {
           if (!openController.opened) {
             return null;
           }
-          const isCancel = escapeEffect === "cancel";
           return {
-            name: isCancel ? "escape_to_cancel" : "escape_to_close",
+            name: "escape_to_cancel",
             intent: "read",
             allowed: () => {
+              // Read with escapeEffect by the controller (see above).
               requestClose(e, {
-                isCancel
+                isCancel: true
               });
               e.preventDefault(); // prevent browser from closing the dialog (if any)
             }
@@ -73082,10 +73184,7 @@ const PickerCustom = props => {
   }
   return renderResolver(PickerContentInsidePopup, {
     ...pickerProps,
-    mode,
-    // What a callout's own Escape means (see PickerCalloutPopup): the bubble
-    // answers the key itself when the focus is in it.
-    escapeEffect
+    mode
   });
 };
 
@@ -73200,7 +73299,6 @@ const PickerContentInsidePopup = props => {
     calloutIcon,
     calloutCloseButton,
     calloutCloseByScroll,
-    escapeEffect,
     ...rest
   } = props;
   const isPopover = mode === "popover";
@@ -73249,7 +73347,6 @@ const PickerContentInsidePopup = props => {
       ,
       backdrop: backdrop,
       pressOutside: pressOutside,
-      escapeEffect: escapeEffect,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -73347,7 +73444,6 @@ const PickerCalloutPopup = ({
   closeByScroll,
   backdrop,
   pressOutside,
-  escapeEffect,
   onnavi_request_open,
   onnavi_request_close,
   onnavi_request_confirm,
@@ -73429,14 +73525,14 @@ 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.
+      // An Escape the callout answered itself (the focus in the bubble) is
+      // the picker's Escape (see escapeEffect in open_controller.js).
       onClose: ({
         event,
         reason
       }) => {
         openController.close(event, {
-          isCancel: reason === "escape_key" && escapeEffect === "cancel"
+          isCancel: reason === "escape_key"
         });
       }
     });
@@ -79623,8 +79719,14 @@ const UnorderedList = ({
                 value: null,
                 children: jsx(ListItemColumnsContext.Provider, {
                   value: columns ? null : itemColumns || null,
-                  children: jsx(ListDeclaredChildren, {
-                    children: children
+                  children: jsx(ListSlotContext.Provider, {
+                    value: null,
+                    children: jsx(ListGroupContext.Provider, {
+                      value: undefined,
+                      children: jsx(ListDeclaredChildren, {
+                        children: children
+                      })
+                    })
                   })
                 })
               })