@jsenv/navi 0.29.452 → 0.29.453

package/dist/dev/jsenv_navi.js

@@ -40077,27 +40077,34 @@ const TARGET_WAIT_MS = 1000;
 // covers is a render, not a fetch. Past it the popup's picture plays out on
 // its own.
 const LANDING_WAIT_MS = 300;
-// The popup's own animation duration, published on the root because the
-// ::view-transition tree hangs off it and inherits from nowhere else.
+// What the pictures are told — the popup's pace, the lifted card's paint, the
+// corners — is written on ::view-transition (transition_values.js), the root of
+// the pseudo-element tree they inherit from. Never on the document's root: a
+// custom property there is inherited by every element, and writing or removing
+// it restyles the whole document — at the press, again when the app reads
+// style before the first picture, and once more as the movement ends.
+//
+// The popup's own animation duration, for the pictures; the wall reads it off
+// the popup itself (dialog.jsx).
 const DURATION_PROPERTY = "--navi-popup-lift-duration";
 // The fixed bars (fixed_bar.jsx): the popup is placed in the room between
 // them, and the moving picture is clipped to that room on the way.
 const FIXED_BAR_SELECTOR = ".navi_fixed_bar";
-// The paint of the lifted node, published the same way: the box wears the
-// card's own background, so where it has grown past the picture it carries it
-// is the card that has grown, not a picture fading into a bigger one. Read off
-// the lifted node rather than the anchor: the anchor is often a bare trigger
-// around the card, painting nothing of its own, while the lifted node IS the
-// card — and a card does not change colour on the way.
+// The paint of the lifted node: the box wears the card's own background, so
+// where it has grown past the picture it carries it is the card that has
+// grown, not a picture fading into a bigger one. Read off the lifted node
+// rather than the anchor: the anchor is often a bare trigger around the card,
+// painting nothing of its own, while the lifted node IS the card — and a card
+// does not change colour on the way.
 const BACKGROUND_COLOR_PROPERTY = "--navi-popup-lift-background-color";
 const BACKGROUND_IMAGE_PROPERTY = "--navi-popup-lift-background-image";
-// The corners of the box the movement starts from, published the same way —
-// and, unlike the paint, not kept for the length of the movement: a corner is
-// written per box, on purpose, the same card at two sizes not wanting the same
-// round (a 6px corner stops showing on a big card). The moving box leaves with
-// the corners of the box it leaves and arrives with those of the box it
-// arrives on, the two authored values interpolated on the group's own clock
-// (see animateMovingBox).
+// The corners of the box the movement starts from — and, unlike the paint, not
+// kept for the length of the movement: a corner is written per box, on
+// purpose, the same card at two sizes not wanting the same round (a 6px corner
+// stops showing on a big card). The moving box leaves with the corners of the
+// box it leaves and arrives with those of the box it arrives on, the two
+// authored values interpolated on the group's own clock (see
+// animateMovingBox).
 const BORDER_RADIUS_PROPERTY = "--navi-popup-lift-border-radius";
 
 let releaseLiftInProgress = null;
