@jsenv/navi 0.30.37 → 0.30.38

package/dist/dev/jsenv_navi.js

@@ -42632,7 +42632,12 @@ const watchRowScroll = (
 };
 
 installImportMetaCssBuild(import.meta);
-const css$16 = /* css */`.navi_route_travel {
+const css$16 = /* css */`@property --navi-route-row-pin {
+  syntax: "*";
+  inherits: false
+}
+
+.navi_route_travel {
   flex-direction: column;
   display: flex;
   position: relative;
@@ -42688,7 +42693,7 @@ const css$16 = /* css */`.navi_route_travel {
     display: flex;
   }
 
-  & > [data-route-row-pane][inert]:not([data-route-row-held]), &:has( > [data-route-row-held]) > [data-route-row-pane]:not([data-route-row-held]) {
+  & > [data-route-row-pane][inert]:not([data-route-row-held]), &[data-route-row-holding] > [data-route-row-pane]:not([data-route-row-held]) {
     top: var(--navi-route-row-pin, 0);
     contain: paint;
     max-height: 100dvh;
@@ -42860,11 +42865,25 @@ const RouteTravel = ({
   // when the row rests. Not what readers are told the page held is
   // (route_travel_hold.js): that follows the hand, and goes at its lift.
   const heldPaneRef = useRef(null);
-  const releasePaneAtRest = () => {
+  const releasePaneAtRest = row => {
     const heldPane = heldPaneRef.current;
     if (heldPane) {
       heldPaneRef.current = null;
       heldPane.removeAttribute("data-route-row-held");
+      row.removeAttribute("data-route-row-holding");
+    }
+  };
+
+  // How far down the reader is looking, on every pane, for those the CSS pins.
+  const pinPanes = row => {
+    const pin = `${pinOf(row)}px`;
+    for (const pane of panesOf(row)) {
+      pane.style.setProperty("--navi-route-row-pin", pin);
+    }
+  };
+  const unpinPanes = row => {
+    for (const pane of panesOf(row)) {
+      pane.style.removeProperty("--navi-route-row-pin");
     }
   };
 
@@ -42891,13 +42910,14 @@ const RouteTravel = ({
     if (!windowed && paneAtRest) {
       heldPaneRef.current = paneAtRest;
       paneAtRest.setAttribute("data-route-row-held", "");
+      row.setAttribute("data-route-row-holding", "");
     }
     if (movement.scrollsDocument) {
       // Whatever the browser does with the offset meanwhile (clamping it to a page
       // shorter than the trip) is not the reader scrolling, and the address it
       // would be written against may already be another page's.
       movement.resumeScrollRecording = suspendScrollRecording();
-      row.style.setProperty("--navi-route-row-pin", `${pinOf(row)}px`);
+      pinPanes(row);
     }
     return movement;
   };
@@ -43190,7 +43210,7 @@ const RouteTravel = ({
     row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
-    releasePaneAtRest();
+    releasePaneAtRest(row);
     if (liveRef.current) {
       liveRef.current.style.top = "";
     }
@@ -43198,7 +43218,7 @@ const RouteTravel = ({
       picture.remove();
     }
     if (movement.scrollsDocument) {
-      row.style.removeProperty("--navi-route-row-pin");
+      unpinPanes(row);
       const {
         pages,
         currentIndex
@@ -43503,7 +43523,7 @@ const RouteTravel = ({
       movementRef.current = null;
       publishRouteRowMove(null);
       releaseHeldPage();
-      releasePaneAtRest();
+      releasePaneAtRest(row);
     };
   }, [windowed]);
 
@@ -43567,7 +43587,7 @@ const RouteTravel = ({
     const row = rowRef.current;
     const onTouchStart = () => {
       if (!movementRef.current && rowFollowsDocument(row)) {
-        row.style.setProperty("--navi-route-row-pin", `${pinOf(row)}px`);
+        pinPanes(row);
       }
     };
     row.addEventListener("touchstart", onTouchStart, {
@@ -84371,9 +84391,15 @@ const PickerNaviMinute = props => {
  * element crossing the cursor — a dozen per wheel tick. Those hovers are noise:
  * the user asked to scroll, not to hover. Anything doing real work on hover (a
  * map highlight, a preview, a prefetch) then pays for that noise on the main
- * thread, exactly while a scroll animation is running. A rule matching
- * `[navi-scrolling] *` takes the rows out of hit-testing and the browser
- * suppresses it all, at no cost per element.
+ * thread, exactly while a scroll animation is running. A rule like
+ * `[navi-scrolling] .my_row { pointer-events: none }` takes the rows out of
+ * hit-testing and the browser suppresses it all.
+ *
+ * Such a rule must end on a class (or an id, a tag, an attribute) of what it
+ * styles: Chrome then restyles only those elements when the attribute comes and
+ * goes. One ending on `*`, including `.my_row:is([navi-scrolling] *)`, gives it
+ * nothing to narrow to, so it restyles everything under the scroller (the whole
+ * document when the page scrolls) at the start and at the end of every scroll.
  *
  * One capturing listener on the document sees them all: "scroll" does not
  * bubble, but it does propagate in the capture phase.
@@ -86758,7 +86784,7 @@ const css$w = /* css */`@property --list-group-label-height {
     }
   }
 
-  &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list:is([navi-scrolling] *) {
+  [navi-scrolling] &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list, &[navi-scrolling]:not([navi-hover-while-scrolling]) > .navi_list_scroll_container > .navi_list, &:not([navi-hover-while-scrolling]) > .navi_list_scroll_container[navi-scrolling] > .navi_list {
     pointer-events: none;
   }