@jsenv/navi 0.29.96 → 0.29.97

package/dist/jsenv_navi.js

@@ -24717,6 +24717,16 @@ const useUIGroupStateController = (
           // between them, from here on.
           controller.stateGivenFromAbove = false;
           if (resolvedDistributeChildStates) {
+            if (compareTwoJsValues(groupUIState, controller.uiState)) {
+              // The aggregate answered what the group already holds, which is
+              // how such a group says "not yet, ask me again". Some gestures
+              // cannot avoid an in-between — two people swapping seats means one
+              // leaves before the other arrives — and the aggregate is where
+              // that half-state is recognised. Placing the children from it
+              // would undo the half of the gesture that has already landed, and
+              // publishing it would hand a half-answer to the row above.
+              return;
+            }
             // A group answering for all its children at once holds ONE answer
             // its children are views OF, rather than a value that IS what they
             // said: a list saying who plays and four seats saying who sits
@@ -75271,19 +75281,42 @@ installImportMetaCssBuild(import.meta);/**
  * — read off the vnodes (toChildArray, so a .map() or a fragment is fine; a
  * component of your own wrapping an Item is not seen). The Item renders its
  * label; everything positional is this component's business.
+ *
+ * `slideContainer` connects the list to a <SlideContainer> by id, both ways:
+ * pressing a step travels there (--navi-go-to-slide), and the position is
+ * READ off the container rather than said by a prop — including mid-travel:
+ * the container paints --slide-travel-progress on this element (it is a
+ * follower, same mechanism as <Nav slideContainer>), so the halo rides the
+ * drag under the finger, in CSS alone. The path then follows the position
+ * too, clamped between `reached` (never retracts) and `reachable` (never
+ * ahead of the answers): dragging towards a step whose way is earned fills
+ * the line under the finger, dragging past the answers does not.
  */
 const css$2 = /* css */`
   .navi_step_list {
-    /* The knobs, in one place: accent is the path, muted is what the path
-       has not reached, on-accent writes on filled dots. --step-list-path-line
+    /* The knobs: accent is the path, muted is what the path has not
+       reached, on-accent writes on filled dots, and --step-list-path-line
        exists apart from the accent for a dark band where the walked line
-       reads better plain white. */
-    --step-list-accent: #4f8ef7;
-    --step-list-on-accent: white;
-    --step-list-muted: light-dark(#8a93a8, #8b99b8);
-    --step-list-line: light-dark(#c9d0dd, rgba(255, 255, 255, 0.35));
-    --step-list-current-color: light-dark(#1c2433, white);
-    --step-list-path-line: var(--step-list-accent);
+       reads better plain white. Said from OUTSIDE (any ancestor — a dark
+       band, a themed app) on the plain names; resolved here through an
+       indirection (--x-…, the way Button does), because a default written
+       on the plain name on this very element would beat anything an
+       ancestor says. */
+    --x-step-list-accent: var(--step-list-accent, #4f8ef7);
+    --x-step-list-on-accent: var(--step-list-on-accent, white);
+    --x-step-list-muted: var(--step-list-muted, light-dark(#8a93a8, #8b99b8));
+    --x-step-list-line: var(
+      --step-list-line,
+      light-dark(#c9d0dd, rgba(255, 255, 255, 0.35))
+    );
+    --x-step-list-current-color: var(
+      --step-list-current-color,
+      light-dark(#1c2433, white)
+    );
+    --x-step-list-path-line: var(
+      --step-list-path-line,
+      var(--x-step-list-accent)
+    );
 
     position: relative;
     display: block;
@@ -75297,19 +75330,29 @@ const css$2 = /* css */`
   }
   /* The road not walked yet. */
   .navi_step_list_rail line {
-    stroke: var(--step-list-line);
+    stroke: var(--x-step-list-line);
     stroke-width: 2;
     stroke-dasharray: 4 5;
   }
   .navi_step_list_rail circle {
     fill: none;
-    stroke: var(--step-list-muted);
+    stroke: var(--x-step-list-muted);
     stroke-width: 1.5;
   }
   .navi_step_list_rail text {
     font-weight: 600;
     font-size: 12px;
-    fill: var(--step-list-muted);
+    fill: var(--x-step-list-muted);
+  }
+  /* The current dot says so in the drawing itself, not only by its halo: on
+     a dark band a muted number under a faint ring reads as nothing. Said in
+     the base layer only (see renderRail) — a current dot the path has
+     covered keeps the filled colors. */
+  .navi_step_list_rail g[data-current] circle {
+    stroke: var(--x-step-list-current-color);
+  }
+  .navi_step_list_rail g[data-current] text {
+    fill: var(--x-step-list-current-color);
   }
   /* The path: same drawing, filled, revealed up to the step it has come to.
      The clip is set inline (a width in px); transitioning it is what makes
@@ -75318,15 +75361,15 @@ const css$2 = /* css */`
     transition: clip-path 300ms ease;
   }
   .navi_step_list_rail_filled line {
-    stroke: var(--step-list-path-line);
+    stroke: var(--x-step-list-path-line);
     stroke-dasharray: none;
   }
   .navi_step_list_rail_filled circle {
-    fill: var(--step-list-accent);
-    stroke: var(--step-list-accent);
+    fill: var(--x-step-list-accent);
+    stroke: var(--x-step-list-accent);
   }
   .navi_step_list_rail_filled text {
-    fill: var(--step-list-on-accent);
+    fill: var(--x-step-list-on-accent);
   }
   /* The position: a halo around the dot being looked at. It slides from dot
      to dot (transform, transitioned) — the g moves, the circle inside is
@@ -75336,9 +75379,53 @@ const css$2 = /* css */`
   }
   .navi_step_list_marker circle {
     fill: none;
-    stroke: color-mix(in srgb, var(--step-list-accent) 65%, transparent);
+    stroke: color-mix(in srgb, var(--x-step-list-accent) 65%, transparent);
     stroke-width: 1.5;
   }