@@ -40158,11 +40165,9 @@ const liftPopupFromAnchor = (
   releaseLiftInProgress?.();
 
   const elementLeaving = opened ? resolveAnchor() : resolveLiftTarget(popupEl);
-  // Everything read about the leaving side, before the first write. A read
-  // brings the style up to date, and the writes below land on the root — an
-  // attribute or an unregistered custom property there invalidates the
-  // computed style of every element — so a read placed after any of them is
-  // the whole document's style over again. Nothing on the leaving side moves
+  // Everything read about the leaving side, before the first write: a read
+  // brings the style up to date, and one placed after the writes below would
+  // pay for them on the spot, in the press. Nothing on the leaving side moves
   // before the movement, the page being held from here on.
   releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
   const duration = getComputedStyle(popupEl)
@@ -40180,9 +40185,9 @@ const liftPopupFromAnchor = (
     // Empty would substitute into `animation-duration:` as nothing at all,
     // which computes to 0s — a movement nobody sees rather than one at the
     // browser's own pace.
-    root.style.setProperty(DURATION_PROPERTY, duration);
+    setTransitionValue(DURATION_PROPERTY, duration);
   }
-  root.style.setProperty(BORDER_RADIUS_PROPERTY, cornersLeaving);
+  setTransitionValue(BORDER_RADIUS_PROPERTY, cornersLeaving);
   if (paintLeaving) {
     publishBoxPaint(paintLeaving);
   }
@@ -40209,10 +40214,10 @@ const liftPopupFromAnchor = (
     root.removeAttribute(ROOT_ATTRIBUTE);
     root.removeAttribute(KIND_ATTRIBUTE);
     root.removeAttribute(FIT_ATTRIBUTE);
-    root.style.removeProperty(DURATION_PROPERTY);
-    root.style.removeProperty(BORDER_RADIUS_PROPERTY);
-    root.style.removeProperty(BACKGROUND_COLOR_PROPERTY);
-    root.style.removeProperty(BACKGROUND_IMAGE_PROPERTY);
+    removeTransitionValue(DURATION_PROPERTY);
+    removeTransitionValue(BORDER_RADIUS_PROPERTY);
+    removeTransitionValue(BACKGROUND_COLOR_PROPERTY);
+    removeTransitionValue(BACKGROUND_IMAGE_PROPERTY);
     callLiftOverCallbacks();
   };
   releaseLiftInProgress = release;
@@ -40298,8 +40303,6 @@ const liftPopupFromAnchor = (
     if (lift === "box") {
       warnDrawingLiftedAsBox(target);
     }
-    // The last write before the transition: nothing reads between it and the
-    // style pass the browser makes on its own to take the first picture.
     publishBoxPaint(readBoxPaint(target));
     startMovement(reveal, () => target);
   };
@@ -40351,9 +40354,8 @@ const readBoxPaint = (liftedElement) => {
 };
 
 const publishBoxPaint = ({ backgroundColor, backgroundImage }) => {
-  const root = document.documentElement;
-  root.style.setProperty(BACKGROUND_COLOR_PROPERTY, backgroundColor);
-  root.style.setProperty(BACKGROUND_IMAGE_PROPERTY, backgroundImage);
+  setTransitionValue(BACKGROUND_COLOR_PROPERTY, backgroundColor);
+  setTransitionValue(BACKGROUND_IMAGE_PROPERTY, backgroundImage);
 };
 
 // The corners of a box: the first round found going down through children
@@ -66406,6 +66408,70 @@ const giveUpOnControlsHoldingPopup = (controlsHolding, reason) => {
  */
 
 const popupCss = /* css */ `
+  /* Not inherited: what the placement writes on a popup (applyNewPosition in
+     @jsenv/dom) and what the popup derives from it are read by the popup
+     alone, for its own size and cut. Inherited, every element of its content
+     carries a copy, and each placement restyles all of them before the first
+     frame. A popup nested in another also stops reading the outer one's values
+     where its own are unset. "*" keeps them untyped: var() substitutes them as
+     it does an unregistered property. */
+  @property --container-position-room-top {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --container-position-room-right {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --container-position-room-bottom {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --container-position-room-left {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --container-position-remaining-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --container-position-remaining-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-top-at-area {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-right-at-area {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-bottom-at-area {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-left-at-area {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-top {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-right {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-bottom {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popup-cut-left {
+    syntax: "*";
+    inherits: false;
+  }
+
   @layer navi {
     .navi_popover,
     .navi_dialog {
@@ -66420,29 +66486,6 @@ const popupCss = /* css */ `
 
   .navi_popover,
   .navi_dialog {
-    /* The translate property is deliberately absent from this list — it
-       carries where the popup stands, and applyNewPosition (visible_rect.js)
-       owns it and drives its own transition through the Web Animations API
-       instead of CSS, so it stays independent of whatever this list contains
-       (no shared transition-property to clobber, no propertyName to filter).
-       What moves here is transform, which composes under it. */
-    &[navi-animation] {
-      /* clip-path takes the translate's own duration, for the one cut that
-         still moves (a band of glass beside the app — see this file's top
-         comment for why every other cut is a constant). A constant cut, or a
-         kind that sets none, has the same value on both sides of the change,
-         which costs nothing. */
-      transition-property:
-        display, overlay, opacity, transform, scale, box-shadow, clip-path;
-      transition-duration:
-        var(--popup-animation-duration), var(--popup-animation-duration),
-        var(--popup-opacity-duration), var(--popup-translate-duration),
-        var(--popup-scale-duration), var(--popup-animation-duration),
-        var(--popup-translate-duration);
-      transition-timing-function: ease;
-      transition-behavior: allow-discrete;
-    }
-
     /* Where a travel may be cut, per side, in the popup's own coordinates.
        --container-position-room-* is how far past each of its own edges the
        popup may still paint before reaching the edge of the area it was placed
@@ -66474,6 +66517,28 @@ const popupCss = /* css */ `
       -1 * var(--container-position-room-left, 100vmax) - 100vmax +
         min(100vmax, var(--navi-app-inset-left, 0px) * 1000000)
     );
+    /* The translate property is deliberately absent from this list — it
+       carries where the popup stands, and applyNewPosition (visible_rect.js)
+       owns it and drives its own transition through the Web Animations API
+       instead of CSS, so it stays independent of whatever this list contains
+       (no shared transition-property to clobber, no propertyName to filter).
+       What moves here is transform, which composes under it. */
+    &[navi-animation] {
+      /* clip-path takes the translate's own duration, for the one cut that
+         still moves (a band of glass beside the app — see this file's top
+         comment for why every other cut is a constant). A constant cut, or a
+         kind that sets none, has the same value on both sides of the change,
+         which costs nothing. */
+      transition-property:
+        display, overlay, opacity, transform, scale, box-shadow, clip-path;
+      transition-duration:
+        var(--popup-animation-duration), var(--popup-animation-duration),
+        var(--popup-opacity-duration), var(--popup-translate-duration),
+        var(--popup-scale-duration), var(--popup-animation-duration),
+        var(--popup-translate-duration);
+      transition-timing-function: ease;
+      transition-behavior: allow-discrete;
+    }
     /* A local popup is clipped by its clip wrapper (a static ancestor sized to
        the container, overflow: hidden): nothing is left for a cut to hide. */
     &[data-layer="local"] {
@@ -66603,7 +66668,6 @@ const popupCss = /* css */ `
         transform: translate(var(--x-popup-travel-x), var(--x-popup-travel-y));
       }
     }
-
   }
 
   .navi_popover {
@@ -66968,6 +67032,62 @@ let openLocalDialogCount = 0;
 const css$E = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
      order depending on which popup renders first. */
+
+  /* Not inherited: each is written on the dialog or derived there — by its
+     placement (see popup_css.js for what inheriting would cost), by its
+     opening (the anchor box under sizeFromAnchor, the stack order) or from the
+     minWidth/maxWidth/minHeight/maxHeight props — and read by the dialog
+     alone. Inherited, a dialog nested in this one would also open at this
+     one's size. */
+  @property --dialog-stack-order {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-min-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-max-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-min-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-max-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-dialog-container-spacing {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-maxmax-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --dialog-maxmax-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-dialog-max-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-dialog-max-height {
+    syntax: "*";
+    inherits: false;
+  }
+
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -67065,18 +67185,6 @@ const css$E = /* css */`
     --x-corner-bottom-right-radius: initial;
     --x-corner-bottom-left-radius: initial;
 
-    /* Sizing is per dialog: the anchor box (sizeFromAnchor) and the
-       minWidth/maxWidth/minHeight/maxHeight props are written inline on THIS
-       element, and an inline declaration wins over these resets. Without
-       them, a dialog nested in another dialog would inherit its parent's
-       inline values and open at the parent's size. */
-    --anchor-width: initial;
-    --anchor-height: initial;
-    --dialog-min-width: initial;
-    --dialog-max-width: initial;
-    --dialog-min-height: initial;
-    --dialog-max-height: initial;
-
     /* Computed once, reused by both max-width itself and min-width's own
        clamp below (see its comment for why) — avoids repeating the same
        min(..., ...) expression twice. */
@@ -67331,7 +67439,7 @@ const css$E = /* css */`
       &[aria-expanded="true"]:not([navi-transitions-off])::backdrop {
         opacity: 1;
         transition-property: opacity;
-        transition-duration: var(--navi-popup-lift-duration, 0.25s);
+        transition-duration: var(--popup-animation-duration, 0.18s);
         transition-timing-function: ease;
 
         @starting-style {
@@ -67514,7 +67622,7 @@ const css$E = /* css */`
       &[aria-expanded="true"] {
         opacity: 1;
         transition-property: opacity;
-        transition-duration: var(--navi-popup-lift-duration, 0.25s);
+        transition-duration: var(--popup-animation-duration);
         transition-timing-function: ease;
       }
     }
@@ -67552,8 +67660,9 @@ const css$E = /* css */`
      and unpressable while the movement plays: under a modal wall at the
      opening, and for the popup's --popup-animation-duration at the closing. */
   :root[data-navi-popup-lift] {
-    /* The popup's own pace, published on the root by popup_lift.js because the
-       ::view-transition tree hangs off it and inherits from nowhere else. */
+    /* The popup's own pace, published on ::view-transition by popup_lift.js:
+       the pictures inherit from nowhere else. The wall reads it off the
+       dialog itself (the [data-lifting] backdrop rules above). */
     &::view-transition-group(navi-popup-lift),
     &::view-transition-old(navi-popup-lift),
     &::view-transition-new(navi-popup-lift),
@@ -69381,6 +69490,58 @@ let openLocalPopoverCount = 0;
 const css$D = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
      order depending on which popup renders first. */
+
+  /* Not inherited: each is written on the popover or derived there — by its
+     placement (the anchor box included; see popup_css.js for what inheriting
+     would cost), by its opening (the stack order, which the backdrop gets a
+     copy of) or from the minWidth/maxWidth/minHeight/maxHeight props — and
+     read by the popover alone. Inherited, a popover nested in another popup
+     would also open at the outer one's size. */
+  @property --popover-stack-order {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-inner-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --anchor-inner-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --popover-min-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --popover-max-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --popover-min-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --popover-max-height {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popover-max-width {
+    syntax: "*";
+    inherits: false;
+  }
+  @property --x-popover-max-height {
+    syntax: "*";
+    inherits: false;
+  }
+
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*
@@ -69442,21 +69603,6 @@ const css$D = /* css */`
     --x-corner-bottom-right-radius: initial;
     --x-corner-bottom-left-radius: initial;
 
-    /* Sizing is per popover: the anchor box and the
-       minWidth/maxWidth/minHeight/maxHeight props are written inline on THIS
-       element, and an inline declaration wins over these resets. Without
-       them, a popover nested in another popup (or opened without an anchor
-       inside one sized from its own) would inherit the outer inline values
-       and open at the outer size. */
-    --anchor-width: initial;
-    --anchor-height: initial;
-    --anchor-inner-width: initial;
-    --anchor-inner-height: initial;
-    --popover-min-width: initial;
-    --popover-max-width: initial;
-    --popover-min-height: initial;
-    --popover-max-height: initial;
-
     --x-popover-max-width: min(
       var(--popover-max-width, var(--popover-maxmax-width)),
       var(--container-position-remaining-width, var(--popover-maxmax-width)),
@@ -69585,10 +69731,8 @@ const css$D = /* css */`
        "position: absolute" above. */
     &[popover] {
       position: fixed;
-      /* The native top layer already gives "last shown wins" for free —
-         --popover-stack-order is only ever set by the custom renderer's own
-         openEffect, but reset here regardless in case a consumer sets the
-         var directly on an ancestor. */
+      /* The native top layer already gives "last shown wins" for free: the
+         custom renderer's stack order has no say here. */
       z-index: unset;
       padding: 0;