@jsenv/navi 0.29.455 → 0.29.456

package/dist/dev/jsenv_navi.js

@@ -33755,9 +33755,33 @@ const pushHeadThemeColors = (themeColors) => {
   };
 };
 
+/**
+ * What a popup asks of the colour while it is open: its `themeColor` prop,
+ * else the `--navi-popup-theme-color` it inherits — where the choice goes
+ * when it is the app's, or a part of the app's, rather than one popup's.
+ *
+ * @param {Element} element - The popup element.
+ * @param {string|false} [themeColor] - The popup's prop.
+ * @returns {string} `"auto"` paints what the popup lays over the top edge,
+ *   `"none"` leaves the colour as it is, anything else is a colour forcing it.
+ */
+const readPopupThemeColor = (element, themeColor) => {
+  if (themeColor === false) {
+    return "none";
+  }
+  if (themeColor) {
+    return themeColor;
+  }
+  const token = getComputedStyle(element)
+    .getPropertyValue("--navi-popup-theme-color")
+    .trim();
+  return token || "auto";
+};
+
 /**
  * @param {object} paint
- * @param {string} [paint.themeColor] - Forces the colour, nothing is painted.
+ * @param {string} paint.themeColor - `"auto"` paints the two colours below,
+ *   a colour forces it and nothing is painted.
  * @param {string|null} [paint.backdropColor] - Laid over the page's colour.
  * @param {string|null} [paint.surfaceColor] - Laid over that, for a popup
  *   flush with the top edge.
@@ -33769,7 +33793,7 @@ const pushPopupThemeColor = ({
   surfaceColor,
 }) => {
   let layer;
-  if (themeColor) {
+  if (themeColor !== "auto") {
     layer = { color: themeColor };
   } else {
     const paints = [];
@@ -67908,16 +67932,17 @@ const css$E = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
- * @param {string|false} [props.themeColor] - The colour the browser paints
- *   above the page (`<meta name="theme-color">`: Chrome's address bar on
- *   Android, an installed app's status bar) while this dialog is open.
- *   Left out, it is what the dialog lays over the top edge of the screen: its
+ * @param {"auto"|string|false} [props.themeColor] - The colour the browser
+ *   paints above the page (`<meta name="theme-color">`: Chrome's address bar
+ *   on Android, an installed app's status bar) while this dialog is open.
+ *   `"auto"` is what the dialog lays over the top edge of the screen: its
  *   backdrop over the colour the page asked for (`<Head>`), and its own
  *   background over that when it is flush with the top edge
  *   (`marginWithContainer={0}` with `expand`/`expandY` or a top
  *   `positionArea`). A colour forces it, for a surface whose colour cannot be
  *   read (an image, a gradient); `false` leaves the page's colour alone.
- *   `layer="top"` only.
+ *   Left out, the `--navi-popup-theme-color` token decides, `"auto"` unless
+ *   the app says otherwise. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   dialog so the page/container behind it can't scroll while it's open.
  *   A `layer="local"` dialog always locks its own positioned ancestor's
@@ -69087,12 +69112,15 @@ const useDialogProps = props => {
     // What the browser paints above the page goes with what is laid over its
     // top edge, from the start of the opening to the start of the closing: a
     // local dialog lays nothing there.
-    if (isTopLayer && themeColor !== false) {
-      addCleanup(pushPopupThemeColor({
-        themeColor,
-        backdropColor: backdrop ? readBackdropColor(dialogEl) : null,
-        surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
-      }));
+    if (isTopLayer) {
+      const popupThemeColor = readPopupThemeColor(dialogEl, themeColor);
+      if (popupThemeColor !== "none") {
+        addCleanup(pushPopupThemeColor({
+          themeColor: popupThemeColor,
+          backdropColor: backdrop ? readBackdropColor(dialogEl) : null,
+          surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
+        }));
+      }
     }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(dialogEl) : null;
     // Handing the focus to a field is what raises the on-screen keyboard, and
@@ -69958,12 +69986,14 @@ const css$D = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
- * @param {string|false} [props.themeColor] - The colour the browser paints
- *   above the page (`<meta name="theme-color">`: Chrome's address bar on
- *   Android, an installed app's status bar) while this popover is open.
- *   Left out, it is the backdrop laid over the colour the page asked for
+ * @param {"auto"|string|false} [props.themeColor] - The colour the browser
+ *   paints above the page (`<meta name="theme-color">`: Chrome's address bar
+ *   on Android, an installed app's status bar) while this popover is open.
+ *   `"auto"` is the backdrop laid over the colour the page asked for
  *   (`<Head>`), and the page's colour when there is no backdrop. A colour
- *   forces it; `false` leaves the page's colour alone. `layer="top"` only.
+ *   forces it; `false` leaves the page's colour alone. Left out, the
+ *   `--navi-popup-theme-color` token decides, `"auto"` unless the app says
+ *   otherwise. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   popover so the page/container behind it can't scroll while it's open.
  * @param {boolean} [props.focusCapture] - Traps Tab navigation inside the
@@ -70924,11 +70954,14 @@ const usePopoverProps = props => {
     // What the browser paints above the page goes with what is laid over its
     // top edge, from the start of the opening to the start of the closing: a
     // local popover's backdrop stops at its container.
-    if (isTopLayer && themeColor !== false) {
-      addCleanup(pushPopupThemeColor({
-        themeColor,
-        backdropColor: backdropEl ? readBackdropColor(backdropEl) : null
-      }));
+    if (isTopLayer) {
+      const popupThemeColor = readPopupThemeColor(popoverEl, themeColor);
+      if (popupThemeColor !== "none") {
+        addCleanup(pushPopupThemeColor({
+          themeColor: popupThemeColor,
+          backdropColor: backdropEl ? readBackdropColor(backdropEl) : null
+        }));
+      }
     }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(popoverEl) : null;
     // autoFocus={false}: opening moves no focus at all — whoever has the
@@ -71346,10 +71379,11 @@ const css$C = /* css */`@layer navi {
  *   identically): the wash the backdrop paints over what is behind.
  * @param {string} [props.backdropFilter] - Forwarded as-is: what that wash
  *   does to the picture underneath, `"blur(4px)"` and the like.
- * @param {string|false} [props.themeColor] - Forwarded as-is: the colour the
- *   browser paints above the page while the popup is open, worked out from
- *   what it lays over the top edge when left out. A colour forces it, `false`
- *   leaves the page's colour alone.
+ * @param {"auto"|string|false} [props.themeColor] - Forwarded as-is: the
+ *   colour the browser paints above the page while the popup is open.
+ *   `"auto"` works it out from what the popup lays over the top edge, a
+ *   colour forces it, `false` leaves the page's colour alone. Left out, the
+ *   `--navi-popup-theme-color` token decides.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`|"expanding"|`expand-${string}`|"lifting"|{open: boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`, close: "lifting"}} [props.animation]
  *   - Forwarded to whichever renders — see either component's own doc.
  *   `"expanding"`/`"expand-*"` are `Popover`'s own; `"lifting"` and