@jsenv/navi 0.29.348 → 0.29.350

package/dist/dev/jsenv_navi.js

@@ -60720,8 +60720,15 @@ const css$E = /* css */`
       --backdrop-filter: var(--navi-backdrop-capture-backdrop-filter);
     }
     /* backdropVariant, after the rules it overrides: same specificity, so
-       order is what decides. The wall is still there either way — only the
-       paint goes away. */
+       order is what decides. The wall is still there whichever one is asked
+       for — only its paint changes. */
+    /* "lift": the wall a lifted popup brings, asked for on its own. A popup
+       whose content is what must be looked at wants the page gone behind it
+       whether or not it got there by moving. */
+    &[data-backdrop-variant="lift"] {
+      --backdrop-background: var(--navi-backdrop-lift-background);
+      --backdrop-filter: var(--navi-backdrop-lift-backdrop-filter);
+    }
     &[data-backdrop-variant="discrete"] {
       --backdrop-background: var(--navi-backdrop-discrete-background);
       --backdrop-filter: var(--navi-backdrop-discrete-backdrop-filter);
@@ -60919,6 +60926,10 @@ const css$E = /* css */`
       --backdrop-background: var(--navi-backdrop-capture-background);
       --backdrop-filter: var(--navi-backdrop-capture-backdrop-filter);
     }
