@jsenv/navi 0.29.430 → 0.29.432

package/dist/dev/jsenv_navi.js

@@ -6,7 +6,7 @@ import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, win
 import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, createEventGroupLogger, 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, getVirtualKeyboardOverlayHeight, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange } 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, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
+import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useState, useMemo, useRef, useEffect, useCallback, useReducer, useId } from "preact/hooks";
 import { humanizeI18n, prefixFirstAndIndentRemainingLines, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
@@ -7107,6 +7107,55 @@ const applyNavigationToNavDepth = (navigationType, state) => {
   canNavForwardSignal.value = navDepth < navDepthMax;
 };
 
+/**
+ * Whether the render running now is the one putting a new page on screen.
+ *
+ * A layer drawn over the pages — a popup bound to the address, the slides
+ * inside it — can open, close or change place in the very navigation that
+ * replaces the page beneath it: a link inside the layer leads to another page
+ * and the layer's weak params are dropped, a back to the page it was open over
+ * brings them back. For the layer that is not a movement of its own: the page
+ * changing IS the movement. A route transition already carries it, photographed
+ * as furniture with the page it belongs to (transition_furniture.js), and with
+ * no transition the page cuts and the layer cuts with it. Played on its own as
+ * well, it moves twice — an entrance or an exit over a page sliding past, or
+ * appearing at once.
+ *
+ * So whatever reacts to such a change in a render — a popup's open state, a
+ * slide container's current slide — asks here whether that render carries a
+ * page change, and if so arrives where it goes without travelling there.
+ *
+ * A page is what navi animates between (route_page.js): a route, and the
+ * params telling apart branches of one route. Which routes match is decided by
+ * the path alone, so a navigation that changes the path changes the page; one
+ * that keeps it changes the page only where a param IS a page — and navi knows
+ * those only through the relation or the RouteTravel row that names them, so
+ * that is who says so. A search param a page merely reads is not one: writing
+ * it is the page answering, and a layer opened by it (the `?settings` its door
+ * pushes, the back button taking it out) moves on its own.
+ *
+ * The answer lasts until the render applying the navigation is over: the held
+ * one when somebody photographs the change, Preact's own otherwise, over by the
+ * next frame (see whenPageRendered). Asked from a layout effect it is exact; an
+ * opening deferred past the commit takes the answer with it, read when the
+ * effect ran.
+ */
+
+
+let renderingPageChange = false;
+
+const notePageChange = () => {
+  if (renderingPageChange) {
+    return;
+  }
+  renderingPageChange = true;
+  whenPageRendered(() => {
+    renderingPageChange = false;
+  });
+};
+
+const isRenderingPageChange = () => renderingPageChange;
+
 // Global signal registry for route template detection
 const globalSignalRegistry = new Map();
 
@@ -10742,8 +10791,12 @@ This prevents cross-test pollution and ensures clean state.`,
     // read again.
     const path = urlWithoutSearchAndHash(url);
     const pathKept = path === previousPath;
+    // A new path is a new page: what the integration tells whatever reacts to
+    // this change in the render it causes (see page_change.js). Not the first
+    // one — there was no page before it, and what it mounts mounts as it is.
+    const pageChanged = previousPath !== null && !pathKept;
     previousPath = path;
-    const returnValue = {};
+    const returnValue = { pageChanged };
     const routeMatchInfoSet = new Set();
     for (const route of routeSet) {
       const routePrivateProperties = getRoutePrivateProperties(route);
@@ -11616,13 +11669,22 @@ const installScrollRestoration = () => {
     },
     { passive: true },
   );
+  const positionOnLoad = positionByUrl.get(window.location.href);
+  if (!positionOnLoad) {
+    // Where the browser landed the first page, written down for the reason
+    // startAtTop writes its top: no scroll event says so.
+    positionByUrl.set(window.location.href, {
+      x: window.scrollX,
+      y: window.scrollY,
+    });
+    return;
+  }
   // What a reload asks for, now that the browser has been told not to do it.
   // Once, and at the first render of a route: the position is only meaningful
   // once there is a page under it.
   // Written once the commit that rendered it has ended: said from inside it,
   // and what the offset shows may still have to be built (see scrollTo).
-  const positionOnLoad = positionByUrl.get(window.location.href);
-  if (positionOnLoad && (positionOnLoad.x || positionOnLoad.y)) {
+  if (positionOnLoad.x || positionOnLoad.y) {
     const stopListening = observeRouteRender(() => {
       stopListening();
       queueMicrotask(() => {
@@ -11708,6 +11770,11 @@ const startAtTop = (url, { from } = {}) => {
     return;
   }
   arrivalCount++;
+  // Written down as well as done: a document already at its top fires no
+  // scroll event, and a page left without ever being scrolled would have no
+  // position to come back to — the return would keep the offset of the page
+  // being left.
+  positionByUrl.set(new URL(url, window.location.href).href, { x: 0, y: 0 });
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
 const isArrival = (url, { from }) => {
@@ -12629,11 +12696,14 @@ const applyRouting = (
   // The routes' actions follow the address by themselves (see routeAction):
   // what a navigation leaves to the routing is a reload, the one that asks
   // them again with the address unchanged.
-  const { reloadSet } = updateRoutes(url, {
+  const { pageChanged, reloadSet } = updateRoutes(url, {
     navigationType,
     isVisited,
     // state,
   });
+  if (pageChanged) {
+    notePageChange();
+  }
   if (!reloadSet || reloadSet.size === 0) {
     return {
       allResult: undefined,
@@ -16104,8 +16174,8 @@ const useOpenPropsEffectOnOpenController = (
   // Tracks whether the effect below has ever run before — only the very
   // first run gets the "mount already open" treatment (`open` truthy from
   // the start, or the uncontrolled, mount-only `defaultOpen`); every
-  // subsequent `open` change is a real, later toggle and should animate
-  // normally like any other interactive open/close.
+  // subsequent `open` change is a real, later toggle and animates like any
+  // interactive open/close — unless a page change carries it (see below).
   const isFirstRunRef = useRef(true);
   // What `open` was on the previous run of the effect below. preact re-runs
   // an effect for a change of its deps — or for none at all, when a
@@ -16125,6 +16195,12 @@ const useOpenPropsEffectOnOpenController = (
     isFirstRunRef.current = false;
     const openChanged = open !== lastRunOpenRef.current;
     lastRunOpenRef.current = open;
+    // Opened or closed by the navigation that puts another page on screen: a
+    // link inside the popup leading away, a back to the page it stood over.
+    // The page changing is its movement, so it has none of its own — a route
+    // transition carries it with its page, and without one it cuts with the
+    // page (see page_change.js).
+    const carriedByPageChange = isRenderingPageChange();
 
     if (isFirstRun) {
       // "interaction" is said even over what the caller holds reading open: a
@@ -16143,10 +16219,12 @@ const useOpenPropsEffectOnOpenController = (
         // other truthy value means it was simply already open: nothing was ever
         // shown as "closed" for the user to see it transition away from, so the
         // entrance is skipped (`silent`, see popover.jsx's own openEffect).
-        //
+        // A popup built by an opening a page change carries is silent too,
+        // whatever built it: read now, the answer only holds for this render.
+        const silent = mountOpenReason !== "interaction" || carriedByPageChange;
         mountOpenOwedRef.current = () =>
           openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
-            silent: mountOpenReason !== "interaction",
+            silent,
           });
       }
       return undefined;
@@ -16178,11 +16256,13 @@ const useOpenPropsEffectOnOpenController = (
           });
         return undefined;
       }
-      openController.open(new CustomEvent("open_by_prop", { detail: {} }));
+      openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
+        silent: carriedByPageChange,
+      });
     } else {
       openController.requestClose(
         new CustomEvent("close_by_prop", { detail: {} }),
-        { isCancel: true },
+        { isCancel: true, silent: carriedByPageChange },
       );
     }
     // The request can be refused (a busy form denying the close): the popup
@@ -16923,7 +17003,7 @@ const renderIntoCallout = (jsx$1, calloutMessageElement, {
     },
     children: jsx$1
   });
-  render(calloutJsx, calloutMessageElement);
+  render$1(calloutJsx, calloutMessageElement);
 };
 
 // An HTML message is rendered through preact rather than innerHTML: what a
@@ -16946,7 +17026,7 @@ const renderHtmlIntoCallout = (html, calloutMessageElement, {
 // (a DOM node, an iframe); innerHTML alone would leave preact believing its
 // tree is still there.
 const clearCalloutMessage = calloutMessageElement => {
-  render(null, calloutMessageElement);
+  render$1(null, calloutMessageElement);
   calloutMessageElement.innerHTML = "";
 };
 const domToVNodes = node => {
@@ -33144,10 +33224,222 @@ const useUrlSearchParam = (paramName, defaultValue) => {
   return [value, setSearchParamValue];
 };
 
+/**
+ * The colour the browser paints around the page — Chrome's address bar on
+ * Android, the status bar of an installed app — read from
+ * `<meta name="theme-color">`. It sits right above the page's top edge, so it
+ * reads as part of whatever is drawn there, and two layers decide it:
+ *
+ * - What the page asks for: the theme-color metas a `<Head>` brings. The last
+ *   Head to arrive wins, whatever order they leave in — the title's rule, for
+ *   the title's reason (see head.jsx).
+ * - What the top layer lays over that edge: an open popup paints its backdrop
+ *   over what is under it, and its own surface too when it is flush with the
+ *   top edge. Popups sit above every Head, in opening order, and are painted
+ *   again from what is under them each time it changes — a page changing
+ *   under an open popup is dimmed by it all the same.
+ *
+ * The browser reads the first theme-color meta whose `media` matches, in tree
+ * order: a Head appending its meta after an earlier one would never be read.
+ * So navi writes the result into metas of its own placed before any other, and
+ * a meta written in the HTML is the bottom of the stack. A popup paints over
+ * every meta of the list, `media` kept, so whichever one the browser picks is
+ * the one it would have picked, painted over.
+ */
+
+const headEntries = [];
+const popupLayers = [];
+const ownMetas = [];
+
+/**
+ * @param {Array<{ content: string, media: string|null }>} themeColors
+ * @returns {() => void} Takes them away.
+ */
+const pushHeadThemeColors = (themeColors) => {
+  headEntries.push(themeColors);
+  queueRender();
+  return () => {
+    headEntries.splice(headEntries.indexOf(themeColors), 1);
+    queueRender();
+  };
+};
+
+/**
+ * @param {object} paint
+ * @param {string} [paint.themeColor] - Forces the colour, nothing is painted.
+ * @param {string|null} [paint.backdropColor] - Laid over the page's colour.
+ * @param {string|null} [paint.surfaceColor] - Laid over that, for a popup
+ *   flush with the top edge.
+ * @returns {() => void} Takes the layer away.
+ */
+const pushPopupThemeColor = ({
+  themeColor,
+  backdropColor,
+  surfaceColor,
+}) => {
+  let layer;
+  if (themeColor) {
+    layer = { color: themeColor };
+  } else {
+    const paints = [];
+    for (const color of [backdropColor, surfaceColor]) {
+      if (!color) {
+        continue;
+      }
+      const rgba = parseColor(color);
+      if (rgba[3] > 0) {
+        paints.push(rgba);
+      }
+    }
+    // Nothing laid over the edge: the colour under it stays, as it is.
+    if (paints.length === 0) {
+      return () => {};
+    }
+    layer = { paints };
+  }
+  popupLayers.push(layer);
+  queueRender();
+  return () => {
+    popupLayers.splice(popupLayers.indexOf(layer), 1);
+    queueRender();
+  };
+};
+
+let renderQueued = false;
+// Once per commit: a Head re-rendering leaves and arrives again in the same
+// commit, and the browser must not be handed the colour from in between.
+const queueRender = () => {
+  if (renderQueued) {
+    return;
+  }
+  renderQueued = true;
+  queueMicrotask(render);
+};
+
+const render = () => {
+  renderQueued = false;
+  const htmlMetas = Array.from(
+    document.head.querySelectorAll('meta[name="theme-color"]'),
+  ).filter((meta) => !ownMetas.includes(meta));
+  const htmlColors = htmlMetas.map((meta) => ({
+    content: meta.getAttribute("content"),
+    media: meta.getAttribute("media"),
+  }));
+  let colors = [];
+  for (let i = headEntries.length - 1; i >= 0; i--) {
+    colors.push(...headEntries[i]);
+  }
+  colors.push(...htmlColors);
+  for (const layer of popupLayers) {
+    colors = paintLayer(layer, colors);
+  }
+  // What the HTML metas say reaches the browser without a copy.
+  while (colors.length > 0 && htmlColors.includes(colors[colors.length - 1])) {
+    colors.pop();
+  }
+
+  while (ownMetas.length > colors.length) {
+    ownMetas.pop().remove();
+  }
+  colors.forEach(({ content, media }, index) => {
+    let meta = ownMetas[index];
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      const previousMeta = ownMetas[index - 1];
+      if (previousMeta) {
+        previousMeta.after(meta);
+      } else if (htmlMetas.length > 0) {
+        htmlMetas[0].before(meta);
+      } else {
+        document.head.append(meta);
+      }
+      ownMetas.push(meta);
+    }
+    if (meta.getAttribute("content") !== content) {
+      meta.setAttribute("content", content);
+    }
+    if (meta.getAttribute("media") !== media) {
+      if (media === null) {
+        meta.removeAttribute("media");
+      } else {
+        meta.setAttribute("media", media);
+      }
+    }
+  });
+};
+
+const paintLayer = (layer, colors) => {
+  if (layer.color) {
+    return [{ content: layer.color, media: null }];
+  }
+  const underColors =
+    colors.length > 0 ? colors : [{ content: null, media: null }];
+  const painted = [];
+  for (const { content, media } of underColors) {
+    let rgba = content === null ? null : parseUnderColor(content);
+    for (const paint of layer.paints) {
+      rgba = rgba ? composite(paint, rgba) : paint;
+    }
+    // Over no colour at all the browser keeps one of its own, which a
+    // translucent paint cannot be laid over.
+    if (Math.round(rgba[3] * 255) === 255) {
+      painted.push({ content: toHex(rgba), media });
+    }
+  }
+  return painted;
+};
+
+// The browser shows a theme-color opaque, whatever alpha it was written with.
+const parseUnderColor = (color) => {
+  const rgba = parseColor(color);
+  if (rgba[3] === 0) {
+    return null;
+  }
+  return [rgba[0], rgba[1], rgba[2], 1];
+};
+
+// Source-over, the way the backdrop is drawn over the page.
+const composite = (over, under) => {
+  const [r1, g1, b1, a1] = over;
+  const [r2, g2, b2, a2] = under;
+  const alpha = a1 + a2 * (1 - a1);
+  const mix = (c1, c2) => (c1 * a1 + c2 * a2 * (1 - a1)) / alpha;
+  return [mix(r1, r2), mix(g1, g2), mix(b1, b2), alpha];
+};
+
+const toHex = ([r, g, b]) =>
+  `#${[r, g, b]
+    .map((channel) => Math.round(channel).toString(16).padStart(2, "0"))
+    .join("")}`;
+
+// A canvas reads every colour syntax the browser knows — oklch(), color(),
+// a keyword — and hands back sRGB bytes, which is what a theme-color meta is
+// sure to be understood in, whatever getComputedStyle answered with.
+let colorContext = null;
+const parseColor = (color) => {
+  if (!colorContext) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    colorContext = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  colorContext.clearRect(0, 0, 1, 1);
+  // fillStyle ignores a colour it cannot parse: reset first, so that one draws
+  // nothing rather than the previous colour.
+  colorContext.fillStyle = "transparent";
+  colorContext.fillStyle = color;
+  colorContext.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = colorContext.getImageData(0, 0, 1, 1).data;
+  return [r, g, b, a / 255];
+};
+
 // The title belongs to the last Head to arrive, whatever order they leave in:
 // the page being left by a route transition is taken down AFTER the page
 // arriving is up (see keepLeavingPages in route.jsx), and putting back the
-// title it found would put its own page's title over the new one.
+// title it found would put its own page's title over the new one. A
+// theme-color meta follows the same rule, kept by theme_color.js, where the
+// popups of the top layer paint over it.
 const titleEntries = [];
 let titleWithoutHead = null;
 const Head = ({
@@ -33159,6 +33451,7 @@ const Head = ({
     }
     const childArray = Array.isArray(children) ? children : [children];
     const appendedElements = [];
+    const themeColors = [];
     let titleEntry = null;
     for (const child of childArray) {
       if (!child) {
@@ -33171,6 +33464,13 @@ const Head = ({
         };
         continue;
       }
+      if (child.type === "meta" && child.props.name === "theme-color") {
+        themeColors.push({
+          content: child.props.content,
+          media: child.props.media ?? null
+        });
+        continue;
+      }
       const el = document.createElement(child.type);
       const props = child.props || {};
       for (const [key, value] of Object.entries(props)) {
@@ -33186,7 +33486,9 @@ const Head = ({
       titleEntries.push(titleEntry);
       document.title = titleEntry.title;
     }
+    const removeThemeColors = themeColors.length > 0 ? pushHeadThemeColors(themeColors) : null;
     return () => {
+      removeThemeColors?.();
       if (titleEntry) {
         titleEntries.splice(titleEntries.indexOf(titleEntry), 1);
         const lastEntry = titleEntries[titleEntries.length - 1];
@@ -36173,6 +36475,9 @@ const rebuildWatcher = () => {
     if (fromIndex === index) {
       return;
     }
+    // A page of a relation can be a param: a move between two of them is a
+    // page change the path does not show (see page_change.js).
+    notePageChange();
     if (navigationAnimated) {
       // The movement on screen was turned round for this very navigation (see
       // turnRunningTransitionRound): it is already being answered, by the
@@ -37537,6 +37842,10 @@ const RouteTravel = ({
         }
         return;
       }
+      // Whoever asked for it: a tab of this row can be a param, and a move
+      // between two of them is a page change the path does not show (see
+      // page_change.js).
+      notePageChange();
       const page = pages[index];
       // A page this box asked for itself — a travel's own navigation, or one
       // it had given up waiting on: what arrives here is the answer to a
@@ -54254,11 +54563,13 @@ const Expandable = props => {
   openController.openEffect = openEvent => {
     const contentContainer = contentContainerRef.current;
     // `silent`: the expandable was already open when the page appeared
-    // (`open`/`defaultOpen` at mount). Nothing changed for anyone to be told
-    // about, nothing was ever shown closed to move away from, and a page must
-    // not have its focus stolen by a section that was simply already open — so
-    // an opening that was never an opening plays nothing, says nothing and
-    // takes nothing. The action it carries still runs: its content is due.
+    // (`open`/`defaultOpen` at mount, or the navigation putting that page on
+    // screen opening it — see page_change.js). Nothing changed for anyone to
+    // be told about, nothing was ever shown closed to move away from, and a
+    // page must not have its focus stolen by a section that was simply
+    // already open — so an opening that was never an opening plays nothing,
+    // says nothing and takes nothing. The action it carries still runs: its
+    // content is due.
     const silent = Boolean(openEvent.detail.silent);
     const revealing = animation && !silent && Boolean(contentContainer);
     // Where the last paint left the track — 0 when fully closed, partway when
@@ -54305,7 +54616,9 @@ const Expandable = props => {
         effectiveAction.abort();
       }
       cancelSettleWatch();
-      const collapsing = animation && Boolean(contentContainerAtClose);
+      // `silent`: closed by the navigation that puts another page on screen,
+      // which is its movement (see page_change.js).
+      const collapsing = animation && !closeEvent.detail.silent && Boolean(contentContainerAtClose);
       if (collapsing) {
         // Now, while the content is still fully laid out — the collapsing
         // track uncovers a content frozen at that size.
@@ -61661,10 +61974,23 @@ const SlideContainer = ({
       y: 0
     };
     const durationMs = durationToMs(duration);
+    // A change of slide the page changing carries is no travel: the page is
+    // the movement, and the slides land where the address puts them (see
+    // page_change.js). A travel still playing is cut on the spot, and the
+    // indicator riding it with it.
+    const landsWithPage = isRenderingPageChange() && (stageRef.current ? stageRef.current.area : drawnAreaRef.current) !== currentArea;
+    if (landsWithPage && trackAnimationRef.current) {
+      trackAnimationRef.current.cancel();
+      trackAnimationRef.current = null;
+      movingRef.current = null;
+      cancelTravelProgressAnimation();
+      paintTravelProgress(0);
+    }
+    const still = noTravel || landsWithPage;
     // Nothing is travelling, so nothing is staged: the picture to paint is the
     // map itself, and a stage left over from a travel that has just been given
     // up on would be painted instead of it.
-    if (noTravel) {
+    if (still) {
       stageRef.current = null;
     }
     let stage = stageRef.current;
@@ -61672,7 +61998,7 @@ const SlideContainer = ({
     // between the picture and the slide arriving, on the axis it walks.
     let travelStep = null;
     const drawnArea = stage ? stage.area : drawnAreaRef.current;
-    const travelStarts = !noTravel && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
+    const travelStarts = !still && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
     if (travelStarts) {
       // Where the slide being left IS — the place the stage gave it if a travel
       // was already playing (a press landing mid-travel departs from where the
@@ -61799,7 +62125,7 @@ const SlideContainer = ({
     // duration (the ask is zero, so ratioOfOneTravel answers 1), slowing the
     // travel at every re-render.
     const sameTravelPlaying = travelInFlight && !offsetDragged && offsetTargetBefore === offset;
-    const travels = !sameTravelPlaying && !noTravel && durationMs > 0 && offsetBefore !== undefined && offsetBefore !== offset;
+    const travels = !sameTravelPlaying && !still && durationMs > 0 && offsetBefore !== undefined && offsetBefore !== offset;
     if (travels) {
       // The time it takes is the distance it has left to cover: a travel picked
       // up a fifth of the way through goes back in a fifth of the time, so what
@@ -65795,9 +66121,17 @@ const css$E = /* css */`
        on its own, sharp, above the wall: any wall on that frame — even a
        half-strength wash and blur — is a flash on the anchor. So the wall
        arrives from nothing, over the movement: on that frame the page is
