@jsenv/navi 0.30.20 → 0.30.21

package/dist/dev/jsenv_navi.js

@@ -35218,6 +35218,9 @@ const STYLE_CSS_VARS_DEFAULT = {};
 // An entry of styleCSSVars is the css variable the prop writes into, alone when
 // the prop is named after a css style — Box then already knows how to read its
 // value — or paired with the style whose values it borrows when it is not.
+// A prop Box expands (padding into its four sides, alignX into
+// justify-content…) is looked up by the styles it expands into, and by its own
+// name only when the component maps none of them.
 const readCSSVarEntry = entry => {
   if (Array.isArray(entry)) {
     return entry;
@@ -35822,6 +35825,15 @@ const computeBox = (props, parentBoxFlow) => {
         if (!cssValues) {
           return;
         }
+        const ownCSSVarEntry = styleContext.styleCSSVars[name];
+        if (ownCSSVarEntry && !Object.keys(cssValues).some(styleName => styleContext.styleCSSVars[styleName])) {
+          // Written as the styles it expands into, the prop would land inline
+          // and beat what the component's stylesheet does with its variable
+          // (Switch sizes its thumb from its padding).
+          const [cssVarName, valueStyleName] = readCSSVarEntry(ownCSSVarEntry);
+          addCSSVar(stringifyStyleValue(value, valueStyleName || name, styleContext), cssVarName, boxStylesTarget);
+          return;
+        }
         let needForwarding = false;
         for (const styleName of Object.keys(cssValues)) {
           const cssValue = cssValues[styleName];
@@ -60520,8 +60532,8 @@ const BinderStyleCSSVars = {
   tabBackgroundHover: "--binder-tab-background-hover",
   tabBorderColor: "--binder-tab-border-color",
   tabColor: "--binder-tab-color",
-  paddingX: "--binder-padding-x",
-  paddingY: "--binder-padding-y",
+  paddingX: ["--binder-padding-x", "padding"],
+  paddingY: ["--binder-padding-y", "padding"],
   pagePadding: ["--binder-page-padding", "padding"]
 };
 const TABS_ALIGN_TO_JUSTIFY_CONTENT = {
@@ -61071,15 +61083,19 @@ const css$Y = /* css */`@layer navi {
     right: var(--navi-app-inset-right);
     left: var(--navi-app-inset-left);
     max-width: var(--navi-fixed-bar-max-width);
-    padding-right: calc(var(--navi-fixed-bar-padding) + env(safe-area-inset-right));
-    padding-left: calc(var(--navi-fixed-bar-padding) + env(safe-area-inset-left));
+    padding-right: calc(var(--navi-fixed-bar-padding-right, var(--navi-fixed-bar-padding)) +
+          env(safe-area-inset-right));
+    padding-left: calc(var(--navi-fixed-bar-padding-left, var(--navi-fixed-bar-padding)) +
+          env(safe-area-inset-left));
   }
 
   &[data-area="left"], &[data-area="right"] {
     top: var(--navi-app-inset-top);
     bottom: var(--navi-app-inset-bottom);
-    padding-top: calc(var(--navi-fixed-bar-padding) + env(safe-area-inset-top));
-    padding-bottom: calc(var(--navi-fixed-bar-padding) + env(safe-area-inset-bottom));
+    padding-top: calc(var(--navi-fixed-bar-padding-top, var(--navi-fixed-bar-padding)) +
+          env(safe-area-inset-top));
+    padding-bottom: calc(var(--navi-fixed-bar-padding-bottom, var(--navi-fixed-bar-padding)) +
+          env(safe-area-inset-bottom));
     flex-direction: column;
   }
 
@@ -61156,7 +61172,14 @@ const FixedBarStyleCSSVars = {
   width: "--navi-fixed-bar-width",
   height: "--navi-fixed-bar-height",
   maxWidth: "--navi-fixed-bar-max-width",
+  // Every side goes through a variable too: written inline, it would replace
+  // the safe-area inset the stylesheet adds to it. A side across the bar is
+  // read by no rule — that direction is the width/height.
   padding: "--navi-fixed-bar-padding",
+  paddingTop: "--navi-fixed-bar-padding-top",
+  paddingRight: "--navi-fixed-bar-padding-right",
+  paddingBottom: "--navi-fixed-bar-padding-bottom",
+  paddingLeft: "--navi-fixed-bar-padding-left",
   background: "--navi-fixed-bar-background",
   borderWidth: "--navi-fixed-bar-border-width",
   borderColor: "--navi-fixed-bar-border-color",
@@ -61170,6 +61193,12 @@ const FixedBarStyleCSSVars = {
  *   height?: string|number,
  *   maxWidth?: string|number,
  *   padding?: string|number,
+ *   paddingX?: string|number,
+ *   paddingY?: string|number,
+ *   paddingTop?: string|number,
+ *   paddingRight?: string|number,
+ *   paddingBottom?: string|number,
+ *   paddingLeft?: string|number,
  *   background?: string,
  *   border?: boolean,
  *   borderWidth?: string|number,
@@ -61196,7 +61225,9 @@ const FixedBarStyleCSSVars = {
  *   content column narrower than the window (it stays centered).
  * @param {string|number} [props.padding=0] - Along the bar only: left/right on
  *   a top or bottom bar, top/bottom on a side one. Across it, the size is
- *   `height`/`width`.
+ *   `height`/`width`. The same holds for `paddingX`/`paddingY` and each side:
+ *   a side across the bar is ignored. Along the bar, the safe-area inset is
+ *   added to it.
  * @param {string} [props.shadow] - What the bar casts over the content, in
  *   `box-shadow` syntax, cut at the bar's box on every side but the content's.
  *   Takes no room.
@@ -84047,10 +84078,9 @@ const Separator = ({
   import.meta.css = [css$y, "@jsenv/navi/src/layout/separator.jsx"];
 
   // Written straight into style rather than declared through Box's own
-  // styleCSSVars: `size`, `margin` and `spacing` are names Box already owns (a
-  // font size, real margins, a gap) and it resolves those before it ever looks
-  // at styleCSSVars — so size="4px" would set a font size and leave the line
-  // as thin as it was. Last, so a caller's own style still wins.
+  // styleCSSVars: `spacing` is a name Box owns, and on a box that is neither
+  // flex nor grid it writes nothing for it, variable included. Last, so a
+  // caller's own style still wins.
   const innerStyle = {
     ...cssVars({
       "--size": lengthValue(size),