@jsenv/navi 0.29.72 → 0.29.74

package/dist/jsenv_navi.js

@@ -29852,10 +29852,13 @@ installImportMetaCssBuild(import.meta);/**
  * `positionArea` accepts the same grammar Popover does (see
  * popup_shared.js), even though several combinations land identically here
  * since Dialog is never really anchored — kept distinct anyway because
- * `positionArea` still picks which animation direction plays. `anchor` only
- * ever affects the `--anchor-width`/`--anchor-height` CSS vars (sizing the
- * dialog relative to whatever opened it) — Dialog's own positioning is never
- * relative to it, unlike Popover.
+ * `positionArea` still picks which animation direction plays. `anchor` is
+ * inert here unless `sizeFromAnchor` asks for it: a dialog is a surface of
+ * its own, sized by its content, not a panel grown out of the control that
+ * opened it — that is Popover's job. With `sizeFromAnchor`, the anchor's box
+ * reaches the `--anchor-width`/`--anchor-height` CSS vars and becomes a
+ * min-width/min-height floor. Either way Dialog's own positioning is never
+ * relative to the anchor, unlike Popover.
  *
  * Two rendering strategies, picked via `layer`: `DialogAsModal` (a real
  * `<dialog>`, `showModal()`, top layer — native focus trap,
@@ -30340,17 +30343,24 @@ const css$X = /* css */`
  *   value is used as-is.
  * @param {string} [props.animationDuration] - Maps to
  *   `--popup-animation-duration`.
- * @param {Element|{current: Element}|string} [props.anchor] - Only ever sizes
- *   the dialog via the `--anchor-width`/`--anchor-height` CSS vars — never
- *   used for positioning (see this file's top comment). Defaults to whatever
+ * @param {Element|{current: Element}|string} [props.anchor] - Never used for
+ *   positioning (see this file's top comment), and ignored entirely unless
+ *   `sizeFromAnchor` is set — then it sizes the dialog via the
+ *   `--anchor-width`/`--anchor-height` CSS vars. Defaults to whatever
  *   triggered the open (`e.detail.anchor`), if any. A string is resolved via
  *   `document.getElementById` when the dialog opens — see popover.jsx's own
  *   `anchor` doc for why (mainly `defaultOpen`).
+ * @param {boolean} [props.sizeFromAnchor=false] - Whether the dialog takes the
+ *   anchor's width/height as a min-width/min-height floor
+ *   (`--anchor-width`/`--anchor-height`). Off by default: unlike a popover,
+ *   a dialog is not attached to what opened it, so following that element's
+ *   box is a deliberate choice (a picker-style surface meant to read as the
+ *   trigger's own continuation), not the norm.
  * @param {"override"|"ignore"} [props.anchorCustomEventDetail="override"] -
  *   Whether an explicit `anchor` prop takes precedence over (`"override"`,
  *   default) or is ignored in favor of (`"ignore"`) whatever anchor the
  *   triggering event carried. Same prop as Popover's, applied to the only
- *   thing an anchor does here: sizing (`--anchor-width`/`--anchor-height`).
+ *   thing an anchor can do here: sizing, and only under `sizeFromAnchor`.
  * @param {string} [props.minWidth] - Maps to `--dialog-min-width`; clamped
  *   so it can never push the dialog past `--dialog-maxmax-width` (the
  *   viewport/container-spacing ceiling) regardless of how large a value is
@@ -30609,12 +30619,15 @@ const useDialogProps = props => {
     // once, held at that size while open. See this prop's own JSDoc above.
     sizing = "auto",
     animation,
-    // Only ever affects --anchor-width/--anchor-height (see this file's top
-    // comment) — Dialog's own positioning is never relative to it.
+    // Inert unless sizeFromAnchor below (see this file's top comment) —
+    // Dialog's own positioning is never relative to it.
     anchor,
+    // Opt-in: --anchor-width/--anchor-height are only set when this is true.
+    // See this prop's own JSDoc above for why a dialog does not follow its
+    // trigger's box by default.
+    sizeFromAnchor = false,
     // Same meaning as Popover's own prop, applied to the only thing an anchor
-    // does here: sizing. "ignore" is how a dialog that must not inherit its
-    // trigger's width says so (SidePanel does exactly that).
+    // can do here: sizing under sizeFromAnchor.
     anchorCustomEventDetail = "override",
     // Makes the dialog itself a valid focus target so
     // autoFocus="last-resort" below has somewhere to land when it contains
@@ -30809,7 +30822,7 @@ const useDialogProps = props => {
       // see openLocalDialogCount's own comment
       dialogEl.style.setProperty("--dialog-stack-order", openLocalDialogCount++);
     }
-    if (anchorElement) {
+    if (sizeFromAnchor && anchorElement) {
       const {
         width,
         height
@@ -38824,6 +38837,21 @@ const css$T = /* css */`
     view-transition-name: navi-route-transition;
   }
 
