@jsenv/navi 0.29.76 → 0.29.78

package/dist/jsenv_navi.js

@@ -30255,6 +30255,11 @@ const css$X = /* css */`
     outline-offset: 0;
     box-shadow: var(--dialog-box-shadow);
 
+    /* A gesture landing on the dialog belongs to the dialog: what it cannot
+       scroll (a short body, an axis with nowhere to go) must not travel to
+       whatever is behind. */
+    overscroll-behavior: none;
+
     /* Docking answers a different question than --dialog-max-width: a sheet
        spans its container's full width, flush against the two side edges —
        that shape IS the mode — while the caller's ceiling was an answer about
@@ -31125,7 +31130,11 @@ const useDialogProps = props => {
       }));
     }
     if (scrollCapture) {
-      addCleanup(trapScrollInside(dialogEl));
+      // A modal dialog always has its own ::backdrop; the custom renderer has
+      // the backdrop element when it renders one.
+      addCleanup(trapScrollInside(dialogEl, {
+        backdrop: isModal || backdropEl
+      }));
     } else if (!isModal) {
       // A local dialog is confined to its positioned ancestor, and so is its
       // backdrop (inset: 0 covers the scrollport, not the scrolled content):
@@ -32662,7 +32671,9 @@ const usePopoverProps = props => {
       // here.
     };
     if (scrollCapture) {
-      addCleanup(trapScrollInside(popoverEl));
+      addCleanup(trapScrollInside(popoverEl, {
+        backdrop: backdropEl
+      }));
     }
     if (focusCapture) {
       addCleanup(trapFocusInside(popoverEl, {
@@ -57384,6 +57395,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. */
@@ -58124,6 +58157,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,
@@ -59402,6 +59436,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