+
+  /* Connected to slides: the movement is not this component's anymore. The
+     container paints --slide-travel-progress here (this element follows it,
+     see data-slide-container-follows) — an asked-for travel animates it, a
+     finger drags it — and everything below is a calc() of that number, so
+     the halo and the path move per frame in CSS alone. The transitions are
+     off: they would chase a finger that is already the pace.
+     Position, in dots-x px: where the picture is right now. */
+  .navi_step_list[data-slide-container-follows] {
+    --step-list-position: calc(
+      var(--step-list-pos-x, 0) + var(--slide-travel-progress) *
+        var(--step-list-pos-dx, 0)
+    );
+  }
+  .navi_step_list[data-slide-container-follows] .navi_step_list_marker {
+    transform: translateX(calc(var(--step-list-position) * 1px));
+    transition: none;
+  }
+  /* The path follows the position, clamped: never back below what was
+     earned (--step-list-reached-x), never ahead of what the answers allow
+     (--step-list-reachable-x). The +14 covers the dot it stands on (radius
+     plus stroke). */
+  .navi_step_list[data-slide-container-follows] .navi_step_list_rail_filled {
+    clip-path: inset(
+      0
+        calc(
+          (
+              var(--step-list-w, 0) -
+                (
+                  clamp(
+                      var(--step-list-reached-x, -9999),
+                      var(--step-list-position),
+                      var(--step-list-reachable-x, -9999)
+                    ) +
+                    14
+                )
+            ) *
+            1px
+        )
+        0 0
+    );
+    transition: none;
+  }
+
   /* One press target per step, covering the dot AND the label under it. The
      feedback is NOT the whole surface: a rectangle would say the whole band
      is a button, when the affordance is the dot — so hover and focus land on
@@ -75352,9 +75439,9 @@ const css$2 = /* css */`
     box-sizing: border-box;
     height: 100%;
   }
-  /* Doubled selector: the discrete variant declares its own hover background
-     var, and navi's stylesheet is injected after this one — specificity is
-     what makes these values the ones read. */
+  /* Doubled selector: the button's own state formulas (a readonly color
+     mixed at the variant level) are declared in navi's stylesheet, injected
+     after this one — specificity is what makes these values the ones read. */
   .navi_step_list .navi_step_list_step {
     position: relative;
     display: block;
@@ -75363,11 +75450,13 @@ const css$2 = /* css */`
     padding: 0;
     font-size: 12px;
     outline: none;