+  /* A named descendant — a row named for a reorder gesture, a thumbnail named
+     for a morph — is a hole in the area's picture and a group of its own at the
+     top of the tree: it stands still and cross-fades on its own clock while the
+     pages move. Nested groups put it back INSIDE the area's picture, so it
+     travels with the pages and is cut at their edge. Said here rather than
+     erasing the name: a name inside the area is legitimate, and "contain" says
+     "these move with the page" where "none" would say "these do not exist". A
+     browser without nested groups is warned instead (see
+     warnAboutNamesEscapingArea). */
+  @supports (view-transition-group: contain) {
+    [data-navi-route-transition-area] {
+      view-transition-group: contain;
+    }
+  }
+
   /* Only while a transition of OURS is playing: everything below changes how
      the document animates, and the document belongs to the application the
      rest of the time. */
@@ -38861,6 +38889,12 @@ const css$T = /* css */`
          overflow on any element of the document can reach them. */
       overflow: clip;
     }
+    /* The nested groups of named descendants, cut at that same edge. On its own
+       rule: a selector a browser cannot parse takes the whole list it is
+       written in down with it, and the pages must be cut everywhere. */
+    &::view-transition-group-children(navi-route-transition) {
+      overflow: clip;
+    }
     &::view-transition-group(navi-route-transition) {
       /* Held still for the whole transition, at the taller of the two states,
          and standing where the area stands (see transition_window.js). Held by
@@ -39645,7 +39679,7 @@ const beginTransition = ({
   // something that has already happened.
   const renderWait = armRouteRenderWait$1();
   // What the browser ACTUALLY captured, read once the pictures exist: it is
-  // the only place the two silent misconfigurations show. Both are about the
+  // the only place the silent misconfigurations show. They are all about the
   // same thing — a movement playing on pictures that are not the pages.
   const viewTransitionReady = () => {
     const capturedNames = capturedViewTransitionNames();
@@ -39653,6 +39687,7 @@ const beginTransition = ({
       if (!capturedNames.has(AREA_NAME)) {
         warnOnce("area-not-captured", `The element marked ${TRANSITION_AREA_ATTRIBUTE} was not captured, so the movement plays on nothing. An element is captured only if it generates a box: \`display: contents\` (or an element not rendered) cannot be the area — its rectangle is what gets photographed and clipped.`);
       }
