@jsenv/navi 0.29.451 → 0.29.453

package/dist/dev/jsenv_navi.js

@@ -33796,6 +33796,34 @@ const pushPopupThemeColor = ({
   };
 };
 
+/**
+ * What a popup's wall paints, read off the `--backdrop-background` it is
+ * painted from rather than off the wall: for the length of a route transition
+ * played on an area the wall itself is turned transparent and stood in for
+ * (transition_furniture.js), and a popup opening then would find nothing laid
+ * over the edge. The variable holds a token list, resolved to a colour on an
+ * element of its own, given what the wall inherits that a colour depends on:
+ * color-scheme for light-dark() and the system colours, color for
+ * currentcolor.
+ *
+ * @param {Element} element - The element declaring the variable: the dialog
+ *   for its ::backdrop, a popover's wall for itself.
+ * @returns {string}
+ */
+const readBackdropColor = (element) => {
+  const elementStyle = getComputedStyle(element);
+  const probe = document.createElement("div");
+  probe.style.colorScheme = elementStyle.colorScheme;
+  probe.style.color = elementStyle.color;
+  probe.style.background = elementStyle.getPropertyValue(
+    "--backdrop-background",
+  );
+  document.body.append(probe);
+  const color = getComputedStyle(probe).backgroundColor;
+  probe.remove();
+  return color;
+};
+
 let renderQueued = false;
 // Once per commit: a Head re-rendering leaves and arrives again in the same
 // commit, and the browser must not be handed the colour from in between.
@@ -35057,9 +35085,16 @@ const WALL_ATTRIBUTE = "data-navi-transition-wall";
 // property would replace it.
 const FURNITURE_ATTRIBUTE = "data-navi-transition-furniture";
 // What the wall paints, resolved on the matched element in both cases (the
-// dialog for its ::backdrop, the popover's wall for itself): the same two
-// properties, copied onto the stand-in.
-const WALL_PROPERTIES = ["--backdrop-background", "--backdrop-filter"];
+// dialog for its ::backdrop, the popover's wall for itself), and what a colour
+// in it depends on: color-scheme for light-dark() and the system colours,
+// color for currentcolor. Copied onto the stand-in, which paints them in a
+// context of its own.
+const WALL_PROPERTIES = [
+  "--backdrop-background",
+  "--backdrop-filter",
+  "color-scheme",
+  "color",
+];
 
 // The pictures the wall is painted into: the pages', and every bar's own.
 const FIXED_BAR_SELECTOR$1 = ".navi_fixed_bar";
@@ -40042,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;
@@ -40123,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)
@@ -40145,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);
   }
@@ -40174,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;
@@ -40263,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);
   };
@@ -40316,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
@@ -57540,24 +57577,32 @@ const ControlSwap = props => {
   }
   // Reading .value during render is what subscribes the row to it.
   const valueRequested = signal ? signal.value : value;
