@jsenv/navi 0.29.390 → 0.29.392

package/dist/dev/jsenv_navi.js

@@ -30237,9 +30237,13 @@ installImportMetaCssBuild(import.meta);
  * - a bar only one state has never meets a counterpart. It belongs to the page
  *   that has it, so it travels with that page — leaving by the keyframes the
  *   page being left leaves by, arriving by the ones the page arriving arrives
- *   by — instead of going out with the render. Under the pages, so a page
- *   coming over it covers it — a popup over them instead, standing where it
- *   stands in the document (see the z-order in route_transition.jsx).
+ *   by — instead of going out with the render. Over that page, as it is at
+ *   rest: the page runs under it, and what it paints outside its box (a button
+ *   standing up out of a tab bar) is not cut by its own page. Under the pages
+ *   only when its page is covered by the other one — a cover-* movement — so
+ *   the sheet comes over it; a popup over everything, standing where it
+ *   stands in the document (see the z-order in route_transition.jsx). Which
+ *   side a bar is on is said by a class on its group, written here.
  *
  * A popup shown in the top layer is furniture of the same kind, and its case
  * is the sharper one: it is a DOM descendant of the area, yet painted outside
@@ -30317,11 +30321,17 @@ const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
 const TOP_LAYER_WALL_SELECTOR =
   ".navi_dialog:modal, .navi_popover_backdrop:popover-open";
 const WALL_ATTRIBUTE = "data-navi-transition-wall";
-// Worn by a bar both states have, from the hold on: its two pictures are one
-// group, and the group is ordered over the pages (route_transition.jsx). Only
-// a bar — a popup's class is written by layout/popup_css.js, and a second rule
-// on the same property would replace it.
-const SHARED_ATTRIBUTE = "data-navi-transition-furniture-shared";
+// Which side of the movement a bar is on, worn by the bar and read by the
+// browser as the class of its group (the CSS below): "leaving" from the first
+// picture, "arriving" for a bar the state arriving brought, "shared" for one
+// that stands in both states, written over "leaving" at the hold. The group's
+// class is the one captured with the LAST state the element stands in, so a
+// bar only the state being left has keeps "leaving" from the first capture,
+// and a shared one takes "shared" from the second. The z-order in
+// route_transition.jsx is written on these three. Only a bar — a popup's
+// class is written by layout/popup_css.js, and a second rule on the same
+// property would replace it.
+const FURNITURE_ATTRIBUTE = "data-navi-transition-furniture";
 // What the wall paints, resolved on the matched element in both cases (the
 // dialog for its ::backdrop, the popover's wall for itself): the same two
 // properties, copied onto the stand-in.
@@ -30330,7 +30340,15 @@ const WALL_PROPERTIES = ["--backdrop-background", "--backdrop-filter"];
 // The pictures the wall is painted into: the pages', and every bar's own.
 const FIXED_BAR_SELECTOR$1 = ".navi_fixed_bar";
 
-const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition-furniture-shared] {
+const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition-furniture="leaving"] {
+  view-transition-class: navi_furniture_leaving;
+}
+
+.navi_fixed_bar[data-navi-transition-furniture="arriving"] {
+  view-transition-class: navi_furniture_arriving;
+}
+
+.navi_fixed_bar[data-navi-transition-furniture="shared"] {
   view-transition-class: navi_furniture_shared;
 }
 
@@ -30403,7 +30421,7 @@ const nameTransitionFurniture = (owner, areaElement) => {
     furnitureOwner = owner;
     namedElements = new Set();
   }
-  nameFurnitureAround(areaElement);
+  nameFurnitureAround(areaElement, "leaving");
   const sources = paintTransitionWalls(areaElement);
   // The state being left has walls: what no picture covers starts dimmed.
   // The frame the first picture is taken on shows the live document, so the
@@ -30430,10 +30448,10 @@ const holdTransitionFurniture = (owner, areaElement) => {
     if (!element.isConnected) {
       namesLeaving.push(nameByElement.get(element));
     } else if (element.matches(FIXED_BAR_SELECTOR$1)) {
-      element.setAttribute(SHARED_ATTRIBUTE, "");
+      element.setAttribute(FURNITURE_ATTRIBUTE, "shared");
     }
   }