+    &[data-backdrop-variant="lift"] {
+      --backdrop-background: var(--navi-backdrop-lift-background);
+      --backdrop-filter: var(--navi-backdrop-lift-backdrop-filter);
+    }
     &[data-backdrop-variant="discrete"] {
       --backdrop-background: var(--navi-backdrop-discrete-background);
       --backdrop-filter: var(--navi-backdrop-discrete-backdrop-filter);
@@ -61181,15 +61192,18 @@ const css$E = /* css */`
  *   "Outside" is the dialog's own border box; a see-through dialog whose box is
  *   bigger than what it paints marks the difference with
  *   `data-navi-popup-outside` (see docs/popup_backdrop.md).
- * @param {"auto"|"discrete"|"invisible"} [props.backdropVariant="auto"] - How
- *   visible the backdrop is, independently of what it does. `"auto"`: the
- *   paint `pointerInteractionOutsideEffect` implies (dimmed for
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [props.backdropVariant="auto"]
+ *   - How visible the backdrop is, independently of what it does. `"auto"`:
+ *   the paint `pointerInteractionOutsideEffect` implies (dimmed for
  *   `"close"`/`"cancel"`, blurred glass for `"capture"`), or the opaque wall
- *   `animation="lifting"` asks for. `"discrete"`: a
- *   barely-there dim. `"invisible"`: fully transparent — a wall that is not
- *   seen, still catching every press. This only changes how much the dialog
- *   insists visually, never what an outside click does; whether there is a
- *   wall to paint at all is `backdrop` above.
+ *   `animation="lifting"` asks for. `"lift"`: that same opaque, blurred wall
+ *   (`--navi-backdrop-lift-*`) asked for on its own, for a dialog whose
+ *   content is the thing to look at — a picture, a plan, a card opened full
+ *   — without the morph. `"discrete"`: a barely-there dim. `"invisible"`:
+ *   fully transparent — a wall that is not seen, still catching every press.
+ *   This only changes how much the dialog insists visually, never what an
+ *   outside click does; whether there is a wall to paint at all is `backdrop`
+ *   above.
  * @param {string} [props.backdropColor] - The wash painted over what is
  *   behind, for this popup alone: any CSS color (`"rgb(6 10 20 / 88%)"`).
  *   Wins over `backdropVariant` and over the theme tokens
@@ -61249,6 +61263,15 @@ const css$E = /* css */`
  *   whatever triggered the open (`e.detail.source`). A string is resolved via
  *   `document.getElementById` when the dialog opens — see popover.jsx's own
  *   `anchor` doc for why (mainly `defaultOpen`).
+ * @param {Element|{current: Element}|string} [props.liftAnchor] - Under
+ *   `animation="lifting"`, where the closing brings the box back to, when that
+ *   is no longer where it came from: a popup one walks through (a row of cards
+ *   shown one at a time) has something else in front by the time it closes,
+ *   and the box would otherwise fly back to the card the press opened on. Same
+ *   grammar as `anchor` (element, ref or id), resolved at the close, so
+ *   whatever names the card currently in front — an id built from the signal
+ *   the walk is bound to, a ref moved with it — is read then and not at the
+ *   opening. Left out, the box comes back to the anchor it came out of.
  * @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,
@@ -61564,9 +61587,10 @@ const useDialogProps = props => {
     // the dialog goes to the same top layer through the Popover API instead.
     backdrop = true,
     // How loudly the backdrop says it is there — independent of what it
-    // *does* (that's pointerInteractionOutsideEffect above). "invisible" is a
-    // wall that is not seen, not the absence of one: it only stops the dim
-    // from being drawn.
+    // *does* (that's pointerInteractionOutsideEffect above). "lift" is the
+    // opaque wall at one end, "invisible" a wall that is not seen at the
+    // other — not the absence of one, it only stops the dim from being
+    // drawn.
     backdropVariant = "auto",
     // The paint itself, when the tokens behind backdropVariant are not what
     // this one dialog wants. Named/forwarded rather than left in ...rest:
@@ -61584,6 +61608,10 @@ const useDialogProps = props => {
     // Inert unless sizeFromAnchor below (see this file's top comment) —
     // Dialog's own positioning is never relative to it.
     anchor,
+    // Where a lift comes back to, when that is no longer the box it came out
+    // of. Read at the close, not kept from the opening — see
+    // resolveLiftAnchorElement.
+    liftAnchor,
     // 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.
@@ -61786,6 +61814,25 @@ const useDialogProps = props => {
     return undefined;
   };
 
+  // A popup one walks through puts something else in front than what was
+  // pressed — a row of cards shown one at a time, the walk carrying on from
+  // the card the press opened on — and the box then has to come back to what
+  // is in front NOW, which only the caller knows. Resolved at the close for
+  // that reason: the element it names changes while the popup is open, so
+  // anything read at the opening would be the walk's starting point again.
+  const resolveLiftAnchorElement = () => {
+    if (typeof liftAnchor === "string") {
+      const liftAnchorElementById = document.getElementById(liftAnchor);
+      if (!liftAnchorElementById) {
+        console.warn(`Dialog: liftAnchor="${liftAnchor}" did not match any element`);
+      }
+      return liftAnchorElementById;
+    }
+    // A ref is unwrapped even when it holds nothing, the same way `anchor` is:
+    // the ref object itself has no box to come back to.
+    return "current" in liftAnchor ? liftAnchor.current : liftAnchor;
+  };
+
   // The dialog and the anchor are the same box at two sizes, so the opening
   // and the closing are one becoming the other. The browser draws that itself
   // provided the change happens between its two pictures, which is what
@@ -61803,11 +61850,21 @@ const useDialogProps = props => {
       applyChange();
       return;
     }
-    const anchorElement = opened ? resolveAnchorElement(event) : anchorElementRef.current;
+    let anchorElement;
+    if (opened) {
+      anchorElement = resolveAnchorElement(event);
+    } else if (liftAnchor) {
+      anchorElement = resolveLiftAnchorElement();
+    } else {
+      anchorElement = anchorElementRef.current;
+    }
     if (!anchorElement) {
       if (opened) {
         console.warn(`[navi] Dialog has animation="lifting" and no anchor to lift out of, so it simply appears. The anchor is whatever opened it — a <Button command="--navi-open">, the "source" given to triggerNaviCommand — or the "anchor" prop.`);
       }
+      if (!opened && liftAnchor) {
+        console.warn(`[navi] Dialog has animation="lifting" and a "liftAnchor" naming nothing on screen, so it simply closes. The element it names is where the box comes back to, and it has to be in the document at the close.`);
+      }
       applyChange();
       return;
     }
@@ -62822,6 +62879,13 @@ const css$D = /* css */`
        them to win. Only the paint changes: the element is still rendered
        and still pointer-events: auto, so an outside click keeps doing
        exactly what pointerInteractionOutsideEffect says. */
+    /* "lift": the wall a lifted popup brings (see navi_css_vars.js), asked
+       for on its own — a popover whose own content is what must be looked at
+       wants the page gone behind it, without moving out of anything. */
+    &[data-backdrop-variant="lift"] {
+      --backdrop-background: var(--navi-backdrop-lift-background);
+      --backdrop-filter: var(--navi-backdrop-lift-backdrop-filter);
+    }
     &[data-backdrop-variant="discrete"] {
       --backdrop-background: var(--navi-backdrop-discrete-background);
       --backdrop-filter: var(--navi-backdrop-discrete-backdrop-filter);
@@ -62913,12 +62977,15 @@ const css$D = /* css */`
  *   own border box; a see-through popover whose box is bigger than what it
  *   paints marks the difference with `data-navi-popup-outside` (see
  *   docs/popup_backdrop.md).
- * @param {"auto"|"discrete"|"invisible"} [props.backdropVariant="auto"] - How
- *   visible the backdrop is, independently of what it does. `"auto"`: the
- *   paint `pointerInteractionOutsideEffect` implies (dimmed for
- *   `"close"`/`"cancel"`, blurred glass for `"capture"`). `"discrete"`: a
- *   barely-there dim. `"invisible"`: fully transparent — a wall that is not
- *   seen, still rendered and still catching every outside click. This only
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [props.backdropVariant="auto"]
+ *   - How visible the backdrop is, independently of what it does. `"auto"`:
+ *   the paint `pointerInteractionOutsideEffect` implies (dimmed for
+ *   `"close"`/`"cancel"`, blurred glass for `"capture"`). `"lift"`: the
+ *   opaque, blurred wall (`--navi-backdrop-lift-*`) a lifted popup brings,
+ *   for content that is the thing to look at rather than a surface shown over
+ *   a page still being read. `"discrete"`: a barely-there dim. `"invisible"`:
+ *   fully transparent — a wall that is not seen, still rendered and still
+ *   catching every outside click. This only
  *   changes how much the popover insists on being the thing you deal with;
  *   whether there is a wall to paint at all is `backdrop` above. Ignored when
  *   there is none (`pointerInteractionOutsideEffect="none"`, or
@@ -63255,9 +63322,10 @@ const usePopoverProps = props => {
     backdrop = true,
     // How loudly the backdrop says it is there — independent of what it
     // *does* (that's pointerInteractionOutsideEffect above). "auto" keeps
-    // the paint the effect implies; "discrete"/"invisible" tone it down or
-    // stop drawing it, without giving up the outside click — a wall that is
-    // not seen is still a wall (that is `backdrop` above).
+    // the paint the effect implies; "lift" asks for the opaque wall, and
+    // "discrete"/"invisible" tone it down or stop drawing it — none of them
+    // gives up the outside click, a wall that is not seen is still a wall
+    // (that is `backdrop` above).
     backdropVariant = "auto",
     // The paint itself, when the tokens behind backdropVariant are not what
     // this one popover wants. Named/forwarded rather than left in ...rest:
@@ -64264,7 +64332,7 @@ const css$C = /* css */`@layer navi {
  *   resolution picks says nothing about whether the page behind stays live.
  *   It is also what makes a sheet docked to an edge of a phone's screen
  *   (`dockedOnSmallTouchScreen`) non-modal.
- * @param {"auto"|"discrete"|"invisible"} [props.backdropVariant] - Forwarded
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [props.backdropVariant] - Forwarded
  *   as-is to whichever component renders (both understand it identically):
  *   how visible the backdrop is, independently of what an outside click
  *   does — a wall that is not seen is still a wall (that is `backdrop`
@@ -74757,7 +74825,7 @@ const PickerFirstResolver = props => {
  *   escapeEffect?: "cancel" | "close",
  *   pointerInteractionOutsideEffect?: "close" | "cancel" | "capture",
  *   backdrop?: boolean,
- *   backdropVariant?: "auto" | "discrete" | "invisible",
+ *   backdropVariant?: "auto" | "lift" | "discrete" | "invisible",
  *   backdropColor?: string,
  *   backdropFilter?: string,
  *   ref?: import("ignore:preact").RefObject<HTMLElement>,
@@ -75114,12 +75182,14 @@ const PickerFirstResolver = props => {
  *   dialog with no wall is shown through the Popover API rather than
  *   `showModal()`, so a picker docked as a bottom sheet on a phone still
  *   leaves the plan behind it live.
- * @param {"auto"|"discrete"|"invisible"} [backdropVariant="auto"] How visible the
- *   popup's backdrop is, independently of what a click outside does: `"auto"`
- *   is the paint `pointerInteractionOutsideEffect` implies, `"discrete"` a
- *   barely-there dim, `"invisible"` fully transparent — a wall that is not seen
- *   is still a wall, which is what `backdrop` above answers. For a picker that
- *   closes on an outside click without wanting to dim the page for it.
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [backdropVariant="auto"] How
+ *   visible the popup's backdrop is, independently of what a click outside
+ *   does: `"auto"` is the paint `pointerInteractionOutsideEffect` implies,
+ *   `"lift"` the opaque blurred wall `animation="lifting"` brings, asked for
+ *   without the movement, `"discrete"` a barely-there dim, `"invisible"` fully
+ *   transparent — a wall that is not seen is still a wall, which is what
+ *   `backdrop` above answers. For a picker that closes on an outside click
+ *   without wanting to dim the page for it.
  * @param {string} [backdropColor] The wash the popup paints over what is
  *   behind, for this picker alone. See Dialog's own doc.
  * @param {string} [backdropFilter] What that wash does to the picture
@@ -77725,7 +77795,7 @@ const css$n = /* css */`.navi_split_button {
  *   dockedOnSmallTouchScreen?: boolean | "top" | "bottom",
  *   marginWithContainer?: number | string,
  *   backdrop?: boolean,
- *   backdropVariant?: "auto" | "discrete" | "invisible",
+ *   backdropVariant?: "auto" | "lift" | "discrete" | "invisible",
  *   backdropColor?: string,
  *   backdropFilter?: string,
  *   pointerInteractionOutsideEffect?: "close" | "cancel" | "capture",