@jsenv/navi 0.29.452 → 0.29.454

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
@@ -40606,6 +40608,50 @@ const callLiftOverCallbacks = () => {
   });
 };
 
+/**
+ * What a gesture changes in a closed picker is sent at once.
+ *
+ * A picker's `action` waits for its popup to close: what is done in there is
+ * one answer, given when the person is done. A change made while the popup is
+ * closed — a chip's cross, a paste, a cut, a value proposed from beside it
+ * (`--navi-update`) — has no close coming, so nothing would ever send it: the
+ * value moves on screen and the record behind it stays. Each of those gestures
+ * calls this right after setting the value; a failing action puts the value
+ * back (resetOnError), as it does after a close.
+ *
+ * Called by gestures only. A value set without one — a bound signal followed, a
+ * cancel or a failure rolled back — is the picker being told, not asked, which
+ * is why this is not a reaction to every value set on a closed picker.
+ *
+ * The clear cross does the same through `--navi-send` (see --navi-clear in
+ * commands.js), and so does not come through here.
+ */
+
+
+const sendClosedPickerChange = (element, { event, name, requester }) => {
+  const controlHost = findControlHost(element) || element;
+  const controlRoot = findControlRoot(controlHost);
+  if (!controlRoot || controlRoot.getAttribute("navi-control") !== "picker") {
+    return;
+  }
+  if (controlRoot.getAttribute("aria-expanded") === "true") {
+    return;
+  }
+  const { props } = controlHost.__uiStateController__;
+  if (!props.action) {
+    return;
+  }
+  // A picker that picks nothing (`type="confirm"`, a menu of actions) holds no
+  // value its action would be sending: that action is the yes of its popup,
+  // and a paste landing on the trigger must not say it.
+  if (props.picksNothing) {
+    return;
+  }
+  // `requester`: the source of a command may have claimed the press to send
+  // this very change (see isAimedAtSelfInteractionsBelow).
+  dispatchRequestAction(controlHost, { event, name, requester });
+};
+
 /**
  * Runs a navi command from JS. It is the LAST RESORT: the attributes say the
  * same thing declaratively and go through this very function, so a press that
@@ -40997,6 +41043,11 @@ registerNaviCommand("--navi-update", (source, event, { argument }) => {
             event,
             behavior: argument,
           });
+          sendClosedPickerChange(target, {
+            event,
+            name: "--navi-update",
+            requester: source,
+          });
         },
       });
     },
@@ -52060,11 +52111,15 @@ const LinkWithRoute = ({
     also: currentAlso
   });
   const innerCurrent = current || linkMatching;
+
+  // What a childless link shows is LinkPlain's call (hrefFallback); a route
+  // only says it the way its pattern writes it, not as the resolved href.
   return jsx(Link, {
     href: url,
+    hrefText: route.buildRelativeUrl(routeParams),
     current: innerCurrent,
     ...rest,
-    children: children || route.buildRelativeUrl(routeParams)
+    children: children
   });
 };
 const LinkPlain = props => {
@@ -52090,6 +52145,7 @@ const LinkPlain = props => {
     revealOnInteraction = false,
     stretch,
     hrefFallback = !anchor,
+    hrefText = href,
     routeTransition,
     pressableDuringRouteTransition,
     replace,
@@ -52225,7 +52281,7 @@ const LinkPlain = props => {
   const documentRequest = isDocument ? {
     [LINK_DOCUMENT_ATTRIBUTE]: ""
   } : null;
-  const innerChildren = children || (hrefFallback ? href : children);
+  const innerChildren = children || (hrefFallback ? hrefText : children);
   const startIconEl = startIcon;
   const endIconEl = innerEndIcon;
 
@@ -52276,6 +52332,7 @@ const LinkPlain = props => {
     startIcon: undefined,
     endIcon: undefined,
     hrefFallback: undefined,
+    hrefText: undefined,
     routeTransition: undefined,
     pressableDuringRouteTransition: undefined,
     replace: undefined,
@@ -66406,6 +66463,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 +66541,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 +66572,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 +66723,6 @@ const popupCss = /* css */ `
         transform: translate(var(--x-popup-travel-x), var(--x-popup-travel-y));
       }
     }
-
   }
 
   .navi_popover {
@@ -66968,6 +67087,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 +67240,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 +67494,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 +67677,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 +67715,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 +69545,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 +69658,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 +69786,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;
 
@@ -82616,7 +82815,9 @@ const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
 /**
  * One value the picker holds, drawn as a chip with a cross that takes it back
  * out. Sits wherever the application draws what was picked — on the picker's
- * façade (`ui`) or inside its popup — and both behave the same.
+ * façade (`ui`) or inside its popup. Inside the open popup the removal waits
+ * for the close like any change made there; pressed while the popup is closed
+ * it is the whole gesture, and the picker's `action` runs at once.
  *
  * The cross asks with `--navi-unselect` rather than writing a new list, and it
  * asks the picker — which holds what was picked, and hands it down to whatever
@@ -83648,15 +83849,25 @@ const PickerButton = props => {
                 const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
                 e.clipboardData.setData("text/plain", displayText);
                 e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
+                e.preventDefault();
+                // A picker that asks before its cross clears anything is not
+                // emptied by a keystroke without the question: the cut copies,
+                // and the value stays.
+                if (clearConfirm !== undefined) {
+                  return;
+                }
                 // the clear ui state part need control to be interactable
                 dispatchRequestInteraction(pickerEl, {
                   event: e,
                   name: "cut",
                   allowed: () => {
                     dispatchRequestClearUIState(inputRef.current, e);
+                    sendClosedPickerChange(inputRef.current, {
+                      event: e,
+                      name: "cut"
+                    });
                   }
                 });
-                e.preventDefault();
               },
               onPaste: e => {
                 const pickerEl = ref.current;
@@ -83682,6 +83893,10 @@ const PickerButton = props => {
                     dispatchRequestSetUIState(inputRef.current, pasteValue, {
                       event: e
                     });
+                    sendClosedPickerChange(inputRef.current, {
+                      event: e,
+                      name: "paste"
+                    });
                   }
                 });
                 e.preventDefault();
@@ -83927,6 +84142,10 @@ const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
       dispatchRequestSetUIState(pickerInputEl, uiStateNext, {
         event: e
       });
+      sendClosedPickerChange(pickerInputEl, {
+        event: e,
+        name: goal
+      });
     }
   });
 };
@@ -96074,6 +96293,10 @@ const css$5 = /* css */`@keyframes navi_image_shimmer {
 `;
 const DEFAULT_PLACEHOLDER_LIGHT = "#d4d8dd";
 const DEFAULT_PLACEHOLDER_DARK = "#374151";
+// On an <img>, width/height describe the image: they stay HTML attributes.
+// Box would write them as inline styles, which beat every stylesheet rule, so
+// an image given its file's size (3840×2160) would overflow the box sizing it.
+const IMAGE_ATTRIBUTE_PROP_SET = new Set(["width", "height"]);
 
 /**
  * The props may come in any order: `src` and `srcset` reach the element after
@@ -96082,6 +96305,12 @@ const DEFAULT_PLACEHOLDER_DARK = "#374151";
  * decides whether to load when `src` is set, and an image whose `src` came
  * first loads, lazy or not.
  *
+ * @param {number} [props.width] - The image's width in pixels, written as the
+ *   `<img>` attribute, like `height`. Given both, the browser reserves the
+ *   aspect ratio before the bytes arrive. They size the element only while no
+ *   stylesheet rule does: a box that holds the image sizes it with CSS (or
+ *   `style`) and keeps the ratio.
+ * @param {number} [props.height] - The image's height in pixels, see `width`.
  * @param {string|false} [props.placeholderColor] - Background color shown while the image loads.
  *   Defaults to a light gray. Pass `false` to disable.
  * @param {boolean} [props.placeholderDark] - Use a dark default placeholder color,
@@ -96106,6 +96335,7 @@ const Image = ({
     ...rest,
     as: "img",
     baseClassName: "navi_image",
+    childPropSet: IMAGE_ATTRIBUTE_PROP_SET,
     "navi-placeholder": loadedRef.current ? undefined : "",
     style: {
       "--placeholder-color": resolvedPlaceholder || undefined,