@jsenv/navi 0.29.75 → 0.29.77

package/dist/jsenv_navi.js

@@ -60,7 +60,9 @@ const css$12 = /* css */`
          what the page positioned itself, which loses to DOM order otherwise
          (a sticky part is written before what scrolls under it). Box applies
          it by default, isolated, and lets a call site write auto back:
-         --box-header-z-index / --box-footer-z-index.
+         --box-header-z-index / --box-footer-z-index. <Box sticky> gets it from
+         the prop itself, for the same reason and with the same way out (an
+         explicit zIndex, "auto" included).
 
          "While stuck" is the condition the name states, and it costs something
          to ignore: a sticky part at rest is a block in the flow with nothing
@@ -16935,6 +16937,28 @@ const DIMENSION_PROPS = {
     return { transform: `scaleZ(${value})` };
   },
 };
+const applyPositionSticky = applyToCssPropWhenTruthy(
+  "position",
+  "sticky",
+  "static",
+);
+// A sticky box is one something scrolls under, which is what
+// --navi-z-index-sticky names; without it the box is a positioned element at
+// z-index: auto and loses to anything the page raised — a Group member holding
+// focus (2) is seen passing in front of a sticky submit bar. Like Box's own
+// header/footer, the band applies always and not only while stuck: a box
+// written by an app is the generic case, it cannot read its own stuck state
+// (see docs/z_index.md), and dropping to auto loses to a single
+// position: relative. An explicit zIndex (including zIndex="auto") wins.
+const stickyZIndex = (styleContext) => {
+  if (
+    styleContext.styles.zIndex !== undefined ||
+    styleContext.remainingProps.zIndex !== undefined
+  ) {
+    return null;
+  }
+  return { zIndex: "var(--navi-z-index-sticky)" };
+};
 const POSITION_PROPS = {
   // For row, selfAlignX uses auto margins for positioning
   // NOTE: Auto margins only work effectively for positioning individual items.
@@ -17002,11 +17026,22 @@ const POSITION_PROPS = {
     }
     return undefined;
   },
-  position: PASS_THROUGH,
+  position: (value, styleContext) => {
+    if (value === "sticky") {
+      return { position: "sticky", ...stickyZIndex(styleContext) };
+    }
+    return { position: value };
+  },
   absolute: applyToCssPropWhenTruthy("position", "absolute", "static"),
   relative: applyToCssPropWhenTruthy("position", "relative", "static"),
   fixed: applyToCssPropWhenTruthy("position", "fixed", "static"),
-  sticky: applyToCssPropWhenTruthy("position", "sticky", "static"),
+  sticky: (value, styleContext) => {
+    const positionStyles = applyPositionSticky(value, styleContext);
+    if (!value) {
+      return positionStyles;
+    }
+    return { ...positionStyles, ...stickyZIndex(styleContext) };
+  },
   zIndex: PASS_THROUGH,
   // Keeps the zIndex values used inside this box local to it — see
   // docs/z_index.md: a z-index that opens no stacking context competes with
@@ -30219,6 +30254,29 @@ const css$X = /* css */`
     outline-color: var(--dialog-outline-color);
     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
+       the *centered* box ("do not sprawl on a wide window"). Applying it here
+       turns the sheet into a small floating box that no longer touches the
+       edges it was docked to, so it is dropped out of the clamp entirely; the
+       container ceiling still holds. --dialog-min-width needs no such rule:
+       the floor is below the full width a docked dialog takes, so it stops
+       mattering on its own. Height is untouched — a sheet is content-tall, not
+       container-tall (expandY cancels docking outright), so --dialog-max-height
+       still means what it meant. */
+    &[data-docked] {
+      --x-dialog-max-width: min(
+        var(--container-position-remaining-width, var(--dialog-maxmax-width)),
+        var(--dialog-maxmax-width)
+      );
+    }
     /* The clamped max, not --dialog-maxmax-*: that one is the viewport minus
        the spacing, which is only the real ceiling for layer="top". A local
        dialog is confined to its positioned ancestor, whose size reaches here
@@ -30459,7 +30517,15 @@ const css$X = /* css */`
  *   from where the finger just tapped, and size alone would dock a narrow
  *   desktop window, which is still a mouse. It supplies defaults for
  *   `positionArea`, `marginWithContainer`, `expandX` and `scrollCapture`, so
- *   any of them can still be pinned explicitly. Ignored entirely when `expandY`
+ *   any of them can still be pinned explicitly — including `expandX={false}`,
+ *   which opts the docked dialog out of the full-width stretch and leaves it a
+ *   floating box at the bottom. It also withdraws `maxWidth` while docked: a
+ *   sheet is container-wide by definition, and a `maxWidth` is an answer about
+ *   the *centered* shape, so the two can be stated together (`maxWidth="16rem"
+ *   dockedOnSmallTouchScreen`) and each applies where it means something.
+ *   `minWidth` needs no such rule — its floor is below the full width — and
+ *   `maxHeight`/`minHeight` keep applying, a sheet being content-tall.
+ *   Ignored entirely when `expandY`
  *   (or `expand`) is set: a dialog already filling the height is on the bottom
  *   edge docking would bring it to, so docking could only take away the shape
  *   the caller asked for. Re-resolves live as the pointer
@@ -30481,7 +30547,10 @@ const css$X = /* css */`
  * @param {boolean} [props.expand] - Shorthand for both `expandX` and `expandY`.
  * @param {boolean} [props.expandX] - Stretches the dialog to the full width its
  *   container allows (`--dialog-maxmax-width`). Set by