-    --button-color: var(--step-list-muted);
-    --button-color-readonly: var(--step-list-muted);
-    --button-background-color: transparent;
-    --button-background-color-hover: transparent;
-    --button-background-color-readonly: transparent;
+    --button-color: var(--x-step-list-muted);
+    --button-color-readonly: var(--x-step-list-muted);
+    /* The button's own focus ring, silenced: it would outline the whole
+       press surface, and the ring this list draws is the one around the dot
+       (see the ::before rules below) — two rings read as a mistake. Width
+       rather than style, because the ::before sets its own style in full. */
+    --button-outline-width: 0px;
   }
   /* Centered on the dot: same vertical middle as the rail (top 0, height 34,
      cy 17). */
@@ -75383,11 +75472,11 @@ const css$2 = /* css */`
   }
   .navi_step_list_step:hover::before,
   .navi_step_list_step[data-hover]::before {
-    background: color-mix(in srgb, var(--step-list-accent) 15%, transparent);
+    background: color-mix(in srgb, var(--x-step-list-accent) 15%, transparent);
   }
   .navi_step_list .navi_step_list_step:hover,
   .navi_step_list .navi_step_list_step[data-hover] {
-    --button-color: var(--step-list-current-color);
+    --button-color: var(--x-step-list-current-color);
   }
   .navi_step_list_step:focus-visible::before,
   .navi_step_list_step[data-focus-visible]::before {
@@ -75405,8 +75494,8 @@ const css$2 = /* css */`
   }
   .navi_step_list .navi_step_list_step[data-current] {
     font-weight: 600;
-    --button-color: var(--step-list-current-color);
-    --button-color-readonly: var(--step-list-current-color);
+    --button-color: var(--x-step-list-current-color);
+    --button-color-readonly: var(--x-step-list-current-color);
   }
 `;
 const RAIL_H = 34;
@@ -75422,22 +75511,48 @@ const LINE_GAP = 5;
  * @type {import("ignore:preact").FunctionComponent<{
  *   current?: string,
  *   reached?: string,
- *   onStepPress?: (value: string, event: Event) => void,
+ *   reachable?: string,
+ *   slideContainer?: string,
+ *   travelByClick?: boolean,
+ *   travelByKeyboard?: boolean,
  *   [key: string]: any,
  * }>}
  * @param {string} [current] - the step being looked at: its dot gets the
  *   halo, its label the emphasis. Omit for "nowhere" — a confirmation
- *   screen after the walk, say.
+ *   screen after the walk, say. With `slideContainer` the position is read
+ *   off the container instead, and this prop is ignored.
  * @param {string} [reached] - the step the path has come to: the line is
  *   solid and the dots filled up to it, dashed past it. Omit for a path
  *   that has not started.
- * @param {(value: string, event: Event) => void} [onStepPress] - a step was
- *   pressed. Without it the steps are read-only — shown, not offered.
+ * @param {string} [reachable] - how far the path MAY go (with
+ *   `slideContainer` only): between `reached` and this step the path
+ *   follows the position — a drag towards a step whose way is earned fills
+ *   the line under the finger. Defaults to `reached`: the path then never
+ *   moves with the position at all.
+ * @param {string} [slideContainer] - id of a <SlideContainer> these steps
+ *   are the slides of. Pressing a step travels there
+ *   (--navi-go-to-slide), the halo follows the container — drags included —
+ *   and this element becomes a follower of the container
+ *   (data-slide-container-follows), which is also what keeps the arrow keys
+ *   working from here.
+ * @param {boolean} [travelByClick=true] - whether pressing a step goes
+ *   there. Off, the steps are read-only — shown, not offered. To DO
+ *   something on a press, say `onClick` on the Item itself: like every other
+ *   prop an Item carries, it lands on that step's button.
+ * @param {boolean} [travelByKeyboard=true] - whether the arrow keys walk
+ *   from one step to the other (the focus moves, Enter presses). Only when
+ *   the list stands alone: connected to slides the arrows belong to the
+ *   CONTAINER — this element is a follower, so a press here already walks
+ *   the slides, and the container's own `travelByKeyboard` is the one that
+ *   says so. One owner per mode, or one arrow would do both.
  */
 const StepList = ({
   current,
   reached,
-  onStepPress,
+  reachable,
+  slideContainer,
+  travelByClick = true,
+  travelByKeyboard = true,
   children,
   ...rest
 }) => {
@@ -75460,6 +75575,15 @@ const StepList = ({
     };
   }, []);
 
+  // The arrows walk the steps — standing alone only: connected, this element
+  // follows the container, whose own keydown listener already walks the
+  // slides from here (and whose travelByKeyboard says whether to). A focus
+  // group on top of that would make one arrow do both.
+  useFocusGroup(rootRef, {
+    enabled: Boolean(travelByKeyboard) && !slideContainer,
+    direction: "x"
+  });
+
   // The steps, read off the children: each <StepList.Item> vnode says which
   // step it is (value) and is rendered as the label under its dot.
   const stepVNodes = toChildArray(children).filter(child => child && child.props);
@@ -75475,8 +75599,68 @@ const StepList = ({
     }
   }
   const indexOf = value => stepVNodes.findIndex((vnode, index) => valueOf(vnode, index) === value);
-  const currentIndex = current === undefined ? -1 : indexOf(current);
+
+  // Where the slides are, read off the container: which slide is current,
+  // and — while a travel or a drag is playing — which one the picture leans
+  // towards. The current area re-renders this component (the emphasized
+  // label, the data-current dot); the in-between positions never do: they
+  // are written as numbers on this element and interpolated by the CSS
+  // above, at the pace of --slide-travel-progress.
+  const [containerCurrent, setContainerCurrent] = useState(undefined);
+  useLayoutEffect(() => {
+    if (!slideContainer || dotXs.length === 0) {
+      return undefined;
+    }
+    const containerElement = document.getElementById(slideContainer);
+    if (!containerElement) {
+      console.warn(`<StepList slideContainer="${slideContainer}"> but no element with that id found`);
+      return undefined;
+    }
+    const rootElement = rootRef.current;
+    const read = () => {
+      const currentArea = containerElement.getAttribute("data-slide-current");
+      const towardArea = containerElement.getAttribute("data-slide-travel-toward");
+      setContainerCurrent(currentArea ?? undefined);
+      const currentIdx = currentArea === null ? -1 : indexOf(currentArea);
+      if (currentIdx === -1) {
+        // A slide no step names (a confirmation screen): the halo is not
+        // rendered, and the last position is left standing for the path.
+        return;
+      }
+      const x = dotXs[currentIdx];
+      let dx = 0;
+      if (towardArea && towardArea !== currentArea) {
+        const towardIdx = indexOf(towardArea);
+        if (towardIdx !== -1 && towardIdx !== currentIdx) {
+          // The container counts +1 when the picture leans on a slide BEFORE
+          // the current one, -1 after: the delta is signed the same way, so
+          // progress × delta lands exactly on the other dot.
+          const sign = towardIdx > currentIdx ? -1 : 1;
+          dx = (dotXs[towardIdx] - x) * sign;
+        }
+      }
+      rootElement.style.setProperty("--step-list-pos-x", x);
+      rootElement.style.setProperty("--step-list-pos-dx", dx);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(containerElement, {
+      attributes: true,
+      attributeFilter: ["data-slide-current", "data-slide-travel-toward"]
+    });
+    return () => {
+      observer.disconnect();
+    };
+    // width: the dots move when the room does, and the written positions are
+    // pixels of those dots.
+  }, [slideContainer, width, stepCount]);
+  const resolvedCurrent = slideContainer ? containerCurrent : current;
+  const currentIndex = resolvedCurrent === undefined ? -1 : indexOf(resolvedCurrent);
   const reachedIndex = reached === undefined ? -1 : indexOf(reached);
+  let reachableIndex = reachable === undefined ? -1 : indexOf(reachable);
+  if (reachableIndex < reachedIndex) {
+    reachableIndex = reachedIndex;
+  }
   // Covers the reached dot entirely (radius plus stroke), and nothing when
   // the path has not started.
   const fillX = reachedIndex === -1 ? 0 : dotXs[reachedIndex] + DOT_R + 3;
@@ -75484,7 +75668,7 @@ const StepList = ({
   const slotWidth = dotXs.length > 1 ? dotXs[1] - dotXs[0] : width;
   const renderRail = filled => jsx("svg", {
     className: filled ? "navi_step_list_rail navi_step_list_rail_filled" : "navi_step_list_rail",
-    style: filled ? {
+    style: filled && !slideContainer ? {
       clipPath: `inset(0 ${width - fillX}px 0 0)`
     } : undefined,
     width: width,
@@ -75492,6 +75676,9 @@ const StepList = ({
     viewBox: `0 0 ${width} ${RAIL_H}`,
     "aria-hidden": "true",
     children: dotXs.map((x, index) => jsxs("g", {
+      // Base layer only: a current dot the path covers keeps the filled
+      // colors (see the css).
+      "data-current": !filled && index === currentIndex ? "" : undefined,
       children: [index > 0 ? jsx("line", {
         x1: dotXs[index - 1] + DOT_R + LINE_GAP,
         y1: cy,
@@ -75514,7 +75701,21 @@ const StepList = ({
     ...rest,
     ref: rootRef,
     baseClassName: "navi_step_list",
-    "data-step-list": "",
+    "data-step-list": ""
+    // A follower of the container: the travel's progress is painted here
+    // for the CSS to draw with, and the arrow keys keep walking the slides
+    // from this element.
+    ,
+
+    "data-slide-container-follows": slideContainer,
+    style: {
+      ...rest.style,
+      ...(slideContainer ? {
+        "--step-list-w": width,
+        "--step-list-reached-x": reachedIndex === -1 ? -9999 : dotXs[reachedIndex],
+        "--step-list-reachable-x": reachableIndex === -1 ? -9999 : dotXs[reachableIndex]
+      } : undefined)
+    },
     children: width > 0 && stepCount > 0 ? jsxs(Fragment$1, {
       children: [renderRail(false), renderRail(true), currentIndex !== -1 && dotXs[currentIndex] !== undefined ? jsx("svg", {
         className: "navi_step_list_rail",
@@ -75523,8 +75724,12 @@ const StepList = ({
         viewBox: `0 0 ${width} ${RAIL_H}`,
         "aria-hidden": "true",
         children: jsx("g", {
-          className: "navi_step_list_marker",
-          style: {
+          className: "navi_step_list_marker"
+          // Connected to slides, the position comes from the CSS calc
+          // above — an inline transform would override it.
+          ,
+
+          style: slideContainer ? undefined : {
             transform: `translateX(${dotXs[currentIndex]}px)`
           },
           children: jsx("circle", {
@@ -75559,14 +75764,23 @@ const StepList = ({
           },
           children: jsx(Button, {
             ...itemRest,
-            variant: "discrete",
+            // bare, not discrete: what is drawn IS the dot and its
+            // label — the hover wash a discrete button paints over its
+            // whole surface is exactly what must not appear here (the
+            // feedback is the circle over the dot, see the css).
+            variant: "bare",
             className: "navi_step_list_step",
             "aria-current": index === currentIndex ? "step" : undefined,
             "data-current": index === currentIndex ? "" : undefined,
-            readOnly: !onStepPress,
-            onClick: onStepPress ? e => {
-              onStepPress(value, e);
-            } : undefined,
+            readOnly: !travelByClick
+            // Towards the slides when connected, by name: the command
+            // reaches the container wherever this list sits on the
+            // page. What else a press should do is the Item's own
+            // onClick, which arrived through itemRest.
+            ,
+
+            command: slideContainer && travelByClick ? `--navi-go-to-slide:${value}` : undefined,
+            commandFor: slideContainer,
             children: jsx("span", {
               className: "navi_step_list_label",
               children: stepVNode