@jsenv/navi 0.30.21 → 0.30.22

package/dist/dev/jsenv_navi.js

@@ -64626,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);
@@ -64639,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 {
@@ -64666,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;
     }
   }
@@ -64710,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"];
@@ -71852,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;
     }