- *   `dockedOnSmallTouchScreen` on a small touch screen.
+ *   `dockedOnSmallTouchScreen` on a small touch screen — so passing `false`
+ *   here also opts out of *that* stretch, leaving a docked dialog a floating
+ *   box instead of a flush sheet. To keep the sheet flush and merely cap the
+ *   centered shape, use `maxWidth`: docking withdraws it on its own.
  * @param {boolean} [props.expandY] - Same, vertically
  *   (`--dialog-maxmax-height`). Cancels `dockedOnSmallTouchScreen`.
  * @param {string|number} [props.marginWithContainer="3appw"] - Minimum gap kept
@@ -30540,7 +30609,9 @@ const css$X = /* css */`
  *   so it can never push the dialog past `--dialog-maxmax-width` (the
  *   viewport/container-spacing ceiling) regardless of how large a value is
  *   passed.
- * @param {string} [props.maxWidth] - Maps to `--dialog-max-width`.
+ * @param {string} [props.maxWidth] - Maps to `--dialog-max-width`. Describes
+ *   the centered shape only: a dialog docked by `dockedOnSmallTouchScreen`
+ *   ignores it and stays container-wide.
  * @param {string} [props.minHeight] - Maps to `--dialog-min-height`, same
  *   clamping as `minWidth`.
  * @param {string} [props.maxHeight] - Maps to `--dialog-max-height`.
@@ -31059,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):
@@ -31458,6 +31533,10 @@ const useDialogProps = props => {
     // scrolling area, so it says so once, here.
     "overflow": "auto",
     "data-layer": layer,
+    // The sheet shape is live in CSS, not just a set of resolved defaults:
+    // it is what withdraws the caller's --dialog-max-width (see the stylesheet
+    // above), which is an answer about the centered box only.
+    "data-docked": isDocked ? "" : undefined,
     "data-expand-x": expandX ? "" : undefined,
     "data-expand-y": expandY ? "" : undefined,
     "data-flush-top": flushEdges.top ? "" : undefined,
@@ -32592,7 +32671,9 @@ const usePopoverProps = props => {
       // here.
     };
     if (scrollCapture) {
-      addCleanup(trapScrollInside(popoverEl));
+      addCleanup(trapScrollInside(popoverEl, {
+        backdrop: backdropEl
+      }));
     }
     if (focusCapture) {
       addCleanup(trapFocusInside(popoverEl, {
@@ -65867,6 +65948,8 @@ const css$l = /* css */`
  *   positionArea?: string,
  *   popupWidthFitContent?: boolean,
  *   popoverMaxHeight?: number | string,
+ *   dialogMinWidth?: number | string,
+ *   dialogMinHeight?: number | string,
  *   dialogMaxWidth?: number | string,
  *   dialogMaxHeight?: number | string,
  *   dialogExpand?: boolean,
@@ -65916,7 +65999,8 @@ const css$l = /* css */`
  *   popover; a dialog keeps Dialog's own "center".
  *
  * Every other prop the Picker's popup answers to is forwarded as-is —
- * `dockedOnSmallTouchScreen`, `dialogExpand*`, `dialogMaxWidth`/`Height`,
+ * `dockedOnSmallTouchScreen`, `dialogExpand*`, `dialogMinWidth`/`Height`,
+ * `dialogMaxWidth`/`Height`,
  * `marginWithContainer`, `popoverMode`, `popoverSpacing`, `popupLayer`,
  * `popupWidthFitContent`, `popoverMaxHeight`, `backdropVariant`,
  * `pointerInteractionOutsideEffect`, `escapeEffect`, `closeOnFocusOut`,
@@ -66121,7 +66205,7 @@ const SplitButton = props => {
 // What the Picker's popup answers to — Picker's own popup props, named here so
 // a caller reaches all of them through the split button (see picker.jsx's JSDoc
 // for what each one says).
-const POPUP_PROP_SET = new Set(["mode", "popupLayer", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdropVariant", "pointerInteractionOutsideEffect", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
+const POPUP_PROP_SET = new Set(["mode", "popupLayer", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMinWidth", "dialogMinHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdropVariant", "pointerInteractionOutsideEffect", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
 const splitPopupProps = props => {
   const popupProps = {};
   const boxProps = {};