-  const namesArriving = nameFurnitureAround(areaElement);
+  const namesArriving = nameFurnitureAround(areaElement, "arriving");
   const sources = paintTransitionWalls(areaElement);
   // The state arriving has walls: what no picture covers ends dimmed. Painted
   // from the state being left when that one had walls (they stay up if both
@@ -30483,7 +30501,8 @@ const holdTransitionFurniture = (owner, areaElement) => {
 
 // Returns the elements it had to name, which are the ones the state arriving
 // brought: everything else was already wearing its name from the first pass.
-const nameFurnitureAround = (areaElement) => {
+// `side` is what a bar named here is told it is on (see FURNITURE_ATTRIBUTE).
+const nameFurnitureAround = (areaElement, side) => {
   const namesAdded = [];
   for (const element of document.querySelectorAll(FURNITURE_SELECTOR)) {
     if (namedElements.has(element)) {
@@ -30509,6 +30528,9 @@ const nameFurnitureAround = (areaElement) => {
       nameByElement.set(element, name);
     }
     element.style.setProperty(NAME_PROPERTY$1, name);
+    if (element.matches(FIXED_BAR_SELECTOR$1)) {
+      element.setAttribute(FURNITURE_ATTRIBUTE, side);
+    }
     namedElements.add(element);
     namesAdded.push(name);
   }
@@ -30558,7 +30580,7 @@ const releaseTransitionFurniture = (owner) => {
   furnitureOwner = null;
   for (const element of namedElements) {
     element.style.removeProperty(NAME_PROPERTY$1);
-    element.removeAttribute(SHARED_ATTRIBUTE);
+    element.removeAttribute(FURNITURE_ATTRIBUTE);
   }
   namedElements = new Set();
   if (travelStyleElement) {
@@ -30881,7 +30903,20 @@ const measureTransitionWindowState = (element) => {
   };
 };
 
-const holdTransitionWindow = (owner, element, stateBefore) => {
+/**
+ * @param {object} options
+ * @param {boolean} options.furnitureLive - Whether the bars stay live under
+ *   the pictures for the movement (a travel), or are pictures of their own
+ *   ordered over the page they belong to (a route transition, see
+ *   transition_furniture.js). Decides how far the cut may be opened for the
+ *   picture being left — see bandTheCutMayBeRelaxedTo.
+ */
+const holdTransitionWindow = (
+  owner,
+  element,
+  stateBefore,
+  { furnitureLive },
+) => {
   const bandBefore = stateBefore.band;
   const rectAfter = element.getBoundingClientRect();
   const bandAfter = readBand();
@@ -30915,7 +30950,9 @@ const holdTransitionWindow = (owner, element, stateBefore) => {
   style.setProperty(WINDOW_OLD_LEFT_PROPERTY, `${rectBefore.left}px`);
   style.setProperty(WINDOW_NEW_TOP_PROPERTY, `${rectAfter.top}px`);
   style.setProperty(WINDOW_NEW_LEFT_PROPERTY, `${rectAfter.left}px`);
-  const oldBand = bandTheCutMayBeRelaxedTo(bandBefore, bandAfter, rectAfter);
+  const oldBand = furnitureLive
+    ? bandTheCutMayBeRelaxedTo(bandBefore, bandAfter, rectAfter)
+    : bandBefore;
   style.setProperty(OLD_BAND_TOP_PROPERTY, `${oldBand.top}px`);
   style.setProperty(OLD_BAND_RIGHT_PROPERTY, `${oldBand.right}px`);
   style.setProperty(OLD_BAND_BOTTOM_PROPERTY, `${oldBand.bottom}px`);
@@ -31078,18 +31115,25 @@ const readBand = () => {
   };
 };
 
-// How far the cut may be opened for the picture being left — the band its own
-// state kept free, which is the whole point of photographing it: furniture
-// present in only one of the two states is not the frame, it is part of what
-// changes, and cutting the page being left at a bar it never had shows its
-// header being sliced instead of leaving.
+// How far the cut may be opened for the picture being left when the furniture
+// is LIVE under the pictures — the band its own state kept free, which is the
+// whole point of photographing it: furniture present in only one of the two
+// states is not the frame, it is part of what changes, and cutting the page
+// being left at a bar it never had shows its header being sliced instead of
+// leaving.
 //
 // Never past what the picture ARRIVING needs, though: the cut is one line for
 // both pictures, so opening it for one opens it for the other. A box that runs
-// under the furniture it arrives beside — a page scrolled below a top bar —
-// would then be watched painting over that bar for the length of the movement,
-// which is what the cut exists to prevent. On such an edge the arriving band
-// stands, and the page being left is cut as it always was.
+// under the live furniture it arrives beside — a page scrolled below a top bar
+// — would then be watched painting over that bar for the length of the
+// movement, which is what the cut exists to prevent. On such an edge the
+// arriving band stands, and the page being left is cut as it always was.
+//
+// With the furniture photographed (a route transition) none of this holds: a
+// bar only the arriving state has is a picture ordered over the page it
+// belongs to, and a page arriving under it paints nothing over it. The band
+// of the state being left is then published as it was, so the page being
+// left is never cut at a bar it never had.
 const bandTheCutMayBeRelaxedTo = (bandBefore, bandAfter, rectAfter) => {
   return {
     top: rectAfter.top < bandAfter.top ? bandAfter.top : bandBefore.top,
@@ -31282,6 +31326,16 @@ const startViewTransition$1 = ensureDocumentStartViewTransition();
 const TRANSITION_ATTRIBUTE = "data-navi-route-transition";
 const TRANSITION_TYPE_ATTRIBUTE = "data-navi-route-transition-type";
 const TRANSITION_DURATION_PROPERTY = "--navi-route-transition-duration";
+// Which page the other one COVERS, when the movement is one page over the
+// other: "old" (the page arriving comes over the page being left) or "new"
+// (the page being left slides off the page arriving). Published by the type
+// as a value on the root, like its keyframes (see the css), and mirrored as an
+// attribute for the length of the transition so the rules that depend on it
+// — which page is on top, what is cut, where the furniture goes — can be
+// written statically. Absent for a movement where neither page covers the
+// other.
+const TRANSITION_COVERED_PROPERTY = "--navi-route-transition-covered";
+const TRANSITION_COVERED_ATTRIBUTE = "data-navi-route-transition-covered";
 // What the movement is played on. The root snapshot spans the viewport, and
 // the regions of elements captured on their own (a named bar) are BLANK in it
 // — a page sliding vertically then drags a blank band across the screen where
@@ -31364,7 +31418,7 @@ const css$12 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
       z-index: 1;
     }
 
-    &::view-transition-group(.navi_furniture_shared) {
+    &::view-transition-group(.navi_furniture_leaving), &::view-transition-group(.navi_furniture_arriving), &::view-transition-group(.navi_furniture_shared) {
       z-index: 2;
     }
 
@@ -31372,6 +31426,18 @@ const css$12 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
       z-index: 3;
     }
 
+    &[data-navi-route-transition-covered="old"] {
+      &::view-transition-group(.navi_furniture_leaving) {
+        z-index: 0;
+      }
+    }
+
+    &[data-navi-route-transition-covered="new"] {
+      &::view-transition-group(.navi_furniture_arriving) {
+        z-index: 0;
+      }
+    }
+
     &::view-transition-group(*), &::view-transition-old(*), &::view-transition-new(*) {
       animation-duration: var(--navi-route-transition-duration, .3s);
     }
@@ -31411,6 +31477,38 @@ const css$12 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     left: calc(var(--navi-transition-window-new-left) - var(--navi-transition-window-left));
   }
 
+  &[data-navi-route-transition-target="area"] {
+    &[data-navi-route-transition-covered="old"] {
+      &::view-transition-old(navi-route-transition) {
+        clip-path: polygon(calc(var(--navi-transition-old-band-left) - var(--navi-transition-window-old-left))
+              calc(var(--navi-transition-old-band-top) - var(--navi-transition-window-old-top)),
+            calc(100dvw - var(--navi-transition-old-band-right) - var(--navi-transition-window-old-left))
+              calc(var(--navi-transition-old-band-top) - var(--navi-transition-window-old-top)),
+            calc(100dvw - var(--navi-transition-old-band-right) - var(--navi-transition-window-old-left))
+              calc(100dvh - var(--navi-transition-old-band-bottom) - var(--navi-transition-window-old-top)),
+            calc(var(--navi-transition-old-band-left) - var(--navi-transition-window-old-left))
+              calc(100dvh - var(--navi-transition-old-band-bottom) - var(--navi-transition-window-old-top)));
+      }
+    }
+
+    &[data-navi-route-transition-covered="new"] {
+      &::view-transition-new(navi-route-transition) {
+        clip-path: polygon(calc(var(--navi-safe-area-inset-left) +
+                  var(--navi-transition-cover-left) - var(--navi-transition-window-new-left))
+              calc(var(--navi-safe-area-inset-top) +
+                  var(--navi-transition-cover-top) - var(--navi-transition-window-new-top)),
+            calc(100dvw - var(--navi-safe-area-inset-right) - var(--navi-transition-cover-right) - var(--navi-transition-window-new-left))
+              calc(var(--navi-safe-area-inset-top) +
+                  var(--navi-transition-cover-top) - var(--navi-transition-window-new-top)),
+            calc(100dvw - var(--navi-safe-area-inset-right) - var(--navi-transition-cover-right) - var(--navi-transition-window-new-left))
+              calc(100dvh - var(--navi-safe-area-inset-bottom) - var(--navi-transition-cover-bottom) - var(--navi-transition-window-new-top)),
+            calc(var(--navi-safe-area-inset-left) +
+                  var(--navi-transition-cover-left) - var(--navi-transition-window-new-left))
+              calc(100dvh - var(--navi-safe-area-inset-bottom) - var(--navi-transition-cover-bottom) - var(--navi-transition-window-new-top)));
+      }
+    }
+  }
+
   &[data-navi-route-transition-type] {
     &::view-transition-old(root), &::view-transition-new(root), &::view-transition-old(navi-route-transition), &::view-transition-new(navi-route-transition) {
       object-fit: none;
@@ -31495,10 +31593,18 @@ const css$12 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
   }
 
   &[data-navi-route-transition-type="cover-right"], &[data-navi-route-transition-type="cover-left"], &[data-navi-route-transition-type="cover-bottom"], &[data-navi-route-transition-type="cover-top"] {
+    &[data-navi-route-transition="forward"] {
+      --navi-route-transition-covered: old;
+    }
+
     &[data-navi-route-transition="back"] {
-      &::view-transition-old(root), &::view-transition-old(navi-route-transition) {
-        z-index: 1;
-      }
+      --navi-route-transition-covered: new;
+    }
+  }
+
+  &[data-navi-route-transition-covered="new"] {
+    &::view-transition-old(root), &::view-transition-old(navi-route-transition) {
+      z-index: 1;
     }
   }
 
@@ -31701,6 +31807,11 @@ const RouteTransitionArea = ({
  *       }
  *     }
  *
+ *   A type of the application's own that plays one page OVER the other says
+ *   which one is covered, next to its keyframes:
+ *   `--navi-route-transition-covered: old` (the page arriving comes over the
+ *   page being left) or `new` (the page being left slides off the page
+ *   arriving) — see docs/route_transitions.md, "Custom movements".
  *   Whatever is written here is what EVERY crossing of the pair plays. One
  *   crossing can ask for something else — `<Link routeTransition>`, or
  *   navTo(url, { routeTransition }) — which overrides this field by field, for
@@ -32344,6 +32455,12 @@ const beginTransition = ({
   documentElement.setAttribute(TRANSITION_ATTRIBUTE, direction);
   if (type) {
     documentElement.setAttribute(TRANSITION_TYPE_ATTRIBUTE, type);
+    // Read once the type is worn, which is what makes the type's value
+    // resolve; a value a type does not publish leaves the attribute off.
+    const covered = getComputedStyle(documentElement).getPropertyValue(TRANSITION_COVERED_PROPERTY).trim();
+    if (covered === "old" || covered === "new") {
+      documentElement.setAttribute(TRANSITION_COVERED_ATTRIBUTE, covered);
+    }
   }
   // Looked up per transition, not once: the area is the application's own
   // element and follows its lifecycle — a page layout without bars has none,
@@ -32446,7 +32563,9 @@ const beginTransition = ({
     // replaced holds nothing: what it wore was taken off at the takeover.
     if (areaElement && currentTransition === transition) {
       holdTransitionFurniture(transition, areaElement);
-      holdTransitionWindow(transition, areaElement, areaStateBefore);
+      holdTransitionWindow(transition, areaElement, areaStateBefore, {
+        furnitureLive: false
+      });
     }
   });
   const end = () => {
@@ -32481,6 +32600,7 @@ const releaseTransitionRoot = transition => {
   const documentElement = document.documentElement;
   documentElement.removeAttribute(TRANSITION_ATTRIBUTE);
   documentElement.removeAttribute(TRANSITION_TYPE_ATTRIBUTE);
+  documentElement.removeAttribute(TRANSITION_COVERED_ATTRIBUTE);
   documentElement.removeAttribute(TRANSITION_TARGET_ATTRIBUTE);
   releaseTransitionWindow(transition);
   releaseTransitionDestination(transition);
@@ -33235,7 +33355,11 @@ const RouteTravel = ({
       // which is what the box is measured through: the two states are at the
       // same place in the layout without being at the same place in the window
       // (see transition_window.js).
-      holdTransitionWindow(travel, elementRef.current, stateBefore);
+      // The bars stay live under the pictures for a travel: only the box is
+      // photographed (see the TRAVEL_ATTRIBUTE css).
+      holdTransitionWindow(travel, elementRef.current, stateBefore, {
+        furnitureLive: true
+      });
     });
     travel.viewTransition = viewTransition;
     if (scrub) {
@@ -50338,10 +50462,10 @@ const css$R = /* css */`.navi_expandable {
   }
 
   & > .navi_expandable_content_container {
-    clip-path: inset(-9999px -9999px 0);
     grid-template-rows: 0fr;
     display: grid;
     position: relative;
+    overflow-y: clip;
 
     & > .navi_expandable_content_sizer {
       min-height: 0;
@@ -50354,7 +50478,6 @@ const css$R = /* css */`.navi_expandable {
   }
 
   &[data-open-direction="up"] > .navi_expandable_content_container {
-    clip-path: inset(0 -9999px -9999px);
     align-content: end;
 
     & > .navi_expandable_content_sizer {
@@ -50376,9 +50499,9 @@ const css$R = /* css */`.navi_expandable {
     }
 
     & > .navi_expandable_content_container {
-      clip-path: inset(-9999px 0 0 -9999px);
       grid-template-rows: 0fr;
       grid-template-columns: 0fr;
+      overflow: clip;
 
       & > .navi_expandable_content_sizer {
         min-width: 0;
@@ -50396,7 +50519,6 @@ const css$R = /* css */`.navi_expandable {
     }
 
     &[data-open-direction="left"] > .navi_expandable_content_container {
-      clip-path: inset(-9999px -9999px 0 0);
       justify-content: end;
 
       & > .navi_expandable_content_sizer {
@@ -50418,11 +50540,10 @@ const css$R = /* css */`.navi_expandable {
   }
 
   &[aria-expanded="true"][data-settled] > .navi_expandable_content_container {
-    clip-path: none;
+    overflow: visible;
   }
 
   &:not([aria-expanded="true"])[data-settled] > .navi_expandable_content_container {
-    clip-path: none;
     overflow: clip;
   }
 
@@ -50519,11 +50640,12 @@ const useExpandableContext = partName => {
  *   that can scroll so the content revealed past its edge is on screen: an
  *   expandable opening at the bottom of a list otherwise grows below the
  *   fold, and the user sees the row grow but not what it grew with. Measured
- *   on the open layout and done once per opening, alongside the reveal
- *   (smoothly when `animation` plays, at once otherwise). An expandable
- *   taller than the scroller keeps its UI part on screen and the content
- *   follows as far as it fits. Only the nearest scroller moves — a popup or
- *   a page around it stays where it is.
+ *   on the open layout, once per opening; when `animation` plays the
+ *   scroller rides along with the reveal, at the track's own progress, and
+ *   otherwise it goes there at once. A `scroll-margin` on the expandable is
+ *   honored. An expandable taller than the scroller keeps its UI part on
+ *   screen and the content follows as far as it fits. Only the nearest
+ *   scroller moves — a popup or a page around it stays where it is.
  * @param maxContentHeight - Caps the content height; taller content scrolls
  *   inside the expandable instead of growing it.
  * @param mount - When the content is built and thrown away, a popup's own
@@ -50646,15 +50768,27 @@ const Expandable = props => {
     cancelSettleWatchRef.current?.();
     cancelSettleWatchRef.current = null;
   };
-  const watchSettle = () => {
+  // `stopRide`, when the scroller rides along with the reveal (keepInView):
+  // the ride is part of the movement, so it ends with it — settled or
+  // cancelled — and never on its own clock.
+  const watchSettle = stopRide => {
     const contentContainer = contentContainerRef.current;
     const contentElement = contentContainer.firstElementChild.firstElementChild;
-    cancelSettleWatchRef.current = whenTransitionSettles(contentContainer, () => {
+    const cancelWatch = whenTransitionSettles(contentContainer, () => {
       cancelSettleWatchRef.current = null;
+      if (stopRide) {
+        stopRide();
+      }
       contentElement.style.width = "";
       contentElement.style.height = "";
       setSettled(true);
     });
+    cancelSettleWatchRef.current = () => {
+      if (stopRide) {
+        stopRide();
+      }
+      cancelWatch();
+    };
   };
 
   // The reveal needs the content at its final size before the track starts
@@ -50673,17 +50807,22 @@ const Expandable = props => {
     } else {
       contentElement.style.height = `${finalRect.height}px`;
     }
+    let stopRide = null;
     if (keepInView) {
-      // Here and not once the reveal settles: the layout is the open one at
-      // this point, so where the content ends is known before the movement
-      // starts, and the scroll can travel along with it. The frozen content
-      // overflowing the collapsed track is still scrollable overflow (the
-      // one-sided clip-path, see the CSS), so the scroller can reach that
-      // position from the first frame.
-      scrollExpandableIntoView(rootRef.current, {
-        revealDirection,
-        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
-      });
+      // Measured here and not once the reveal settles: the layout is the open
+      // one at this point, so where the content ends is known before the
+      // movement starts. The scroll then rides the movement rather than
+      // running ahead of it (see rideScrollerAlongReveal).
+      const revealScroll = measureRevealScroll(rootRef.current, revealDirection);
+      if (revealScroll) {
+        const finalContainerRect = contentContainer.getBoundingClientRect();
+        stopRide = rideScrollerAlongReveal(revealScroll, {
+          contentContainer,
+          axis: isColumn ? "x" : "y",
+          startSize: isColumn ? startRect.width : startRect.height,
+          finalSize: isColumn ? finalContainerRect.width : finalContainerRect.height
+        });
+      }
     }
     // Put the tracks back where the last paint left them and let the
     // transition play from there. In fr — px does not interpolate with fr.
@@ -50706,6 +50845,7 @@ const Expandable = props => {
     contentContainer.style.transitionProperty = "";
     contentContainer.style.gridTemplateColumns = "";
     contentContainer.style.gridTemplateRows = "";
+    return stopRide;
   };
 
   // What opening LOOKS like here, and how to undo it — the one thing an
@@ -50737,12 +50877,17 @@ const Expandable = props => {
     // transfer there is nothing to restore on close either.
     const restoreFocus = autoFocus && !silent && contentContainer ? openController.transferFocusOnOpen(contentContainer) : null;
     if (revealing) {
-      armReveal(startRect);
-      watchSettle();
+      const stopRide = armReveal(startRect);
+      watchSettle(stopRide);
     } else if (keepInView && !silent && contentContainer) {
-      scrollExpandableIntoView(rootRef.current, {
-        revealDirection
-      });
+      const revealScroll = measureRevealScroll(rootRef.current, revealDirection);
+      if (revealScroll) {
+        // No behavior: the scroller's own scroll-behavior decides.
+        revealScroll.scrollerEl.scrollTo({
+          left: revealScroll.left,
+          top: revealScroll.top
+        });
+      }
     }
     if (!silent) {
       rootRef.current.dispatchEvent(createToggleEvent(true));
@@ -50784,7 +50929,7 @@ const Expandable = props => {
         }
       }
       if (collapsing) {
-        watchSettle();
+        watchSettle(null);
       }
       rootRef.current.dispatchEvent(createToggleEvent(false));
     };
@@ -51124,16 +51269,14 @@ Expandable.Content = ExpandableContent;
 // the one exception, excluded at the call site.
 const UI_INTERACTIVE_SELECTOR = ["a[href]", "button", "input", "select", "textarea", "label", "[role='button']", "[contenteditable='']", "[contenteditable='true']", "audio[controls]", "video[controls]"].join(", ");
 
-// Scrolls the nearest scroller that can scroll so the whole expandable — UI
-// part and revealed content — is in view. Measured on the layout as it stands,
-// so the caller calls it while the open layout is the one laid out (see
-// openEffect). A root taller than the view is aligned on its UI side instead:
-// what the user pressed stays on screen, and the content follows as far as it
-// fits. One scroller only — a popup or a page around it is left where it is.
-const scrollExpandableIntoView = (rootEl, {
-  revealDirection,
-  behavior
-}) => {
+// Where the nearest scroller that can scroll would have to be for the whole
+// expandable — UI part and revealed content — to be in view. Measured on the
+// layout as it stands, so the caller measures while the open layout is the
+// one laid out (see openEffect). A root taller than the view is aligned on
+// its UI side instead: what the user pressed stays on screen, and the content
+// follows as far as it fits. One scroller only — a popup or a page around it
+// is left where it is. Null when there is no scroller, or nothing to scroll.
+const measureRevealScroll = (rootEl, revealDirection) => {
   let scrollerEl = null;
   for (const scrollContainer of getScrollContainerSet(rootEl)) {
     if (isScrollable(scrollContainer)) {
@@ -51142,7 +51285,7 @@ const scrollExpandableIntoView = (rootEl, {
     }
   }
   if (!scrollerEl) {
-    return;
+    return null;
   }
   const rootRect = rootEl.getBoundingClientRect();
   let block = "nearest";
@@ -51154,12 +51297,74 @@ const scrollExpandableIntoView = (rootEl, {
   } else if (rootRect.width > scrollerEl.clientWidth) {
     inline = revealDirection === "right" ? "start" : "end";
   }
-  scrollIntoViewScoped(rootEl, {
+  const {
+    left,
+    top
+  } = getScrollIntoViewScopedOffsets(rootEl, {
     container: scrollerEl,
     block,
-    inline,
-    behavior
+    inline
   });
+  if (left === scrollerEl.scrollLeft && top === scrollerEl.scrollTop) {
+    return null;
+  }
+  return {
+    scrollerEl,
+    left,
+    top
+  };
+};
+
+// Moves the scroller toward where the reveal ends at the pace of the reveal
+// itself: every frame the track's progress is read from the container's size
+// and the scroll stands the same fraction of its own way. The scroll cannot
+// run ahead of the track: only the box's own growth extends the scroller's
+// range, and what the target adds around the box (a parent's padding, a
+// scroll-margin) becomes reachable as the track grows — a scroll started at
+// once would be clamped short of it. One clock, the transition's, so the
+// content never waits below the fold either. Returns what stops the ride.
+const rideScrollerAlongReveal = ({
+  scrollerEl,
+  left,
+  top
+}, {
+  contentContainer,
+  axis,
+  startSize,
+  finalSize
+}) => {
+  const startLeft = scrollerEl.scrollLeft;
+  const startTop = scrollerEl.scrollTop;
+  const leftDelta = left - startLeft;
+  const topDelta = top - startTop;
+  let frameId;
+  const tick = () => {
+    const rect = contentContainer.getBoundingClientRect();
+    const size = axis === "x" ? rect.width : rect.height;
+    let progress = 1;
+    if (finalSize !== startSize) {
+      progress = (size - startSize) / (finalSize - startSize);
+      if (progress < 0) {
+        progress = 0;
+      } else if (progress > 1) {
+        progress = 1;
+      }
+    }
+    scrollerEl.scrollTo({
+      left: startLeft + leftDelta * progress,
+      top: startTop + topDelta * progress,
+      // Driven frame by frame: a smooth scroll-behavior on the scroller is
+      // for a scroll that lands, not for one that is held.
+      behavior: "instant"
+    });
+    if (progress < 1) {
+      frameId = requestAnimationFrame(tick);
+    }
+  };
+  frameId = requestAnimationFrame(tick);
+  return () => {
+    cancelAnimationFrame(frameId);
+  };
 };
 const createToggleEvent = open => {
   const newState = open ? "open" : "closed";