-  const [activeName, setActiveName] = useState(() => {
+  // The side holding the floor, and the cap whose press gave it (null when
+  // `value`/`signal` did): which cap was pressed decides where the focus goes.
+  const [floor, setFloor] = useState(() => {
     const nameRequested = valueRequested === undefined ? defaultValue : valueRequested;
-    return nameRequested === undefined ? sides[0].name : nameRequested;
+    return {
+      name: nameRequested === undefined ? sides[0].name : nameRequested,
+      pressedCapIndex: null
+    };
   });
-  const activeIndexFound = sides.findIndex(side => side.name === activeName);
+  const activeIndexFound = sides.findIndex(side => side.name === floor.name);
   const activeIndex = activeIndexFound === -1 ? 0 : activeIndexFound;
   const activeSide = sides[activeIndex];
   const capRefs = [useRef(), useRef()];
   const slotRefs = [useRef(), useRef()];
   const slotIdPrefix = useId();
-  const activeNameRef = useRef(activeName);
+  const activeNameRef = useRef(floor.name);
   activeNameRef.current = activeSide.name;
-  const swapTo = (name, event) => {
+  const swapTo = (name, event, pressedCapIndex = null) => {
     if (name === activeNameRef.current) {
       return;
     }
     activeNameRef.current = name;
-    setActiveName(name);
+    setFloor({
+      name,
+      pressedCapIndex
+    });
     if (signal) {
       signal.value = name;
     }
@@ -57590,14 +57635,14 @@ const ControlSwap = props => {
       isFirstActiveRunRef.current = false;
       return;
     }
-    focusWithTheFloor(slotRefs[activeIndex].current, activeSide, capRefs[activeIndex].current);
+    focusWithTheFloor(slotRefs[activeIndex].current, activeSide, capRefs[activeIndex].current, floor.pressedCapIndex === null ? null : capRefs[floor.pressedCapIndex].current);
   }, [activeSide.name]);
 
   // Both caps do the same thing, and it is the reason they sit outside the
   // controls: whichever one the finger lands on, the floor goes to the other
   // side. The same pixel opens the search and closes it.
-  const swapOnPress = event => {
-    swapTo(sides[activeIndex === 0 ? 1 : 0].name, event);
+  const swapOnPress = (event, pressedCapIndex) => {
+    swapTo(sides[activeIndex === 0 ? 1 : 0].name, event, pressedCapIndex);
   };
   return jsxs(Box, {
     flex: "x",
@@ -57611,7 +57656,7 @@ const ControlSwap = props => {
       side: sides[0],
       slotId: `${slotIdPrefix}_0`,
       active: activeIndex === 0,
-      onPress: swapOnPress
+      onPress: event => swapOnPress(event, 0)
     }), jsx("div", {
       className: "navi_control_swap_stage",
       children: jsx("div", {
@@ -57629,7 +57674,7 @@ const ControlSwap = props => {
       side: sides[1],
       slotId: `${slotIdPrefix}_1`,
       active: activeIndex === 1,
-      onPress: swapOnPress
+      onPress: event => swapOnPress(event, 1)
     })]
   });
 };
@@ -57660,12 +57705,14 @@ const ControlSwap = props => {
  *   the collapsed one — the side holding the floor spells out in full what a
  *   dot could only hint at — so it is read straight off the state
  *   (`badge={Boolean(groupId)}`), with no "and this side is hidden" to add.
- * @param autoFocus - On by default: the focus goes into this control when it
- *   takes the floor, where navi's ladder puts it — an `autoFocus` inside the
- *   control first, its first focusable otherwise. `false` leaves it on the cap
- *   that was pressed, for a control one reads before writing in (and, on a
- *   phone, for a keyboard that must not rise). Never on mount, whatever the
- *   setting.
+ * @param autoFocus - On by default: the focus goes into this control when its
+ *   own cap (or `value`/`signal`) gives it the floor, where navi's ladder puts
+ *   it — an `autoFocus` inside the control first, its first focusable
+ *   otherwise. `false` leaves it on the cap that was pressed, for a control one
+ *   reads before writing in (and, on a phone, for a keyboard that must not
+ *   rise). Whatever the setting, never on mount, and never when the floor comes
+ *   back because the other side was put away by its own cap: that press closed
+ *   something, it did not ask for this control.
  *
  * Anything else — `data-testid`, `variant`, `backgroundColor`, `color`, an
  * `aria-describedby` — goes to the cap, which is a `<Button>`. It is the one
@@ -57740,9 +57787,13 @@ const readSides = children => {
   return sides;
 };
 
-// The floor moved: the press that gave it landed on a cap, and what one wants
-// next is the control that just arrived — typing into the search field one just
-// opened, not pressing its icon again.
+// The floor moved. A press on the arriving side's own cap — the collapsed one —
+// asks for that control: what one wants next is typing into the search field
+// one just opened, not pressing its icon again. A press on the other cap puts
+// the side holding the floor away, and the arriving one only comes back because
+// the row has room for one control: the focus stays on the cap pressed, and on
+// a phone no keyboard rises over the list one went back to. A swap with no
+// press behind it (`value`/`signal` moved) is taken as asking for the arrival.
 //
 // WHERE inside is navi's own ladder (findFocusTarget): an `autoFocus` in the
 // control's own content first, the first focusable otherwise, a last resort
@@ -57757,8 +57808,9 @@ const readSides = children => {
 //   open". A field marked that way so its sheet opens quietly would otherwise
 //   leave the focus on the magnifier that was pressed to reach it.
 // A side one reads before writing in says `autoFocus={false}`.
-const focusWithTheFloor = (arrivingSlot, arrivingSide, arrivingCap) => {
-  if (arrivingSide.autoFocus !== false) {
+const focusWithTheFloor = (arrivingSlot, arrivingSide, arrivingCap, pressedCap) => {
+  const arrivalAskedFor = !pressedCap || pressedCap === arrivingCap;
+  if (arrivalAskedFor && arrivingSide.autoFocus !== false) {
     const found = findFocusTarget(arrivingSlot, {
       restoreMayClaim: true
     });
@@ -57768,13 +57820,14 @@ const focusWithTheFloor = (arrivingSlot, arrivingSide, arrivingCap) => {
     }
   }
   // Whatever the leaving slot held is inert and off the window now, so the
-  // browser dropped its focus to the document body: it has to land somewhere,
-  // and the cap of the side taking over is where the gesture was.
+  // browser dropped its focus to the document body (Safari never gave it to
+  // the pressed button in the first place): it has to land somewhere, and the
+  // cap pressed is where the gesture was.
   const {
     activeElement
   } = document;
   if (!activeElement || activeElement === document.body) {
-    moveFocusTo(arrivingCap);
+    moveFocusTo(pressedCap || arrivingCap);
   }
 };
 
@@ -66355,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 {
@@ -66369,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
@@ -66423,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"] {
@@ -66552,7 +66668,6 @@ const popupCss = /* css */ `
         transform: translate(var(--x-popup-travel-x), var(--x-popup-travel-y));
       }
     }
-
   }
 
   .navi_popover {
@@ -66917,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
@@ -67014,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. */
@@ -67280,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 {
@@ -67463,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;
       }
     }
@@ -67501,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),
@@ -68919,7 +69079,7 @@ const useDialogProps = props => {
     if (isTopLayer && themeColor !== false) {
       addCleanup(pushPopupThemeColor({
         themeColor,
-        backdropColor: backdrop ? getComputedStyle(dialogEl, "::backdrop").backgroundColor : null,
+        backdropColor: backdrop ? readBackdropColor(dialogEl) : null,
         surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
       }));
     }
@@ -69330,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*
@@ -69391,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)),
@@ -69534,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;
 
@@ -70721,7 +70916,7 @@ const usePopoverProps = props => {
     if (isTopLayer && themeColor !== false) {
       addCleanup(pushPopupThemeColor({
         themeColor,
-        backdropColor: backdropEl ? getComputedStyle(backdropEl).backgroundColor : null
+        backdropColor: backdropEl ? readBackdropColor(backdropEl) : null
       }));
     }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(popoverEl) : null;