-       untouched, and the anchor with it. */
+       untouched, and the anchor with it.
+       Keyed on the aria-expanded flip, like the local wall: openEffect reads
+       the layout while the transitions are off, which spends @starting-style
+       with nothing armed. @starting-style stays for an opening that reads
+       nothing before the flip. A silent opening flips before the transitions
+       come back, hence the :not(): its wall lands at once. */
     &[data-lifting] {
-      &::backdrop {
+      &[aria-expanded="false"]::backdrop {
+        opacity: 0;
+      }
+      &[aria-expanded="true"]:not([navi-transitions-off])::backdrop {
         opacity: 1;
         transition-property: opacity;
         transition-duration: var(--navi-popup-lift-duration, 0.25s);
@@ -65808,6 +66142,12 @@ const css$E = /* css */`
         }
       }
     }
+    /* Off while the dialog's own transitions are off (switchTransitionsOff):
+       the inline style that turns them off cannot reach a pseudo-element.
+       After the rules above, which it must win over at equal weight. */
+    &[navi-transitions-off]::backdrop {
+      transition-property: none;
+    }
 
     &[data-focus-visible],
     /* …or something filling it holds the keyboard and offers its ring to
@@ -66251,6 +66591,16 @@ const css$E = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
+ * @param {string|false} [props.themeColor] - The colour the browser paints
+ *   above the page (`<meta name="theme-color">`: Chrome's address bar on
+ *   Android, an installed app's status bar) while this dialog is open.
+ *   Left out, it is what the dialog lays over the top edge of the screen: its
+ *   backdrop over the colour the page asked for (`<Head>`), and its own
+ *   background over that when it is flush with the top edge
+ *   (`marginWithContainer={0}` with `expand`/`expandY` or a top
+ *   `positionArea`). A colour forces it, for a surface whose colour cannot be
+ *   read (an image, a gradient); `false` leaves the page's colour alone.
+ *   `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   dialog so the page/container behind it can't scroll while it's open.
  *   A `layer="local"` dialog always locks its own positioned ancestor's
@@ -66774,6 +67124,9 @@ const useDialogProps = props => {
     // so both objects below get them (see this file's CSS).
     backdropColor,
     backdropFilter,
+    // Read at the opening, with the backdrop and the surface it would
+    // otherwise be worked out from (see openEffect).
+    themeColor,
     scrollCapture: scrollCaptureProp,
     // "auto" (default) → the dialog follows its content. "frozen" → measured
     // once, held at that size while open. See this prop's own JSDoc above.
@@ -67030,8 +67383,9 @@ const useDialogProps = props => {
     const dialogEl = ref.current;
     // A mount-time opening was never seen closed (see openEffect's own
     // `silent`): there is no box it comes from, because nothing was shown
-    // before it.
-    if (!dialogEl || opened && (!lifting || event.detail.silent)) {
+    // before it. And a change a page change carries moves with that page,
+    // in and out of no anchor (see page_change.js).
+    if (!dialogEl || event.detail.silent || opened && !lifting) {
       applyChange();
       return;
     }
@@ -67087,8 +67441,9 @@ const useDialogProps = props => {
     }
 
     // Set by useOpenControllerByProps for the very first open triggered by
-    // `open`/`defaultOpen` already being truthy at mount — see popover.jsx's
-    // own openEffect for the full reasoning, mirrored here identically.
+    // `open`/`defaultOpen` already being truthy at mount, and for an open a
+    // page change carries — see popover.jsx's own openEffect for the full
+    // reasoning, mirrored here identically.
     const silent = Boolean(e.detail.silent);
 
     // document.documentElement — the shared "no real container, use the
@@ -67132,7 +67487,7 @@ const useDialogProps = props => {
     // comment), even though Dialog never needs to measure/flip anything: it
     // still needs a genuinely rendered "closed" frame to transition from, not a
     // jump straight from not-shown to aria-expanded="true".
-    dialogEl.style.transitionProperty = "none";
+    switchTransitionsOff(dialogEl);
     if (backdropEl) {
       disarmBackdropHideRef.current?.();
       disarmBackdropHideRef.current = null;
@@ -67400,18 +67755,28 @@ const useDialogProps = props => {
       dialogEl.setAttribute("aria-expanded", "true");
       backdropEl?.setAttribute("aria-expanded", "true");
       dialogEl.getBoundingClientRect();
-      dialogEl.style.transitionProperty = "";
+      switchTransitionsOn(dialogEl);
       if (backdropEl) {
         backdropEl.style.transitionProperty = "";
       }
     } else {
-      dialogEl.style.transitionProperty = "";
+      switchTransitionsOn(dialogEl);
       dialogEl.setAttribute("aria-expanded", "true");
       backdropEl?.setAttribute("aria-expanded", "true");
       if (backdropEl) {
         backdropEl.style.transitionProperty = "";
       }
     }
+    // What the browser paints above the page goes with what is laid over its
+    // top edge, from the start of the opening to the start of the closing: a
+    // local dialog lays nothing there.
+    if (isTopLayer && themeColor !== false) {
+      addCleanup(pushPopupThemeColor({
+        themeColor,
+        backdropColor: backdrop ? getComputedStyle(dialogEl, "::backdrop").backgroundColor : null,
+        surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
+      }));
+    }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(dialogEl) : null;
     // Handing the focus to a field is what raises the on-screen keyboard, and
     // the keyboard takes away the very room this dialog was just placed
@@ -67441,6 +67806,15 @@ const useDialogProps = props => {
     return closeEvent => {
       debugPopup(`"${closeEvent.type}" on ${getElementSignature(closeEvent.target)} -> closeDialog`);
       clearTextSelectionInside(dialogEl);
+      // Closed by the navigation that puts another page on screen: it leaves
+      // with that page, and plays no exit of its own (see page_change.js).
+      const silent = Boolean(closeEvent.detail.silent);
+      if (silent) {
+        switchTransitionsOff(dialogEl);
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "none";
+        }
+      }
       dialogEl.setAttribute("aria-expanded", "false");
       if (!isTopLayer) {
         openLocalDialogCount = Math.max(0, openLocalDialogCount - 1);
@@ -67480,7 +67854,7 @@ const useDialogProps = props => {
       // next opening clears it (see openEffect's own unfreezeSize).
       freezeSize(dialogEl);
       cancelOpenInteractionSuppression?.();
-      if (hasCssTransitionAnimation) {
+      if (hasCssTransitionAnimation && !silent) {
         suppressPointerEventsDuringTransition(dialogEl);
       }
       if (backdropEl) {
@@ -67491,6 +67865,15 @@ const useDialogProps = props => {
       }
       restoreFocus(closeEvent);
       cleanup();
+      if (silent) {
+        // The closed frame committed with nothing transitioning, before
+        // transitions come back for the next opening.
+        dialogEl.getBoundingClientRect();
+        switchTransitionsOn(dialogEl);
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "";
+        }
+      }
     };
   };
   const onKeyDownShortcuts = createOnKeyDownForShortcuts({
@@ -67760,6 +68143,19 @@ const warnBottomSheetHoldingKeyboardControl = dialogEl => {
   }
   console.warn(`[navi] a Dialog docked to the bottom edge (dockedOnSmallTouchScreen="bottom") holds a field that raises the virtual keyboard. On a phone the keyboard rises from the edge the sheet rests on and reflows the sheet into the strip left above it, at every keystroke. A sheet one types into rests on the top edge: dockedOnSmallTouchScreen without a value. "bottom" is for a sheet one reads and taps.`, controlEl);
 };
+
+// The dialog's own transitions, off while a frame is pinned (the closed one an
+// entrance starts from, the open one a silent opening lands on, the closed one
+// a silent close leaves) and back on after it. A modal's wall is its native
+// ::backdrop, which takes no inline style: it reads the attribute instead.
+const switchTransitionsOff = dialogEl => {
+  dialogEl.style.transitionProperty = "none";
+  dialogEl.setAttribute("navi-transitions-off", "");
+};
+const switchTransitionsOn = dialogEl => {
+  dialogEl.style.transitionProperty = "";
+  dialogEl.removeAttribute("navi-transitions-off");
+};
 const DIALOG_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", ":focus-within"];
 
 // Lets consumers pass animationDuration="0.5s" as a regular prop; Box maps
@@ -68210,6 +68606,12 @@ const css$D = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
+ * @param {string|false} [props.themeColor] - The colour the browser paints
+ *   above the page (`<meta name="theme-color">`: Chrome's address bar on
+ *   Android, an installed app's status bar) while this popover is open.
+ *   Left out, it is the backdrop laid over the colour the page asked for
+ *   (`<Head>`), and the page's colour when there is no backdrop. A colour
+ *   forces it; `false` leaves the page's colour alone. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   popover so the page/container behind it can't scroll while it's open.
  * @param {boolean} [props.focusCapture] - Traps Tab navigation inside the
@@ -68554,6 +68956,9 @@ const usePopoverProps = props => {
     // which is a sibling element (see this file's top comment).
     backdropColor,
     backdropFilter,
+    // Read at the opening, with the backdrop it would otherwise be worked out
+    // from (see openEffect).
+    themeColor,
     group,
     scrollCapture,
     focusCapture,
@@ -68692,8 +69097,10 @@ const usePopoverProps = props => {
     // `open`/`defaultOpen` already being truthy at mount — there's nothing
     // to visually transition away from (nothing was ever shown as "closed"
     // to the user), so this open skips the animation entirely instead of
-    // playing it against a closed frame that was never actually seen. See
-    // the final commit step below for how that's done.
+    // playing it against a closed frame that was never actually seen. Set
+    // too for an open the page changing carries: that page is its movement
+    // (see page_change.js). See the final commit step below for how that's
+    // done.
     const silent = Boolean(e.detail.silent);
     const [cleanup, addCleanup] = createPubSub(true);
 
@@ -69129,7 +69536,7 @@ const usePopoverProps = props => {
     // focus in. Inlined rather than a standalone function since it only
     // has this one call site.
     //
-    // `silent` (mounting already open via `open`/`defaultOpen`) flips the
+    // `silent` (mounting already open, or carried by a page change) flips the
     // order instead: aria-expanded first, *then* re-enable transitions, with
     // its own forced reflow in between the two — without that reflow, the
     // browser coalesces "flip aria-expanded" and "re-enable transitions"
@@ -69162,6 +69569,15 @@ const usePopoverProps = props => {
         backdropEl.style.transitionProperty = "";
       }
     }
+    // What the browser paints above the page goes with what is laid over its
+    // top edge, from the start of the opening to the start of the closing: a
+    // local popover's backdrop stops at its container.
+    if (isTopLayer && themeColor !== false) {
+      addCleanup(pushPopupThemeColor({
+        themeColor,
+        backdropColor: backdropEl ? getComputedStyle(backdropEl).backgroundColor : null
+      }));
+    }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(popoverEl) : null;
     // autoFocus={false}: opening moves no focus at all — whoever has the
     // keyboard keeps it (combobox-style suggestions under an input being
@@ -69176,6 +69592,15 @@ const usePopoverProps = props => {
     return closeEvent => {
       debugPopup(closeEvent, `closePopover()`);
       clearTextSelectionInside(popoverEl);
+      // Closed by the navigation that puts another page on screen: it leaves
+      // with that page, and plays no exit of its own (see page_change.js).
+      const silent = Boolean(closeEvent.detail.silent);
+      if (silent) {
+        popoverEl.style.transitionProperty = "none";
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "none";
+        }
+      }
       popoverEl.setAttribute("aria-expanded", "false");
       // Set regardless of isTopLayer — see the open side's own identical
       // comment (openEffect above) for why hidePopover() alone isn't
@@ -69202,7 +69627,7 @@ const usePopoverProps = props => {
       // open is its own separate call with no way to reach back into this
       // one).
       cancelOpenInteractionSuppression?.();
-      if (hasCssTransitionAnimation) {
+      if (hasCssTransitionAnimation && !silent) {
         suppressPointerEventsDuringTransition(popoverEl);
       }
       if (backdropEl) {
@@ -69237,6 +69662,15 @@ const usePopoverProps = props => {
       popoverEl.removeAttribute("data-position-y-current");
       popoverEl.removeAttribute("data-position-x-current");
       cleanup();
+      if (silent) {
+        // The closed frame committed with nothing transitioning, before
+        // transitions come back for the next opening.
+        popoverEl.getBoundingClientRect();
+        popoverEl.style.transitionProperty = "";
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "";
+        }
+      }
     };
   };
   const onKeyDownShortcuts = createOnKeyDownForShortcuts({
@@ -69560,6 +69994,10 @@ const css$C = /* css */`@layer navi {
  *   identically): the wash the backdrop paints over what is behind.
  * @param {string} [props.backdropFilter] - Forwarded as-is: what that wash
  *   does to the picture underneath, `"blur(4px)"` and the like.
+ * @param {string|false} [props.themeColor] - Forwarded as-is: the colour the
+ *   browser paints above the page while the popup is open, worked out from
+ *   what it lays over the top edge when left out. A colour forces it, `false`
+ *   leaves the page's colour alone.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`|"expanding"|`expand-${string}`|"lifting"|{open: boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`, close: "lifting"}} [props.animation]
  *   - Forwarded to whichever renders — see either component's own doc.
  *   `"expanding"`/`"expand-*"` are `Popover`'s own; `"lifting"` and
@@ -70571,6 +71009,26 @@ const PickerCustom = props => {
             if (isWithinPickerContent(e.target)) {
               return null;
             }
+            // Still open at the click of a later press: that press brought no
+            // mousedown to close on (a drag source cancelled its pointerdown),
+            // so it closes here, as it opens here in that case. A mousedown
+            // that came has closed it already; the press that opened it is
+            // only ending.
+            if (openController.opened && !openedDuringThisPress(openController)) {
+              return {
+                name: "click to close picker",
+                intent: "read",
+                prevented: () => {
+                  e.preventDefault();
+                },
+                allowed: () => {
+                  requestClose(e, {
+                    isCancel: true
+                  });
+                  e.preventDefault();
+                }
+              };
+            }
             if (!opensOnPress) {
               // Neither the tap, nor the click a hold leaves behind: the press
               // is not what opens this picker.
@@ -71226,12 +71684,12 @@ const isScrolling = (element) => {
   if (element === undefined) {
     return scrollActivitySignal.peek();
   }
-  return asScroller(element).hasAttribute("navi-scrolling");
+  return asScroller$1(element).hasAttribute("navi-scrolling");
 };
 
 // The page scroll is dispatched on the document; the element carrying the
 // attribute is the one CSS can reach, document.scrollingElement.
-const asScroller = (eventTargetOrElement) => {
+const asScroller$1 = (eventTargetOrElement) => {
   if (eventTargetOrElement === document || eventTargetOrElement === window) {
     return document.scrollingElement;
   }
@@ -71242,7 +71700,7 @@ const idleTimeoutMap = new Map();
 document.addEventListener(
   "scroll",
   (e) => {
-    const scroller = asScroller(e.target);
+    const scroller = asScroller$1(e.target);
     const idleTimeout = idleTimeoutMap.get(scroller);
     if (idleTimeout !== undefined) {
       clearTimeout(idleTimeout);
@@ -71264,6 +71722,111 @@ document.addEventListener(
   { capture: true, passive: true },
 );
 
+/*
+ * Whether a scroller is gliding: moving on its own toward a place it was sent
+ * to, with no hand on it — a key (Home, PageDown, Space), a smooth `scrollTo`
+ * or `scrollIntoView`, the status bar tap on iOS. The other scrolls follow a
+ * hand: a finger on the screen, a wheel turning.
+ *
+ * It matters to whoever writes a scroll position while one plays: the write is
+ * an instant scroll, and the browser abandons the glide for it, short of where
+ * it was going. A hand is not abandoned: its next report moves the scroller on
+ * from wherever the write left it.
+ *
+ * A scroll is followed from its first "scroll" event to its "scrollend". It is
+ * a hand's when a finger was down as it started (the fling a finger leaves
+ * behind is still its own), when one is down now, or when a wheel turned
+ * around the time it started or since. A finger is down from its
+ * touchstart to its touchend, heard on what it touched: a list removes the
+ * items scrolled out of its window while the finger is still on one of them,
+ * and the touchend of a removed element never reaches the document.
+ *
+ * In a browser without "scrollend", nothing is said to glide: a scroll would
+ * never be seen ending.
+ */
+
+// The scroll a wheel turn causes starts in the frame the turn is read, or the
+// next one. A turn further from it moved nothing (a wheel at an edge) and is no
+// hand on a scroll that came from elsewhere.
+const WHEEL_REACH = 100;
+
+const flightMap = new WeakMap();
+let fingersDown = 0;
+let wheelTimeStamp = -Infinity;
+
+/**
+ * @param {Element} scrollerEl
+ * @returns {boolean}
+ */
+const isScrollGliding = (scrollerEl) => {
+  const flight = flightMap.get(scrollerEl);
+  if (!flight) {
+    return false;
+  }
+  if (flight.fingerDown || fingersDown > 0) {
+    return false;
+  }
+  if (wheelTimeStamp > flight.timeStamp - WHEEL_REACH) {
+    return false;
+  }
+  return true;
+};
+
+// The page scroll is dispatched on the document; the scroller asked about is
+// document.scrollingElement.
+const asScroller = (eventTarget) => {
+  if (eventTarget === document || eventTarget === window) {
+    return document.scrollingElement;
+  }
+  return eventTarget;
+};
+
+const onTouchEnd = (e) => {
+  fingersDown = e.touches.length;
+};
+
+if ("onscrollend" in window) {
+  // Capturing: "scroll" and "scrollend" do not bubble from an element.
+  document.addEventListener(
+    "scroll",
+    (e) => {
+      const scroller = asScroller(e.target);
+      if (flightMap.has(scroller)) {
+        return;
+      }
+      flightMap.set(scroller, {
+        timeStamp: e.timeStamp,
+        fingerDown: fingersDown > 0,
+      });
+    },
+    { capture: true, passive: true },
+  );
+  document.addEventListener(
+    "scrollend",
+    (e) => {
+      flightMap.delete(asScroller(e.target));
+    },
+    { capture: true, passive: true },
+  );
+  window.addEventListener(
+    "wheel",
+    (e) => {
+      wheelTimeStamp = e.timeStamp;
+    },
+    { capture: true, passive: true },
+  );
+  window.addEventListener(
+    "touchstart",
+    (e) => {
+      fingersDown = e.touches.length;
+      const touchedEl = e.composedPath()[0];
+      touchedEl.addEventListener("touchend", onTouchEnd, { passive: true });
+      touchedEl.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    },
+    { capture: true, passive: true },
+  );
+}
+
 const LoadingDotsSvg = () => {
   return jsxs("svg", {
     viewBox: "0 0 200 200",
@@ -74349,7 +74912,9 @@ const useListScrollSync = ({
   const scrolledFallback = scrolled === undefined || scrolled === null ? "start" : defaultScrolled ?? "start";
   const startPlaceRef = useRef({
     userTookOver: false,
-    wanted: scrolledWanted
+    wanted: scrolledWanted,
+    way: null,
+    arrived: false
   });
   if (startPlaceRef.current.wanted !== scrolledWanted) {
     startPlaceRef.current.wanted = scrolledWanted;
@@ -74560,8 +75125,10 @@ const useListScrollSync = ({
   // keeps moving while the list is still finding out how many items it has and
   // how tall one is, so landing there once would land next to it. What ends the
   // hold is the user reaching for the list — a wheel, a finger, a key, a hand
-  // on the scrollbar — and not the scroll event itself, which the list provokes
-  // as much as the user does.
+  // on the scrollbar — or anything else moving it. A scroll event alone does
+  // not say which: the list provokes as many as the user does, so only one
+  // landing off the way of the list's own placement ends it (see
+  // sendHeldScroll).
   const placeWhereHeld = () => {
     if (scrolledWanted === "start" || scrolledWanted === undefined || startPlaceRef.current.userTookOver || !ref.current) {
       return;
@@ -74610,12 +75177,7 @@ const useListScrollSync = ({
     }
     const scrollerEl = getScroller();
     if (openAt === "end") {
-      anchorRef.current = null;
-      if (horizontal) {
-        scrollerEl.scrollLeft = scrollerEl.scrollWidth;
-      } else {
-        scrollerEl.scrollTop = scrollerEl.scrollHeight;
-      }
+      sendHeldScroll(horizontal ? scrollerEl.scrollWidth : scrollerEl.scrollHeight);
       return;
     }
     if (typeof openAt === "number") {
@@ -74639,15 +75201,45 @@ const useListScrollSync = ({
     const itemRect = itemEl.getBoundingClientRect();
     const offsetWanted = resolveOpenOffset(getItemScrollInset(scrollerEl, itemEl, horizontal) + offset, horizontal ? viewportRect.width : viewportRect.height, horizontal ? itemRect.width : itemRect.height);
     const offsetNow = horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top;
+    const scrollNow = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
     const delta = offsetNow - offsetWanted;
     if (delta > -0.5 && delta < 0.5) {
+      sendHeldScroll(scrollNow);
       return;
     }
+    sendHeldScroll(scrollNow + delta);
+  };
+  // Every placement goes through here, the ones that find the list in place
+  // too: it keeps the way from where the scroller was to where it is sent,
+  // which is how a scroll event tells the hold's own scrolls from anyone
+  // else's (see letGoUnlessHeldScroll). The whole way, not just its end: under
+  // `scroll-behavior: smooth` the write glides, and every position on the way
+  // is the list's until it gets there.
+  const sendHeldScroll = position => {
+    const scrollerEl = getScroller();
+    const from = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
+    const max = horizontal ? scrollerEl.scrollWidth - scrollerEl.clientWidth : scrollerEl.scrollHeight - scrollerEl.clientHeight;
+    let to = position;
+    if (to > max) {
+      to = max;
+    }
+    if (to < 0) {
+      to = 0;
+    }
     anchorRef.current = null;
+    const place = startPlaceRef.current;
+    place.way = {
+      from,
+      to
+    };
+    if (to === from) {
+      place.arrived = true;
+      return;
+    }
     if (horizontal) {
-      scrollerEl.scrollLeft += delta;
+      scrollerEl.scrollLeft = to;
     } else {
-      scrollerEl.scrollTop += delta;
+      scrollerEl.scrollTop = to;
     }
   };
   useLayoutEffect(placeWhereHeld);
@@ -74720,6 +75312,19 @@ const useListScrollSync = ({
     evaluateWindowRef.current("items resized");
     return false;
   };
+  // The box around a held list changing shape is the hold's to answer too: it
+  // places the list again, the way it writes every scroll of its own (see
+  // sendHeldScroll) — written any other way, the scroll would read as someone
+  // else moving the list, and end the hold.
+  const placeIfHeldRef = useRef(null);
+  placeIfHeldRef.current = () => {
+    // Read again: a scroll may have ended the hold since this render.
+    if (!heldSomewhere || startPlaceRef.current.userTookOver) {
+      return false;
+    }
+    placeWhereHeld();
+    return true;
+  };
   useLayoutEffect(() => {
     if (scrolledWanted === "start" || scrolledWanted === undefined || !ref.current) {
       return undefined;
@@ -74864,6 +75469,9 @@ const useListScrollSync = ({
       if (!entries.some(entry => entry.target === scrollerEl)) {
         return;
       }
+      if (placeIfHeldRef.current()) {
+        return;
+      }
       const position = positionRef.current;
       if (!position) {
         return;
@@ -74976,6 +75584,15 @@ const useListScrollSync = ({
       return;
     }
     anchorRef.current = null;
+    if (isScrollGliding(scrollerEl)) {
+      // Nobody is looking at items standing still: they are passing by, on
+      // their way somewhere the browser was asked to take them (a key, a smooth
+      // scrollTo, the status bar). The write would be an instant scroll, and
+      // the browser abandons the glide for it, short of where it was going.
+      // Left alone, the items drawn above push the rest by `drift` while all
+      // of it moves, and the glide lands.
+      return;
+    }
     scrolledByListRef.current = true;
     if (horizontal) {
       scrollerEl.scrollLeft += drift;
@@ -75312,9 +75929,44 @@ const useListScrollSync = ({
         reportPosition();
         return;
       }
+      letGoUnlessHeldScroll();
       reportPosition();
       evaluateWindowRef.current("scroll");
     };
+    // A scroll the hold did not write is someone else moving the list, which
+    // ends the hold like a wheel does — the ones that come with no input event
+    // at all: the status bar tap on iOS, find in page, a script.
+    // Only once the list has stood where it holds itself, though. Until then
+    // the page is still settling around it, and some of that is written after
+    // the list placed itself: a navigation holding the rendering for its
+    // transition takes the arriving page to its top once the page rendered
+    // (whenRenderingResumes), and the hold puts it back at its next commit.
+    const letGoUnlessHeldScroll = () => {
+      const place = startPlaceRef.current;
+      const way = place.way;
+      if (place.userTookOver || place.wanted === "start" || place.wanted === undefined || !way) {
+        return;
+      }
+      const position = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
+      if (position > way.to - 1 && position < way.to + 1) {
+        // From then on only that place is the list's, or a scroll back the
+        // way it came would pass for its own.
+        place.way = {
+          from: way.to,
+          to: way.to
+        };
+        place.arrived = true;
+        return;
+      }
+      if (!place.arrived) {
+        return;
+      }
+      const low = way.from < way.to ? way.from : way.to;
+      const high = way.from < way.to ? way.to : way.from;
+      if (position < low - 1 || position > high + 1) {
+        place.userTookOver = true;
+      }
+    };
     // A page-level scroller does not emit "scroll" on the element itself
     // (document.scrollingElement); the document does.
     const scrollEventTarget = scrollerEl === document.scrollingElement ? document : scrollerEl;
@@ -78800,7 +79452,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *
  *   In every form the list holds itself there while it is still finding out
  *   how many items there are and how tall one is, and lets go the moment the
- *   user reaches for the list.
+ *   user reaches for the list, or anything else scrolls it (a script, find in
+ *   page, the status bar tap on iOS).
  * @param {(scrolled: {id: string, index: number, offset: number, visibleCount: number}) => void} [props.onScrolledChange]
  *   Where the list is, as the user scrolls: the item at the top of the view and
  *   how far below the place an item lands on its own (see `defaultScrolled`) it