+      warnAboutNamesEscapingArea(areaElement, capturedNames);
       return;
     }
     for (const name of capturedNames) {
@@ -39738,6 +39773,42 @@ const capturedViewTransitionNames = () => {
   return names;
 };
 
+// Nested groups keep a name written inside the area inside its picture (see
+// the @supports block in the CSS above). Without them the name escapes to the
+// top of the ::view-transition tree and the element it belongs to stands still,
+// fading on its own, while the pages move under it.
+const NESTED_GROUPS_SUPPORTED = window.CSS.supports("view-transition-group", "contain");
+const warnAboutNamesEscapingArea = (areaElement, capturedNames) => {
+  if (NESTED_GROUPS_SUPPORTED) {
+    return;
+  }
+  let escapedName = null;
+  for (const name of capturedNames) {
+    if (name === "root" || name === AREA_NAME) {
+      continue;
+    }
+    escapedName = name;
+    break;
+  }
+  // A name captured next to the area is not necessarily inside it — a bar the
+  // application animates on the same clock is named on purpose. The subtree is
+  // walked only once something is there to find, so the common case reads
+  // nothing.
+  if (!escapedName) {
+    return;
+  }
+  for (const descendant of areaElement.querySelectorAll("*")) {
+    const {
+      viewTransitionName
+    } = getComputedStyle(descendant);
+    if (!viewTransitionName || viewTransitionName === "none") {
+      continue;
+    }
+    warnOnce("names-escaping-area", `"${viewTransitionName}" is a view-transition-name written inside the element marked ${TRANSITION_AREA_ATTRIBUTE}, and this browser has no nested groups (view-transition-group: contain): the element it names is lifted out of the area's picture, so it stands still and fades on its own while the pages move. Give that name only for the length of the gesture it serves, or drop it while a route transition plays (:root[${TRANSITION_ATTRIBUTE}] { view-transition-name: none }).`);
+    return;
+  }
+};
+
 // Said once per kind, whatever the number of navigations: a misconfiguration
 // is one fact about the application, and repeating it every time the user
 // moves would bury it.
@@ -54384,9 +54455,9 @@ installImportMetaCssBuild(import.meta);/**
  *
  * `layer` (shared by both — picks the top-layer vs. local-container rendering
  * strategy either way) and `anchorCustomEventDetail` (shared too: Popover
- * resolves an anchor to position against, Dialog to size itself from) pass
- * through untouched via `...rest` to whichever of Popover/Dialog actually
- * renders.
+ * resolves an anchor to position against, Dialog only to size itself from,
+ * and only under its own `sizeFromAnchor`) pass through untouched via
+ * `...rest` to whichever of Popover/Dialog actually renders.
  */
 const css$A = /* css */`
   @layer navi {
@@ -54424,13 +54495,12 @@ const css$A = /* css */`
  * @param {"top"|"local"} [props.layer] - Forwarded as-is to whichever of
  *   `Dialog`/`Popover` renders — see either component's own doc.
  * @param {Element|{current: Element}} [props.anchor] - Forwarded as-is —
- *   sizing-only for `Dialog`, positioning for `Popover` (see each
- *   component's own doc for what it actually does there).
+ *   positioning for `Popover`, and for `Dialog` sizing only, and only when
+ *   `sizeFromAnchor` is also passed (see each component's own doc).
  * @param {"override"|"ignore"} [props.anchorCustomEventDetail] - Forwarded
  *   as-is to both — what it governs differs (positioning for `Popover`,
- *   sizing for `Dialog`), but "ignore whatever anchor the triggering event
- *   carried" has to mean the same thing in either mode, or the same
- *   `<Popup>` usage silently picks up its trigger's width on small screens.
+ *   `sizeFromAnchor` sizing for `Dialog`), but "ignore whatever anchor the
+ *   triggering event carried" has to mean the same thing in either mode.
  * @param {string} [props.marginWithAnchor] - **Popover-only**, destructured
  *   out so it can't leak onto the real `<dialog>` element as a stray DOM
  *   attribute when `mode="dialog"` is picked.
@@ -54633,12 +54703,17 @@ installImportMetaCssBuild(import.meta);const css$z = /* css */`
 
         /* No fallback on purpose (same as --popover-max-height above): unset
            picker props leave these declarations invalid at computed-value
-           time, so the dialog keeps its own ceilings. */
+           time, so the dialog keeps its own floors/ceilings. */
+        --dialog-min-width: var(--picker-dialog-min-width);
+        --dialog-min-height: var(--picker-dialog-min-height);
         --dialog-max-width: var(--picker-dialog-max-width);
         --dialog-max-height: var(--picker-dialog-max-height);
 
-        /* Dialog itself already sizes min-width off --anchor-width — only
-           the cursor reset below is picker-specific here. */
+        /* Nothing bridges the trigger's width in here: a dialog does not
+           follow its anchor's box (dialog.jsx, sizeFromAnchor) — it is not
+           visually attached to the trigger, so it is sized by its content,
+           and dialogMinWidth/dialogMinHeight are how a caller says otherwise.
+           Only the cursor reset below is picker-specific here. */
         cursor: default; /* Reset pointer cursor within the select */
 
         /* Dialog already applies display: flex to [open] itself, but
@@ -54660,24 +54735,10 @@ installImportMetaCssBuild(import.meta);const css$z = /* css */`
     }
 
     /* popupWidthFitContent (picker.jsx): drop the trigger-width floor so the
-       popup shrinks to its content. Inherits down to the popover. */
+       popup shrinks to its content. Popover-only — the dialog has no such
+       floor to drop (see the dialog block above). */
     &[data-popup-width-fit-content] {
       --picker-popover-min-width: 0px;
-
-      /* The popover var above only reaches the popover — the dialog reads
-         --anchor-width directly for its own min-width floor (dialog.jsx). A
-         modal dialog isn't visually attached to the trigger, so with
-         fit-content we drop that floor here too, letting the content size the
-         dialog like the popover. (More specific than dialog.jsx's own
-         .navi_dialog rule; both are unlayered, so this wins.) */
-      &[aria-haspopup="dialog"] {
-        .navi_dialog {
-          min-width: min(
-            var(--dialog-min-width, 0px),
-            var(--x-dialog-max-width)
-          );
-        }
-      }
     }
   }
 `;
@@ -62633,6 +62694,8 @@ const PickerStyleCSSVars = {
   "borderWidth": "--picker-border-width",
   "borderRadius": "--picker-border-radius",
   "popoverMaxHeight": "--picker-popover-max-height",
+  "dialogMinWidth": "--picker-dialog-min-width",
+  "dialogMinHeight": "--picker-dialog-min-height",
   "dialogMaxWidth": "--picker-dialog-max-width",
   "dialogMaxHeight": "--picker-dialog-max-height",
   "popupBackgroundColor": "--picker-popup-background-color",
@@ -73976,10 +74039,11 @@ installImportMetaCssBuild(import.meta);/**
  * `navi-side`/`data-layer` attributes) rather than computed in JS — read
  * the CSS block below instead of expecting a JS equivalent of it here.
  *
- * `anchorCustomEventDetail="ignore"` is required, not cosmetic, and in both
- * modes: without it Popover docks next to whatever triggered the open instead
- * of flush against the edge, and Dialog takes that trigger's width as its own
- * `min-width` floor (`--anchor-width`), overriding the `width` prop.
+ * `anchorCustomEventDetail="ignore"` is required, not cosmetic: without it
+ * Popover docks next to whatever triggered the open instead of flush against
+ * the edge. Dialog needs nothing here — it never sizes itself from an anchor
+ * unless asked to (`sizeFromAnchor`, see dialog.jsx), which a side panel
+ * never does: its `width`/`height` props are what size it.
  */
 const css = /* css */`
   .navi_side_panel {