@jsenv/navi 0.29.77 → 0.29.79

package/dist/jsenv_navi.js

@@ -29849,6 +29849,43 @@ const popupCss = /* css */ `
       }
     }
   }
+
+  /* While the PAGES are the ones moving — a route transition, a route travel —
+     an open popup takes a picture of its own. The pictures of such a movement
+     are drawn in the top layer, above everything the document paints, and a
+     popup lives in the top layer too: uncaptured, it is simply covered for the
+     length of the movement, so it disappears the instant its page starts to
+     leave and lands abruptly when the arriving one settles. Captured, it is a
+     group beside the pages, painted over them where it stands, and the browser
+     fades it out with the page it belonged to or in with the page it comes
+     with.
+
+     An identity of its own (match-element), never a shared name: two popups on
+     either side of a navigation are two different popups, and what is wanted is
+     precisely that one goes and the other comes. A browser with no
+     match-element takes no name and the pictures cover the popup. */
+  @supports (view-transition-name: match-element) {
+    :root[data-navi-route-transition] .navi_popover[aria-expanded="true"],
+    :root[data-navi-route-transition] .navi_dialog[aria-expanded="true"],
+    :root[data-navi-route-travel] .navi_popover[aria-expanded="true"],
+    :root[data-navi-route-travel] .navi_dialog[aria-expanded="true"] {
+      view-transition-name: match-element;
+      view-transition-class: navi_popup;
+    }
+  }
+
+  /* On the same clock as the pages: a popup going in a quarter of the time the
+     page it belongs to takes to leave is gone long before the page it was on. */
+  :root[data-navi-route-transition]::view-transition-group(.navi_popup),
+  :root[data-navi-route-transition]::view-transition-old(.navi_popup),
+  :root[data-navi-route-transition]::view-transition-new(.navi_popup) {
+    animation-duration: var(--navi-route-transition-duration, 300ms);
+  }
+  :root[data-navi-route-travel]::view-transition-group(.navi_popup),
+  :root[data-navi-route-travel]::view-transition-old(.navi_popup),
+  :root[data-navi-route-travel]::view-transition-new(.navi_popup) {
+    animation-duration: var(--navi-route-travel-duration, 300ms);
+  }
 `;
 
 /**
@@ -57395,6 +57432,28 @@ const css$w = /* css */`
        the corners would visually overflow the rounded corners during scroll. */
     overflow: hidden;
 
+    /* overflow="visible" asks for the exact opposite of the clipping above: the
+       content must be free to paint outside the list's box and to overflow into
+       whatever scroll container is around it. Setting it on the inner scroll
+       element alone changes nothing visible — this frame would clip it right
+       back — so the frame has to let go of it too, and with it of the rounded
+       corners it was clipping to. The two cannot both be true.
+       An axis asked to be visible pairs with "clip" on the other one rather
+       than "hidden": mixing visible with a scrollport value makes the browser
+       compute the visible one to "auto" (a scrollport again), while
+       visible/clip is the one pairing it keeps as written. */
+    &[data-overflow-visible="both"] {
+      overflow: visible;
+    }
+    &[data-overflow-visible="x"] {
+      overflow-x: visible;
+      overflow-y: clip;
+    }
+    &[data-overflow-visible="y"] {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
     .navi_list_scroll_container {
       /* The ask stops here: this element is inside the list's frame, so a row
          or a control it holds is not at the surface's corner. */
@@ -58135,6 +58194,7 @@ const ListUI = props => {
     popover: popover,
     "data-horizontal": horizontal ? "" : undefined,
     "data-scroller": getScrollerAttribute(scroller),
+    "data-overflow-visible": getOverflowVisibleAttribute(overflow, overflowX, overflowY),
     "navi-hover-while-scrolling": hoverWhileScrolling ? "" : undefined,
     "data-expand-x": expandX || expand ? "" : undefined,
     "data-expand-y": expandY || expand ? "" : undefined,
@@ -59413,6 +59473,27 @@ const getScrollerAttribute = scroller => {
   return "parent";
 };
 
+// overflow lands as an inline style on the inner scroll element, which is
+// enough for every value but "visible": that one only means anything once the
+// frame around it stops clipping too. Reading the per-axis props over the
+// shorthand mirrors how CSS itself resolves them.
+const getOverflowVisibleAttribute = (overflow, overflowX, overflowY) => {
+  const x = overflowX === undefined ? overflow : overflowX;
+  const y = overflowY === undefined ? overflow : overflowY;
+  const xVisible = x === "visible";
+  const yVisible = y === "visible";
+  if (xVisible && yVisible) {
+    return "both";
+  }
+  if (xVisible) {
+    return "x";
+  }
+  if (yVisible) {
+    return "y";
+  }
+  return undefined;
+};
+
 // scroller="parent": the list virtualizes against the scroll box it lives in
 // instead of one of its own. Which box that is can only be measured, and a
 // measurement holds for the geometry it was taken on — see resolveScroller in