@jsenv/navi 0.30.20 → 0.30.22

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.
@@ -64595,6 +64626,7 @@ const css$R = /* css */`.navi_control_swap {
   --x-control-swap-size: var(--navi-control-swap-size, calc(var(--navi-control-line-height) + 2 * var(--navi-s) + 2 *
           var(--navi-control-border-width)));
   --x-control-swap-gap: var(--navi-control-swap-gap, var(--navi-xs));
+  --x-control-swap-seam-travel: calc(var(--x-control-swap-gap) + var(--navi-control-border-width));
   height: var(--x-control-swap-size);
   align-items: stretch;
   gap: var(--x-control-swap-gap);
@@ -64608,15 +64640,45 @@ const css$R = /* css */`.navi_control_swap {
     min-width: 0;
     height: 100%;
     position: relative;
+
+    &:has( ~ .navi_control_swap_stage)[aria-expanded="true"] {
+      --x-corner-top-right-radius: 0;
+      --x-corner-bottom-right-radius: 0;
+    }
+
+    .navi_control_swap_stage ~ &[aria-expanded="true"] {
+      --x-corner-top-left-radius: 0;
+      --x-corner-bottom-left-radius: 0;
+    }
+
+    &:focus-visible, &[data-focus-visible] {
+      z-index: var(--navi-z-index-control-focused);
+    }
   }
 
   & > .navi_control_swap_stage {
+    min-width: 0;
+    margin-left: calc(-1 * var(--x-control-swap-seam-travel));
     overflow-clip-margin: var(--navi-focus-outline-width);
     flex: 1 1 0;
-    min-width: 0;
     display: flex;
     overflow: clip;
     container-type: inline-size;
+
+    &:hover {
+      z-index: var(--navi-z-index-control-hovered);
+      position: relative;
+    }
+
+    &:has(:focus-visible, [data-focus-visible]) {
+      z-index: var(--navi-z-index-control-focused);
+      position: relative;
+    }
+
+    &:has([aria-expanded="true"]) {
+      z-index: var(--navi-z-index-control-expanded);
+      position: relative;
+    }
   }
 
   & > .navi_control_swap_stage > .navi_control_swap_track {
@@ -64635,20 +64697,43 @@ const css$R = /* css */`.navi_control_swap {
         width: 100%;
         height: 100%;
       }
+
+      &:first-child > :not([navi-out-of-flow]) {
+        --x-corner-top-left-radius: 0;
+        --x-corner-bottom-left-radius: 0;
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+
+      &:last-child > :not([navi-out-of-flow]) {
+        --x-corner-top-right-radius: 0;
+        --x-corner-bottom-right-radius: 0;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
     }
   }
 
+  &[data-active-index="1"] > .navi_control_swap_stage {
+    transform: translateX(var(--x-control-swap-seam-travel));
+  }
+
   &[data-active-index="1"] > .navi_control_swap_stage > .navi_control_swap_track {
     transform: translateX(calc(-100cqw - var(--x-control-swap-gap)));
   }
 
-  &[data-animation] > .navi_control_swap_stage > .navi_control_swap_track {
+  &[data-animation] > .navi_control_swap_stage, &[data-animation] > .navi_control_swap_stage > .navi_control_swap_track {
     transition: transform var(--navi-control-swap-animation-duration, .22s)
         ease;
   }
 
+  &[data-animation] > .navi_control_swap_cap {
+    transition: border-radius
+        var(--navi-control-swap-animation-duration, .22s) ease;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    &[data-animation] > .navi_control_swap_stage > .navi_control_swap_track {
+    &[data-animation] > .navi_control_swap_stage, &[data-animation] > .navi_control_swap_stage > .navi_control_swap_track, &[data-animation] > .navi_control_swap_cap {
       transition: none;
     }
   }
@@ -64679,8 +64764,9 @@ const css$R = /* css */`.navi_control_swap {
  *
  * The row is one length tall — `--navi-control-swap-size`, a line of text
  * between two `s` paddings — and everything in it is that tall: the caps are
- * squares of it, the control holding the floor fills it. `--navi-control-swap-gap`
- * is the space between the boxes.
+ * squares of it, the control holding the floor fills it. The control is joined
+ * to its cap by a shared border; `--navi-control-swap-gap` is the space between
+ * it and the other cap.
  */
 const ControlSwap = props => {
   import.meta.css = [css$R, "@jsenv/navi/src/control/control_swap/control_swap.jsx"];
@@ -71821,6 +71907,12 @@ const SlideContainer = ({
     // names a slide, and the container standing on its first one is a fact only
     // the map knows (see the layout effect that paints it).
     const areaOnScreen = containerRef.current.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
+    // Standing on the first slide by default holds a rank, and the slide at
+    // that rank changes with their order. Someone outside is naming slides, so
+    // the one on screen is held by its name from this answer on.
+    if (current !== areaOnScreen) {
+      setCurrentAreaState(areaOnScreen);
+    }
     if (areaAsked === areaOnScreen) {
       return;
     }
@@ -84047,10 +84139,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),