@jsenv/navi 0.29.477 → 0.29.479

package/dist/jsenv_navi.js

@@ -3,12 +3,12 @@
  * using @jsenv/navi as intended.
  */
 import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
-import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, overflowGoesToViewport, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
+import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, isPressDisputedByDrag, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, overflowGoesToViewport, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useState, useMemo, useRef, useReducer, useEffect, useCallback, useId } from "preact/hooks";
-import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
+import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatMinuteDuration, formatTime, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { CHAR_CLASS_PRESETS, createValidity, durationContainsNaN, compareTwoDurations, TYPE_RULE, durationToSeconds, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, parseDuration, durationToISOString } from "@jsenv/validity";
@@ -3873,6 +3873,11 @@ const createAction = (callback, rootOptions = {}) => {
      *   asks nothing.
      */
     const bindParams = (newParamsOrSignal, options = {}) => {
+      if (newParamsOrSignal === null) {
+        // A signal's `null` becomes `undefined` in mergeActionParams; a static
+        // one never goes through it, so it is said the same way here.
+        newParamsOrSignal = undefined;
+      }
       const { debounce, ...optionsWithoutDebounce } = options;
       if (debounce) {
         if (!isSignal(newParamsOrSignal)) {
@@ -4460,7 +4465,9 @@ const createActionProxyFromSignal = (
   const inheritsAnswer =
     inheritData && getActionPrivateProperties(action).inheritData;
   const createTarget = (params) => {
-    if (inheritsAnswer) {
+    // `undefined` is "nothing to ask": no answer is coming to replace a stand-in,
+    // and that one instance is shared by every binding of the action.
+    if (inheritsAnswer && params !== undefined) {
       const previousActionTarget = actionTargetPreviousWeakRef?.deref();
       const previousTarget = previousActionTarget || action;
       return action.bindParams(params, {
@@ -6274,9 +6281,11 @@ const CONTROL_ATTRIBUTE_SET = new Set([
   "spellcheck",
   "autoCorrect",
   "aria-controls",
-  // The name goes where the role is: the root box has none, so an aria-label
-  // left on it names nothing at all, while the host is what the user focuses
-  // and what a screen reader announces (and what getByRole({ name }) reads).
+  // The name goes where the role is: for most controls the root box has none,
+  // so an aria-label left on it names nothing at all, while the host is what
+  // the user focuses and what a screen reader announces (and what
+  // getByRole({ name }) reads). A control whose role is on its root says so
+  // with `nameOn: "root"` (see useControlProps).
   "aria-label",
   "aria-labelledby",
   "tabIndex",
@@ -6803,7 +6812,7 @@ const useDebugUIState = useDebugNoop;
  * @param {boolean|Function} [props.debugPopup] - Popover/dialog open/close/positioning.
  * @param {boolean|Function} [props.debugAction] - Action lifecycle.
  * @param {boolean|Function} [props.debugUIState] - UI-state transitions and validation.
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  *
  * @example
  * // Log everything under this subtree
@@ -7020,9 +7029,11 @@ const generateSignalId = () => {
  * @param {Array} [options.oneOf] - Array of valid values for validation. Signal will be marked invalid if value is not in this array
  * @param {boolean} [options.autoFix=false] - Hold the repaired value instead of the refused one: a number
  *   clamped to `min`/`max` and rounded to `step`, a value outside `oneOf` replaced by the signal's
- *   default value (an enumeration has no nearest value, and its order says nothing). Without it the
- *   refused value is held as-is, marked invalid, and `validSignal` reads `undefined`. When the value
- *   came from the address, the address is rewritten with the repaired one (a replace).
+ *   default value, or made absent when the signal has no default (an enumeration has no nearest
+ *   value, and its order says nothing). The default must therefore pass the rules itself: one of
+ *   `oneOf`. Without it the refused value is held as-is, marked invalid, and `validSignal` reads
+ *   `undefined`. When the value came from the address, the address is rewritten with the repaired
+ *   one (a replace).
  * @param {boolean} [options.weak=false] - The param qualifies one visit, not the screen: it is written into a
  *   url only when explicitly named (`routeParams={{ edit: id }}`), never inherited from the signal's current
  *   value, and it goes back to the default value when the route stops matching. Use it for params like an
@@ -7164,7 +7175,7 @@ const stateSignal = (defaultValue, options = {}) => {
 
   // Determine localStorage key: use id if persists=true, or legacy localStorage option
   const localStorageKey = signalIdString;
-  const [validity, updateValidity] = createValidity({
+  const [validity, updateValidity, clearValidity] = createValidity({
     type,
     min,
     max,
@@ -7280,9 +7291,19 @@ const stateSignal = (defaultValue, options = {}) => {
   // Create signal with initial value: use stored value, or undefined to indicate no explicit value
   const processValue = (value) => {
     if (value === undefined) {
+      // Absence is never validated, and the verdict on the previous value
+      // (validSignal, validity.valid) must not outlive it.
+      clearValidity();
       return undefined;
     }
     updateValidity(value);
+    // A state without a default is repaired to absent. validity cannot suggest
+    // it: `undefined` is "no suggestion" there and its rules refuse it.
+    if (autoFix && !validity.valid && getDefaultValue(false) === undefined) {
+      clearValidity();
+      validity.autoFixed = true;
+      return undefined;
+    }
     // Always return the coerced value (type coercion applies), even if invalid.
     // Invalid values are preserved as-is so the UI can display them and the URL
     // can reflect the current input state without silently correcting it.
@@ -7573,6 +7594,18 @@ const readSignalForUrlBuild = (connection) => {
   return connection.signal.value;
 };
 
+/**
+ * Whether a pattern catches the addresses below its own: "/map/", "/map/*" and
+ * the root "/" do, "/places" does not. Only such a route lends its search
+ * params to the routes below it: it is on screen wherever they are, so its
+ * state holds there too. Declared on "/places", a search param belongs to
+ * that address alone — "/places/:section" beside it also matches
+ * "/places/clubs", and borrowing the list's search would hand it to the clubs.
+ */
+const coversAddressesBelow = (patternObj) => {
+  return patternObj.pattern.trailingSlash || patternObj.pattern.wildcard;
+};
+
 /**
  * Creates a custom route pattern matcher
  */
@@ -7684,11 +7717,13 @@ const createRoutePattern = (
       }
     }
 
-    // Inherit search parameters from ancestry chain
-    // Search params are global and should be inherited from any matching ancestor
-    // regardless of path segment relationships
+    // Search params lent by the ancestors covering this route
     let ancestorPatternObj = patternObject.parent;
     while (ancestorPatternObj) {
+      if (!coversAddressesBelow(ancestorPatternObj)) {
+        ancestorPatternObj = ancestorPatternObj.parent;
+        continue;
+      }
       for (const [
         paramName,
         ancestorConnection,
@@ -7773,7 +7808,12 @@ const createRoutePattern = (
           childParam,
           childConnection,
         ] of childPatternObj.queryConnectionMap) {
-          if (childParam in resolvedParams) {
+          // a name this route declares is its own state's, whatever a child
+          // declares under the same name
+          if (
+            childParam in resolvedParams ||
+            queryConnectionMap.has(childParam)
+          ) {
             continue;
           }
           const childSignalValue = readSignalForUrlBuild(childConnection);
@@ -7819,7 +7859,9 @@ const createRoutePattern = (
    * - own connection signals (path + query, inherited query included)
    * - ancestor path params pinned by this pattern's own literals: being on
    *   "/admin/settings" MEANS section=settings, whatever the signal says
-   * - ancestor query signals holding custom values
+   * - custom values of the search params lent by the ancestors covering this
+   *   route (coversAddressesBelow). Another ancestor's search params ride
+   *   only on that ancestor's own url (see buildMostPreciseUrl)
    * - reachable descendants' connection signals. A descendant is reachable
    *   when its literals agree with the state collected so far (a tab value
    *   is unreachable while section conflicts with the tab route's literals)
@@ -7945,6 +7987,10 @@ const createRoutePattern = (
           setEntry(seg.name, selfSeg.value, conn, seg.index, "ancestor", false);
         }
       }
+      if (!coversAddressesBelow(ancestor)) {
+        ancestor = ancestor.parent;
+        continue;
+      }
       for (const [name, conn] of ancestor.queryConnectionMap) {
         if (intended.has(name)) {
           continue;
@@ -8091,6 +8137,10 @@ const createRoutePattern = (
           if (!queryReachable || value === undefined) {
             continue;
           }
+          // a name this route declares is its own state's (see resolveParams)
+          if (queryConnectionMap.has(paramName)) {
+            continue;
+          }
           if (conn.isCustomValue(value)) {
             setEntry(paramName, value, conn, undefined, "descendant", false);
           }
@@ -8350,20 +8400,50 @@ const createRoutePattern = (
     );
   };
 
+  // An ancestor's url is that ancestor's address: it carries the search params
+  // declared there, including those it lends to nobody (coversAddressesBelow).
+  // Each ancestor climbed past adds its own, so a higher one must keep them too.
+  const withOwnSearchParams = (ancestorPattern, intended) => {
+    let intendedWithOwn = intended;
+    for (const [name, conn] of ancestorPattern.queryConnectionMap) {
+      if (intendedWithOwn.has(name)) {
+        continue;
+      }
+      const value = readSignalForUrlBuild(conn);
+      if (value === undefined || !conn.isCustomValue(value)) {
+        continue;
+      }
+      if (intendedWithOwn === intended) {
+        intendedWithOwn = new Map(intended);
+      }
+      intendedWithOwn.set(name, {
+        value,
+        connection: conn,
+        segmentIndex: undefined,
+        owner: "ancestor",
+        explicit: false,
+        pageNaming: false,
+      });
+    }
+    return intendedWithOwn;
+  };
+
   const buildMostPreciseUrl = (params = {}) => {
     const { intended, reachableDescendants } = buildIntendedState(params);
     // ancestors: start at the immediate parent, climb while urls keep round-
     // tripping, keep the highest one ("/" is never a target)
     let ancestorUrl = null;
     let ancestor = patternObject.parent;
+    let ancestorIntended = intended;
     while (ancestor && ancestor.originalPattern !== "/") {
       if (!isAncestorCollapseAllowed(ancestor, intended)) {
         break;
       }
-      const url = buildCandidateUrl(ancestor, intended, {
+      ancestorIntended = withOwnSearchParams(ancestor, ancestorIntended);
+      const url = buildCandidateUrl(ancestor, ancestorIntended, {
         dropMissing: true,
       });
-      if (!url || !verifyUrl(url, intended)) {
+      if (!url || !verifyUrl(url, ancestorIntended)) {
         break;
       }
       debug$3(
@@ -9527,11 +9607,15 @@ const setupRoutePatterns = (routePatterns) => {
     }
     routePattern.familyRoot = root;
   }
-  // Phase 3: Inherit search parameter connections from ancestors
-  // Search params are global and should be inherited by descendants regardless of path segments
+  // Phase 3: Inherit the search param connections of the ancestors covering
+  // the addresses below them (see coversAddressesBelow)
   for (const routePattern of routePatternSet) {
     let ancestorRoutePattern = routePattern.parent;
     while (ancestorRoutePattern) {
+      if (!coversAddressesBelow(ancestorRoutePattern)) {
+        ancestorRoutePattern = ancestorRoutePattern.parent;
+        continue;
+      }
       // For each ancestor's query connection, check if it should be inherited
       for (const [
         paramName,
@@ -9641,23 +9725,6 @@ const setupRoutePatterns = (routePatterns) => {
         continue;
       }
       const { index } = paramSegment;
-      const sharesPathUpTo = (otherSegments) => {
-        for (let i = 0; i < index; i++) {
-          const seg = routePattern.pattern.segments[i];
-          const otherSeg = otherSegments[i];
-          if (!otherSeg) {
-            return false;
-          }
-          if (seg.type === "literal" && otherSeg.type === "literal") {
-            if (seg.value !== otherSeg.value) {
-              return false;
-            }
-          } else if (seg.type !== otherSeg.type) {
-            return false;
-          }
-        }
-        return true;
-      };
       for (const otherPattern of routePatternSet) {
         if (otherPattern === routePattern) {
           continue;
@@ -9667,7 +9734,9 @@ const setupRoutePatterns = (routePatterns) => {
         if (!otherSegment || otherSegment.type !== "literal") {
           continue;
         }
-        if (!sharesPathUpTo(otherSegments)) {
+        if (
+          !sharesPathUpTo(routePattern.pattern.segments, otherSegments, index)
+        ) {
           continue;
         }
         connection.namedByLiteralRoutes = true;
@@ -9675,11 +9744,90 @@ const setupRoutePatterns = (routePatterns) => {
       }
     }
   }
+  // Phase 4c: A default with an address of its own. "/me/:section" defaulting
+  // to "players", beside "/me/players" and "/me": the default section has a
+  // segment, and the bare address is another page. The param is then required,
+  // and the address writes every value, the default included. Both routes must
+  // be declared: with none at the bare address, that address is the default's
+  // ("/admin" opens on "/admin/settings/:tab"); with no literal for the default,
+  // the bare address IS the default section ("/games/me").
+  // The state keeps its default (getDefaultValue): what the signal holds while
+  // another page of the family says nothing about it (see route.js).
+  for (const routePattern of routePatternSet) {
+    const { segments } = routePattern.pattern;
+    for (const connection of routePattern.pathConnectionMap.values()) {
+      const defaultValue = connection.getDefaultValue();
+      if (defaultValue === undefined) {
+        continue;
+      }
+      const paramSegment = segments.find(
+        (seg) => seg.type === "param" && seg.name === connection.paramName,
+      );
+      if (!paramSegment) {
+        continue;
+      }
+      const { index } = paramSegment;
+      let defaultHasLiteral = false;
+      let bareAddressTaken = false;
+      for (const otherPattern of routePatternSet) {
+        if (otherPattern === routePattern) {
+          continue;
+        }
+        const otherSegments = otherPattern.pattern.segments;
+        if (!sharesPathUpTo(segments, otherSegments, index)) {
+          continue;
+        }
+        const otherSegment = otherSegments[index];
+        if (otherSegment) {
+          if (
+            otherSegment.type === "literal" &&
+            otherSegment.value === String(defaultValue)
+          ) {
+            defaultHasLiteral = true;
+          }
+          continue;
+        }
+        // a route covering the addresses below it is a frame around the
+        // sections, not a page standing at the bare address
+        if (!coversAddressesBelow(otherPattern)) {
+          bareAddressTaken = true;
+        }
+      }
+      if (!defaultHasLiteral || !bareAddressTaken) {
+        continue;
+      }
+      paramSegment.optional = false;
+      // Both answer for the address: the url build, the signal -> url sync,
+      // and checkIfLiteralCanBeOptionalWithPatternObj ("/me" does not stand for
+      // "/me/players" either)
+      connection.isDefaultValue = (value) => value === undefined;
+      connection.isCustomValue = (value) => value !== undefined;
+    }
+  }
   // Phase 5: Calculate depths for all patterns
   for (const routePattern of routePatternSet) {
     calculatePatternDepth(routePattern);
   }
 };
+// Whether two patterns spell the same path before `index`: the same literals,
+// and a param wherever the other has one
+const sharesPathUpTo = (segments, otherSegments, index) => {
+  for (let i = 0; i < index; i++) {
+    const seg = segments[i];
+    const otherSeg = otherSegments[i];
+    if (!otherSeg) {
+      return false;
+    }
+    if (seg.type === "literal" && otherSeg.type === "literal") {
+      if (seg.value !== otherSeg.value) {
+        return false;
+      }
+    } else if (seg.type !== otherSeg.type) {
+      return false;
+    }
+  }
+  return true;
+};
 // Store the most specific parent (closest parent in hierarchy)
 const getPathSegmentCount = (pattern) => {
   // Only count path segments, not query parameters
@@ -9741,6 +9889,9 @@ let isUpdatingRoutesFromUrl = false;
  *   are the same state: writing the signal rewrites the address, an address
  *   arriving from outside writes the signal, and the param disappears from the
  *   url while the signal holds its default.
+ *   They exist on this route's address only, unless the pattern catches the
+ *   addresses below it (`/map/`, `/map/*`, the root): then they hold on every
+ *   route below as well. `/places` does not lend its `?q=` to `/places/clubs`.
  *   `{ signal, default }` says what that state is worth ON THIS ROUTE: the same
  *   step opens a creation wizard on its first question and an edition one on
  *   its summary, each address staying clean on the step its page opens on. One
@@ -9759,7 +9910,9 @@ let isUpdatingRoutesFromUrl = false;
  *   whose param declines the segment does not match at all: no signal is
  *   written, `<Route fallback>` is reachable, and `/:gameId` can sit at the root
  *   without swallowing `/cgu`. A constrained param is also required — no segment
- *   is not one of the values it accepts — so `/:gameId` does not match `/`.
+ *   is not one of the values it accepts — so `/:gameId` does not match `/`,
+ *   unless its default stands for the bare address (see docs/navigation.md,
+ *   "Declaring the sections is what makes them places").
  *
  *   Constrain the shape, not the existence: whether that game exists is for the
  *   route action and the page to answer, on a route that did match.
@@ -10942,14 +11095,17 @@ const urlWithoutSearchAndHash = (url) => {
  *
  * - `isShown()` — whether the container would still show the page. False as
  *   soon as the address leads elsewhere: the page is about to be taken down, or
- *   hidden until the route transition leaving it is over, and nothing it reads
- *   is worth a render any more. False for good once it is kept while leaving: a
- *   return to its route mounts the page anew. Asked outside any render — by a
- *   subscription deciding whether to re-render — and it reads the routes
+ *   hidden until the route transition leaving it is over, nothing it reads is
+ *   worth a render any more, and nothing it holds speaks for the page shown (a
+ *   list's hold on the document, see holdDocumentScroll). False for good once
+ *   it is kept while leaving: a return to its route mounts the page anew. Asked
+ *   outside any render — by a subscription deciding whether to re-render, by
+ *   the scroll restoration when a position is due — and it reads the routes
  *   untracked, so asking subscribes nobody to them.
  * - `leavingSignal` — true once the page is hidden and kept while its movement
- *   plays: still mounted, so what it fills outside its own nodes (a slot in a
- *   bar) steps out rather than showing with the page arriving.
+ *   plays: still mounted, so what it fills or moves outside its own nodes (a
+ *   slot in a bar, the document a list scrolls) steps out rather than showing
+ *   with, or moving, the page arriving. Every box of it measures 0×0 by then.
  */
 const RoutePageContext = createContext(null);
 
@@ -11872,7 +12028,7 @@ const putBack = (restoration) => {
     // The page is not whole yet: the last release puts it back.
     return;
   }
-  if (documentHoldCount) {
+  if (isDocumentHeld()) {
     pendingRestoration = null;
     return;
   }
@@ -11888,20 +12044,33 @@ const putBack = (restoration) => {
 // height, so the same pixels now fall on other rows. Put back after the list
 // has placed itself, they would undo it, in the very picture a route transition
 // takes. So the list holds the document while it is placing itself, and the
-// url's offset is not put back meanwhile. Counted: two lists can share one
-// document.
-let documentHoldCount = 0;
-const holdDocumentScroll = () => {
-  documentHoldCount++;
-  let released = false;
+// url's offset is not put back meanwhile. One hold per list: two lists can
+// share one document.
+//
+// A hold is for the page its list is on, and mounted is not shown: a page kept
+// while its route transition plays still has its list when the page returned to
+// renders, and that list says nothing about where the page arriving goes. So a
+// hold is taken with the list's page (RoutePageContext), asked whether it is
+// shown when a position is due — `null` outside any route container: that list
+// is on whatever page is shown. Not a url: which page an address shows is the
+// routes' to say, and one page can be shown under several (its params moving
+// under it).
+const documentHolds = new Set();
+const holdDocumentScroll = (routePage) => {
+  const hold = { routePage };
+  documentHolds.add(hold);
   return () => {
-    if (released) {
-      return;
-    }
-    released = true;
-    documentHoldCount--;
+    documentHolds.delete(hold);
   };
 };
+const isDocumentHeld = () => {
+  for (const { routePage } of documentHolds) {
+    if (routePage === null || routePage.isShown()) {
+      return true;
+    }
+  }
+  return false;
+};
 
 // What a page holds instead: not the place, which stays the url's, but the
 // moment it is put back (see useHoldScrollRestoration). Counted: several parts
@@ -12159,9 +12328,9 @@ const restoreScrollPosition = (url) => {
   if (!position) {
     return false;
   }
-  if (documentHoldCount) {
-    // There is a place to go back to, and the list holding the document is
-    // putting it back (see holdDocumentScroll).
+  if (isDocumentHeld()) {
+    // There is a place to go back to, and the list holding the document on
+    // that page is putting it back (see holdDocumentScroll).
     return true;
   }
   scrollTo(position);
@@ -12430,6 +12599,25 @@ const getHrefTargetInfo = (
   };
 };
 
+// The target of a link whose caller names none: a page of another site opens
+// in a new tab. Only a page: a `tel:`, `mailto:` or `sms:` address is handed to
+// another app, a `blob:` or `data:` one is this page's own, and a tab opened
+// for them would be left behind empty.
+const getDefaultHrefTarget = (
+  href,
+  currentUrlString = window.location.href,
+) => {
+  const { isEmpty, isSameSite } = getHrefTargetInfo(href, currentUrlString);
+  if (isEmpty || isSameSite) {
+    return undefined;
+  }
+  const { protocol } = new URL(href, currentUrlString);
+  if (protocol !== "http:" && protocol !== "https:") {
+    return undefined;
+  }
+  return "_blank";
+};
+
 // A field of getHrefTargetInfo that depends on the page one is on (isCurrent,
 // isAnchor), read through a computed of that one boolean: the caller re-renders
 // when it flips, not at every address write — a search param bound to a wheel
@@ -12470,6 +12658,27 @@ const linkAsksForDocument = (linkElement) => {
   return linkElement.hasAttribute(LINK_DOCUMENT_ATTRIBUTE);
 };
 
+/*
+ * A link does not always move the tab it is in. A `target` naming another
+ * browsing context (a new tab, a named window) loads the address there, in a
+ * document of its own; a `download` saves it. The browser answers both
+ * without touching this page, and that is the point of writing them: reading
+ * the terms beside a half-filled form costs nothing. Routing such a link
+ * would take this tab instead, and give no tab and no file.
+ *
+ * `_parent` and `_top` count as elsewhere too. Inside a frame they are; at the
+ * top level the browser treats them as `_self` and loads a document, which
+ * costs a load and nothing else.
+ */
+
+const linkOpensElsewhere = (linkElement) => {
+  const target = linkElement.getAttribute("target");
+  if (target && target !== "_self") {
+    return true;
+  }
+  return linkElement.hasAttribute("download");
+};
+
 /*
  * A press aims at a place; it does not always go one step deeper. A row of tabs
  * is a lateral move — the neighbour is one finger away — so the whole row should
@@ -12799,8 +13008,10 @@ const setupBrowserIntegrationViaHistory = ({
       // Ignore non-left clicks
       return;
     }
-    if (e.metaKey) {
-      // Ignore clicks with meta key (e.g. open in new tab)
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      // A modifier asks the browser for something other than this tab: a new
+      // tab (meta on macOS, ctrl elsewhere), a new window (shift), a download
+      // (alt).
       return;
     }
     if (e.defaultPrevented) {
@@ -12811,6 +13022,10 @@ const setupBrowserIntegrationViaHistory = ({
     if (linkElement.hasAttribute("data-readonly")) {
       return;
     }
+    if (linkOpensElsewhere(linkElement)) {
+      // Another tab or window, or a download (see link_elsewhere.js).
+      return;
+    }
     const href = linkElement.href;
     const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
       getHrefTargetInfo(href);
@@ -16912,6 +17127,9 @@ const surfaceTextCss = /* css */ `
   }
 `;
 
+// What a callout's own JSX may know about the callout around it: how to close
+// it, and the element — whose id is what `commandFor` needs when the button
+// closing it is not inside it (inside, `--navi-close` finds it on its own).
 const CalloutContext = createContext();
 const useCalloutRequestClose = () => {
   return useContext(CalloutContext)?.requestClose;
@@ -17045,7 +17263,7 @@ const CALLOUT_STATUS_GLYPH_VIEWBOX = "0 0 540 540";
 const CALLOUT_STATUS_GLYPH_PATH = "m232.5,121 8,196h59l8-196zm36.5,224a37,37 0 1,0 2,0z";
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   status?: "info" | "warning" | "error" | "success" | "none",
  *   shape?: "square" | "circle",
  * }>}
@@ -21864,23 +22082,12 @@ defineInteractionDetector({
       // A link and an image are draggable without anyone asking, and a native
       // drag IS press-and-move: the browser claims the gesture, takes the pointer
       // events with it and paints a ghost of the row the hand is trying to swipe.
-      // Two things are needed, and neither covers the other:
-      // - `draggable` refuses it on the element itself, before it starts;
-      // - a swipe is usually a row with a link or a thumbnail INSIDE it, and
-      //   those are draggable in their own right. `dragstart` bubbles, so
-      //   refusing it here refuses theirs too — and it is the only refusal every
-      //   browser honours (`-webkit-user-drag` is one engine's).
-      // The cost is stated rather than worked around: an element that takes a
-      // swipe cannot also be dragged out of the page, because there is one
-      // gesture and it cannot mean both.
+      // `draggable` refuses it on the element itself, before it starts; the drag
+      // of a link or a thumbnail INSIDE it is refused by the travel reading the
+      // press (startDragToTravel). The cost is stated rather than worked around:
+      // an element that takes a swipe cannot also be dragged out of the page,
+      // because there is one gesture and it cannot mean both.
       mark("draggable", "false");
-      const onDragStart = (dragStartEvent) => {
-        dragStartEvent.preventDefault();
-      };
-      element.addEventListener("dragstart", onDragStart);
-      undo.push(() => {
-        element.removeEventListener("dragstart", onDragStart);
-      });
 
       // A touch this element may take has to be refusable before the finger
       // lands, or the browser can cancel an established swipe mid-gesture by
@@ -22915,9 +23122,10 @@ const isMac = detectMac();
  * place rather than about this box.
  *
  * `data-pan-after-hold="kept"` asks for that wait once rather than before every
- * pan: the surface given the hand keeps it — panning on contact, like the same
- * plan opened full screen — and asks again after a press has landed away from
- * it, which is the hand saying it has moved on. What answers "away" is the same
+ * pan: the surface a finger has given the hand keeps it — panning on contact,
+ * like the same plan opened full screen — and asks again after a press has
+ * landed away from it, which is the hand saying it has moved on. A mouse never
+ * owed the wait, so it neither spends it nor marks it. What answers "away" is the same
  * thing that closes a popup, and the surface is the one that watches for it, so
  * an application never keeps a `pointerdown` listener on the window to know.
  * `[data-hand-kept]` is on the element for as long as it holds the hand that
@@ -24039,7 +24247,8 @@ const isSameKey = (browserEventKey, key) => {
  * and that field is the control the declaration speaks for: an ArrowUp declared
  * on a text field is the field saying what ArrowUp does there, not a container
  * taking the caret from a field inside it. A field inside a box that declares
- * keys for something else (a row, a list) keeps every key it has a use for.
+ * keys for something else (a row, a list) keeps every key it has a use for,
+ * even when it is the only control in that box.
  *
  * A declared key that matches takes the key: its default does not happen as
  * well, whether the gate lets the interaction through or refuses it and says
@@ -24065,7 +24274,10 @@ defineInteractionDetector({
       };
     }
     const onKeyDown = createOnKeyDownForShortcuts(shortcuts, {
-      ownsTarget: (target) => target === findNearestControlHost(element),
+      // Only the control's own root speaks for its host: a box that wraps a
+      // single control is reached by that control's gate, not handed its keys.
+      ownsTarget: (target) =>
+        isControlRoot(element) && target === findNearestControlHost(element),
     });
     element.addEventListener("keydown", onKeyDown);
     return () => {
@@ -28133,6 +28345,127 @@ const useForceRender = () => {
 
 // https://github.com/preactjs/preact/issues/4756
 
+/**
+ * Reads the current state of an action and returns `[data, loading, error, dismissError]`.
+ *
+ * By default (`loading` and `error` not set) the component suspends on load
+ * and throws on failure, delegating both states to the nearest `<Loading>` and
+ * `<ErrorBoundary>` ancestors. Pass `loading: true` or `error: true` to handle
+ * either state directly inside the component instead.
+ *
+ * Return value: `[data, loading, error, dismissError]`
+ * - `data`    — the action's last successful data, or `undefined` if it has never completed
+ * - `loading` — `true` while the action is running (only when `loading: true` is passed)
+ * - `error`   — the Error thrown by the action (only when `error: true` is passed)
+ * - `dismissError` — takes that error out of what this hook returns, nothing else (only when `error: true` is passed)
+ *
+ * Stale data is always returned: the previous `data` remains available while
+ * the action re-runs and after a run has failed, so a screen that had something
+ * to show never has it taken away. What is drawn over it — a loading indicator,
+ * the error, nothing — is entirely up to the component.
+ *
+ * `loading` covers the delay of a debounced binding
+ * (`bindParams(paramsSignal, { debounce })`, `actionRunEffect({ debounce })`)
+ * as well as the run itself: from the moment the params move, what is on screen
+ * is the previous answer, and a screen showing "searching…" while someone types
+ * needs to know it. Suspending has nothing to wait on during that delay, so
+ * only `loading: true` reads it — the default keeps showing the previous answer
+ * until the run really starts.
+ *
+ * When `loading` is not set (default), the component suspends until data is
+ * ready, so `data` is always defined when the component renders and `loading`
+ * is always `false`. With `loading: true` the component never suspends: every
+ * state — running, settling, params nobody has started yet, a failure whose
+ * message was dismissed — comes back as a value, so the subtree it draws is
+ * never swapped for the boundary above and remounted.
+ *
+ * When `error` is not set (default), any action failure causes the component
+ * to throw, so `error` is always `undefined` when the component renders. With
+ * `error: true` the failure arrives beside the data the action already had — a
+ * message on the content, not one in place of it. `dismissError()` removes the
+ * message and nothing else: nothing is asked again, and what comes back is the
+ * same state minus the error — the same data, or none at all when nothing ever
+ * came back.
+ *
+ * `data === undefined` says there is nothing to show and `loading` says whether
+ * anything is on its way: a skeleton reads both, or it claims a load nobody
+ * started (see docs/data_states.md).
+ *
+ * @param {object | (() => Promise<any>) | Promise<any>} promiseOrAction -
+ *   an action, or the request this component owns written as a function:
+ *   made into an action once, on the first render, and kept for the life of
+ *   the instance — so it may be written inline — with what it resolves to as
+ *   the data and `run` implied. Code loaded on demand reads this way
+ *   (`() => import("./plan.jsx").then((m) => m.Plan)`, see
+ *   docs/dynamic_import.md), as does anything else asked for once per mount.
+ * @param {{ loading?: true, error?: true, run?: true, prerun?: true, onLoad?: (data: any, context: {params: any}) => void }} [options]
+ * @param {true} [options.run] - The fallback for data nothing else can ask for:
+ *   this component owns the request and starts it, from the render that reads
+ *   it. `loading` and `error` keep their meaning — delegated by default,
+ *   handled inline when asked for — so a run started here suspends into
+ *   `<Loading>` like any other.
+ *
+ *   A failure is shown, not asked again: a render that retried it would retry
+ *   it in a loop while the network is down — that is `rerun()`'s job. Except a
+ *   failure a prerun left (a `prerun: true` head start, a press that preran
+ *   it): nothing on screen asked for that run, so this asks again, once.
+ *
+ *   Prefer a `routeAction` wherever the parameter is one the address holds (a
+ *   path param, a search param bound to a `stateSignal`), popup included: it is
+ *   asked for when the address changes, with everything else that address
+ *   needs, whereas this one cannot start before the component that draws it
+ *   exists — one render late, and behind whatever gesture mounted it. What is
+ *   left for `run` is the parameter chosen inside the component and dying with
+ *   it — and any run that WRITES, whatever its parameter: an address asks again
+ *   on every arrival, which is right for a read and wrong for a write (see
+ *   docs/actions.md and docs/popup_open.md).
+ * @param {true} [options.prerun] - A head start: this component starts a
+ *   read that another one, mounted later, owns with `run: true` — the read
+ *   leaves as soon as its params are known instead of once the owner exists.
+ *   Started from the render like `run`, as a prerun: it draws none of it, so
+ *   nothing suspends (no `<Loading>` needed) and a failure is neither thrown
+ *   nor reported — the owner asks again. A head start still running when the
+ *   owner reads it is the owner's wait.
+ * @param {(data: any, context: {params: any}) => void} [options.onLoad] - what
+ *   this screen does with the data ONCE, when it becomes known: seed the fields
+ *   someone is about to edit, remember where a list was, focus something.
+ *
+ *   Fired once per set of params — never again for a rerun that brings the same
+ *   thing back. That is the whole point of it: a save, a refresh, a poll all
+ *   hand the data over again, and copying it a second time would overwrite what
+ *   the person is in the middle of writing. The action knows what it ran with,
+ *   so nobody has to guess the dependency.
+ *
+ *   Called from a layout effect, so what it writes belongs to the same tick as
+ *   the render that got the data — a `<Form pristineKey>` taking its reference
+ *   then sees the filled fields rather than the empty ones.
+ * @returns {[data: unknown, loading: boolean, error: Error | undefined, dismissError: (() => void) | undefined]}
+ *
+ * @example <caption>Default — delegate both states (least code)</caption>
+ * const [user] = useAsyncData(userAction);
+ * // user is always defined here — never loading, never error
+ *
+ * @example <caption>Handle loading inline while keeping stale data</caption>
+ * const [user, loading] = useAsyncData(userAction, { loading: true });
+ * // First load:   user === undefined, loading === true  → show skeleton
+ * // While refreshing: user === <stale>, loading === true → show stale + spinner
+ * // Done:         user === <fresh>,   loading === false
+ *
+ * @example <caption>Handle error inline</caption>
+ * const [user, , error] = useAsyncData(userAction, { error: true });
+ * if (error) return <ErrorCard message={error.message} />;
+ *
+ * @example <caption>Say the failure over the rows already on screen</caption>
+ * const [items, , error, dismissError] = useAsyncData(listAction, { error: true });
+ * // First failure: items === undefined  → only the message
+ * // Failed refresh: items === <stale>   → the message above the rows
+ * return (
+ *   <>
+ *     {error && <ErrorStrip error={error} onClose={dismissError} />}
+ *     {items && <List items={items} />}
+ *   </>
+ * );
+ */
 const useAsyncData = (promiseOrAction, {
   loading = "delegate",
   error = "delegate",
@@ -28575,7 +28908,7 @@ const LoadingFallback = ({
  *   ones that would render fine.
  *
  * @param {object} props
- * @param {Function|import("ignore:preact").VNode} [props.fallback] - what is displayed
+ * @param {Function|import("preact").VNode} [props.fallback] - what is displayed
  *   instead of the children: an element, or a component receiving
  *   `{ error, resetError }`. Without it the boundary is transparent.
  * @param {() => void} [props.onReset] - called when the fallback dismisses the
@@ -28934,6 +29267,12 @@ const hasWidthHeight = (context) => {
     (context.styles.height || context.remainingProps.height)
   );
 };
+// The `stretch` sizing keyword: the containing block's width minus the box's
+// own margins, so a box with a margin fills its row without leaving it (100%
+// adds the margins on top). Spelled with the prefix because an inline style
+// holds one value, and this is the one name Chromium, WebKit and Firefox all
+// read (Firefox 155 has no unprefixed `stretch`).
+const FILL_AVAILABLE_WIDTH = "-webkit-fill-available";
 const DIMENSION_PROPS = {
   boxSizing: PASS_THROUGH,
   width: PASS_THROUGH,
@@ -28986,16 +29325,16 @@ const DIMENSION_PROPS = {
       return { flexGrow: expandWeight(value), flexBasis: "0%" };
     }
     if (parentBoxFlow === "flex-y" || parentBoxFlow === "inline-flex-y") {
-      // width 100% is what fills the cross axis; align-self stretch would do
+      // A width is what fills the cross axis; align-self stretch would do
       // the same but takes the parent's alignX away — a maxWidth-capped item
       // in an alignX="center" parent would then sit at the start instead of
       // in the middle.
       return {
-        width: "100%",
+        width: FILL_AVAILABLE_WIDTH,
       };
     }
     // Can't use flexGrow — parent is not flex-x
-    return { width: "100%" };
+    return { width: FILL_AVAILABLE_WIDTH };
   },
   expandY: (value, { parentBoxFlow }) => {
     if (!value) {
@@ -29556,6 +29895,7 @@ const getVisualChildStylePropStrategy = (name) => {
 };
 
 const isStyleProp = (name) => STYLE_PROP_NAME_SET.has(name);
+const isTypoProp = (name) => TYPO_PROP_NAME_SET.has(name);
 
 const getStringifier = (key) => {
   if (SPACING_PROP_SET.has(key)) {
@@ -30197,10 +30537,10 @@ const readCSSVarName = entry => Array.isArray(entry) ? entry[0] : entry;
 const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   as?: string,
  *   className?: string,
- *   style?: import("ignore:preact").JSX.CSSProperties & { [pseudo: string]: import("ignore:preact").JSX.CSSProperties },
+ *   style?: import("preact").JSX.CSSProperties & { [pseudo: string]: import("preact").JSX.CSSProperties },
  *   styleCSSVars?: { [propName: string]: string | [string, string] },
  *   inline?: boolean,
  *   block?: boolean,
@@ -30215,7 +30555,7 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
  *   hasChildUsingForwardedProps?: boolean,
  *   childPropSet?: Set<string>,
  *   preventInitialTransition?: boolean,
- *   separator?: import("ignore:preact").ComponentChildren | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   separator?: import("preact").ComponentChildren | ((index: number) => import("preact").ComponentChildren),
  *   selfInteractions?: string,
  *   interactions?: { [type: string]: "request_action" | "request_ui_action" | "refuse" | ((event: Event) => void) | false | null | undefined },
  *   alignX?: string,
@@ -30227,7 +30567,7 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
  *   body?: boolean,
  *   sticky?: boolean,
  *   mount?: "always" | "after-paint",
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {"x"|"y"|boolean} [flex] A flex container: `"x"` (or `true`) side by
@@ -32782,7 +33122,7 @@ const debug$1 = (...args) => {
  *   matches. `routeFallback()` gives that page a name, which is what lets a
  *   movement be written about it and its `matchingSignal` be read from outside
  *   the tree (see route_fallback.js).
- * @param {Function|import("ignore:preact").VNode} [props.element] - what the branch renders
+ * @param {Function|import("preact").VNode} [props.element] - what the branch renders
  * @param {object} [props.elementProps] - props given to `element`
  *
  * A branch says what it renders, not what happens when it cannot: loading and
@@ -35131,7 +35471,7 @@ const css$13 = /* css */`@property --navi-route-transition-leave {
  * that. An application that already has an element holding its pages can mark
  * that one with `data-navi-route-transition-area` rather than nesting another.
  *
- * @type {import("ignore:preact").FunctionComponent<{ children?: any, [key: string]: any }>}
+ * @type {import("preact").FunctionComponent<{ children?: any, [key: string]: any }>}
  */
 const RouteTransitionArea = ({
   children,
@@ -35921,7 +36261,7 @@ const beginTransition = ({
       warnAboutNamesEscapingArea(areaElement, capturedNames);
       return;
     }
-    for (const name of capturedNames) {
+    for (const name of capturedNames.keys()) {
       if (name === "root") {
         continue;
       }
@@ -36124,9 +36464,10 @@ const ignoreSkipped$1 = () => {};
 
 // The names the browser captured, read off the pictures themselves: what was
 // asked for in CSS and what was taken are not the same question (see
-// viewTransitionReady).
+// viewTransitionReady). Each with the states it was taken in: a name taken in
+// only one of them pairs with nothing.
 const capturedViewTransitionNames = () => {
-  const names = new Set();
+  const names = new Map();
   for (const animation of document.getAnimations()) {
     const pseudoElement = animation.effect?.pseudoElement;
     if (!pseudoElement || !pseudoElement.startsWith("::view-transition")) {
@@ -36136,43 +36477,59 @@ const capturedViewTransitionNames = () => {
     if (nameStart === -1) {
       continue;
     }
-    names.add(pseudoElement.slice(nameStart + 1, -1));
+    const name = pseudoElement.slice(nameStart + 1, -1);
+    let states = names.get(name);
+    if (!states) {
+      states = {
+        old: false,
+        new: false
+      };
+      names.set(name, states);
+    }
+    if (pseudoElement.startsWith("::view-transition-old(")) {
+      states.old = true;
+    } else if (pseudoElement.startsWith("::view-transition-new(")) {
+      states.new = true;
+    }
   }
   return names;
 };
 
-// Nested groups keep a name written inside the area inside its picture (see
-// the @supports block in the CSS above). Without them the name escapes to the
-// top of the ::view-transition tree and the element it belongs to stands still,
-// fading on its own, while the pages move under it.
+// A name written inside the area is a group of its own: it stands where it was
+// captured while the area's two pictures carry the movement, in every browser.
+// Nested groups only keep it cut at the pages' edge (see the @supports block in
+// the CSS above). Paired with the same name on the other page it is a morph;
+// taken in one state only it pairs with nothing, and is a piece of its page
+// left behind, fading, while that page moves.
 const NESTED_GROUPS_SUPPORTED = window.CSS.supports("view-transition-group", "contain");
 const warnAboutNamesEscapingArea = (areaElement, capturedNames) => {
-  if (NESTED_GROUPS_SUPPORTED) {
-    return;
-  }
-  let escapedName = null;
-  for (const name of capturedNames) {
+  const unpairedNames = new Set();
+  for (const [name, states] of capturedNames) {
     if (name === "root" || name === AREA_NAME || name.startsWith(FURNITURE_NAME_PREFIX)) {
       continue;
     }
-    escapedName = name;
-    break;
+    if (states.old && states.new) {
+      continue;
+    }
+    unpairedNames.add(name);
   }
   // A name captured next to the area is not necessarily inside it — a bar the
   // application animates on the same clock is named on purpose. The subtree is
   // walked only once something is there to find, so the common case reads
-  // nothing.
-  if (!escapedName) {
+  // nothing. The page being left is still in it, hidden (keepLeavingPages in
+  // route.jsx), so a name taken only in the old state is found too.
+  if (unpairedNames.size === 0) {
     return;
   }
   for (const descendant of areaElement.querySelectorAll("*")) {
     const {
       viewTransitionName
     } = getComputedStyle(descendant);
-    if (!viewTransitionName || viewTransitionName === "none") {
+    if (!unpairedNames.has(viewTransitionName)) {
       continue;
     }
-    warnOnce("names-escaping-area", `"${viewTransitionName}" is a view-transition-name written inside the element marked ${TRANSITION_AREA_ATTRIBUTE}, and this browser has no nested groups (view-transition-group: contain): the element it names is lifted out of the area's picture, so it stands still and fades on its own while the pages move. Give that name only for the length of the gesture it serves, or drop it while a route transition plays (:root[${TRANSITION_ATTRIBUTE}] { view-transition-name: none }).`);
+    const unclipped = NESTED_GROUPS_SUPPORTED ? "" : " This browser has no nested groups (view-transition-group: contain), so it is not even cut at the pages' edge.";
+    warnOnce("names-escaping-area", `"${viewTransitionName}" is a view-transition-name written inside the element marked ${TRANSITION_AREA_ATTRIBUTE}, and the page on the other side of the navigation has nothing of that name. A name lifts its element out of the pages' pictures, in every browser: with nothing to morph into, it stands where it was captured and fades on its own while the pages move.${unclipped} Give that name only for the length of the gesture it serves, or drop it while the pages move: :root:is([${TRANSITION_ATTRIBUTE}], [${ROUTE_TRAVEL_ATTRIBUTE}]) <that element> { view-transition-name: none } (with !important over an inline name).`);
     return;
   }
 };
@@ -36317,6 +36674,8 @@ const installRouteTransitionCss = () => {
 };
 
 installImportMetaCssBuild(import.meta);
+// The pictures carrying a travel, among everything else the movement takes
+// along (see findLeadAnimation).
 const TRAVEL_LEAD_NAMES = ["navi-route-travel"];
 
 // A browser with no view transitions of its own has no picture of the page
@@ -36584,7 +36943,7 @@ const css$12 = /* css */`.navi_route_travel {
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   routes?: Array<object|{route: object, params?: object}>,
  *   axis?: "x"|"y",
  *   travelByDrag?: boolean,
@@ -39361,7 +39720,7 @@ const resetCommand = (source, event) => {
 // answers: "save" stays, "delete" goes back to the list. Same shape as the
 // browser's own formaction/formmethod, and the same shape the action already
 // has (it is told which button requested it).
-const resolveAfterSend = (target, requester) => {
+const resolveAfterSend = (target, requester, surface) => {
   const askedForByRequester = requester?.getAttribute?.("data-after-send");
   if (askedForByRequester) {
     return askedForByRequester;
@@ -39370,11 +39729,6 @@ const resolveAfterSend = (target, requester) => {
   if (askedFor) {
     return askedFor;
   }
-  // From above the target: a popup that IS the send target is handled on its
-  // own (see the aria-expanded branch below), and must not answer twice.
-  const surface = target.parentElement?.closest(
-    `[data-slide], [aria-expanded]`,
-  );
   if (!surface) {
     return undefined;
   }
@@ -39386,6 +39740,11 @@ const resolveAfterSend = (target, requester) => {
   }
   return undefined;
 };
+// The surface a send answers when the control says nothing. Found from above
+// the target: a popup that IS the send target is handled on its own (see the
+// aria-expanded branch in sendCommand), and must not answer twice.
+const resolveSendSurface = (target) =>
+  target.parentElement?.closest(`[data-slide], [aria-expanded]`);
 // What follows a send is caused by the send, not by the gesture: the send
 // answered the gesture and may have prevented it (an Enter must not also click
 // the submit button, nor activate the trigger of the popup it closed), and a
@@ -39467,20 +39826,30 @@ const sendCommand = (source, event, { requester }) => {
       // and the popup must stay open — with the form still in front of the
       // user, showing what it is waiting for.
       let invalid = false;
-      // What follows the send is read at the moment it runs, never before it:
-      // it depends on the requester (Enter in a field sends through the first
-      // submit button, and what follows is that button's answer), and on
-      // anything the send itself decided — an action that learned where to go
-      // from the response writes it on the form while it runs
-      // (data-after-send), and this is what picks it up.
+      // What follows the send is aimed at the press, like a button's command
+      // waiting for its action (see resolveNaviCommand): the send may take the
+      // form out of the document (a form keyed on what it edits, a row that
+      // moves once saved), and resolved from there it finds no popup to close.
+      // Which command it is gets read again once the send went through: an
+      // action that learned where to go from the response writes it on the
+      // form while it runs (data-after-send). That one can only be aimed when
+      // it is read.
+      const surface = resolveSendSurface(target);
+      const sentEvent = createSentEvent(event);
+      const afterSendAtPress = resolveAfterSend(target, sendRequester, surface);
+      const runAimedAtPress = afterSendAtPress
+        ? resolveNaviCommand(source, afterSendAtPress, sentEvent)
+        : undefined;
       const runAfterSend = () => {
-        const afterSend = resolveAfterSend(target, sendRequester);
+        const afterSend = resolveAfterSend(target, sendRequester, surface);
         if (!afterSend) {
           return;
         }
-        triggerNaviCommand(source, afterSend, createSentEvent(event), {
-          optional: true,
-        });
+        if (afterSend === afterSendAtPress) {
+          runAimedAtPress?.();
+          return;
+        }
+        triggerNaviCommand(source, afterSend, sentEvent);
       };
       const {
         result: sent,
@@ -40419,6 +40788,12 @@ const isDeclaredInsidePopup = (target, popupId) =>
  * Lives on the popup's own content element rather than in the backdrop's
  * handler, for both renderers: the backdrop is a sibling behind the popup
  * (never an ancestor), so a press inside the popup's box never reaches it.
+ *
+ * Inside a box that travels by drag — a row of slides walked by a swipe, a
+ * sheet pushed back towards its edge — the region is also where that travel
+ * starts, and at the mousedown nobody knows yet which of the two the press is.
+ * The dismissal then waits for the click, which only comes if the press stayed
+ * a press: a travel swallows the one it leaves behind.
  */
 const handlePressOnOutsideRegion = (
   mouseDownEvent,
@@ -40449,11 +40824,36 @@ const handlePressOnOutsideRegion = (
     mouseDownEvent.preventDefault();
     return;
   }
-  if (pressOutside === "close" || pressOutside === "cancel") {
-    openController.requestClose(mouseDownEvent, {
-      isCancel: pressOutside === "cancel",
+  if (pressOutside !== "close" && pressOutside !== "cancel") {
+    return;
+  }
+  const isCancel = pressOutside === "cancel";
+  if (isPressDisputedByDrag(target)) {
+    onClickOfThisPress(target, (clickEvent) => {
+      openController.requestClose(clickEvent, { isCancel });
     });
+    return;
   }
+  openController.requestClose(mouseDownEvent, { isCancel });
+};
+
+// The click ending the press whose mousedown landed on `element`. A click goes
+// to what the press and the release have in common, so it reaches `element`
+// only when the release stayed on it or inside it. A press that never clicks
+// leaves it armed until the next one, and no longer — a click always comes
+// after a press, so it cannot reach the click of another (the rule
+// click_suppression.js in @jsenv/dom goes by).
+const onClickOfThisPress = (element, callback) => {
+  const onClick = (clickEvent) => {
+    disarm();
+    callback(clickEvent);
+  };
+  const disarm = () => {
+    element.removeEventListener("click", onClick);
+    window.removeEventListener("pointerdown", disarm, { capture: true });
+  };
+  element.addEventListener("click", onClick);
+  window.addEventListener("pointerdown", disarm, { capture: true });
 };
 
 /**
@@ -45661,6 +46061,9 @@ const uiStateHoldsNothing = (uiState) => {
  *    handles the timing centrally rather than each component having to manage its
  *    own debounce logic.
  */
+// Sentinel used as the initial value of lastActionValueRef.
+// Distinct from undefined so that undefined (e.g. unchecked radio) can itself
+// be stored as a valid "last action value" and trigger the dedup logic.
 const NO_ACTION_YET = Symbol("no_action_yet");
 
 // The control types rendered as an element `<label for>` can name: HTML's
@@ -45760,13 +46163,18 @@ const LISTENERS_CALLED_BY_REACTIONS = new Set(["onMouseDown", "onClick", "onKeyD
  *   the control opens, so that a listener hears the control as a whole.
  *   `onMouseDown`, `onClick`, `onKeyDown`, `onPaste` and `onInput` stay the
  *   host's either way: the control's own reactions to them call them.
+ * @param {"host"|"root"} [options.nameOn] Where `aria-label` and
+ *   `aria-labelledby` land: where the role is. `"host"`, the default, for every
+ *   control whose host is what is announced; `"root"` for a control whose role
+ *   is on its root and whose host is an `aria-hidden` carrier (a wheel).
  * @returns {[controlRootProps, controlHostProps, { uiStateController }]}
  */
 const useControlProps = (props, {
   controlType,
   persists,
   uiActionInternal,
-  listenersOn = "host"
+  listenersOn = "host",
+  nameOn = "host"
 }) => {
   const debugUIState = useDebugUIState();
 
@@ -45854,6 +46262,7 @@ const useControlProps = (props, {
     boundAction,
     controlInfo,
     listenersOn,
+    nameOn,
     listenersCalledByReactions: LISTENERS_CALLED_BY_REACTIONS
   });
   {
@@ -47082,6 +47491,7 @@ const useInteractiveProps = (props, {
   boundAction,
   controlInfo,
   listenersOn,
+  nameOn,
   listenersCalledByReactions
 }) => {
   const {
@@ -47089,6 +47499,7 @@ const useInteractiveProps = (props, {
   } = props;
   const [controlRootProps, controlHostProps] = splitControlProps(props, {
     listenersOn,
+    nameOn,
     listenersCalledByReactions
   });
   controlRootProps["navi-control"] = controlInfo.controlType;
@@ -47700,8 +48111,10 @@ const useInteractiveProps = (props, {
   }
   return [controlRootProps, controlHostProps];
 };
+const NAME_ATTRIBUTE_SET = new Set(["aria-label", "aria-labelledby"]);
 const splitControlProps = (props, {
   listenersOn,
+  nameOn,
   listenersCalledByReactions
 }) => {
   const {
@@ -47712,6 +48125,10 @@ const splitControlProps = (props, {
   };
   const controlRootProps = {};
   for (const key of Object.keys(props)) {
+    if (nameOn === "root" && NAME_ATTRIBUTE_SET.has(key)) {
+      controlRootProps[key] = props[key];
+      continue;
+    }
     const attributeName = controlAttributeFromProp(key);
     if (attributeName) {
       controlHostProps[attributeName] = props[key];
@@ -49841,7 +50258,7 @@ const css$$ = /* css */`.navi_text_anchor {
  * @param {{ size?: number, verticalAlign?: string }} [lineLayout]
  *   Describes the surrounding line context. Used as layout-effect dependencies so the correction
  *   reruns when the surrounding text's font-size or vertical-align changes.
- * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
+ * @param {import("preact").RefObject} childRef — ref on the child element to reposition
  */
 const TextAnchor = ({
   childRef,
@@ -50503,25 +50920,25 @@ const shouldInjectSpacingBetween = (left, right) => {
  * See `docs/typography.md` for the decisions behind it — truncating, rows made
  * of an icon, a text and an icon, and where a line may break.
  *
- * @type {import("ignore:preact").FunctionComponent<{
- *   children?: import("ignore:preact").ComponentChildren,
+ * @type {import("preact").FunctionComponent<{
+ *   children?: import("preact").ComponentChildren,
  *   as?: string,
  *   className?: string,
- *   style?: import("ignore:preact").JSX.CSSProperties,
+ *   style?: import("preact").JSX.CSSProperties,
  *   bold?: boolean,
  *   noWrap?: boolean,
  *   maxLines?: number,
- *   spacing?: string | number | import("ignore:preact").ComponentChildren,
+ *   spacing?: string | number | import("preact").ComponentChildren,
  *   loading?: boolean,
  *   skeleton?: boolean,
  *   attachLastChild?: boolean,
  *   preventSpaceUnderlines?: boolean,
- *   holdSpaceForStyle?: import("ignore:preact").JSX.CSSProperties,
+ *   holdSpaceForStyle?: import("preact").JSX.CSSProperties,
  *   boldStable?: boolean,
  *   shrinkWrap?: boolean,
  *   capitalize?: boolean,
  *   selectRange?: string | [number, number] | [string, string],
- *   childrenOutsideFlow?: import("ignore:preact").ComponentChildren,
+ *   childrenOutsideFlow?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  *
@@ -50562,7 +50979,7 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   Replaces real space characters between children with padding-based spaces.
  *   Useful inside `<a>` elements where browsers draw an underline under spaces.
  *
- * @param {import("ignore:preact").JSX.CSSProperties} [holdSpaceForStyle]
+ * @param {import("preact").JSX.CSSProperties} [holdSpaceForStyle]
  *   Prevents layout shifts when text styles change (e.g. font-weight, font-size).
  *   Pass the CSS properties representing the "largest" visual state of the text.
  *   An invisible placeholder rendered with those styles reserves the space; the
@@ -50595,7 +51012,7 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   `[start, end]` character-offset tuple, or a `[startText, endText]` pair of
  *   substrings selecting from the first to the end of the second.
  *
- * @param {import("ignore:preact").ComponentChildren} [childrenOutsideFlow]
+ * @param {import("preact").ComponentChildren} [childrenOutsideFlow]
  *   Rendered after children but outside the text spacing/flow logic. Used
  *   internally for overlays such as the skeleton container.
  */
@@ -50883,7 +51300,7 @@ const TextWithSelectRange = ({
  * @param {object} props
  * @param {string} [props.href] - URL/id of an external SVG symbol, rendered via
  *   `<svg><use href></svg>`. Mutually exclusive with meaningful `children`.
- * @param {import("ignore:preact").ComponentChildren} [props.children] - Inline icon
+ * @param {import("preact").ComponentChildren} [props.children] - Inline icon
  *   content: an `<svg>` element, or a string (renders as a text/emoji icon).
  * @param {boolean} [props.decorative] - Marks the icon `aria-hidden`. Defaults
  *   to `true` for an unsized, non-interactive icon; pass `false` for a
@@ -51058,6 +51475,11 @@ const usePreloadOnIntent = (ref, href, prefetch = true) => {
       return undefined;
     }
     const preload = () => {
+      // The tab or the window it opens loads its own code: what would be
+      // fetched here is not what runs there.
+      if (linkOpensElsewhere(element)) {
+        return;
+      }
       preloadUrl(href);
     };
     element.addEventListener("pointerenter", preload);
@@ -51266,6 +51688,15 @@ const useDimColorWhen = (elementRef, shouldDim) => {
 };
 
 installImportMetaCssBuild(import.meta);
+/*
+ * Apply opacity to child content, not the link element itself.
+ *
+ * Why not apply opacity directly to .navi_link?
+ * - Would make focus outlines semi-transparent too (accessibility issue)
+ * - We want dimmed text but full-opacity focus indicators for visibility
+ *
+ * This approach dims the content while preserving focus outline visibility.
+ */
 const css$Z = /* css */`@layer navi {
   .navi_link {
     --link-border-radius: unset;
@@ -51286,6 +51717,19 @@ const css$Z = /* css */`@layer navi {
     --link-current-indicator-spacing: 0;
     --link-current-indicator-color: var(--navi-link-current-indicator-color);
   }
+
+  .navi_link[data-variant="text"], .navi_link[data-variant="icon"] {
+    --link-color: unset;
+    --link-text-decoration: none;
+  }
+
+  .navi_link[data-variant="tab"] {
+    --link-background-hover: color-mix(in srgb,
+        var(--link-background, transparent),
+        var(--x-link-contrasting-color) 15%);
+    --link-color: unset;
+    --link-text-decoration: none;
+  }
 }
 
 .navi_link {
@@ -51306,7 +51750,6 @@ const css$Z = /* css */`@layer navi {
   --x-link-padding-right: var(--link-padding-right, var(--link-padding-x, var(--link-padding, 0px)));
   --x-link-padding-bottom: var(--link-padding-bottom, var(--link-padding-y, var(--link-padding, 0px)));
   --x-link-padding-left: var(--link-padding-left, var(--link-padding-x, var(--link-padding, 0px)));
-  aspect-ratio: inherit;
   padding-top: var(--x-link-padding-top);
   padding-right: var(--x-link-padding-right);
   padding-bottom: var(--x-link-padding-bottom);
@@ -51495,17 +51938,7 @@ const css$Z = /* css */`@layer navi {
     margin-left: -.1em;
   }
 
-  &[data-variant="text"], &[data-variant="icon"] {
-    --link-color: unset;
-    --link-text-decoration: none;
-  }
-
   &[data-variant="tab"] {
-    --link-background-hover: color-mix(in srgb,
-        var(--link-background, transparent),
-        var(--x-link-contrasting-color) 15%);
-    --link-color: unset;
-    --link-text-decoration: none;
     white-space: nowrap;
     user-select: none;
 
@@ -51592,8 +52025,9 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  *
  * Href-derived behavior (all computed from `href`, recomputed on navigation):
  * - internal vs external target (`data-href-internal`/`data-href-external`),
- *   with `target`/`rel` auto-defaulted (`_self` internal, `_blank` +
- *   `noopener noreferrer` external) unless explicitly set.
+ *   with `target`/`rel` auto-defaulted unless explicitly set: `_blank` for a
+ *   page of another site (`http:`/`https:`), `noopener noreferrer` for any
+ *   external address, nothing otherwise.
  * - "current page" detection (`data-href-current`, `aria-current="page"`).
  * - anchor links (`href` starting with `#`) get `data-href-anchor`.
  * - an automatic end icon for `tel:`/`sms:`/`mailto:`/`github.com`, external
@@ -51655,14 +52089,14 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  *     text reads (see `holdSpaceForStyle` in `text.jsx`).
  * @param {boolean} [props.currentEffectShadow] - Inset-shadow effect while
  *   current (used with `variant="tab"`).
- * @param {boolean|import("ignore:preact").ComponentChild} [props.startIcon] - Icon
+ * @param {boolean|import("preact").ComponentChild} [props.startIcon] - Icon
  *   placed before the text.
- * @param {boolean|import("ignore:preact").ComponentChild} [props.endIcon] - Icon
+ * @param {boolean|import("preact").ComponentChild} [props.endIcon] - Icon
  *   placed after the text; when omitted, an icon may be auto-chosen from the
  *   href (see above).
- * @param {boolean|import("ignore:preact").ComponentChild} [props.blankTargetIcon] -
+ * @param {boolean|import("preact").ComponentChild} [props.blankTargetIcon] -
  *   Override/suppress the auto external-link icon.
- * @param {boolean|import("ignore:preact").ComponentChild} [props.anchorIcon] -
+ * @param {boolean|import("preact").ComponentChild} [props.anchorIcon] -
  *   Controls the auto anchor icon shown for a childless anchor link:
  *   `true`/`undefined` uses the default chain SVG, `false` suppresses it, any
  *   other node replaces it. To render a plain `#` instead, prefer writing it as
@@ -51733,7 +52167,7 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  * @param {boolean} [props.preventDefault] - Call `event.preventDefault()` on
  *   click (navigation suppressed; `onClick` still runs).
  * @param {(event: MouseEvent) => void} [props.onClick]
- * @param {import("ignore:preact").ComponentChildren} [props.children] - Link content;
+ * @param {import("preact").ComponentChildren} [props.children] - Link content;
  *   falls back to the route's relative URL / `href` per the rules above.
  * @param {string} [props.name] - Control facade name (links may be nameless).
  * @param {boolean} [props.disabled]
@@ -51862,7 +52296,7 @@ const LinkPlain = props => {
     ":-navi-href-current": innerCurrent,
     ":-navi-selected": selected
   };
-  const innerTarget = target === undefined ? isSameSite ? "_self" : "_blank" : target;
+  const innerTarget = target === undefined ? getDefaultHrefTarget(href, documentUrlSignal.peek()) : target;
   const innerRel = rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel;
   let innerEndIcon;
   if (endIcon === undefined) {
@@ -52029,7 +52463,7 @@ const LinkPlain = props => {
     },
     href: href,
     rel: innerRel,
-    target: innerTarget === "_self" ? undefined : target
+    target: innerTarget === "_self" ? undefined : innerTarget
     // Which slide this tab is, and which box to say it to: read by the <Nav>
     // around it to place the row's own bar, and by the command above to find
     // the container across the document.
@@ -52281,6 +52715,9 @@ const useSlideContainer = (target) => {
 };
 
 installImportMetaCssBuild(import.meta);
+// A name of its own for the bar under the current tab, one per nav on the page:
+// two bars answering to the same name are two elements claiming one picture,
+// and the browser refuses the whole transition rather than pick.
 let navCount = 0;
 // Worn by a nav of routes while a route movement between two of its tabs is
 // pictured (see markIndicatorTakesPart, and the CSS below for what it decides).
@@ -52305,6 +52742,7 @@ const rememberProgressAnimation = (navElement, travel) => {
 };
 const css$Y = /* css */`@layer navi {
   .navi_nav {
+    --nav-width: fit-content;
     --nav-border: none;
     --nav-padding: 0px;
     --nav-border-radius: 0px;
@@ -52328,7 +52766,7 @@ const css$Y = /* css */`@layer navi {
           var(--nav-indicator-length-delta));
     --x-nav-indicator-color: var(--nav-indicator-color, var(--nav-current-indicator-color));
     --x-nav-indicator-color-toward: var(--nav-indicator-color-toward, var(--x-nav-indicator-color));
-    z-index: 1;
+    z-index: 2;
     background: color-mix(in srgb,
         var(--x-nav-indicator-color-toward)
           calc(var(--slide-travel-progress) * var(--nav-indicator-toward-sign, 0) *
@@ -52385,7 +52823,7 @@ const css$Y = /* css */`@layer navi {
 }
 
 .navi_nav {
-  width: fit-content;
+  width: var(--nav-width);
   padding-top: var(--nav-padding-top, var(--nav-padding-y, var(--nav-padding, unset)));
   padding-right: var(--nav-padding-right, var(--nav-padding-x, var(--nav-padding, unset)));
   padding-bottom: var(--nav-padding-bottom, var(--nav-padding-y, var(--nav-padding, unset)));
@@ -52414,12 +52852,12 @@ const css$Y = /* css */`@layer navi {
     --x-nav-child-border-radius: calc(var(--nav-border-radius) - var(--nav-padding));
     --x-nav-link-border-radius: var(--link-border-radius, var(--x-nav-child-border-radius));
 
-    &:first-child {
+    &:nth-child(1 of .navi_link) {
       border-top-left-radius: var(--x-nav-link-border-radius);
       border-bottom-left-radius: var(--x-nav-link-border-radius);
     }
 
-    &:last-child {
+    &:nth-last-child(1 of .navi_link) {
       border-top-right-radius: var(--x-nav-link-border-radius);
       border-bottom-right-radius: var(--x-nav-link-border-radius);
     }
@@ -52522,7 +52960,7 @@ const positionOfCurrentIndicator = (currentIndicator, vertical) => {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   currentIndicator?: boolean|"top"|"bottom"|"left"|"right",
  *   currentIndicatorSlides?: boolean,
  *   slideContainer?: string,
@@ -53672,7 +54110,7 @@ const TABS_ALIGN_TO_JUSTIFY_CONTENT = {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: any,
  *   defaultValue?: any,
  *   onChange?: (value: any) => void,
@@ -53716,7 +54154,7 @@ const TABS_ALIGN_TO_JUSTIFY_CONTENT = {
  *   grows the binder instead of closing in on the text.
  * @param {string} [props.tabBorderColor] - The inactive tabs alone; the rest of
  *   the outline follows `borderColor`.
- * @param {import("ignore:preact").ComponentChildren} props.children - `Binder.Item`s.
+ * @param {import("preact").ComponentChildren} props.children - `Binder.Item`s.
  */
 const Binder = ({
   children,
@@ -53857,13 +54295,13 @@ const Binder = ({
 /**
  * @param {any} [props.value] - What identifies this item; defaults to its
  *   position among its siblings.
- * @param {import("ignore:preact").ComponentChildren} [props.label] - What the tab
+ * @param {import("preact").ComponentChildren} [props.label] - What the tab
  *   shows.
  * @param {object} [props.route] - Makes the tab a `Link`
  *   to that route, and the binder follows the url: the open item is the one
  *   whose route matches, no `value`/`onChange` needed.
  * @param {string} [props.href] - Same, for a plain url.
- * @param {import("ignore:preact").ComponentChildren} [props.children] - The page.
+ * @param {import("preact").ComponentChildren} [props.children] - The page.
  *
  * Every other prop goes to the tab (a `Box`, or a `Link` when routed): an item
  * styles and configures the control that opens it.
@@ -54273,7 +54711,7 @@ const FixedBarStyleCSSVars = {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   area?: "top"|"bottom"|"left"|"right",
  *   width?: string|number,
  *   height?: string|number,
@@ -54664,7 +55102,7 @@ const css$U = /* css */`.navi_summary_marker {
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   open?: boolean,
  *   loading?: boolean,
  *   openDirection?: "down" | "up" | "left",
@@ -55084,8 +55522,8 @@ const useExpandableContext = partName => {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
- *   ui?: import("ignore:preact").ComponentChildren | ((state: { open: boolean }) => import("ignore:preact").ComponentChildren),
+ * @type {import("preact").FunctionComponent<{
+ *   ui?: import("preact").ComponentChildren | ((state: { open: boolean }) => import("preact").ComponentChildren),
  *   open?: boolean,
  *   defaultOpen?: boolean,
  *   signal?: import("@preact/signals").Signal,
@@ -55725,9 +56163,9 @@ const Expandable = props => {
  * Controls inside it keep their own behavior and do not toggle. A Box, so it
  * takes the layout and style props every Box takes.
  *
- * @type {import("ignore:preact").FunctionComponent<{
- *   marker?: false | import("ignore:preact").ComponentChildren,
- *   children?: import("ignore:preact").ComponentChildren | ((state: { open: boolean }) => import("ignore:preact").ComponentChildren),
+ * @type {import("preact").FunctionComponent<{
+ *   marker?: false | import("preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren | ((state: { open: boolean }) => import("preact").ComponentChildren),
  * }>}
  * @param marker - The chevron drawn before the label. `false` removes it (a UI
  *   part that is already an icon has no room for one); any node replaces it.
@@ -55802,7 +56240,7 @@ const ExpandableUI = ({
  * Expandable, children may be a function `(data) => ui` or a branches object —
  * see ActionRenderer.
  *
- * @type {import("ignore:preact").FunctionComponent<{}>}
+ * @type {import("preact").FunctionComponent<{}>}
  */
 const ExpandableContent = ({
   children,
@@ -55958,6 +56396,40 @@ const createToggleEvent = open => {
   return toggleEvent;
 };
 
+/**
+ * Creates a renderComponent function that passes props through a chain of resolvers.
+ * Each resolver is a component function rendered in sequence (hooks are allowed).
+ * To pass through to the next resolver, call useNextResolver() and render the
+ * returned Next component with the desired props.
+ * To terminate the chain early (e.g. render a specialized component), render
+ * directly without calling Next.
+ *
+ * The last entry in the array is the final/target component — it receives null
+ * from useNextResolver() indicating it is terminal.
+ *
+ * Usage:
+ *   const renderButton = createComponentResolver([ResolverA, ResolverB, ButtonTarget]);
+ *   // Then inside a component render:
+ *   renderButton(props)
+ *
+ * A chain step is one component: a runner, defined once per position, whose
+ * render CALLS its resolver's body rather than rendering it as a child. The
+ * body runs synchronously inside the runner's render — its hooks are the
+ * runner's, at the same tree position on every render — and for exactly that
+ * long, `useNextResolver()` answers with the runner after this one (null for
+ * the last). Nothing is handed down through a context: a chain rendered by the
+ * hundred (a list's rows) pays one component per step, not a provider and a
+ * wrapper around each.
+ *
+ * A resolver that renders ANOTHER resolver — a type resolver picking the
+ * component for `type="date"` — cannot render it as a JSX child: that child
+ * would render later, outside any body, with no Next to read. It renders it
+ * with `renderResolver(Resolver, props)`, which captures the Next of the body
+ * it is called from and hands it to a runner made for that resolver — the
+ * child continues the chain where its parent stood. Called anywhere else, or
+ * a `useNextResolver()` reached outside a body, throws: the chain has no
+ * silent answer to give there.
+ */
 const createComponentResolver = (resolvers, {
   pure
 } = {}) => {
@@ -56167,10 +56639,21 @@ const useAccentColorAttributes = (
 };
 
 installImportMetaCssBuild(import.meta);
+/**
+ * We need the content to visually shrink (scale down) but the button interactive area MUST remain intact
+ * Otherwise a click on the edges of the button cannot not trigger the click event (mouseup occurs outside the button)
+ **/
+
+/**
+ * We have to re-define the CSS of button because getComputedStyle(button).borderColor returns
+ * rgb(0, 0, 0) while being visually grey in chrome
+ * So we redefine chrome styles so that loader can keep up with the actual color visible to the user
+ */
 const css$R = /* css */`@layer navi {
   .navi_button {
     --button-border-radius: var(--navi-control-border-radius);
     --button-border-width: var(--navi-control-border-width);
+    --border-width: var(--button-border-width);
     --button-cta-background-color: var(--navi-accent-color);
     --button-outline-width: var(--navi-focus-outline-width);
     --button-outline-offset: calc(-.5 * var(--button-outline-width));
@@ -56179,7 +56662,7 @@ const css$R = /* css */`@layer navi {
     --button-padding-y-default: var(--navi-button-padding-y-default);
     --button-loader-color: var(--navi-loader-color);
     --button-border-color: var(--navi-control-border-color);
-    --button-background-color: var(--button-background, var(--navi-button-background-color));
+    --button-background-color: var(--navi-button-background-color);
     --button-color: currentColor;
     --button-cursor: pointer;
     --button-font-size: var(--navi-control-font-size);
@@ -56212,6 +56695,92 @@ const css$R = /* css */`@layer navi {
     line-height: var(--navi-control-line-height);
     display: inline-block;
   }
+
+  .navi_button[data-variant="discrete"] {
+    --button-border-width: 0;
+    --button-border-color: transparent;
+    --button-border-color-hover: var(--button-border-color);
+    --button-border-color-current: var(--button-border-color);
+    --button-border-color-readonly: var(--button-border-color);
+    --button-border-color-disabled: var(--button-border-color);
+    --button-background-color: transparent;
+    --button-background-color-hover: color-mix(in srgb,
+        currentColor 8%,
+        var(--button-background-color));
+    --button-background-color-readonly: var(--button-background-color);
+    --button-background-color-disabled: var(--button-background-color);
+  }
+
+  .navi_button[data-variant="bare"] {
+    --button-padding-x-default: 0;
+    --button-padding-y-default: 0;
+    --button-border-width: 0;
+    --button-border-color: transparent;
+    --button-border-color-hover: var(--button-border-color);
+    --button-border-color-current: var(--button-border-color);
+    --button-border-color-readonly: var(--button-border-color);
+    --button-border-color-disabled: var(--button-border-color);
+    --button-background-color: transparent;
+    --button-background-color-hover: var(--button-background-color);
+    --button-background-color-readonly: var(--button-background-color);
+    --button-background-color-disabled: var(--button-background-color);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+  }
+
+  .navi_button[data-variant="discrete-border"] {
+    --button-background-color: transparent;
+    --button-background-color-hover: var(--button-background-color);
+    --button-background-color-readonly: var(--button-background-color);
+    --button-background-color-disabled: var(--button-background-color);
+  }
+
+  .navi_button[data-variant="border"] {
+    --button-background-color: transparent;
+    --button-background-color-hover: color-mix(in srgb,
+        currentColor 8%,
+        var(--button-background-color));
+    --button-background-color-readonly: var(--button-background-color);
+    --button-background-color-disabled: var(--button-background-color);
+  }
+
+  .navi_button[data-icon] {
+    --button-padding: 0;
+  }
+
+  .navi_button[data-cta] {
+    --button-background-color: var(--button-cta-background-color);
+    --button-border-color: var(--button-cta-background-color);
+    --button-color: white;
+    --button-background-color-hover: color-mix(in srgb,
+        var(--button-background-color) 85%,
+        white);
+    --button-border-color-hover: color-mix(in srgb,
+        var(--button-border-color) 85%,
+        white);
+    --button-background-color-readonly: color-mix(in srgb,
+        var(--button-background-color) 50%,
+        white);
+    --button-border-color-readonly: color-mix(in srgb,
+        var(--button-border-color) 50%,
+        white);
+    --button-background-color-disabled: color-mix(in srgb,
+        var(--button-background-color) 40%,
+        white);
+    --button-border-color-disabled: color-mix(in srgb,
+        var(--button-border-color) 40%,
+        white);
+    --button-color-disabled: color-mix(in srgb,
+        var(--button-color) 60%,
+        transparent);
+  }
+
+  .navi_button[data-content-display="contents"] {
+    background: none;
+    border: none;
+    padding: 0;
+  }
 }
 
 a.navi_button {
@@ -56228,7 +56797,6 @@ a.navi_button {
   --x-button-color: var(--button-color);
   --x-button-cursor: var(--button-cursor);
   box-sizing: border-box;
-  aspect-ratio: inherit;
   color: var(--x-button-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--button-border-radius));
   border-top-right-radius: var(--x-corner-top-right-radius, var(--button-border-radius));
@@ -56237,12 +56805,15 @@ a.navi_button {
   cursor: var(--x-button-cursor);
   touch-action: manipulation;
   user-select: none;
-  background: none;
-  border: none;
   outline: none;
-  padding: 0;
   position: relative;
 
+  &:where(:not([data-content-display="contents"])) {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
   & .navi_button_content {
     --x-corner-top-left-radius: initial;
     --x-corner-top-right-radius: initial;
@@ -56264,8 +56835,7 @@ a.navi_button {
     gap: inherit;
     color: inherit;
     vertical-align: inherit;
-    background: var(--x-button-background);
-    background-color: var(--x-button-background-color, var(--x-button-background));
+    background: var(--x-button-background, var(--x-button-background-color));
     border: var(--x-button-border);
     border-radius: inherit;
     outline-width: var(--button-outline-width);
@@ -56288,6 +56858,10 @@ a.navi_button {
     }
   }
 
+  &[data-background-color] .navi_button_content {
+    background-color: var(--x-button-background-color);
+  }
+
   &[data-href-current] {
     --x-button-border-color: var(--button-border-color-current);
     --x-button-background-color: var(--button-background-color-current);
@@ -56332,7 +56906,7 @@ a.navi_button {
   }
 
   &[data-content-display="contents"] {
-    & [data-focus-visible] {
+    &[data-focus-visible] {
       outline: var(--button-outline-width) solid var(--button-outline-color);
       outline-offset: var(--button-outline-offset);
     }
@@ -56358,19 +56932,6 @@ a.navi_button {
   }
 
   &[data-variant="discrete"] {
-    --button-border-width: 0;
-    --button-border-color: transparent;
-    --button-border-color-hover: var(--button-border-color);
-    --button-border-color-current: var(--button-border-color);
-    --button-border-color-readonly: var(--button-border-color);
-    --button-border-color-disabled: var(--button-border-color);
-    --button-background-color: var(--button-background, transparent);
-    --button-background-color-hover: color-mix(in srgb,
-        currentColor 8%,
-        var(--button-background-color));
-    --button-background-color-readonly: var(--button-background-color);
-    --button-background-color-disabled: var(--button-background-color);
-
     @media (hover: hover) {
       &[data-pressed] {
         & .navi_button_content {
@@ -56381,17 +56942,6 @@ a.navi_button {
   }
 
   &[data-variant="bare"] {
-    --button-border-width: 0;
-    --button-border-color: transparent;
-    --button-border-color-hover: var(--button-border-color);
-    --button-border-color-current: var(--button-border-color);
-    --button-border-color-readonly: var(--button-border-color);
-    --button-border-color-disabled: var(--button-border-color);
-    --button-background-color: var(--button-background, transparent);
-    --button-background-color-hover: var(--button-background-color);
-    --button-background-color-readonly: var(--button-background-color);
-    --button-background-color-disabled: var(--button-background-color);
-
     &[data-pressed] {
       & .navi_button_content {
         transform: none;
@@ -56400,10 +56950,6 @@ a.navi_button {
   }
 
   &[data-variant="discrete-border"] {
-    --button-background-color: var(--button-background, transparent);
-    --button-background-color-hover: var(--button-background-color);
-    --button-background-color-readonly: var(--button-background-color);
-    --button-background-color-disabled: var(--button-background-color);
     --x-button-border-color: transparent;
 
     &[data-hover] {
@@ -56415,15 +56961,6 @@ a.navi_button {
     }
   }
 
-  &[data-variant="border"] {
-    --button-background-color: var(--button-background, transparent);
-    --button-background-color-hover: color-mix(in srgb,
-        currentColor 8%,
-        var(--button-background-color));
-    --button-background-color-readonly: var(--button-background-color);
-    --button-background-color-disabled: var(--button-background-color);
-  }
-
   &[data-press-effect="scale"][data-pressed] {
     & .navi_button_content {
       transform: scale(.9);
@@ -56437,37 +56974,9 @@ a.navi_button {
   }
 
   &[data-icon] {
-    --button-padding: 0;
     justify-content: center;
     align-items: center;
   }
-
-  &[data-cta] {
-    --button-background-color: var(--button-background, var(--button-cta-background-color));
-    --button-border-color: var(--button-cta-background-color);
-    --button-color: white;
-    --button-background-color-hover: color-mix(in srgb,
-        var(--button-background-color) 85%,
-        white);
-    --button-border-color-hover: color-mix(in srgb,
-        var(--button-border-color) 85%,
-        white);
-    --button-background-color-readonly: color-mix(in srgb,
-        var(--button-background-color) 50%,
-        white);
-    --button-border-color-readonly: color-mix(in srgb,
-        var(--button-border-color) 50%,
-        white);
-    --button-background-color-disabled: color-mix(in srgb,
-        var(--button-background-color) 40%,
-        white);
-    --button-border-color-disabled: color-mix(in srgb,
-        var(--button-border-color) 40%,
-        white);
-    --button-color-disabled: color-mix(in srgb,
-        var(--button-color) 60%,
-        transparent);
-  }
 }
 `;
 const ButtonUI = props => {
@@ -56596,6 +57105,7 @@ const ButtonUI = props => {
     "data-press-effect": pressEffect,
     "data-icon": icon ? "" : undefined,
     "data-cta": cta ? "" : undefined,
+    "data-background-color": props.backgroundColor === undefined ? undefined : "",
     "data-callout-arrow-x": "center"
     // style management
     ,
@@ -56908,7 +57418,7 @@ const ButtonWithHref = props => {
   } = getHrefTargetInfo(href, documentUrlSignal.peek());
   return jsx(Next, {
     ...props,
-    target: target === undefined ? isSameSite ? undefined : "_blank" : target,
+    target: target === undefined ? getDefaultHrefTarget(href, documentUrlSignal.peek()) : target,
     rel: rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel
     // Under whatever the caller already says: a route knows better whether
     // it is the page one is on (see button_route.jsx), and a demo can force
@@ -57062,7 +57572,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   selfInteractions?: string,
  *   whenSelfInteractionsBlocked?: "hide" | "refuse" | "ignore",
  *   replace?: boolean,
@@ -57144,7 +57654,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   more: the work may already have happened on the other side (see
  *   docs/actions.md#aborting-saves-resources-it-does-not-undo), so say it only
  *   where the screen can be re-opened on what is actually there.
- * @param {boolean|import("ignore:preact").ComponentChildren} [confirm] Ask before
+ * @param {boolean|import("preact").ComponentChildren} [confirm] Ask before
  *   doing it, in the place the button stands: the first press replaces the
  *   button with this question and a "Confirmer"/"Annuler" pair, the second one
  *   does what the button was for. `true` asks navi's default question. The
@@ -57155,9 +57665,9 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   question up, its message on the button that asked. Use `<Picker
  *   type="confirm">` instead when the question is long enough to want a popup,
  *   or when the row has no space for it.
- * @param {import("ignore:preact").ComponentChildren} [confirmLabel] Label of the
+ * @param {import("preact").ComponentChildren} [confirmLabel] Label of the
  *   second press.
- * @param {import("ignore:preact").ComponentChildren} [cancelLabel] Label of the way
+ * @param {import("preact").ComponentChildren} [cancelLabel] Label of the way
  *   out of the question.
  * @param {string} [confirmTestId] `data-testid` of the second press.
  * @param {string} [cancelTestId] `data-testid` of the way out.
@@ -57256,13 +57766,13 @@ const css$P = /* css */`.navi_control_swap {
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: string,
  *   defaultValue?: string,
  *   signal?: import("@preact/signals").Signal<string>,
  *   onChange?: (name: string, event: Event) => void,
  *   animation?: boolean,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  * }>}
  * @param value - The name of the side holding the floor, driven from outside:
  *   the row swaps to match every change of it, and a press on a cap can still
@@ -57406,13 +57916,13 @@ const ControlSwap = props => {
  * reads these and draws the caps at its ends, the controls between them. The
  * props below say what the side IS; every other prop describes its cap.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
- *   icon: import("ignore:preact").ComponentChildren,
+ *   icon: import("preact").ComponentChildren,
  *   label: string,
- *   badge?: boolean | import("ignore:preact").ComponentChildren,
+ *   badge?: boolean | import("preact").ComponentChildren,
  *   autoFocus?: boolean,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param name - How `value`/`signal`/`onChange` name this side. Its position
@@ -57620,6 +58130,51 @@ const createAvailableConstraint = (
   };
 };
 
+/**
+ * ControlGroup — a named sub-group of form controls whose combined state is
+ * aggregated into a single key/value object, exactly like a Form but without
+ * the <form> element semantics.
+ *
+ * Use it when you need a self-contained cluster of inputs that:
+ *   - produce one composite value (an object) as their joint state
+ *   - can carry their own action / uiAction / command
+ *   - may live inside or outside a <Form>
+ *
+ * Props:
+ *   name       — the key under which the composite value is registered in a
+ *                parent Form (optional when used standalone)
+ *   action     — called with the aggregated object value when any child changes
+ *   command    — navi command string (e.g. "--navi-send")
+ *   disabled   — propagates to all children
+ *   readOnly   — propagates to all children
+ *   as         — HTML element to render (default "div")
+ *   children   — the controls that belong to this group
+ *
+ *   aggregateChildStates / distributeChildUIState
+ *              — what the group is worth, in both directions, when that is not
+ *                simply "one key per child": two wheels that add up to a number
+ *                of minutes, three fields that make one date. With them the
+ *                group takes and hands back a single value, so it can be driven
+ *                by one `value`/`signal` like any other control. Same mechanism
+ *                InputDuration uses for its own hour/minute/second fields (see
+ *                input_duration.jsx). `name` is unaffected: it still says under
+ *                which key the group's value — whatever shape it takes —
+ *                lands in the form around it.
+ *
+ *   distributeChildStates
+ *              — the same way down, asked ONCE for all the children at a time:
+ *                `(groupValue, children) => Map<child, state>`. The plural of
+ *                `distributeChildUIState`, and the mirror of
+ *                `aggregateChildStates`, which already sees every child. For a
+ *                group whose children cannot be placed one at a time — four
+ *                seats where who sits down decides who moves, a row where the
+ *                first answer changes what the others may show. A child the Map
+ *                does not name is left where it is. Given both, this one wins.
+ *                It also closes the loop: the group holds ONE answer its
+ *                children are views of, so when one of them speaks the others
+ *                are placed again (the one that acted is left where the user
+ *                put it).
+ */
 const ControlGroup = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
@@ -57812,6 +58367,41 @@ const css$N = /* css */`@layer navi {
         var(--button-background-color) 95%,
         black);
   }
+
+  .navi_checkbox[data-variant="switch"] {
+    --margin: var(--switch-margin);
+    --width: var(--switch-outer-width);
+    --height: unset;
+    --border-radius: var(--switch-border-radius);
+    --background-color: var(--switch-background-color);
+    --background-color-hover: var(--switch-background-color-hover);
+    --background-color-readonly: var(--switch-background-color-readonly);
+    --background-color-disabled: var(--switch-background-color-disabled);
+    --background-color-checked: var(--switch-background-color-checked);
+    --background-color-hover-checked: var(--switch-background-color-hover-checked);
+    --background-color-readonly-checked: var(--switch-background-color-readonly-checked);
+    --background-color-disabled-checked: var(--switch-background-color-disabled-checked);
+  }
+
+  .navi_checkbox[data-variant="icon"] {
+    --margin: 0;
+    --width: auto;
+    --height: auto;
+  }
+
+  .navi_checkbox[data-variant="button"] {
+    --margin: 0;
+    --width: auto;
+    --height: auto;
+    --border-color: var(--button-border-color);
+    --border-color-hover: var(--button-border-color-hover);
+    --background-color: var(--button-background-color);
+    --background-color-hover: var(--button-background-color-hover);
+    --background-color-readonly: var(--button-background-color-readonly);
+    --background-color-disabled: var(--button-background-color-disabled);
+    --border-color-checked: var(--button-border-color);
+    --background-color-checked: var(--button-background-color);
+  }
 }
 
 .navi_checkbox {
@@ -57952,18 +58542,6 @@ const css$N = /* css */`@layer navi {
 
   &[data-variant="switch"] {
     --switch-outer-width: calc(var(--switch-width) + var(--switch-padding));
-    --margin: var(--switch-margin);
-    --width: var(--switch-outer-width);
-    --height: unset;
-    --border-radius: var(--switch-border-radius);
-    --background-color: var(--switch-background-color);
-    --background-color-hover: var(--switch-background-color-hover);
-    --background-color-readonly: var(--switch-background-color-readonly);
-    --background-color-disabled: var(--switch-background-color-disabled);
-    --background-color-checked: var(--switch-background-color-checked);
-    --background-color-hover-checked: var(--switch-background-color-hover-checked);
-    --background-color-readonly-checked: var(--switch-background-color-readonly-checked);
-    --background-color-disabled-checked: var(--switch-background-color-disabled-checked);
     min-width: var(--switch-outer-width);
     padding: var(--switch-padding);
     background-color: var(--x-background-color);
@@ -57973,25 +58551,11 @@ const css$N = /* css */`@layer navi {
   }
 
   &[data-variant="icon"] {
-    --margin: 0;
-    --width: auto;
-    --height: auto;
     background: none;
     border: none;
   }
 
   &[data-variant="button"] {
-    --margin: 0;
-    --width: auto;
-    --height: auto;
-    --border-color: var(--button-border-color);
-    --border-color-hover: var(--button-border-color-hover);
-    --background-color: var(--button-background-color);
-    --background-color-hover: var(--button-background-color-hover);
-    --background-color-readonly: var(--button-background-color-readonly);
-    --background-color-disabled: var(--button-background-color-disabled);
-    --border-color-checked: var(--button-border-color);
-    --background-color-checked: var(--button-background-color);
     padding-top: var(--button-padding-top, var(--button-padding-y, var(--button-padding, var(--button-padding-y-default))));
     padding-right: var(--button-padding-right, var(--button-padding-x, var(--button-padding, var(--button-padding-x-default))));
     padding-bottom: var(--button-padding-bottom, var(--button-padding-y, var(--button-padding, var(--button-padding-y-default))));
@@ -58177,7 +58741,7 @@ const css$M = /* css */`@layer navi {
   [navi-field] {
     --spacing-with-control: var(--navi-xs);
 
-    & .navi_checkbox, & .navi_radio {
+    & .navi_checkbox:not([data-variant="switch"]), & .navi_radio {
       --margin: 0;
     }
   }
@@ -58532,6 +59096,28 @@ const css$L = /* css */`@layer navi {
     --button-border-color-disabled: var(--border-color-readonly);
     --button-background-color-disabled: var(--background-color-readonly);
   }
+
+  .navi_radio[data-variant="icon"] {
+    --width: auto;
+    --height: auto;
+    --outline-offset: 2px;
+    --outline-width: 2px;
+  }
+
+  .navi_radio[data-variant="button"] {
+    --margin: 0;
+    --outline-offset: 0px;
+    --width: auto;
+    --height: auto;
+    --border-color: var(--button-border-color);
+    --border-color-hover: var(--button-border-color-hover);
+    --background-color: var(--button-background-color);
+    --background-color-hover: var(--button-background-color-hover);
+    --background-color-readonly: var(--button-background-color-readonly);
+    --background-color-disabled: var(--button-background-color-disabled);
+    --border-color-checked: var(--button-border-color);
+    --background-color-checked: var(--button-background-color);
+  }
 }
 
 .navi_radio {
@@ -58687,26 +59273,7 @@ const css$L = /* css */`@layer navi {
     }
   }
 
-  &[data-variant="icon"] {
-    --width: auto;
-    --height: auto;
-    --outline-offset: 2px;
-    --outline-width: 2px;
-  }
-
   &[data-variant="button"] {
-    --margin: 0;
-    --outline-offset: 0px;
-    --width: auto;
-    --height: auto;
-    --border-color: var(--button-border-color);
-    --border-color-hover: var(--button-border-color-hover);
-    --background-color: var(--button-background-color);
-    --background-color-hover: var(--button-background-color-hover);
-    --background-color-readonly: var(--button-background-color-readonly);
-    --background-color-disabled: var(--button-background-color-disabled);
-    --border-color-checked: var(--button-border-color);
-    --background-color-checked: var(--button-background-color);
     padding-top: var(--button-padding-top, var(--button-padding-y, var(--button-padding, var(--button-padding-y-default))));
     padding-right: var(--button-padding-right, var(--button-padding-x, var(--button-padding, var(--button-padding-x-default))));
     padding-bottom: var(--button-padding-bottom, var(--button-padding-y, var(--button-padding, var(--button-padding-y-default))));
@@ -58930,6 +59497,7 @@ const css$K = /* css */`@layer navi {
     --outline-width: var(--navi-focus-outline-width);
     --outline-offset: var(--outline-width);
     --outline-color: var(--navi-focus-outline-color);
+    --margin: 2px;
     --height: 8px;
     --thumb-size: 16px;
     --thumb-width: var(--thumb-size);
@@ -59005,6 +59573,7 @@ const css$K = /* css */`@layer navi {
   box-sizing: border-box;
   width: fit-content;
   height: var(--height);
+  margin: var(--margin);
   font-size: var(--font-size);
   font-family: var(--font-family);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--outline-border-radius));
@@ -59017,7 +59586,6 @@ const css$K = /* css */`@layer navi {
   outline-offset: var(--outline-offset);
   flex-direction: row;
   align-items: center;
-  margin: 2px;
   position: relative;
 
   & .navi_control_input {
@@ -59314,6 +59882,45 @@ const inputCss = /* css */ `@layer navi {
         grey);
     --color-disabled: var(--color-dimmed);
   }
+
+  .navi_input[data-background-transparent] {
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--navi-surface-color);
+  }
+
+  .navi_input[data-variant="discrete"], .navi_input[data-variant="discrete-border"] {
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--navi-surface-color);
+
+    &[data-background] {
+      --background-color-focus: transparent;
+    }
+  }
+
+  .navi_input[data-variant="discrete"] {
+    --border-color: transparent;
+  }
+
+  .navi_input[data-variant="text"] {
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
+    --border-color: transparent;
+    --border-color-hover: var(--border-color);
+    --border-color-readonly: var(--border-color);
+    --border-color-disabled: var(--border-color);
+  }
+
+  .navi_input[data-variant="underline"] {
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
+  }
 }
 
 .navi_input {
@@ -59465,19 +60072,12 @@ const inputCss = /* css */ `@layer navi {
   }
 
   &[data-background-transparent] {
-    --background-color-hover: var(--background-color);
-    --background-color-focus: var(--navi-surface-color);
-
     &[data-focus] {
       --x-background-color: var(--background-color-focus);
     }
   }
 
   &[data-variant="discrete"], &[data-variant="discrete-border"] {
-    --background-color: transparent;
-    --background-color-hover: var(--background-color);
-    --background-color-focus: var(--navi-surface-color);
-
     &[data-focus] {
       --x-background-color: var(--background-color-focus);
     }
@@ -59485,15 +60085,9 @@ const inputCss = /* css */ `@layer navi {
     &[data-readonly], &[data-disabled] {
       --x-background-color: var(--background-color);
     }
-
-    &[data-background] {
-      --background-color-focus: transparent;
-    }
   }
 
   &[data-variant="discrete"] {
-    --border-color: transparent;
-
     &[data-focus] {
       --x-border-color: color-mix(in srgb,
           var(--border-color) 55%,
@@ -59502,24 +60096,10 @@ const inputCss = /* css */ `@layer navi {
   }
 
   &[data-variant="text"] {
-    --background-color: transparent;
-    --background-color-hover: var(--background-color);
-    --background-color-focus: var(--background-color);
-    --background-color-readonly: var(--background-color);
-    --background-color-disabled: var(--background-color);
-    --border-color: transparent;
-    --border-color-hover: var(--border-color);
-    --border-color-readonly: var(--border-color);
-    --border-color-disabled: var(--border-color);
     cursor: inherit;
   }
 
   &[data-variant="underline"] {
-    --background-color: transparent;
-    --background-color-hover: var(--background-color);
-    --background-color-focus: var(--background-color);
-    --background-color-readonly: var(--background-color);
-    --background-color-disabled: var(--background-color);
     border: none;
     border-radius: 0;
     padding-left: 0;
@@ -60715,6 +61295,38 @@ const InputStyleCSSVars = {
 const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value"];
 const InputPseudoElements = ["::-navi-loader"];
 
+/**
+ * @type {import("preact").FunctionComponent<{
+ *   type?: string,
+ *   icon?: import("preact").ComponentChildren | null,
+ *   clearable?: boolean,
+ *   value?: any,
+ *   boolean?: boolean,
+ *   selectOnPress?: boolean,
+ *   [key: string]: any,
+ * }>}
+ * @param {any} [value] On a checkbox, what it is worth checked (`"on"` when
+ *   left out); unchecked it is `undefined`. See control_value.md, "What a
+ *   checkbox is worth".
+ * @param {boolean} [boolean] Makes a checkbox a yes/no: `true` checked, `false`
+ *   unchecked, everywhere it hands its value. Takes no `value`.
+ * @param {import("preact").ComponentChildren|null} [icon] What the textual
+ *   types that draw an icon (`search`, `email`, `tel`) put in their slot: left
+ *   out, the type's own glyph; `null`, nothing — for a field an application
+ *   draws its own magnifier beside, where a second one two centimetres away
+ *   would be one too many; anything else is drawn instead. A `search` field
+ *   swaps that slot for the clear cross as soon as it holds a value, whatever
+ *   this says.
+ * @param {boolean} [clearable] Gives any other type the same slot: the icon
+ *   while empty (none, unless `icon` says otherwise), the clear cross once
+ *   filled.
+ * @param {boolean} [selectOnPress] For a textual field whose value is usually
+ *   replaced rather than edited, like a browser's address bar: the first press
+ *   after the field took the focus selects its whole text once released, with a
+ *   mouse or a finger, and a second press places the caret. A focus that came
+ *   without a press (a dialog opening, Tab, code) selects nothing; the first key
+ *   that types selects first, so it replaces the text.
+ */
 const Input = props => {
   resolveInputProps(props);
   const {
@@ -60804,7 +61416,7 @@ const TextareaStyleCSSVars = {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: string,
  *   defaultValue?: string,
  *   signal?: import("@preact/signals").Signal<string>,
@@ -60911,7 +61523,7 @@ const Textarea = ({
  * draws: put it under the box, in a form footer, next to a label, and feed it
  * the same value or signal as the textarea.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: string,
  *   signal?: import("@preact/signals").Signal<string>,
  *   maxLength?: number,
@@ -61144,8 +61756,8 @@ const useEditionController = () => {
  * it in CSS (the `[data-editing] input` rules in `control/table/table_css.js`),
  * the demo `control/demos/action/8_editable_demo.html` does it with props.
  *
- * @type {import("ignore:preact").FunctionComponent<{
- *   children?: import("ignore:preact").ComponentChildren,
+ * @type {import("preact").FunctionComponent<{
+ *   children?: import("preact").ComponentChildren,
  *   action: Function | object,
  *   editing?: { event?: Event } | null,
  *   onEditEnd?: (detail: { success?: boolean, cancelled?: boolean, event: Event }) => void,
@@ -61505,6 +62117,77 @@ const commitSubtree = (controller, e) => {
  * <form> element (FormNested).
  */
 
+/**
+ * @param {object} props
+ * @param {boolean} [props.standalone] - Its value is its own: the form does not
+ *   register with the control group around it (a Picker, a ControlGroup), so
+ *   what is typed in it never becomes part of that group's value, and nothing
+ *   that group does — distributing a value, resetting, cascading validation —
+ *   reaches it. For a form that lives INSIDE something else while answering a
+ *   different question — "create the thing I am about to pick" inside a picker,
+ *   say. Every control takes the same prop, for the same reason. A form inside
+ *   another form is that by construction and does not need the prop: the group
+ *   it would register into is a form, which never owns another form's fields.
+ * @param {boolean} [props.canSendWhileUnchanged] - Send even when nothing changed. By
+ *   default a form only acts on an answer that is actually new: submitting a
+ *   form nobody touched — one just rendered, one reopened and left alone — runs
+ *   no action (a field still showing its `defaultValue` is an answer: confirming
+ *   a suggestion), and after the first submission it is that value the next
+ *   one is compared against. Everything around the action still happens either
+ *   way: the constraints are checked, and what follows the send still follows
+ *   it (the slide moves on, the popup closes) — the user is done regardless of
+ *   whether there was anything to send. Set this for a form where sending the
+ *   same thing twice is the point — a single button that fires off a
+ *   notification, an action whose duplicates are fine. See also
+ *   `readOnlyWhileFormUnchanged` on `Button`, for a submit that should say it
+ *   is waiting rather than accept a press that sends nothing.
+ * @param {boolean} [props.actionAbortable] - The person waiting may give up on
+ *   the send: closing the popup this form holds calls the run off and goes
+ *   through, instead of being refused. For a send whose answer may never come —
+ *   a request over a network that stops answering — where a sheet with no way
+ *   out is worse than an answer lost. Aborting frees the client and nothing
+ *   more: the write may already have landed on the other side (see
+ *   docs/actions.md#aborting-saves-resources-it-does-not-undo), so say it only
+ *   where the screen can be re-opened on what is actually there. Every control
+ *   inside the form inherits it along with the wait itself.
+ * @param {boolean} [props.optimistic] - The send is taken as done on the form's
+ *   own word: no busy state, and what follows it (`command="--navi-close"`, a
+ *   slide moving on) runs at once, the run going on behind. A failure then has
+ *   no sheet to be read in: `resetOnError` puts the form back and the error
+ *   callout is drawn on what surrounds the closed sheet. For a write not worth being
+ *   waited for — a score, a note — never for one whose refusal changes what the
+ *   person does next (see
+ *   docs/popup_open.md#closing-when-a-button-also-runs-an-action).
+ * @param {any} [props.pristineKey] - What the form is measured against, taken
+ *   again every time this changes. A form knows what it holds as soon as its
+ *   fields have registered, which is the right moment for a form whose values
+ *   are there on the first render — and never the right one for a screen that
+ *   modifies something: the resource arrives a request later and fills the
+ *   fields, and a form comparing against what it held BEFORE that opens already
+ *   changed. Pass whatever says the filling is done (a boolean, the resource
+ *   itself, a count of what has loaded) and what the fields carry at that
+ *   moment becomes the reference — including the fields that settle in a render
+ *   of their own, so there is no tick to wait for on the caller's side. Change
+ *   it once, when the screen is ready: taken again after someone started
+ *   typing, it would call what they wrote the reference.
+ * @param {string} [props.command] - What follows a submission that went
+ *   through: the form has answered its question, and this says what the screen
+ *   does about it. Nothing runs when the submission is refused — the form then
+ *   stays in front of the user, showing what it is waiting for.
+ *
+ *   `"--navi-close"` dismisses the popup the form is in,
+ *   `"--navi-left"`/`"--navi-right"`/`"--navi-up"`/`"--navi-down"` move on the
+ *   slide map it is in, `"--navi-nav-to:/the/url"` takes the user to a page,
+ *   `"--navi-void"` stays put — the one for a form inside a popup that must
+ *   stay open once it is sent (a side panel one keeps editing in).
+ *   Any navi command, really: it is triggered from the form, so it finds its
+ *   target the way that command always does.
+ *
+ *   Left out, the surface the form sits in decides (see resolveAfterSend in
+ *   commands.js): a popup closes, a slide goes on to the next one — or back to
+ *   the one it came from when there is no next — and a form on a page does
+ *   nothing.
+ */
 const Form = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
@@ -61821,6 +62504,7 @@ const useRequestSubmitThroughGates = ref => {
 installImportMetaCssBuild(import.meta);
 const css$H = /* css */`.navi_group {
   --group-border-width: var(--navi-control-border-width);
+  --border-width: initial;
 
   & > :not([navi-out-of-flow]) {
     &:hover, &[data-hover] {
@@ -65053,6 +65737,122 @@ SlideContainer.Down = SlideDown;
 SlideContainer.First = SlideFirst;
 SlideContainer.Last = SlideLast;
 
+/**
+ * Displays a date/time value in a human-readable format using the current locale.
+ *
+ * @param {Date|number|string} children
+ *   The date to display. Accepts:
+ *   - a `Date` instance
+ *   - a Unix timestamp (number, in ms)
+ *   - a date string `"YYYY-MM-DD"` or any string parseable by `Date`
+ *   If the value cannot be parsed, it is rendered as-is.
+ *   If undefined/null, renders a placeholder shaped like the type: `"–"` for
+ *   `"relative"`, `"--:--"` for `"time"`, `"--"` for the durations, the
+ *   locale's field pattern for `"date"`/`"month"`/`"week"`/`"datetime"`.
+ *
+ * @param {"date"|"month"|"week"|"datetime"|"time"|"hour"|"minute"|"second"|"duration"|"relative"} [type="relative"]
+ *   Controls the display format:
+ *   - `"date"`     → "lundi 11 mai" (long by default), "samedi 1 janvier 2050" outside the current year (see `year`);
+ *                    `format="short"` → "lun. 11 mai"; `format="numeric"` → "11/05/2026";
+ *                    `format={{ weekday: "long", month: "short" }}` spells the two apart → "mercredi 2 sept.";
+ *                    a part set to `false` is dropped — `format={{ day: false, month: false }}` → "mercredi"
+ *   - `"month"`    → "juin 2026"
+ *   - `"week"`     → the ISO week as given ("2026-W38"), in a `<time datetime>`
+ *   - `"datetime"` → "lun. 11 mai, 14:30" (long); `format="short"` → "11 mai, 14:30"; `format="narrow"` → "11/05, 14:30"
+ *   - `"time"`     → time-of-day as duration by default (e.g. "14:30" → "14 heures 30");
+ *                    `format="timestring"` → clock "14 h 30". Midnight (00:xx) is
+ *                    special-cased regardless of `format` — "0 heures 5 minutes"
+ *                    would otherwise collapse to "5 minutes", indistinguishable
+ *                    from an actual 5-minute duration: `format="long"` (default)
+ *                    says "minuit et 5 minutes" (`format="short"/"narrow"/"compact"`
+ *                    keep the zero hour instead — "0 h et 5 min"/"0h 5min"/"00h05").
+ *                    `format="compact"` also zero-pads any single-digit hour, not
+ *                    just midnight (e.g. "5h30" → "05h30"), closer to "05:30";
+ *                    `pad={false}` writes it the way one says it instead ("8h30",
+ *                    "8h"). See `<TimeRange>` for a span between two of them.
+ *   - `"hour"`     → hours as duration (e.g. 1.5 → "1 heure 30 minutes")
+ *   - `"minute"`   → minutes as duration (e.g. 90 → "1 heure 30 minutes")
+ *   - `"second"`   → seconds as duration (e.g. 90 → "1 minute 30 secondes")
+ *     These three promote to the largest fitting unit, days included (36 hours
+ *     → "1 jour et 12 heures"); see `forceUnit` to stay in the given unit.
+ *   - `"duration"` → duration string/object/number (seconds); `format="iso"` → ISO 8601
+ *   - `"relative"` → "dans 1 heure 30" / "En cours" / "il y a 2 heures"
+ *                    Handles past, present, and future.
+ *                    `format="short"` → "dans 1 h et 30 min"; `format="narrow"`
+ *                    → "+3 h"; `format="compact"` → "dans 1h30".
+ *                    `eventDuration` defaults to 0 (instantaneous: no "En cours" window).
+ *
+ * @param {number|string} [eventDuration=0]
+ *   Duration of the event in milliseconds, or a duration string (`"PT1H30M"`,
+ *   `"1hour30minute"`). Only used with `type="relative"`.
+ *   When omitted, the event is instantaneous (point in time, no "En cours" window).
+ * @param {boolean} [bare]
+ *   When true, strips the past-tense literal ("il y a", "ago") and returns only integer + unit.
+ *   Only applies to the past state of `type="relative"`.
+ * @param {"long"|"short"|"narrow"|"compact"|"numeric"|"timestring"|"iso"|{ weekday?: "long"|"short"|"narrow"|false, day?: boolean, month?: "long"|"short"|"narrow"|"numeric"|false }} [format="long"]
+ *   Controls the verbosity of the output. Defaults to `"long"` for all types.
+ *   `"long"`, `"short"`, `"narrow"` and `"compact"` are verbosities every `type`
+ *   writes. The three under them name a shape only some types have; a `type`
+ *   without that shape writes its `"long"` form and names the dropped word in
+ *   the console.
+ *   - `"short"`      → Intl short (e.g. "2 h et 15 min", short month for dates/datetimes, no weekday for datetime)
+ *   - `"narrow"`     → Intl narrow (e.g. "2h 15min", numeric month for datetime)
+ *   - `"compact"`    → custom compact notation (e.g. "2h15", no minute symbol
+ *                      when hours present). A date has nothing tighter than its
+ *                      digits, so `type="date"`/`"month"`/`"datetime"` write the
+ *                      all-digit spelling ("17/09/2026", "17/09 14:30")
+ *   - `"numeric"`    → numeric date, for `type="date"` and `type="month"` (e.g. "11/09/2026", "09/2026")
+ *   - `"timestring"` → clock display for `type="time"`, `type="minute"`, `type="hour"`, and `type="second"` (e.g. "14:30"; `type="second"` always writes the hours, "00:01:30" for 90)
+ *   - `"iso"`        → ISO 8601 string, only for `type="duration"` (e.g. "PT2H15M")
+ *   - an object      → `type="date"` only, one verbosity per part
+ *                      (`{ weekday: "long", month: "short" }`): a narrow card
+ *                      keeps the weekday whole, since that is what the eye
+ *                      lands on, and abbreviates the month, since that is
+ *                      where the characters are. `false` drops a part:
+ *                      `{ day: false, month: false }` is the weekday alone
+ *                      ("mardi"), `{ month: false }` weekday + day-of-month
+ *                      ("mardi 18").
+ * @param {boolean} [forceUnit=false]
+ *   Keeps the value in the unit named by `type` however big it gets, for
+ *   `type="hour"`, `"minute"` and `"second"`: 36 hours reads "36 heures"
+ *   instead of the default "1 jour et 12 heures". The default promotes to the
+ *   largest fitting unit because it reads better; force the unit when the unit
+ *   itself is the information (a quota, a counter).
+ * @param {number} [decimals]
+ *   `type="duration"` and `type="second"` only — how many decimals a fraction
+ *   of a second keeps, rounded: with `decimals={1}`, 1.234 reads "1,2 seconde"
+ *   and 1.96 "2 secondes"; a whole value is never padded ("12 secondes").
+ *   Without it the fraction is written to the millisecond ("1,234 seconde"). A
+ *   duration measured in milliseconds rarely comes out whole, and its last
+ *   digits are usually noise.
+ * @param {boolean} [pad=true]
+ *   `type="time"` + `format="compact"` only — whether the clock is written at a
+ *   fixed width. `true` (default) zero-pads the hour and always writes the
+ *   minutes ("08h00", "08h30"), so a column of times lines up. `false` writes
+ *   the shape one says out loud instead: bare hour, minutes only when there are
+ *   any ("8h", "8h30"). The spelled-out formats put their units in words and
+ *   need neither, so they ignore it.
+ * @param {"hour"|"minute"} [precision]
+ *   `type="time"` + `format="compact"` only, and rarely set by hand — whether a
+ *   zero minute is written ("8h00") or dropped ("8h"). Defaults to whatever
+ *   `pad` implies; the one reason to force `"minute"` on an unpadded clock is
+ *   to agree with a partner that has minutes of its own, which is what
+ *   `<TimeRange>` does for you.
+ * @param {boolean|"auto"} [year]
+ *   `type="date"` only — whether the year is written. `"auto"` writes it only
+ *   when the date is not in the current year, the way a calendar does
+ *   ("lundi 11 mai", but "samedi 1 janvier 2050"); `false` drops it ("30/07",
+ *   the day/month order still following the locale). Defaults to `"auto"`
+ *   for the spelled formats and to `true` for `format="numeric"`. A format
+ *   without the month (`{ month: false }`) never writes it.
+ * @param {boolean} [dayLabel]
+ *   When true and `type="date"`, appends the locale-aware relative label
+ *   ("hier", "aujourd'hui", "demain") when the date is yesterday, today, or tomorrow.
+ * @param {string} [lang]
+ *   BCP 47 locale tag (e.g. `"fr"`, `"en-US"`).
+ *   Defaults to `languagesSignal.value`: the browser's languages, as
+ *   `setPreferredLanguage`/`setSupportedLanguages` narrow them.
+ */
 const Time = props => {
   const {
     type
@@ -65317,6 +66117,20 @@ const TimeMinute = ({
       children: String(children)
     });
   }
+  if (!Number.isInteger(minutes)) {
+    // a fraction of a minute is read in seconds, the way formatMinuteDuration
+    // writes it ("1 minute et 30 secondes")
+    const clock = formatClock(Math.round(minutes * 60));
+    return jsx(TimeText, {
+      dateTime: clock,
+      ...props,
+      children: format === "timestring" ? clock : formatMinuteDuration(minutes, {
+        lang,
+        format,
+        forceUnit
+      })
+    });
+  }
   const totalHours = Math.floor(minutes / 60);
   const remainingMinutes = minutes % 60;
   const hh = String(totalHours).padStart(2, "0");
@@ -65346,6 +66160,7 @@ const TimeSecond = ({
   lang = languagesSignal.value,
   format = "long",
   forceUnit = false,
+  decimals,
   ...props
 }) => {
   if (children === undefined || children === null) {
@@ -65361,19 +66176,17 @@ const TimeSecond = ({
       children: String(children)
     });
   }
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor(seconds % 3600 / 60);
-  const s = seconds % 60;
-  const dateTime = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  const dateTime = formatClock(seconds);
   let text;
   if (format === "timestring") {
     // Always HH:MM:SS to avoid ambiguity with HH:MM time-of-day format
-    text = dateTime;
+    text = formatClock(seconds, decimals);
   } else {
     text = formatSecondDuration(seconds, {
       lang,
       format,
-      forceUnit
+      forceUnit,
+      decimals
     });
   }
   return jsx(TimeText, {
@@ -65426,6 +66239,7 @@ const TimeDuration = ({
   children,
   lang = languagesSignal.value,
   format = "long",
+  decimals,
   ...props
 }) => {
   if (children === undefined || children === null) {
@@ -65473,7 +66287,8 @@ const TimeDuration = ({
       ...props,
       children: formatDuration(duration, {
         lang,
-        format
+        format,
+        decimals
       })
     });
   }
@@ -65485,7 +66300,8 @@ const TimeDuration = ({
   }
   const text = formatDuration(duration, {
     lang,
-    format
+    format,
+    decimals
   });
   return jsx(TimeText, {
     dateTime: isoString,
@@ -65625,6 +66441,24 @@ const TimeRange = ({
   });
 };
 
+// "HH:MM:SS", the fraction of a second after a period ("00:00:01.234"): the
+// shape a `datetime` attribute reads, which takes up to 3 decimals.
+const formatClock = (seconds, decimals = 3) => {
+  const factor = 10 ** decimals;
+  const total = Math.round(seconds * factor);
+  const fraction = total % factor;
+  const totalSeconds = (total - fraction) / factor;
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor(totalSeconds % 3600 / 60);
+  const s = totalSeconds % 60;
+  const clock = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  if (fraction === 0) {
+    return clock;
+  }
+  const digits = String(fraction).padStart(decimals, "0").replace(/0+$/, "");
+  return `${clock}.${digits}`;
+};
+
 /**
  * Wraps multiple inputs together and handles keyboard navigation and paste
  * distribution between them.
@@ -65851,6 +66685,11 @@ const renderSafe = (value) => {
 };
 
 installImportMetaCssBuild(import.meta);
+/**
+ * The group a popup opens in, or null: what a Popover or a Dialog reads to know
+ * that its wall is the group's. Every popup provides null again to what it
+ * holds, so a popup opened from inside a popup is in front of it, not a peer.
+ */
 const PopupGroupContext = createContext(null);
 
 /**
@@ -66009,13 +66848,13 @@ const css$F = /* css */`@property --x-popup-group-top {
  * `navi-out-of-flow` like everything navi adds to a tree. See
  * docs/popup_backdrop.md.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   backdropVariant?: "auto" | "lift" | "discrete" | "invisible",
  *   backdropColor?: string,
  *   backdropFilter?: string,
  *   themeColor?: string | false,
  *   role?: string,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {"auto"|"lift"|"discrete"|"invisible"} [props.backdropVariant="auto"] -
@@ -68062,6 +68901,35 @@ const clipOf = (side, distance) => {
   return `inset(${UNCUT} ${UNCUT} ${UNCUT} ${cut})`;
 };
 
+/**
+ * The cross that closes the popup it sits in — reached as `<Popup.Close />`,
+ * `<Dialog.Close />` or `<Popover.Close />`. A discrete icon button sending
+ * `--navi-close`, which the nearest popup above it answers; the caller only
+ * decides where it goes (the right end of a header, most of the time).
+ *
+ * It is the way out of a popup, so it is the one affordance in there that the
+ * surrounding control's read-only and disabled do not reach: a read-only picker
+ * still opens (reading changes nothing) and hands its popup that read-only, and
+ * a cross wearing it would trap the user in a popup they were invited to read.
+ * A close button written by hand inherits it and refuses the press — which is
+ * the reason to use this one rather than a `<Button command="--navi-close" />`.
+ *
+ * Exempt from the state around it, never from the popup's own answer: the cross
+ * ASKS, and the popup decides — a dialog holding a form mid-send keeps the
+ * close, a Picker holding a value that does not validate keeps it too.
+ *
+ * @type {import("preact").FunctionComponent<{
+ *   label?: string,
+ *   iconSize?: number | string,
+ * } & Record<string, any>>}
+ * @param {string} [props.label] - What assistive tech reads for the cross
+ *   (navi's own "Close" text by default, in the active language).
+ * @param {number|string} [props.iconSize] - How big the cross is drawn, apart
+ *   from the box around it. Unset, the glyph follows the button's font size
+ *   like a character, and `size` moves glyph and padding together. Set it when
+ *   the cross stands in for an affordance the app draws elsewhere and has to
+ *   land on the same pixels: `padding="s" iconSize="m"`.
+ */
 const PopupClose = ({
   label,
   iconSize,
@@ -68310,6 +69178,9 @@ const TitlePseudoClasses = [":hover"];
  * step of a form — so only the title knows when it is there.
  */
 
+// The popup a title names: the nearest one around it. A surface that is no
+// popup of this kind but holds content of its own (a picker's callout) sets it
+// back to null, so a title in there names nothing rather than the popup around.
 const PopupTitleContext = createContext(null);
 
 /**
@@ -68319,10 +69190,10 @@ const PopupTitleContext = createContext(null);
  * announces the popup by it, and `getByRole("dialog", { name })` finds it.
  * An `aria-label`/`aria-labelledby` written on the popup itself wins over it.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
  *   id?: string,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  * } & Record<string, any>>}
  */
 const PopupTitle = props => {
@@ -68383,6 +69254,12 @@ const usePopupName = ({
 const NO_TITLE = [];
 
 installImportMetaCssBuild(import.meta);
+// Same need popover.jsx has for its own local renderer (see its
+// openLocalPopoverCount): a layer="local" dialog is a plain positioned element
+// in normal flow, so it gets none of the top layer's free "last shown wins" and
+// would paint under anything declared after it. A live count, not an
+// ever-growing counter, so the order stays small and resets once nothing is
+// open.
 let openLocalDialogCount = 0;
 const css$C = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
@@ -69457,7 +70334,7 @@ const css$C = /* css */`
  *   the dialog: its accessible name when neither `aria-label`/`aria-labelledby`
  *   nor a `<Dialog.Title>` names it. A Picker passes its trigger's.
  * @param {string} [props.openerAriaLabel] - The same, as a string.
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  */
 const Dialog = props => {
   import.meta.css = [css$C, "@jsenv/navi/src/layout/dialog.jsx"];
@@ -70293,8 +71170,10 @@ const useDialogProps = props => {
       // gap — the same thing its CSS width/height say (see [data-expand-x],
       // [data-expand-y]) — so the placement derives it instead of measuring
       // it: a measurement here lays out the dialog's whole content, rows and
-      // all, for a number already known.
-      const fill = expandX && expandY;
+      // all, for a number already known. A cap (maxWidth/maxHeight, a Picker's
+      // anchor ceiling) stretches it to less than that, and only a measured
+      // box can be centred.
+      const fill = expandX && expandY && !isSizeCapped(dialogEl);
       const pickOptions = {
         positionArea,
         container: positionedAncestor,
@@ -70808,6 +71687,14 @@ const switchTransitionsOn = dialogEl => {
   dialogEl.style.transitionProperty = "";
   dialogEl.removeAttribute("navi-transitions-off");
 };
+
+// Reads style, not layout: an unset cap is the guaranteed-invalid value its
+// @property gives it, and reads back as "". Catches a cap written inline by
+// the prop as well as one set from a stylesheet.
+const isSizeCapped = dialogEl => {
+  const computedStyle = getComputedStyle(dialogEl);
+  return computedStyle.getPropertyValue("--dialog-max-width") !== "" || computedStyle.getPropertyValue("--dialog-max-height") !== "";
+};
 const DIALOG_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", ":focus-within"];
 
 // Lets consumers pass animationDuration="0.5s" as a regular prop; Box maps
@@ -70833,6 +71720,11 @@ Dialog.Close = PopupClose;
 Dialog.Title = PopupTitle;
 
 installImportMetaCssBuild(import.meta);
+// Custom renderer only (layer="local") — count of currently-open instances,
+// see --popover-stack-order's own CSS comment for why a plain "last shown"
+// default doesn't happen for free the way it does for the top-layer
+// renderer. A live count (not an ever-growing counter) so the assigned
+// order stays small and resets to 0 once nothing is open.
 let openLocalPopoverCount = 0;
 const css$B = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
@@ -71440,7 +72332,7 @@ const css$B = /* css */`
  *   something names — these, `aria-label`/`aria-labelledby`, a
  *   `<Popover.Title>` — is a `dialog`, unless given another `role`: a name on
  *   an element with no role is read by nobody.
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  */
 const Popover = props => {
   import.meta.css = [css$B, "@jsenv/navi/src/layout/popover.jsx"];
@@ -72798,7 +73690,7 @@ const css$A = /* css */`@layer navi {
  *   content whose fresh state is its initial state: an edit left unsent at
  *   the close does not come back at the next opening (an untouched field
  *   needs none of this to show a new `defaultValue` — it follows one).
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  */
 const Popup = props => {
   import.meta.css = [css$A, "@jsenv/navi/src/layout/popup.jsx"];
@@ -74475,6 +75367,18 @@ const PickerConfirmBody = ({
   });
 };
 
+/**
+ * PickerNaviMinute — a custom minute picker that opens a number input.
+ *
+ * Renders a popover containing an `<input type="number">` pre-filled with the
+ * current value, plus Confirm / Clear / Cancel actions. The picker holds a
+ * number of minutes: its own field is a text one told
+ * `navi-input-type="minute"`, so the value is read back as a number and a
+ * min/max/step message speaks of minutes.
+ *
+ * Usage:
+ *   <Picker type="navi_minute" min={15} max={300} step={15} value={90} />
+ */
 const PickerNaviMinute = props => {
   const Next = useNextResolver();
   const {
@@ -74858,6 +75762,16 @@ const LoadingDotsSvg = () => {
   });
 };
 
+/**
+ * A loading indicator sized to match the surrounding text (1em × 1em).
+ * Inherits color from the current text color by default.
+ *
+ * @param {"circle"|"dots"} [props.variant="circle"] - Visual style of the indicator
+ * @param {string} [props.color="currentColor"] - Color of the indicator; inherits from CSS `color` by default
+ *
+ * Every other prop goes to the `Icon` it is drawn in: `size` is a font size
+ * (the indicator being 1em), `width`/`height` size it as a block.
+ */
 const LoadingIndicator = ({
   variant = "circle",
   ...props
@@ -74920,7 +75834,7 @@ const css$x = /* css */`@layer navi {
  * Everything about how it looks goes through a CSS var, so it can be set per
  * separator as a prop or once for a whole surface in CSS.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   vertical?: boolean,
  *   size?: string|number,
  *   color?: string,
@@ -76523,6 +77437,9 @@ const applySearchHighlight = (el, highlight) => {
 };
 
 installImportMetaCssBuild(import.meta);
+// Everything the list knows about its items — see list_items.js. Filled in by
+// the children as they render, read by everything that must reserve room for
+// what is not rendered, count what is, or know what stands above it.
 const ListItemsContext = createContext(null);
 // The group an item is declared in, by id (see ListItemGroup): what its count
 // and its separator are scoped to.
@@ -78038,6 +78955,19 @@ const useListScrollSync = ({
     // eslint-disable-next-line no-unused-expressions
     virtualItemSizeSignal.value;
   }
+  // The hold ending — the user reaching for the list, something else moving
+  // it, the item it opens on never coming — ends its hold on the document with
+  // it (see holdDocumentScroll), rather than at the next render, which nothing
+  // owes: an offset put back on this page meanwhile is the reader's.
+  const releaseDocumentHoldRef = useRef(null);
+  const letGo = () => {
+    startPlaceRef.current.userTookOver = true;
+    const releaseDocumentHold = releaseDocumentHoldRef.current;
+    if (releaseDocumentHold) {
+      releaseDocumentHoldRef.current = null;
+      releaseDocumentHold();
+    }
+  };
   // Set around a scroll the list performs itself. What it protects against is
   // not the scroll event as such, but what the listener would conclude from it:
   // the position it is about to read was chosen to keep the items where they
@@ -78271,7 +79201,7 @@ const useListScrollSync = ({
         }
         openAt = scrolledFallback;
         if (openAt === "start" || openAt === undefined) {
-          startPlaceRef.current.userTookOver = true;
+          letGo();
           return;
         }
       } else {
@@ -78423,13 +79353,39 @@ const useListScrollSync = ({
   }, []);
   // Held on an item of a list scrolling the document: where the document goes is
   // this list's to say, measured on the item, not the url's offset in pixels
-  // (see holdDocumentScroll).
+  // (see holdDocumentScroll). The hold read again: a layout effect of this
+  // commit may have let go already (see placeWhereHeld).
+  const routePage = useContext(RoutePageContext);
   useLayoutEffect(() => {
-    if (!heldSomewhere || getScroller() !== document.scrollingElement) {
+    if (!heldSomewhere || startPlaceRef.current.userTookOver || getScroller() !== document.scrollingElement) {
       return undefined;
     }
-    return holdDocumentScroll();
-  }, [heldSomewhere, scrollerElResolved]);
+    const releaseDocumentHold = holdDocumentScroll(routePage);
+    releaseDocumentHoldRef.current = releaseDocumentHold;
+    return () => {
+      releaseDocumentHoldRef.current = null;
+      releaseDocumentHold();
+    };
+  }, [heldSomewhere, scrolledWanted, scrollerElResolved]);
+  // A page kept while its route transition plays is hidden until it is taken
+  // down: nothing of the list can be measured there any more, and its scroller
+  // shows the page arriving (see route_page_context.js). So the list lets go of
+  // it, and stops answering its resizes and scrolls: measured hidden, every
+  // item stands at 0×0, and the top item put back where it was would scroll
+  // the page arriving by that item's offset. Kept mounted on purpose, so the
+  // listeners stay; what they would do is what ends.
+  const pageLeftRef = useRef(false);
+  useLayoutEffect(() => {
+    if (!routePage) {
+      return undefined;
+    }
+    return routePage.leavingSignal.subscribe(leaving => {
+      if (leaving) {
+        pageLeftRef.current = true;
+        letGo();
+      }
+    });
+  }, []);
   // What to do when the list's own geometry moves under it, kept fresh for the
   // observer below (which is installed once).
   const onGeometryChangeRef = useRef(null);
@@ -78463,18 +79419,15 @@ const useListScrollSync = ({
       return undefined;
     }
     const scrollerEl = getScroller();
-    const takeOver = () => {
-      startPlaceRef.current.userTookOver = true;
-    };
     const takeOverEvents = ["wheel", "touchstart", "pointerdown", "keydown"];
     for (const type of takeOverEvents) {
-      scrollerEl.addEventListener(type, takeOver, {
+      scrollerEl.addEventListener(type, letGo, {
         passive: true
       });
     }
     return () => {
       for (const type of takeOverEvents) {
-        scrollerEl.removeEventListener(type, takeOver);
+        scrollerEl.removeEventListener(type, letGo);
       }
     };
   }, [scrolledWanted, scrollerElResolved]);
@@ -78631,6 +79584,9 @@ const useListScrollSync = ({
       }
     };
     const observer = new ResizeObserver(entries => {
+      if (pageLeftRef.current) {
+        return;
+      }
       // A box that grows may be a box that starts to scroll — the scroller is
       // resolved again before anything is done about the resize, so that a
       // list which has outgrown a bounded ancestor stops holding on to the
@@ -79035,6 +79991,9 @@ const useListScrollSync = ({
     }
     const scrollerEl = getScroller();
     const onScroll = () => {
+      if (pageLeftRef.current) {
+        return;
+      }
       // Which way the user is going, read before the position is stored: what
       // the window keeps ahead is ahead of this.
       const previousScroll = currentScrollRef.current;
@@ -79092,7 +80051,7 @@ const useListScrollSync = ({
       const low = way.from < way.to ? way.from : way.to;
       const high = way.from < way.to ? way.to : way.from;
       if (position < low - 1 || position > high + 1) {
-        place.userTookOver = true;
+        letGo();
       }
     };
     // A page-level scroller does not emit "scroll" on the element itself
@@ -81053,7 +82012,7 @@ const LIST_ITEM_STYLE_CSS_VARS = {
  * of it. Props not listed here are forwarded to the rendered <li> (Box layout
  * props included).
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   id?: string,
  *   selectable?: boolean,
  *   value?: any,
@@ -81062,14 +82021,14 @@ const LIST_ITEM_STYLE_CSS_VARS = {
  *   pointed?: boolean,
  *   selectableArea?: "all" | "manual",
  *   skeleton?: boolean,
- *   error?: boolean | import("ignore:preact").ComponentChildren,
+ *   error?: boolean | import("preact").ComponentChildren,
  *   onErrorDismiss?: (event: Event) => void,
  *   loading?: boolean | "adding" | "removing" | "updating",
  *   readOnly?: boolean,
  *   filtered?: boolean,
  *   hidden?: boolean,
  *   matchInfo?: {match: boolean, matchScore?: number, matchRanges?: Array<[number, number]>},
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {string} [props.id]
@@ -81104,7 +82063,7 @@ const LIST_ITEM_STYLE_CSS_VARS = {
  *   real item. This is what a `renderSkeleton` returns for an item on its way;
  *   Box layout props (padding…) pass through so the placeholder can match the
  *   real items' metrics.
- * @param {boolean|import("ignore:preact").ComponentChildren} [props.error]
+ * @param {boolean|import("preact").ComponentChildren} [props.error]
  *   What this item stood for failed: the message replaces its content, styled
  *   like the list's own error. `true` shows a generic sentence. When
  *   `onErrorDismiss` is given, a dismiss button is drawn next to the message
@@ -81244,21 +82203,21 @@ const VISIBILITY_HIDDEN_STYLE = {
  * Several runs can live in one list, next to plain `<List.Item>` children and
  * inside `<List.Group>`s; each takes its place in declaration order.
  *
- * @type {import("ignore:preact").FunctionComponent<{
- *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("ignore:preact").ComponentChildren,
+ * @type {import("preact").FunctionComponent<{
+ *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("preact").ComponentChildren,
  *   findText?: (item: any, index: number) => string,
  *   items?: any[],
  *   itemsAction?: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
  *   debounce?: number,
  *   count?: number,
  *   groupBy?: (item: any, index: number) => any,
- *   renderGroupLabel?: (item: any, index: number) => import("ignore:preact").ComponentChildren,
+ *   renderGroupLabel?: (item: any, index: number) => import("preact").ComponentChildren,
  *   groupLabelProps?: (item: any, index: number) => object,
  *   pageSize?: number,
  *   memoryBudget?: number,
- *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   renderSkeleton?: false | ((index: number) => import("preact").ComponentChildren),
  *   itemSize?: (index: number) => number,
- *   renderError?: (failure: {error: any, retry: () => void, start: number, end: number}) => import("ignore:preact").ComponentChildren,
+ *   renderError?: (failure: {error: any, retry: () => void, start: number, end: number}) => import("preact").ComponentChildren,
  *   onRequestStateChange?: (state: {busy: boolean, refreshing: boolean, range: {start: number, end: number}|null}) => void,
  *   onCountChange?: (count: number|undefined) => void,
  * }>}
@@ -82853,7 +83812,7 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  * List — generic virtualized scroll container.
  * Items must use <List.Item> to participate in tracking.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   selectable?: boolean,
  *   multiple?: boolean,
  *   deselectable?: boolean,
@@ -82874,16 +83833,16 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   scroller?: "self" | "parent" | "document" | Element | {current: Element},
  *   hoverWhileScrolling?: boolean,
  *   scrollResetOnNavigation?: boolean,
- *   fallback?: import("ignore:preact").ComponentChildren,
- *   searchFallback?: import("ignore:preact").ComponentChildren,
+ *   fallback?: import("preact").ComponentChildren,
+ *   searchFallback?: import("preact").ComponentChildren,
  *   searchText?: string,
  *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
  *   loading?: boolean,
- *   loadingFallback?: "skeleton" | "loader" | import("ignore:preact").ComponentChildren,
+ *   loadingFallback?: "skeleton" | "loader" | import("preact").ComponentChildren,
  *   loadingSkeletonCount?: number,
- *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
- *   error?: boolean | import("ignore:preact").ComponentChildren,
- *   separator?: boolean | import("ignore:preact").ComponentChildren,
+ *   renderSkeleton?: false | ((index: number) => import("preact").ComponentChildren),
+ *   error?: boolean | import("preact").ComponentChildren,
+ *   separator?: boolean | import("preact").ComponentChildren,
  *   itemTransition?: boolean,
  *   lockSize?: boolean,
  *   horizontal?: boolean,
@@ -82897,7 +83856,7 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   expandX?: boolean,
  *   expandY?: boolean,
  *   expand?: boolean,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {string} [props.columns]
@@ -82957,7 +83916,7 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   have, so nothing moves when they arrive. Used for the items a `<List.Items>`
  *   stands for and does not hold yet, and for the placeholder items drawn while
  *   the whole list is `loading`. Defaults to a bare `<List.Item skeleton>`.
- * @param {"skeleton"|"loader"|import("ignore:preact").ComponentChildren} [props.loadingFallback="skeleton"]
+ * @param {"skeleton"|"loader"|import("preact").ComponentChildren} [props.loadingFallback="skeleton"]
  *   What to display in place of the items while `loading` — that is, while
  *   there is nothing to show at all: `"skeleton"` renders
  *   `loadingSkeletonCount` placeholder items (look:
@@ -83141,6 +84100,17 @@ const List = /*#__PURE__*/Object.assign(ListResolved, {
   Group: ListItemGroup
 });
 
+/**
+ * PickerNaviTime — a fully custom time picker driven by min/max/step.
+ *
+ * Unlike the native `<input type="time">`, this picker only exposes the exact
+ * slots generated from min/max/step, so the user can never pick an out-of-range
+ * or out-of-step value. The popover content is a selectable `List` of the
+ * available slots; picking one closes the popover and submits the value.
+ *
+ * Usage:
+ *   <Picker type="navi_time" min="08:00" max="18:00" step="00:30" />
+ */
 const PickerNaviTime = props => {
   const Next = useNextResolver();
   const {
@@ -83248,18 +84218,20 @@ const createBadgeRegistry = () => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$u = /* css */`@layer navi;
+const css$u = /* css */`@layer navi {
+  .navi_badge {
+    --font-size: .7em;
+    --badge-padding-x-default: .8em;
+    --badge-padding-y-default: .4em;
+  }
+}
 
 .navi_badge {
-  --font-size: .7em;
-  --badge-padding-x-default: .8em;
-  --badge-padding-y-default: .4em;
   --x-badge-padding-top: var(--badge-padding-top, var(--badge-padding-y, var(--badge-padding, var(--badge-padding-y-default))));
   --x-badge-padding-right: var(--badge-padding-right, var(--badge-padding-x, var(--badge-padding, var(--badge-padding-x-default))));
   --x-badge-padding-bottom: var(--badge-padding-bottom, var(--badge-padding-y, var(--badge-padding, var(--badge-padding-y-default))));
   --x-badge-padding-left: var(--badge-padding-left, var(--badge-padding-x, var(--badge-padding, var(--badge-padding-x-default))));
   --x-background: var(--background, light-dark(#e0e0e0, #3a3a3a));
-  --x-background-color: var(--background-color, var(--x-background));
   --x-color: var(--color, white);
   max-width: 200px;
   padding-top: var(--x-badge-padding-top);
@@ -83270,7 +84242,6 @@ const css$u = /* css */`@layer navi;
   font-size: var(--font-size);
   text-box: trim-both cap alphabetic;
   background: var(--x-background);
-  background-color: var(--x-background-color);
   border-radius: 1em;
   display: inline;
   position: relative;
@@ -83396,7 +84367,6 @@ const BadgeStyleCSSVars = {
   paddingRight: "--badge-padding-right",
   paddingBottom: "--badge-padding-bottom",
   paddingLeft: "--badge-padding-left",
-  backgroundColor: "--background-color",
   background: "--background",
   borderColor: "--border-color",
   color: "--color",
@@ -83570,7 +84540,7 @@ const useBadgeRegistry = (children, enabled) => {
  * shrinkWrap on its own builds the measurement ghost: under maxLines the list
  * is measured in place, once the rows are known.
  *
- * @param {import("ignore:preact").ComponentChildren} [fallback]
+ * @param {import("preact").ComponentChildren} [fallback]
  *   Rendered in place of the badges when there is none. Without it an empty
  *   list renders nothing at all. In a <Picker> this is the only placeholder
  *   the user gets — a picker given a `ui` does not draw its own — so pass the
@@ -84204,10 +85174,10 @@ const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
  * — a row being read still says what was picked, it just no longer offers to
  * unpick it.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value: any,
  *   commandFor?: string,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {any} value The value this chip stands for — one entry of what the
@@ -84473,6 +85443,7 @@ const css$r = /* css */`@layer navi {
   .navi_picker {
     --picker-border-radius: var(--navi-control-border-radius);
     --picker-border-width: var(--navi-control-border-width);
+    --border-width: var(--picker-border-width);
     --picker-outline-width: var(--navi-focus-outline-width);
     --picker-outline-offset: calc(-.5 * var(--picker-outline-width));
     --picker-outline-color: var(--navi-focus-outline-color);
@@ -84512,6 +85483,111 @@ const css$r = /* css */`@layer navi {
     --picker-align-x-default: flex-start;
     --picker-align-y-default: center;
     --picker-text-align-default: initial;
+    font-size: var(--picker-font-size);
+    font-family: var(--picker-font-family);
+    line-height: var(--navi-control-line-height);
+  }
+
+  .navi_picker[data-variant="icon"] {
+    --picker-border-width: 0px;
+    --picker-border-color: transparent;
+    --picker-border-color-hover: var(--picker-border-color);
+    --picker-border-color-readonly: var(--picker-border-color);
+    --picker-border-color-disabled: var(--picker-border-color);
+    --picker-background-color: transparent;
+    --picker-background-color-hover: var(--picker-background-color);
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+    --picker-icon-color: currentColor;
+  }
+
+  .navi_picker[data-variant="discrete"] {
+    --picker-border-width: 0px;
+    --picker-border-color: transparent;
+    --picker-border-color-hover: var(--picker-border-color);
+    --picker-border-color-readonly: var(--picker-border-color);
+    --picker-border-color-disabled: var(--picker-border-color);
+    --picker-background-color: transparent;
+    --picker-background-color-hover: color-mix(in srgb,
+        currentColor 8%,
+        var(--picker-background-color));
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+  }
+
+  .navi_picker[data-variant="headless"] {
+    --picker-padding-x-default: 0;
+    --picker-padding-y-default: 0;
+    --picker-border-width: 0px;
+    --picker-border-color: transparent;
+    --picker-outline-width: 0px;
+    --picker-border-color-hover: var(--picker-border-color);
+    --picker-border-color-readonly: var(--picker-border-color);
+    --picker-border-color-disabled: var(--picker-border-color);
+    --picker-background-color: transparent;
+    --picker-background-color-hover: var(--picker-background-color);
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+    --picker-icon-color: currentColor;
+  }
+
+  .navi_picker[data-variant="bare"] {
+    --picker-padding-x-default: 0;
+    --picker-padding-y-default: 0;
+    --picker-align-y-default: stretch;
+    --picker-border-width: 0px;
+    --picker-border-color: transparent;
+    --picker-border-color-hover: var(--picker-border-color);
+    --picker-border-color-readonly: var(--picker-border-color);
+    --picker-border-color-disabled: var(--picker-border-color);
+    --picker-background-color: transparent;
+    --picker-background-color-hover: var(--picker-background-color);
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+    --picker-icon-color: currentColor;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+  }
+
+  .navi_picker[data-variant="button"] {
+    --picker-padding-x-default: var(--navi-button-padding-x-default);
+    --picker-padding-y-default: var(--navi-button-padding-y-default);
+    --picker-align-x-default: center;
+    --picker-background-color: var(--navi-button-background-color);
+    --picker-border-color-readonly: color-mix(in srgb,
+        var(--picker-border-color) 30%,
+        var(--navi-surface-color));
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-color-readonly: color-mix(in srgb,
+        var(--picker-color) 30%,
+        transparent);
+    --picker-border-color-disabled: var(--picker-border-color-readonly);
+    --picker-background-color-disabled: var(--picker-background-color-readonly);
+    --picker-color-disabled: var(--picker-color-readonly);
+    --picker-text-align-default: center;
+  }
+
+  .navi_picker[data-variant="text"] {
+    --picker-padding-x-default: 0;
+    --picker-padding-y-default: 0;
+    --picker-border-width: 0px;
+    --picker-border-color: transparent;
+    --picker-border-color-hover: var(--picker-border-color);
+    --picker-border-color-readonly: var(--picker-border-color);
+    --picker-border-color-disabled: var(--picker-border-color);
+    --picker-background-color: transparent;
+    --picker-background-color-hover: var(--picker-background-color);
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  .navi_picker[data-icon] {
+    --picker-padding-x-default: 0;
+    --picker-padding-y-default: 0;
+    --picker-align-x-default: center;
   }
 }
 
@@ -84534,10 +85610,7 @@ const css$r = /* css */`@layer navi {
   box-sizing: border-box;
   max-width: 100%;
   color: var(--x-picker-color);
-  font-size: var(--picker-font-size);
-  font-family: var(--picker-font-family);
   text-align: inherit;
-  line-height: var(--navi-control-line-height);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--picker-border-radius));
   border-top-right-radius: var(--x-corner-top-right-radius, var(--picker-border-radius));
   border-bottom-right-radius: var(--x-corner-bottom-right-radius, var(--picker-border-radius));
@@ -84779,48 +85852,7 @@ const css$r = /* css */`@layer navi {
     --x-picker-border-color: var(--callout-color);
   }
 
-  &[data-variant="icon"] {
-    --picker-border-width: 0px;
-    --picker-border-color: transparent;
-    --picker-border-color-hover: var(--picker-border-color);
-    --picker-border-color-readonly: var(--picker-border-color);
-    --picker-border-color-disabled: var(--picker-border-color);
-    --picker-background-color: transparent;
-    --picker-background-color-hover: var(--picker-background-color);
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-background-color-disabled: var(--picker-background-color);
-    --picker-icon-color: currentColor;
-  }
-
-  &[data-variant="discrete"] {
-    --picker-border-width: 0px;
-    --picker-border-color: transparent;
-    --picker-border-color-hover: var(--picker-border-color);
-    --picker-border-color-readonly: var(--picker-border-color);
-    --picker-border-color-disabled: var(--picker-border-color);
-    --picker-background-color: transparent;
-    --picker-background-color-hover: color-mix(in srgb,
-        currentColor 8%,
-        var(--picker-background-color));
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-background-color-disabled: var(--picker-background-color);
-  }
-
   &[data-variant="headless"] {
-    --picker-padding-x-default: 0;
-    --picker-padding-y-default: 0;
-    --picker-border-width: 0px;
-    --picker-border-color: transparent;
-    --picker-outline-width: 0px;
-    --picker-border-color-hover: var(--picker-border-color);
-    --picker-border-color-readonly: var(--picker-border-color);
-    --picker-border-color-disabled: var(--picker-border-color);
-    --picker-background-color: transparent;
-    --picker-background-color-hover: var(--picker-background-color);
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-background-color-disabled: var(--picker-background-color);
-    --picker-icon-color: currentColor;
-
     & > .navi_picker_box {
       z-index: -1;
       position: absolute;
@@ -84829,23 +85861,6 @@ const css$r = /* css */`@layer navi {
   }
 
   &[data-variant="bare"] {
-    --picker-padding-x-default: 0;
-    --picker-padding-y-default: 0;
-    --picker-align-y-default: stretch;
-    --picker-border-width: 0px;
-    --picker-border-color: transparent;
-    --picker-border-color-hover: var(--picker-border-color);
-    --picker-border-color-readonly: var(--picker-border-color);
-    --picker-border-color-disabled: var(--picker-border-color);
-    --picker-background-color: transparent;
-    --picker-background-color-hover: var(--picker-background-color);
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-background-color-disabled: var(--picker-background-color);
-    --picker-icon-color: currentColor;
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-
     & > .navi_picker_box {
       min-height: 0;
     }
@@ -84880,39 +85895,8 @@ const css$r = /* css */`@layer navi {
     }
   }
 
-  &[data-variant="button"] {
-    --picker-padding-x-default: var(--navi-button-padding-x-default);
-    --picker-padding-y-default: var(--navi-button-padding-y-default);
-    --picker-align-x-default: center;
-    --picker-background-color: var(--navi-button-background-color);
-    --picker-border-color-readonly: color-mix(in srgb,
-        var(--picker-border-color) 30%,
-        var(--navi-surface-color));
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-color-readonly: color-mix(in srgb,
-        var(--picker-color) 30%,
-        transparent);
-    --picker-border-color-disabled: var(--picker-border-color-readonly);
-    --picker-background-color-disabled: var(--picker-background-color-readonly);
-    --picker-color-disabled: var(--picker-color-readonly);
-    --picker-text-align-default: center;
-  }
-
   &[data-variant="text"] {
-    --picker-padding-x-default: 0;
-    --picker-padding-y-default: 0;
-    --picker-border-width: 0px;
-    --picker-border-color: transparent;
-    --picker-border-color-hover: var(--picker-border-color);
-    --picker-border-color-readonly: var(--picker-border-color);
-    --picker-border-color-disabled: var(--picker-border-color);
-    --picker-background-color: transparent;
-    --picker-background-color-hover: var(--picker-background-color);
-    --picker-background-color-readonly: var(--picker-background-color);
-    --picker-background-color-disabled: var(--picker-background-color);
-    font-size: inherit;
     text-underline-offset: .2em;
-    font-family: inherit;
     text-decoration: underline dotted;
 
     &[data-hover] {
@@ -84921,10 +85905,6 @@ const css$r = /* css */`@layer navi {
   }
 
   &[data-icon] {
-    --picker-padding-x-default: 0;
-    --picker-padding-y-default: 0;
-    --picker-align-x-default: center;
-
     & > .navi_picker_box {
       min-height: 0;
     }
@@ -85359,13 +86339,13 @@ const PickerButton = props => {
  * It goes when there is nothing to take out and when nothing can be changed, so
  * a caller places it once and never asks whether to draw it.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   size?: number | string,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  * } & Record<string, any>>}
  * @param {number|string} [size="inherit"] How big the cross is drawn, as
  *   `<Icon size>` reads it — "inherit" takes the size of the text around it.
- * @param {import("ignore:preact").ComponentChildren} [children] The icon, in place of
+ * @param {import("preact").ComponentChildren} [children] The icon, in place of
  *   the cross. Anything else goes to the `<Button>` underneath (`variant`,
  *   `paddingX`, `aria-label`, …).
  */
@@ -85696,6 +86676,580 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
   ColorSvg
 });
 
+/**
+ * Button-like trigger that opens a picker (native or custom popup) when clicked.
+ *
+ * Without `children`, opens the browser-native picker for the given `type`.
+ * With `children`, opens a popover (desktop) or dialog (mobile) containing the children.
+ * Pass `mode="popover"` or `mode="dialog"` to override the automatic choice.
+ * Either way the popup is a `dialog`, named by a `<Popup.Title>` in the
+ * children (see `popupAriaLabelledBy`), and the trigger answers to `combobox` —
+ * `button` under `picksNothing` — with `aria-haspopup="dialog"` and
+ * `aria-expanded` (see docs/testid.md).
+ *
+ * `type="confirm"` is the picker that asks "are you sure?" before doing what it
+ * stands for: its popup is the question, `ui` its label, and yes runs its
+ * `action` and triggers its `command` once the popup has closed (the command
+ * follows the action, and only if it succeeded) — see
+ * picker_confirm.jsx, and `message`, `confirmLabel`, `cancelLabel`,
+ * `focusOnOpen` below.
+ *
+ * @type {import("preact").FunctionComponent<{
+ *   type?: "date" | "month" | "week" | "time" | "datetime" | "duration" | "color" | "file" | "text" | "object" | "array" | "confirm" | "navi_time" | "navi_minute" | "navi_number" | "navi_percentage",
+ *   value?: any,
+ *   defaultValue?: any,
+ *   name?: string,
+ *   placeholder?: import("preact").ComponentChildren,
+ *   ui?: import("preact").ComponentChildren | "default" | import("preact").ComponentType<{ value: any, loading: boolean, interactive: boolean }>,
+ *   required?: boolean,
+ *   min?: Date | string | number,
+ *   max?: Date | string | number,
+ *   step?: string | number,
+ *   disabled?: boolean,
+ *   readOnly?: boolean,
+ *   openWhileReadOnly?: boolean,
+ *   error?: boolean | string,
+ *   uiAction?: (value: any, event: Event) => void,
+ *   action?: (value: any, { event, signal }: { event: Event, signal: AbortSignal }) => void,
+ *   children?: import("preact").ComponentChildren,
+ *   mode?: "popover" | "dialog" | "callout",
+ *   openOn?: "press" | "longpress" | "contextmenu" | string | string[],
+ *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "lifting" | `slide-from-${string}` | { open: boolean | "auto" | "fading" | "scaling" | "sliding" | `slide-from-${string}`, close: "lifting" },
+ *   lift?: "box" | "scene",
+ *   liftAnchor?: Element | { current: Element } | string,
+ *   animationDuration?: string,
+ *   calloutStatus?: "info" | "warning" | "error" | "success" | "none",
+ *   calloutIcon?: boolean,
+ *   calloutCloseButton?: boolean,
+ *   calloutCloseByScroll?: boolean | number,
+ *   popoverMode?: "nearby" | "overlay",
+ *   positionArea?: string,
+ *   popupWidthFitContent?: boolean,
+ *   loadingOutline?: "custom",
+ *   loadingOutlineInset?: number,
+ *   variant?: "icon" | "circle" | "headless" | "discrete" | "button" | "text" | "bare" | "picker",
+ *   icon?: boolean,
+ *   alignX?: "start" | "center" | "end",
+ *   alignY?: "start" | "center" | "end" | "stretch",
+ *   rightSlotIcon?: import("preact").ComponentChildren,
+ *   rightSlotIconSize?: number | string,
+ *   rightSlot?: import("preact").ComponentChildren,
+ *   chevron?: "end" | "start" | "hang-end",
+ *   clearConfirm?: string | import("preact").ComponentChildren,
+ *   message?: import("preact").ComponentChildren,
+ *   confirmLabel?: import("preact").ComponentChildren,
+ *   cancelLabel?: import("preact").ComponentChildren,
+ *   focusOnOpen?: "confirm" | "cancel" | "none",
+ *   onConfirm?: (confirmEvent: CustomEvent) => void,
+ *   onOpen?: (openEvent: CustomEvent) => void,
+ *   onClose?: (closeEvent: CustomEvent) => void,
+ *   maxLines?: number,
+ *   slotSpacing?: number | string,
+ *   popoverMaxHeight?: number | string,
+ *   dialogMinWidth?: number | string,
+ *   dialogMinHeight?: number | string,
+ *   dialogMaxWidth?: number | string,
+ *   dialogMaxHeight?: number | string,
+ *   popupBackgroundColor?: string,
+ *   popupBorderRadius?: number | string,
+ *   popupBoxShadow?: string,
+ *   dialogBorderWidth?: number | string,
+ *   clearable?: boolean,
+ *   picksNothing?: boolean,
+ *   standalone?: boolean,
+ *   popupLayer?: "top" | "local",
+ *   popupTestId?: string,
+ *   popupAriaLabel?: string,
+ *   popupAriaLabelledBy?: string,
+ *   popupAriaDescribedBy?: string,
+ *   confirmTestId?: string,
+ *   cancelTestId?: string,
+ *   mount?: "always" | "idle" | "from-first-open" | "while-opened",
+ *   dialogExpand?: boolean,
+ *   dialogExpandX?: boolean,
+ *   dialogExpandY?: boolean,
+ *   dialogSizeFromAnchor?: boolean,
+ *   dockedOnSmallTouchScreen?: boolean | "top" | "bottom",
+ *   marginWithContainer?: number | string,
+ *   anchor?: import("preact").RefObject<HTMLElement> | HTMLElement,
+ *   escapeEffect?: "cancel" | "close",
+ *   pressOutside?: "close" | "cancel" | "capture",
+ *   backdrop?: boolean,
+ *   backdropVariant?: "auto" | "lift" | "discrete" | "invisible",
+ *   backdropColor?: string,
+ *   backdropFilter?: string,
+ *   ref?: import("preact").RefObject<HTMLElement>,
+ *   [key: string]: any,
+ * }>}
+ * @param {string} [popupBackgroundColor] The popup's surface. Left out it is
+ *   the one every navi popup uses (`--navi-popup-background-color`, which
+ *   follows the theme) — the trigger's own `backgroundColor` is not it, so a
+ *   variant that paints the trigger transparent leaves the popup a real sheet.
+ * @param {number|string} [popupBorderRadius] The popup's corners. Left out they
+ *   echo the trigger's `borderRadius`.
+ * @param {string} [popupBoxShadow] The popup's shadow, popover or dialog. Left
+ *   out it is the one every navi popup casts. `"none"` for a popup that is
+ *   not a sheet — a card lifted out of a page draws its own edges, and the
+ *   popup only carries it (see `dialogSizeFromAnchor`).
+ * @param {"press"|"longpress"|"contextmenu"|string|string[]} [openOn="press"]
+ *   What opens the popup. The press, by default — the way a native select
+ *   opens. Any other name is an interaction navi detects (see
+ *   docs/interactions.md: `"longpress"`, `"contextmenu"`, `"double_click"`…), or
+ *   a list of them — `["longpress", "contextmenu"]` is the hold on a phone and
+ *   the right click at a desk. The picker declares it on itself, so it is
+ *   arbitrated like any other gesture: a swipe on the same card takes the
+ *   press a hold would have taken. A tap then opens nothing — the press stays
+ *   free for what the `ui` holds: a link in the card navigates, a button in it
+ *   presses, a picker in it opens on its own click, with nothing to declare
+ *   (`selfInteractions` is for a drawing that DOES open on the press). The
+ *   trigger says so under the mouse too: it drops the hand cursor, which is
+ *   the press's promise, and every pixel of the drawing keeps the cursor it
+ *   would have on its own. That is what lets a whole card be a picker without
+ *   every touch on it opening the sheet — and the keyboard keeps its ways in
+ *   (Enter, Space, the arrows). A hold declared INSIDE the card (`interactions={{ longpress }}`
+ *   on something it holds) answers before this one: the nearer hold takes the
+ *   press, the way a click is the innermost target's. Being a gesture, the open goes through
+ *   the interaction gate as one: a `readOnly` picker refuses it and says so
+ *   where the finger is, whatever `openWhileReadOnly` says.
+ * @param {number} [maxLines=1] How many lines the value may take before it is
+ *   cut with an ellipsis — `Text`'s `maxLines`, put on the value box, and
+ *   granted to a `BadgeList` in the `ui`, which caps its rows to it (see
+ *   max_lines_context.js). `variant="text"` and `variant="bare"` are not
+ *   clamped: their drawing is the caller's own, a `Text` in the `ui` cuts
+ *   itself with its own `maxLines`. See docs/typography.md.
+ * @param {import("preact").ComponentChildren | "default" | import("preact").ComponentType} [ui] What the
+ *   trigger draws in place of the value's default rendering (a date, a list
+ *   joined by commas…) — and then all it draws: `placeholder` is not shown
+ *   next to it, and an empty value is not greyed as a placeholder either: what
+ *   this draws when the picker holds nothing may well be an answer ("no
+ *   filter", "anywhere"), so its empty look is the caller's. A `ui` must
+ *   therefore say on its own that the picker is empty, and take the same room
+ *   empty as it does filled. A <BadgeList> gets both from its `fallback` — the
+ *   placeholder text, as plain text, see docs/typography.md#badgelist.
+ *   `"default"` draws nothing in the slot at all.
+ *
+ *   Under `variant="icon"` there is no value to draw, so this IS the trigger:
+ *   left out it is the icon the right slot would have shown (`rightSlotIcon`,
+ *   or the chevron), and given it is drawn instead — one icon of the caller's
+ *   own, and nothing else.
+ *
+ *   Under `variant="bare"` it is the trigger as well, and the picker adds
+ *   nothing around it: whatever this draws is what the picker measures. Its
+ *   own padding, its own lines, its own corners — a `<Box>` here gives a
+ *   picker the exact box that `<Box>` has on its own. Anything interactive
+ *   inside it takes its clicks back with `data-self-interactions`, the press
+ *   everywhere else opening the popup. There is no right slot beside it either,
+ *   so what a field would have got from navi this drawing places itself: a
+ *   `<Picker.Clear />` where the cross belongs, laid out like anything else it
+ *   holds. What the picker catches the press over is that box and no more, so
+ *   a drawing that paints outside it on purpose — an affordance in the margin
+ *   beside it, out of the flow so the rest keeps its width — is drawn and
+ *   opens nothing; `pressPadding` is how far the press area follows it out
+ *   there. The chevron itself is the `chevron` prop's to draw and place.
+ *
+ *   A drawing that follows what the picker HOLDS — the value the popup just
+ *   closed on, before the server has answered, the same state navi's own
+ *   default `ui` reads, rolled back if the action fails (`resetOnError`) —
+ *   reads it one of two ways. As a component, `ui={MyCard}`: the picker
+ *   renders it and hands it `value`, `loading` and `interactive` as props.
+ *   As an element, `ui={<MyCard game={game} />}`, with `usePickerState()`
+ *   inside it returning the same three — for a drawing that needs props of
+ *   its own as well. Either way a card shows the score the moment the sheet
+ *   leaves and takes it back on a refusal, with nothing held by the caller.
+ *   `loading` is the wait it wears meanwhile: navi draws its loading outline
+ *   on every trigger, two pixels out of the box. On a card-sized
+ *   `variant="bare"` that run sits on the card's own border and reads as a
+ *   border blinking; `loadingOutlineInset` moves it clear of it. And when the
+ *   picker's box is not the shape of what waits, `loadingOutline="custom"`
+ *   lets the drawing draw the wait itself, from that flag or from
+ *   `[data-loading]` on the picker root in css.
+ * @param {boolean} [readOnly] Nothing in this picker can be changed — and it
+ *   still opens, so what is in the popup can be read: everything in there is
+ *   held read-only in turn, each control greying out and saying why on its own.
+ *   Which is the point of opening it at all: a picker's answer often exists
+ *   only in the shape the popup draws (a plan with one tile ringed, a wheel
+ *   stopped on a time), and the trigger's one line is a summary of it, not the
+ *   whole of it. The clear cross goes, closing commits nothing, and a `value`
+ *   the popup would otherwise have confirmed stays a suggestion.
+ *   A picker with no `children` opens the browser's own picker instead, and
+ *   that one cannot be held read-only — so it goes on refusing (see
+ *   PickerNative).
+ * @param {boolean} [openWhileReadOnly=true] Pass false to make `readOnly`
+ *   refuse the open as well, for a popup with nothing to read: a form of
+ *   controls to fill in, a menu of gestures. Opening then only shows what is
+ *   refused, so the picker says why on the trigger instead — where the
+ *   interaction happened. A busy picker follows the same rule: it still
+ *   opens to be read while its action runs, and with `false` the press is
+ *   refused with the wait as its reason — what a card that is syncing wants
+ *   for the sheet that would write it again.
+ * @param {boolean|string} [error] Something went wrong around this picker (its
+ *   content failed to load, its value could not be resolved…). Shown as a
+ *   callout on the trigger, open or closed — the caller has nothing to place.
+ *   Dismissing it discards that error; a new `error` value raises another one.
+ * @param {string} [id] What the popup's open state is kept under in the
+ *   history entry: a screen left and come back to finds the picker open, and
+ *   in dialog mode the opening is an entry of its own, closed by the back
+ *   button before the screen is left. Left out, the key is a generated id,
+ *   which names one mount: the state survives neither leaving the screen nor a
+ *   reload. A picker whose popup leads somewhere (a link inside it) has one.
+ * @param {"popover"|"dialog"|"callout"} [mode] Which popup the children open
+ *   in. Left out, a popover on a large screen and a dialog on a narrow one.
+ *   `"callout"` shows them in the picker's own callout — the speech bubble its
+ *   constraints speak in, with its status icon, its cross and its arrow on
+ *   the trigger — for a tooltip that opens on a press. It closes the way a
+ *   callout does: its cross, Escape, a click outside.
+ * @param {"info"|"warning"|"error"|"success"|"none"} [calloutStatus]
+ *   `mode="callout"`: what the callout says about what it holds — its border,
+ *   its icon, and whether a click outside closes it (an "error" stays).
+ *   `"none"` is a plain tooltip: no icon, a neutral frame. "info" by default,
+ *   "none" under `variant="text"`. The trigger's default icon is the
+ *   callout's own status icon in that status (see `CalloutStatusIcon`) — left
+ *   out, the trigger is that icon; `variant="circle"` draws it round. The callout's arrow points at
+ *   the middle of the trigger (`data-callout-arrow-x="center"` unless the
+ *   picker says otherwise).
+ * @param {boolean} [calloutIcon] `mode="callout"`: whether the callout shows
+ *   its status icon beside what it holds. On by default, off under
+ *   `variant="text"` — a word asks for a plain bubble — and never shown
+ *   without a status, whatever this says.
+ * @param {boolean} [calloutCloseButton=true] `mode="callout"`: pass false to
+ *   take the cross off the callout. It still closes on Escape, a click
+ *   outside, and a `--navi-close` from what it holds — for a tooltip that is
+ *   read rather than dismissed. Off by nobody's default: a text trigger
+ *   keeps the cross unless told not to.
+ * @param {boolean|number} [calloutCloseByScroll=false] `mode="callout"`: close
+ *   the callout once the page has scrolled under it — `true` for a short
+ *   distance, a number for that many pixels. For a tooltip read in place,
+ *   which scrolling away is done with.
+ * @param {"nearby"|"overlay"} [popoverMode="nearby"] "overlay" lays the popover
+ *   over the trigger, "nearby" leaves a small gap below it.
+ * @param {string} [positionArea] Where the popup goes — relative to the trigger
+ *   in popover mode, relative to the viewport in dialog mode. Same grammar as
+ *   Popover/Dialog's own `positionArea` ("top", "right-end", "inset(top-left)",
+ *   …). Defaults to "bottom-start" in popover mode ("inset(top-left)" when
+ *   popoverMode is "overlay"), and to Dialog's own "center" in dialog mode. A
+ *   popover still flips to the opposite side on its own when there isn't
+ *   enough room.
+ * @param {boolean} [popupWidthFitContent] By default the popover is at least as
+ *   wide as the trigger. Set this to let the content size it instead, so a
+ *   popover narrower than the trigger stays narrow. Popover mode only — a
+ *   dialog never takes the trigger's width to begin with (see
+ *   `dialogMinWidth`).
+ * @param {import("preact").ComponentChildren} [rightSlotIcon] What the right
+ *   slot draws in place of the chevron. It is the whole slot, not an addition
+ *   to it: the picker then no longer says on its own that it opens, so pass
+ *   something that does. Decoration only — it is wrapped in an `<Icon>`, which
+ *   is `aria-hidden`, so anything focusable in there would be reachable by tab
+ *   while invisible to assistive tech. Use `rightSlot` for that.
+ *
+ *   The slot only exists beside a value. `variant="icon"` has none, so there is
+ *   no slot either: the icon becomes the trigger itself and is drawn as the
+ *   `ui` — which is also what a caller overrides to draw their own. Nothing
+ *   else is drawn there, the clear cross included: one icon has room for one
+ *   thing.
+
+ *   `variant="bare"` has no slot either, for the same reason turned around: the
+ *   picker is the drawing's box to the pixel, so nothing may be added beside it
+ *   — the drawing holds what it needs (`<Picker.Clear />`) and places it. Its
+ *   `chevron` prop is the exception: the slot, put where the drawing is not.
+ * @param {"end"|"start"|"hang-end"} [chevron] `variant="bare"` only: the
+ *   picker draws no chevron beside the drawing, so nothing says it opens; this
+ *   draws one — the icon the right slot would hold, `rightSlotIcon` or the
+ *   chevron, at `rightSlotIconSize`, `slotSpacing` away from the drawing (xxs
+ *   by default), taking the clear cross's place under `clearable` like any
+ *   slot — and says where, so the drawing keeps the box it has when nothing
+ *   opens. Which side depends on where the drawing is anchored in its line.
+ *   `"end"`: after it, in the flow — a label with room after it. `"start"`:
+ *   before it — a label pushed against the right edge, which the chevron
+ *   would otherwise push left by its width. `"hang-end"`: after it and OUT of
+ *   the flow, in the margin beside the box — a drawing filling its whole
+ *   line; the press follows it out there by its size plus its gap, on top of
+ *   any `pressPaddingRight`. The chevron is drawn in `--picker-icon-color`
+ *   (`currentColor` here) and `--picker-icon-color-hover`; a dimmed one is
+ *   `--picker-icon-color: color-mix(in srgb, currentColor 55%, transparent)`.
+ * @param {import("preact").ComponentChildren} [rightSlot] Same place, rendered
+ *   as-is: no `<Icon>` around it, nothing `aria-hidden`. This is where an
+ *   interactive right slot goes. `null` takes the slot away entirely — the
+ *   gutter it carries with it, so the trigger measures its drawing and centers
+ *   on it.
+ * @param {boolean} [picksNothing] The popup asks something rather than holding
+ *   an answer, so the trigger draws a label and never a value: no chevron, no
+ *   clear cross, in any variant — and the controls in the popup are their own
+ *   (a checkbox gating the yes), never the picker's value, so a bound `action`
+ *   keeps the params it was bound with. `type="confirm"` says it for itself; say it
+ *   for a popup of your own that is a menu of actions rather than a choice —
+ *   or a DOOR: a drawing that grows to be looked at (a weather scene, a plan),
+ *   with no `action` at all. The picker is then a trigger and a popup, and
+ *   nothing more: its close does nothing, and what it keeps from being a
+ *   control is what a door still needs — the role of a button, the keyboard
+ *   opening it, the anchor being itself, and one popup per instance without
+ *   an id to wire. See "The trigger wears the wait" in docs/popup_open.md for
+ *   when that beats a `Button` opening a shared `Dialog`.
+ * @param {string|import("preact").ComponentChildren} [clearConfirm] The
+ *   question asked before the clear cross clears anything — the `message` of
+ *   the `<Picker type="confirm">` the cross then is, plain text or JSX. Asked
+ *   BEFORE the ui state is emptied, so answering no leaves the field exactly
+ *   as it was; answering yes clears and sends, and the picker's own action
+ *   receives the cleared value like any other choice. A cut (Ctrl+X) on such a
+ *   picker copies the value and leaves it in place: no clear without the
+ *   question.
+ * @param {"icon"|"headless"|"discrete"|"button"|"text"|"bare"|"picker"} [variant]
+ *   How the trigger is drawn. `"button"` is a Button's drawing — surface,
+ *   padding, a centered label, no chevron — and what a `type="confirm"` picker
+ *   draws unless told otherwise: nothing is picked, the popup is a question.
+ *   `"text"` is a word in a sentence, underlined with dots, no box and no
+ *   slot: what `mode="callout"` uses for a callout on a term rather than on an
+ *   icon (`"icon"` being its default, with an info icon in place of the
+ *   chevron). `"bare"` draws no trigger of its own at all: the `ui` is it, and
+ *   the picker is exactly that drawing's box — no padding, no frame, no
+ *   control line, no clamp — for a picker that is a whole piece of a layout
+ *   rather than a field, and which must measure the same as the same drawing
+ *   placed anywhere else. No right slot comes with it: a cross belongs inside
+ *   that drawing, at the place and the size the drawing decides, so it is
+ *   `<Picker.Clear />` the `ui` holds rather than `clearable` the picker
+ *   takes. What navi still draws on that box — the focus ring, the loading
+ *   outline — follows the picker's `borderRadius`, which stays the control's
+ *   unless told: a drawing with corners of its own states them on the picker
+ *   as well. `"headless"` draws nothing either, and is not the `ui`'s box but
+ *   its parent's: it stretches to whatever positioned element holds it, for a
+ *   picker put inside the thing that opens it (a button, a row) so that the
+ *   popup hangs off that whole element. A picker opened from something it does
+ *   not sit in — an object on a map saying
+ *   `triggerNaviCommand(pickerEl, "--navi-open", event, { anchor, value })` —
+ *   therefore wants an element of its own to stretch into rather than the
+ *   nearest positioned ancestor it happens to find. `"picker"` (or an explicit
+ *   `variant={undefined}`) asks a confirm or callout picker for the field-like
+ *   drawing every other picker has.
+ * @param {"custom"} [loadingOutline] Who draws the loading outline while the
+ *   action runs. Left unsaid, the picker does, around its own box. `"custom"`
+ *   says someone else does — what it means on a `Button` too — for a picker
+ *   that carries a wait drawn elsewhere: two nested pickers sharing one run
+ *   (a score picker drawn inside the card an edit picker wraps, see
+ *   `12_picker_card_demo.html`) are one wait, and one outline; and a
+ *   `variant="bare"` whose box is not
+ *   the shape of what waits (a card with a note pinned under it) leaves the
+ *   outline to the card, which knows its own box. The wait itself is still
+ *   worn: `aria-busy`, the busy refusal, the error callout, `[data-loading]`.
+ * @param {number} [loadingOutlineInset=-2] Where the loading outline runs, in
+ *   px from the picker's box — negative is outside. A field wants it right on
+ *   its border; a card-sized trigger wants it a few pixels out, clear of the
+ *   card's own frame, so it reads as a run around the card rather than as its
+ *   border blinking.
+ * @param {boolean} [icon] The trigger is one icon — the `ui`, or the chevron
+ *   when there is none. Its box is that icon's box plus the padding asked for
+ *   and nothing else: no right slot, and no control line to be as tall as, so
+ *   it measures the same as `<Button icon>` and stands in a row of icon
+ *   buttons. A shape, not a paint: the variant still decides what is drawn
+ *   around it, so `variant="discrete" icon` is the discrete hover wash on an
+ *   icon-sized square. `variant="icon"` is this shape with no surface at all.
+ * @param {import("preact").ComponentChildren} [message] `type="confirm"`: the
+ *   question, in the popup's default body — text, or JSX when it needs an
+ *   emphasis, a link. Left out, a generic "are you sure?" in the current
+ *   language. To draw the whole popup instead, pass `children`: yes is then
+ *   whatever carries `--navi-confirm`, no whatever closes (`--navi-cancel`).
+ * @param {import("preact").ComponentChildren} [confirmLabel] `type="confirm"`,
+ *   default body: what the yes button reads. Defaults to the translated
+ *   "Confirm".
+ * @param {import("preact").ComponentChildren} [cancelLabel] Same, for the no
+ *   button. Defaults to the translated "Cancel".
+ * @param {"confirm"|"cancel"|"none"} [focusOnOpen="confirm"] `type="confirm"`,
+ *   default body: which button the keyboard lands on when the popup opens.
+ *   `"cancel"` is the careful choice before something that cannot be undone —
+ *   a stray Enter then answers no.
+ * @param {(confirmEvent: CustomEvent) => void} [onConfirm] Called once the
+ *   popup has closed on a `--navi-confirm` said inside it. What a confirm
+ *   picker uses to run its press; a picker of any type may listen too.
+ * @param {boolean} [canSendWhileUnchanged] Run `action` when a choice pressed
+ *   inside the popup — a row's `--navi-send`, a `--navi-confirm` — is the
+ *   value the picker already held. By default that close runs nothing: the
+ *   answer has not moved, so there is nothing new to say, same as `Form`.
+ *   Set this for a picker whose value is a setting that can be valid while
+ *   what it points to is not — a channel whose account came unlinked — so
+ *   picking it again is how the person asks for it to be put right, and the
+ *   action sees the same value and re-asks what there is to re-ask. A press
+ *   outside, Escape and the cross still send nothing: nothing was pressed.
+ * @param {(openEvent: CustomEvent) => void} [onOpen] Called when the popup
+ *   opens, whatever asked for it (a press, a command, history bringing it
+ *   back). You most likely do NOT need this pair: "the user validated" is
+ *   already `action` — it fires on every close that keeps (click outside, the
+ *   cross, Enter, a `--navi-send` inside the popup) and never on a cancel.
+ *   Reach for `onOpen`/`onClose` only for the one thing `action` cannot say:
+ *   the popup being up at all, independent of the value — e.g. a derived
+ *   computation held while the sheet is open, released on close.
+ * @param {(closeEvent: CustomEvent) => void} [onClose] Called when the popup
+ *   actually closes — not preventable, and (see `onOpen`) not the way to know
+ *   the user validated: that is `action`. `closeEvent.detail.isCancel` tells a
+ *   cancel (Escape, the back gesture) from a close that keeps. Fires after the
+ *   picker's value has settled — committed, or restored on a cancel — so the
+ *   value read in here is the one the picker ends up holding, and before the
+ *   popup leaves the history entry it pushed, so a route param cleared in here
+ *   is part of the url a close that keeps carries back.
+ * @param {number|string} [rightSlotIconSize="inherit"] How big what sits in the
+ *   right slot is drawn — the chevron, a `rightSlotIcon`, or the clear button's
+ *   cross. "inherit" takes the picker's own font size.
+ * @param {number|string} [slotSpacing] Gap kept between what sits in the right
+ *   slot (the chevron, or the clear button) and the picker's own edge — same
+ *   prop name Input uses for its own slots. Accepts a spacing token ("s",
+ *   "m"…) like any other spacing prop, or a length. Defaults to half the
+ *   horizontal padding.
+ * @param {number|string} [pressPadding] How far a press counts as the trigger
+ *   past the picker's own box — a spacing token ("s", "m"…) or a length, zero
+ *   by default. What the picker draws is transparent to the pointer: the press
+ *   lands on an invisible input covering the box, so the box is the whole
+ *   answer to "does this open". That is right while what is drawn stays inside
+ *   it, which is what `variant="bare"` measures. A `ui` that paints OUTSIDE
+ *   its box on purpose — a chevron pushed into the margin beside it, so the
+ *   label under it keeps the width it has when nothing opens — draws something
+ *   nobody can press, and this is how far the press area goes to reach it. The
+ *   press area only; nothing moves and nothing is drawn. Font-relative lengths
+ *   are read against the picker's own text, so "0.75em" is the drawing's em.
+ *   Only the sides that overhang: the area grows over whatever is next to the
+ *   picker, and takes the presses aimed at it.
+ * @param {number|string} [pressPaddingX] Same, left and right only;
+ *   `pressPaddingY` top and bottom, `pressPaddingTop`/`Right`/`Bottom`/`Left`
+ *   one side each.
+ * @param {number|string} [popoverMaxHeight] Soft cap on the popover's height
+ *   (default 300px). The popover shrinks below it when space is tight.
+ * @param {number|string} [dialogMinWidth] Floor on the dialog's width. A dialog
+ *   picker is not attached to its trigger and does not take its width (unlike
+ *   the popover, which uses it as a floor) — this is how a dialog too narrow
+ *   for what it holds is widened. Clamped by `dialogMaxWidth`/the container.
+ * @param {number|string} [dialogMinHeight] Same, on the height.
+ * @param {number|string} [dialogMaxWidth] Ceiling on the dialog's width, the
+ *   one `dialogExpand`/`dialogExpandX` grows up to — what makes an expanded
+ *   dialog a large sheet rather than a full screen. Capped in turn by the
+ *   container minus `marginWithContainer`. Describes the centered shape only:
+ *   a dialog docked by `dockedOnSmallTouchScreen` withdraws it and stays
+ *   container-wide, so both can be stated at once.
+ * @param {number|string} [dialogMaxHeight] Same, on the height.
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"lifting"|`slide-from-${string}`} [animation]
+ *   The popup's own (see Popover/Dialog). `"lifting"` is the one a picker
+ *   whose `ui` is a whole piece of the page wants: the popup is the browser
+ *   morphing the trigger's box into what carries `data-lift` inside the popup
+ *   (the popup itself when it carries it), and back on close. The trigger IS
+ *   the anchor, so nothing has to be named for it — `dialogSizeFromAnchor`
+ *   for a card that must keep its width on the way, left out for a drawing
+ *   that opens precisely to get bigger. It brings an opaque, blurred backdrop
+ *   with it (`--navi-backdrop-lift-*`); `backdropVariant="discrete"` asks for
+ *   the light wash back.
+ * @param {Element|{current: Element}|string} [liftAnchor] Dialog mode,
+ *   Dialog's own: where a lifting close lands when that is not the trigger
+ *   (`animation="lifting"`, or `animation={{ open, close: "lifting" }}` for a
+ *   popup that opens the plain way and only lands on close),
+ *   read once the close is made (after `onClose`).
+ * @param {"box"|"scene"} [lift="box"] Dialog's own, under `animation="lifting"`:
+ *   `"box"` for a card that extends (its top stays, the box uncovers the rest),
+ *   `"scene"` for a thumbnail that is a band cut from the middle of the bigger
+ *   view, as wide as it (each picture at the box's width, centred in it).
+ * @param {string} [animationDuration] The popup's own (`--popup-animation-duration`).
+ * @param {boolean} [dialogSizeFromAnchor] Dialog mode: the dialog is as wide
+ *   as the trigger — its box as a floor (Dialog's own `sizeFromAnchor`) and
+ *   as a ceiling, unless a `dialogMaxWidth` says otherwise. What keeps a card
+ *   its own width once lifted out of the page (`animation="lifting"`, with
+ *   `data-lift` on the card inside the popup): it moves, and nothing else
+ *   about it changes. `dialogMaxWidth="var(--anchor-width)"` says the same
+ *   ceiling by hand: the popup props are written on the dialog element, where
+ *   that variable lives.
+ * @param {boolean|"top"|"bottom"} [dockedOnSmallTouchScreen] Dialog mode,
+ *   Dialog's own: on a small touch screen the dialog becomes a sheet docked
+ *   full width to one edge — `true` or `"top"` the top edge, out of the
+ *   virtual keyboard's way; `"bottom"` the bottom one, for a sheet that is
+ *   read and tapped. Anywhere else it stays the centered box. Ignored in
+ *   popover mode.
+ * @param {"cancel"|"close"} [escapeEffect="cancel"] What Escape does to an open
+ *   picker. "cancel" puts back the value the picker had at open, and a dialog
+ *   picker with an explicit `id` (its opening being an entry of its own)
+ *   also goes back in history — so anything written to the url while it was
+ *   open (a route `stateSignal`, a search param) goes back with it. "close"
+ *   makes Escape say what clicking outside says: keep what was chosen,
+ *   close — a last resort, see
+ *   docs/popup_open.md#escape-cancels-the-other-gestures-keep for why Escape
+ *   should go on meaning cancel, and
+ *   docs/popup_open.md#what-cancel-actually-undoes for what a cancel puts
+ *   back.
+ * @param {import("preact").RefObject<HTMLElement>|HTMLElement} [anchor] What
+ *   the popup hangs off, when that is not the picker itself: a picker whose
+ *   trigger is one piece of a bigger control (the chevron half of a split
+ *   button) points at the whole control, so the popup lines up with it and is
+ *   at least as wide as it.
+ * @param {boolean} [standalone] - This picker answers for itself: it does not
+ *   register with the control group around it, so what it holds never becomes
+ *   part of that group's value and nothing that group does — distributing,
+ *   resetting, validating — reaches it. For a door that only opens something,
+ *   and for a picker that commits on its own inside a form.
+ * @param {"close"|"cancel"|"capture"} [pressOutside="close"]
+ *   What a press outside the popup does: close and keep ("close"), close and
+ *   put back the value at open ("cancel"), or nothing at all ("capture"). The
+ *   default is what gives a popup with no confirm button its way out that
+ *   keeps — see the same section.
+ * @param {boolean} [backdrop=true] Whether anything is laid between the popup
+ *   and the page at all. `false` lets a press outside both close the popup and
+ *   reach whatever it landed on, in one gesture — for a picker opened over a
+ *   page that stays as pressable as it looks (a plan, a map, a canvas), where a
+ *   wall would spend the first press on dismissing. Honoured in every mode: a
+ *   dialog with no wall is shown through the Popover API rather than
+ *   `showModal()`, so a picker docked as a bottom sheet on a phone still
+ *   leaves the plan behind it live. `false` by default under `mode="callout"`,
+ *   a bubble that dims nothing; `true` there spends the press outside on
+ *   closing it — the link under it not followed, the card under it not held —
+ *   without a wall: the scroll a finger starts beside the bubble still
+ *   scrolls. Not read inside a `<PopupGroup>`, whose wall it is.
+ * @param {"auto"|"lift"|"discrete"|"invisible"} [backdropVariant="auto"] How
+ *   visible the popup's backdrop is, independently of what a click outside
+ *   does: `"auto"` is the paint `pressOutside` implies,
+ *   `"lift"` the opaque blurred wall `animation="lifting"` brings, asked for
+ *   without the movement, `"discrete"` a barely-there dim, `"invisible"` fully
+ *   transparent — a wall that is not seen is still a wall, which is what
+ *   `backdrop` above answers. For a picker that closes on an outside click
+ *   without wanting to dim the page for it.
+ * @param {string} [backdropColor] The wash the popup paints over what is
+ *   behind, for this picker alone. See Dialog's own doc.
+ * @param {string} [backdropFilter] What that wash does to the picture
+ *   underneath (`"blur(4px)"`), independently of what a click outside does.
+ *   See Dialog's own doc.
+ * @param {number|string} [marginWithContainer] Minimum gap kept between the
+ *   popup and the edges of what contains it (the viewport, or the picker's own
+ *   positioned ancestor for `popupLayer="local"`). Caps the popup's size as
+ *   well as its placement, so what an expanded dialog leaves visible around
+ *   itself is set here. Defaults to `popoverSpacing` in popover mode, and to
+ *   Dialog's own in dialog mode: `3appw` in the top layer, `3cqw` under
+ *   `popupLayer="local"`, 0 for a dialog docked by
+ *   `dockedOnSmallTouchScreen`.
+ * @param {string} [popupTestId] The `data-testid` of the popup element — the
+ *   popover or dialog the children open in. A `data-testid` on the picker
+ *   itself names the trigger (see docs/testid.md); this one is for a test that
+ *   needs the popup's own box — its surface, its position, its backdrop — and
+ *   not only what it holds, which a testid inside the children already names.
+ *   Under `mode="callout"` it names the callout element — the control's own,
+ *   shared with its constraint messages — while the children are shown in it.
+ * @param {string} [popupAriaLabelledBy] The id(s) of what names the popup:
+ *   `aria-labelledby` on the popup element, which is a dialog in either mode
+ *   (the trigger says `aria-haspopup="dialog"`). `aria-label`/`aria-labelledby`
+ *   on the picker itself name the trigger. Rarely needed: a `<Popup.Title>`
+ *   in the children names the popup with nothing to wire, and without one
+ *   the popup takes the trigger's own name — the picker's `aria-labelledby`,
+ *   the label a picker that picks nothing draws, its `aria-label`, or the
+ *   `<Label>`/`<label for>` pointing at it (one that has an id, and does not
+ *   wrap the picker). A `mode="callout"` popup is read as its message.
+ * @param {string} [popupAriaLabel] The same, as a string, for a popup whose
+ *   title is not an element.
+ * @param {string} [popupAriaDescribedBy] The id(s) of what describes the
+ *   popup: `aria-describedby` on the popup element.
+ * @param {string} [confirmTestId] `type="confirm"`, default body: the
+ *   `data-testid` of the yes button; `cancelTestId` that of the no button.
+ *   Both are elements navi builds, which a test may not name by class (see
+ *   docs/testid.md).
+ * @param {string} [cancelTestId]
+ * @param {"always"|"idle"|"from-first-open"|"while-opened"} [mount] The popup's own
+ *   (see Popup): when the children are built and thrown away. Left out, a
+ *   picker told no value holds what the control they hold holds, and builds
+ *   them as soon as that value is read: right away (`"always"`) when navi draws
+ *   it (no `ui`, a `Picker.UI.*`, a component `ui`), when there is a clear
+ *   cross, or when a form or group around the picker collects it; when an
+ *   element `ui` calls `usePickerState()`. Read by nothing, it waits for the
+ *   first open, like a picker told a value. A `picksNothing` picker (and so
+ *   `type="confirm"`) never builds them early: its popup holds no value, there
+ *   is nothing to read.
+ */
 // Assembled in pure expressions rather than written onto Picker afterwards
 // (`Picker.Chip = PickerChip`): what createComponentResolver returns is an object
 // a bundler cannot see through, so a property assigned to it later is a side
@@ -85952,7 +87506,7 @@ const css$q = /* css */`@layer navi {
 const TRAVELS_NONE = [];
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: any,
  *   defaultValue?: any,
  *   signal?: import("@preact/signals").Signal<any>,
@@ -85968,7 +87522,7 @@ const TRAVELS_NONE = [];
  *   fallbackValue?: any,
  *   valueAtStep: (value: any, count: number) => any,
  *   compareValues?: (a: any, b: any) => number,
- *   renderValue?: (value: any, context: { maxLines?: number }) => import("ignore:preact").ComponentChildren,
+ *   renderValue?: (value: any, context: { maxLines?: number }) => import("preact").ComponentChildren,
  *   controlProps?: object,
  *   duration?: number,
  *   vertical?: boolean,
@@ -86755,14 +88309,14 @@ const renderValueDefault = value => String(value ?? "");
  * single `value`/`signal` like any other control. `TimeSpin` is that, for a
  * time of day.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
  *   value?: any,
  *   defaultValue?: any,
  *   signal?: import("@preact/signals").Signal<any>,
  *   aggregateChildStates?: (childUIStateControllers: any[]) => any,
  *   distributeChildUIState?: (groupState: any, childUIStateController: any) => any,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * Everything a box takes is taken here too — `width`, `borderWidth`,
@@ -86865,7 +88419,7 @@ SpinGroup.Separator = SpinGroupSeparator;
  * above and below it by default — sideways they would be where the caret
  * moves — with the bigger number up top.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: number|string,
  *   defaultValue?: number|string,
  *   min?: number,
@@ -86970,7 +88524,7 @@ const numberAtStep = (value, count, {
  * A day one steps through: the date plus what it is to today when there is a
  * word for it, and a calendar behind it for the day that is far from here.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: string,
  *   defaultValue?: string,
  *   signal?: import("@preact/signals").Signal<string>,
@@ -86981,7 +88535,7 @@ const numberAtStep = (value, count, {
  *   maxMessage?: any,
  *   step?: number,
  *   lang?: string,
- *   renderDay?: (day: string) => import("ignore:preact").ComponentChildren,
+ *   renderDay?: (day: string) => import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {string} [value] The day shown, as "YYYY-MM-DD".
@@ -86992,7 +88546,7 @@ const numberAtStep = (value, count, {
  * @param {"long"|"short"|"numeric"} [format="long"] How the date is written.
  *   Long by default, since this is a control one reads rather than a column
  *   one scans; `short` where the room is not there.
- * @param {(day: string) => import("ignore:preact").ComponentChildren} [renderDay] What
+ * @param {(day: string) => import("preact").ComponentChildren} [renderDay] What
  *   to write for a day. Defaults to the date plus what it is to today when
  *   there is a word for it ("samedi 8 août (demain)"), since a day near now is
  *   read as a distance from now before it is read as a date.
@@ -87109,7 +88663,7 @@ const HOUR_MAX = 23;
 const MINUTE_MAX = 59;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
  *   value?: string,
  *   defaultValue?: string,
@@ -87117,7 +88671,7 @@ const MINUTE_MAX = 59;
  *   minuteStep?: number,
  *   pad?: number,
  *   loop?: boolean,
- *   separator?: import("ignore:preact").ComponentChildren,
+ *   separator?: import("preact").ComponentChildren,
  *   hourLabel?: string,
  *   minuteLabel?: string,
  *   [key: string]: any,
@@ -87130,7 +88684,7 @@ const MINUTE_MAX = 59;
  *   of a day to stop at. Say `loop={false}` for two ends one cannot step past.
  * @param {number} [pad=2] How many digits an hour and a minute are written on:
  *   a clock says "07:00", never "7:0". Say `pad={0}` for the bare numbers.
- * @param {import("ignore:preact").ComponentChildren} [separator] What is written
+ * @param {import("preact").ComponentChildren} [separator] What is written
  *   between the hours and the minutes. "h" in French, ":" elsewhere.
  * Everything a box takes is taken here too — `width`, `borderRadius`, `size`.
  */
@@ -87196,7 +88750,7 @@ const distributeTime$1 = (groupState, childUIStateController) => {
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
  *   value?: { start?: string, end?: string },
  *   defaultValue?: { start?: string, end?: string },
@@ -87206,13 +88760,13 @@ const distributeTime$1 = (groupState, childUIStateController) => {
  *   timeProps?: object,
  *   loop?: boolean,
  *   size?: string,
- *   startLabel?: import("ignore:preact").ComponentChildren,
- *   endLabel?: import("ignore:preact").ComponentChildren,
+ *   startLabel?: import("preact").ComponentChildren,
+ *   endLabel?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {{ start?: string, end?: string }} [value] The span shown, as two
  *   "HH:MM".
- * @param {import("ignore:preact").ComponentChildren} [startLabel] What is written
+ * @param {import("preact").ComponentChildren} [startLabel] What is written
  *   before the first time ("De"), and `endLabel` between the two ("à"). Say
  *   `null` for neither.
  * @param {number} [minuteStep=1] How many minutes a press on a minute chevron
@@ -87309,7 +88863,7 @@ const css$p = /* css */`.navi_checkbox_group {
  *
  * See `<RadioGroup>` for the same shape holding a single value.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   maxLength?: number,
  *   maxLengthGuard?: number,
  *   [key: string]: any,
@@ -87370,6 +88924,19 @@ const CheckboxGroupInterface = props => {
   });
 };
 
+/**
+ * @type {import("preact").FunctionComponent<{
+ *   unit: string,
+ *   plural?: boolean,
+ *   format?: "long" | "short" | "narrow",
+ *   lang?: string,
+ *   label?: string,
+ *   size?: string,
+ *   sizeRatio?: number,
+ *   style?: import("preact").JSX.CSSProperties,
+ *   [key: string]: any,
+ * }>}
+ */
 const Unit = ({
   unit,
   plural,
@@ -88127,7 +89694,7 @@ const css$m = /* css */`.navi_input.navi_select {
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: string,
  *   defaultValue?: string,
  *   signal?: import("@preact/signals").Signal<string>,
@@ -88206,30 +89773,40 @@ const css$l = /* css */`.navi_split_button {
 
   & > .navi_group {
     flex: auto;
+
+    & > .navi_button {
+      flex: auto;
+    }
   }
 }
 
 .navi_split_button_menu {
+  --border-width: 0px;
   display: flex;
   position: relative;
+
+  & > .navi_button {
+    margin-left: calc(var(--border-width) * -1);
+  }
 }
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
- *   options: Array<{value: any, label: import("ignore:preact").ComponentChildren, [key: string]: any}>,
+ * @type {import("preact").FunctionComponent<{
+ *   options: Array<{value: any, label: import("preact").ComponentChildren, [key: string]: any}>,
  *   value?: any,
  *   defaultValue?: any,
- *   label?: import("ignore:preact").ComponentChildren,
- *   action?: (value: any, event: Event) => void | Promise<void>,
+ *   label?: import("preact").ComponentChildren,
+ *   action?: (value: any, { event, signal }: { event: Event, signal: AbortSignal }) => void | Promise<void>,
  *   command?: string,
  *   commandFor?: string,
  *   prefetch?: boolean,
- *   onValueChange?: (value: any, event: Event) => void,
+ *   onValueChange?: (value: any, { event }: { event: Event }) => void,
  *   chooseEffect?: "select" | "run",
  *   menuLabel?: string,
- *   menuIcon?: import("ignore:preact").ComponentChildren,
+ *   menuIcon?: import("preact").ComponentChildren,
  *   menuIconSize?: number | string,
+ *   menuTestId?: string,
  *   loading?: boolean,
  *   readOnly?: boolean,
  *   disabled?: boolean,
@@ -88265,19 +89842,21 @@ const css$l = /* css */`.navi_split_button {
  *   popupTestId?: string,
  *   [key: string]: any,
  * }>}
- * @param {Array<{value: any, label: import("ignore:preact").ComponentChildren}>} options
+ * @param {Array<{value: any, label: import("preact").ComponentChildren}>} options
  *   The ways of doing the thing, in the order the menu lists them. Anything
  *   else on an entry (`disabled`, `icon`, `padding`…) reaches its row.
  * @param {any} [value] Which entry the button stands for — the one it runs, and
  *   the one it is named after. `defaultValue` is the uncontrolled form; without
  *   either, the first entry.
- * @param {import("ignore:preact").ComponentChildren} [label] What the button says, when
+ * @param {import("preact").ComponentChildren} [label] What the button says, when
  *   that is not the name of the entry it stands for — a button that keeps one
  *   name whatever the menu does.
- * @param {(value: any, event: Event) => void} [action] Do the thing, for the
- *   entry given. Pressed on the button it is the entry the button stands for;
- *   with `chooseEffect="run"` it is also the entry just chosen. Awaited: the
- *   whole split button is busy until it settles.
+ * @param {(value: any, { event, signal }) => void} [action] Do the thing, for
+ *   the entry given. Pressed on the button it is the entry the button stands
+ *   for; with `chooseEffect="run"` it is also the entry just chosen. Run as a
+ *   navi action: the second argument is the run's (see docs/actions.md), the
+ *   press being its `event`. Awaited: the whole split button is busy until it
+ *   settles.
  * @param {string} [command] What a press on the button does once its `action`
  *   is done, as on a `<Button>` (with `commandFor`, and `command-value` when
  *   what the command is about is not the entry the button stands for). A
@@ -88291,12 +89870,14 @@ const css$l = /* css */`.navi_split_button {
  *   menu of one-offs around a primary action.
  * @param {string} [menuLabel] What the chevron half is called, for a screen
  *   reader and for the tooltip a long press raises.
- * @param {import("ignore:preact").ComponentChildren} [menuIcon] What the chevron half
+ * @param {import("preact").ComponentChildren} [menuIcon] What the chevron half
  *   draws, in place of the chevron. It is the whole of what that half says, so
  *   pass something that still reads as "there is more here" — and say what,
  *   through `menuLabel`.
  * @param {number|string} [menuIconSize] How big that icon is drawn. Defaults to
  *   the button's own font size.
+ * @param {string} [menuTestId] The `data-testid` of the chevron half, which
+ *   navi builds and the caller has no other way to name.
  * @param {"popover"|"dialog"} [mode="popover"] What the menu is drawn as. A
  *   picker left to itself turns into a dialog on a small screen; a split
  *   button's menu stays hung off the button there, so this says popover unless
@@ -88317,8 +89898,12 @@ const css$l = /* css */`.navi_split_button {
  * `popupBorderRadius`, `animation`. See picker.jsx for what each one says.
  * An `aria-*` attribute describes the button and reaches the main half —
  * `aria-pressed` for a split button whose main half toggles a mode;
- * `aria-hidden` excepted, which hides the whole control. Anything else lands
- * on the split button's own box.
+ * `aria-hidden` excepted, which hides the whole control. How the words are
+ * written (`size`, `bold`, `lineHeight`, `noWrap`…) reaches both halves, and so
+ * does vertical padding (`paddingY`, `paddingTop`, `paddingBottom`); the rest
+ * of the padding is the main half's — the chevron half keeps its own, which
+ * gives it its width. Anything else (`className`, `width`, margins, `data-*`)
+ * lands on the split button's own box.
  */
 const SplitButton = props => {
   import.meta.css = [css$l, "@jsenv/navi/src/control/input/split_button.jsx"];
@@ -88337,6 +89922,7 @@ const SplitButton = props => {
     menuLabel = buttonI18n("button.more_actions"),
     menuIcon = jsx(ChevronDownSvg$1, {}),
     menuIconSize,
+    menuTestId,
     loading,
     readOnly,
     disabled,
@@ -88356,11 +89942,13 @@ const SplitButton = props => {
     ...rest
   } = props;
   // Everything the popup answers to travels to the Picker; an aria-* describes
-  // the button a screen reader meets, which is the main half; everything else
-  // is the split button's own box (margins, width, data-*). Sorted by name
-  // rather than named one by one so a Picker popup prop is forwarded by adding
-  // it to that list, not by threading it through here.
-  const [popupProps, buttonAriaProps, boxProps] = sortRestProps(rest);
+  // the button a screen reader meets, which is the main half; how the words are
+  // written and how far they sit from the edge belong to the halves, since a
+  // <button> inherits neither from the box around it; everything else is the
+  // split button's own box (margins, width, data-*). Sorted by name rather
+  // than named one by one so a Picker popup prop is forwarded by adding it to
+  // that list, not by threading it through here.
+  const [popupProps, buttonAriaProps, halfStyleProps, mainPaddingProps, boxProps] = sortRestProps(rest);
   // A split button is a control on the page, not a place one goes: its menu
   // hangs off it even on a phone, where a picker left to itself would decide a
   // small screen means a dialog. Passing mode="dialog" asks for that back.
@@ -88405,6 +89993,7 @@ const SplitButton = props => {
     borderColor,
     borderWidth,
     borderRadius,
+    ...halfStyleProps,
     pressEffect,
     loading: loadingResolved,
     readOnly,
@@ -88414,7 +90003,7 @@ const SplitButton = props => {
   };
   return jsxs(Box, {
     ref: rootRef,
-    className: "navi_split_button",
+    baseClassName: "navi_split_button",
     borderRadius: borderRadius,
     ...boxProps,
     children: [jsx(LoadingOutline, {
@@ -88431,6 +90020,7 @@ const SplitButton = props => {
         "command-value": commandValue,
         prefetch: prefetch,
         ...buttonAriaProps,
+        ...mainPaddingProps,
         ...halfProps,
         children: label === undefined ? optionShown?.label : label
       }), jsxs("div", {
@@ -88440,6 +90030,7 @@ const SplitButton = props => {
           paddingX: "s",
           expandY: true,
           "aria-label": menuLabel,
+          "data-testid": menuTestId,
           command: "--navi-open",
           commandFor: menuId,
           ...halfProps,
@@ -88519,9 +90110,16 @@ const SplitButton = props => {
 // a caller reaches all of them through the split button (see picker.jsx's JSDoc
 // for what each one says).
 const POPUP_PROP_SET = new Set(["mode", "popupLayer", "popupTestId", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMinWidth", "dialogMinHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdrop", "backdropVariant", "backdropColor", "backdropFilter", "pressOutside", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
+// Vertical padding is said about both halves so they stay the same height; the
+// horizontal one is the main half's alone, the chevron half's own (paddingX="s")
+// being what gives it its width.
+const HALF_PADDING_PROP_SET = new Set(["paddingY", "paddingTop", "paddingBottom"]);
+const MAIN_PADDING_PROP_SET = new Set(["padding", "paddingX", "paddingLeft", "paddingRight"]);
 const sortRestProps = props => {
   const popupProps = {};
   const buttonAriaProps = {};
+  const halfStyleProps = {};
+  const mainPaddingProps = {};
   const boxProps = {};
   for (const key of Object.keys(props)) {
     if (POPUP_PROP_SET.has(key)) {
@@ -88530,11 +90128,15 @@ const sortRestProps = props => {
       // aria-hidden hides a subtree rather than describing a button: on the
       // main half alone it would leave the chevron half exposed.
       buttonAriaProps[key] = props[key];
+    } else if (isTypoProp(key) || HALF_PADDING_PROP_SET.has(key)) {
+      halfStyleProps[key] = props[key];
+    } else if (MAIN_PADDING_PROP_SET.has(key)) {
+      mainPaddingProps[key] = props[key];
     } else {
       boxProps[key] = props[key];
     }
   }
-  return [popupProps, buttonAriaProps, boxProps];
+  return [popupProps, buttonAriaProps, halfStyleProps, mainPaddingProps, boxProps];
 };
 
 /**
@@ -89736,7 +91338,7 @@ const WheelGroupContext = createContext(null);
  * value, the value lives in one hidden input for the form. The visible rows are
  * presentational.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value?: any,
  *   defaultValue?: any,
  *   action?: (value: any) => void,
@@ -89754,7 +91356,7 @@ const WheelGroupContext = createContext(null);
  *   readOnly?: boolean,
  *   disabled?: boolean,
  *   loading?: boolean,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {number} [props.visibleCount=3] - Odd number of rows visible in the viewport (the center one is the selection).
@@ -90382,8 +91984,9 @@ function WheelUI(props) {
   }, {
     controlType: "input",
     // The host is the hidden input carrying the value: the container is
-    // what is focused and spun.
-    listenersOn: "root"
+    // what is focused and spun, and the spinbutton its name has to name.
+    listenersOn: "root",
+    nameOn: "root"
   });
   const uiStateController = getUIStateControllerById(controlHostProps.id);
   const {
@@ -91233,9 +92836,9 @@ const WheelWindow = ({
  * of rows and fills each from this tracked data — so the value list is the source
  * of truth, not a per-item DOM node. Selection lives on the wheel's value.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value: any,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  */
@@ -91270,9 +92873,9 @@ Wheel.Item = WheelItem;
  * each Wheel.Item (it's a Box: paddingX="0.5ch") so the gap stays scrollable.
  * `spacing` is just the Box flex gap between children (a layout gap, not padding).
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   horizontal?: boolean,
- *   children?: import("ignore:preact").ComponentChildren,
+ *   children?: import("preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
  * @param {boolean} [props.horizontal] - Stack the (horizontal) wheels vertically instead of in a row.
@@ -91469,14 +93072,14 @@ const LAST_MINUTE_OF_DAY = 23 * 60 + 59;
 const END_OF_DAY = END_OF_DAY_HOUR * MINUTES_PER_HOUR;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
  *   value?: string,
  *   defaultValue?: string,
  *   signal?: import("@preact/signals").Signal<string>,
  *   minuteStep?: number,
  *   loop?: boolean,
- *   separator?: import("ignore:preact").ComponentChildren,
+ *   separator?: import("preact").ComponentChildren,
  *   hourLabel?: string,
  *   minuteLabel?: string,
  *   size?: string,
@@ -91497,7 +93100,7 @@ const END_OF_DAY = END_OF_DAY_HOUR * MINUTES_PER_HOUR;
  * @param {boolean} [loop=true] The wheels go round: 23h then 0h, 59 minutes
  *   then 0. What a clock does. Say `loop={false}` for two ends one cannot turn
  *   past.
- * @param {import("ignore:preact").ComponentChildren} [separator] What is written
+ * @param {import("preact").ComponentChildren} [separator] What is written
  *   between the hours and the minutes. "h" in French, ":" elsewhere. In a time
  *   of whole hours it follows each hour on its row instead ("8h"), and nothing
  *   is written by default outside French.
@@ -91616,7 +93219,7 @@ const TimeWheel = ({
 };
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   name?: string,
  *   value?: { start?: string, end?: string },
  *   defaultValue?: { start?: string, end?: string },
@@ -91625,15 +93228,15 @@ const TimeWheel = ({
  *   minDuration?: number,
  *   loop?: boolean,
  *   size?: string,
- *   startLabel?: import("ignore:preact").ComponentChildren,
- *   endLabel?: import("ignore:preact").ComponentChildren,
+ *   startLabel?: import("preact").ComponentChildren,
+ *   endLabel?: import("preact").ComponentChildren,
  *   labelPosition?: "before" | "above",
  *   timeProps?: object,
  *   [key: string]: any,
  * }>}
  * @param {{ start?: string, end?: string }} [value] The span shown, as two
  *   "HH:MM".
- * @param {import("ignore:preact").ComponentChildren} [startLabel] What is written
+ * @param {import("preact").ComponentChildren} [startLabel] What is written
  *   before the first time ("De"), and `endLabel` between the two ("à"). Say
  *   `null` for neither.
  * @param {"before"|"above"} [labelPosition="before"] Where each label stands.
@@ -95618,17 +97221,25 @@ const Address = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$a = /* css */`@layer navi;
+const css$a = /* css */`@layer navi {
+  .navi_text.navi_badge_count {
+    --font-size: .7em;
+    --badge-count-padding-x-default: .5em;
+    --badge-count-padding-y-default: .3em;
+
+    &[data-ellipse][data-single-char], &[data-circle] {
+      --badge-count-padding-x-default: 0;
+      --badge-count-padding-y-default: 0;
+    }
+  }
+}
 
 .navi_text.navi_badge_count {
   white-space: nowrap;
-  --font-size: .7em;
   --x-background: var(--background);
-  --x-background-color: var(--background-color, var(--x-background));
+  --x-background-color: var(--background-color);
   --x-color-contrasting: var(--navi-color-white);
   --x-color: var(--color, var(--x-color-contrasting));
-  --badge-count-padding-x-default: .5em;
-  --badge-count-padding-y-default: .3em;
   --x-badge-count-padding-top: var(--badge-count-padding-top, var(--badge-count-padding-y, var(--badge-count-padding, var(--badge-count-padding-y-default))));
   --x-badge-count-padding-right: var(--badge-count-padding-right, var(--badge-count-padding-x, var(--badge-count-padding, var(--badge-count-padding-x-default))));
   --x-badge-count-padding-bottom: var(--badge-count-padding-bottom, var(--badge-count-padding-y, var(--badge-count-padding, var(--badge-count-padding-y-default))));
@@ -95660,12 +97271,9 @@ const css$a = /* css */`@layer navi;
     padding-bottom: var(--x-badge-count-padding-bottom);
     padding-left: var(--x-badge-count-padding-left);
     background: var(--x-background);
-    background-color: var(--x-background-color);
     border-radius: 1em;
 
     &[data-single-char] {
-      --badge-count-padding-x-default: 0;
-      --badge-count-padding-y-default: 0;
       box-sizing: content-box;
       text-align: center;
       border-radius: 100em;
@@ -95678,8 +97286,6 @@ const css$a = /* css */`@layer navi;
 
   &[data-circle] {
     --x-number-font-size: var(--font-size);
-    --badge-count-padding-x-default: 0;
-    --badge-count-padding-y-default: 0;
     box-sizing: content-box;
     aspect-ratio: 1;
     width: var(--x-radius);
@@ -95689,7 +97295,6 @@ const css$a = /* css */`@layer navi;
     padding-bottom: var(--x-badge-count-padding-bottom);
     padding-left: var(--x-badge-count-padding-left);
     background: var(--x-background);
-    background-color: var(--x-background-color);
     border-radius: 100em;
     justify-content: center;
     align-items: center;
@@ -95714,6 +97319,10 @@ const css$a = /* css */`@layer navi;
       font-size: var(--x-number-font-size);
     }
   }
+
+  &[data-background-color] {
+    background-color: var(--x-background-color);
+  }
 }
 `;
 const BadgeCountOverflow = () => jsx("span", {
@@ -95850,6 +97459,7 @@ const BadgeCountEllipse = ({
     "data-ellipse": "",
     "data-value-overflow": hasOverflow ? "" : undefined,
     "data-loading": loading ? "" : undefined,
+    "data-background-color": props.backgroundColor === undefined ? undefined : "",
     "data-single-char": charCount === 1 ? "" : undefined,
     ...props,
     styleCSSVars: BadgeCountStyleCSSVars,
@@ -95872,6 +97482,7 @@ const BadgeCountCircle = ({
     "data-circle": "",
     bold: true,
     "data-loading": loading ? "" : undefined,
+    "data-background-color": props.backgroundColor === undefined ? undefined : "",
     "data-single-char": charCount === 1 ? "" : undefined,
     "data-two-chars": charCount === 2 ? "" : undefined,
     "data-three-chars": charCount === 3 ? "" : undefined,
@@ -96364,7 +97975,7 @@ const css$8 = /* css */`@layer navi;
 `;
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   children?: number | string,
  *   unit?: string | [string, string],
  *   unitPosition?: "right" | "bottom",
@@ -96956,8 +98567,8 @@ const css$4 = /* css */`.svg_mask_content * {
  *
  * @param {Object} props - Component properties
  * @param {string} props.viewBox - The main viewBox for the composition (required as soon as there is an overlay)
- * @param {import("ignore:preact").ComponentChildren} props.children - SVG elements (first is base, rest are overlays)
- * @returns {import("ignore:preact").VNode} A composed SVG with all elements properly masked
+ * @param {import("preact").ComponentChildren} props.children - SVG elements (first is base, rest are overlays)
+ * @returns {import("preact").VNode} A composed SVG with all elements properly masked
  */
 const SVGMaskOverlay = ({
   viewBox,
@@ -97047,7 +98658,6 @@ const css$3 = /* css */`@layer navi {
   padding-bottom: var(--layout-padding-bottom, var(--layout-padding-y, var(--layout-padding)));
   padding-left: var(--layout-padding-left, var(--layout-padding-x, var(--layout-padding)));
   background: var(--layout-background);
-  background-color: var(--layout-background-color, var(--layout-background));
   border-width: var(--layout-border-width);
   border-style: solid;
   border-color: var(--layout-border-color);
@@ -97064,7 +98674,6 @@ const CardLayoutStyleCSSVars = {
   borderWidth: "--layout-border-width",
   borderColor: "--layout-border-color",
   background: "--layout-background",
-  backgroundColor: "--layout-background-color",
   padding: "--layout-padding",
   paddingTop: "--layout-padding-top",
   paddingBottom: "--layout-padding-bottom",
@@ -97079,7 +98688,7 @@ const CardLayoutStyleCSSVars = {
  * what holds it, so how tall that area is is up to the page around it, as for
  * `ViewportLayout`.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   alignX?: string,
  *   alignY?: string,
  *   margin?: string|number,
@@ -97104,6 +98713,7 @@ const CardLayout = ({
   children,
   alignX = "center",
   alignY = "center",
+  backgroundColor,
   ...props
 }) => {
   import.meta.css = [css$3, "@jsenv/navi/src/layout/card_layout.jsx"];
@@ -97122,6 +98732,7 @@ const CardLayout = ({
       className: "navi_card",
       alignX: alignX,
       alignY: alignY,
+      backgroundColor: backgroundColor,
       children: children
     })
   });
@@ -97295,7 +98906,7 @@ const LINE_GAP = 5;
 const StepListContext = createContext(null);
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   current?: string,
  *   slideContainer?: string,
  *   travelByClick?: boolean,
@@ -97652,7 +99263,7 @@ const sameShallow = (previousObject, nextObject) => {
  * It is both StepList.Item and an export of its own, the way Slide is to
  * SlideContainer.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   value: string,
  *   done?: boolean,
  *   [key: string]: any,
@@ -97714,7 +99325,7 @@ const ViewportLayoutStyleCSSVars = {
  * same inside a route, a preview pane or a demo box, and it is up to the page
  * around it to be full-height.
  *
- * @type {import("ignore:preact").FunctionComponent<{
+ * @type {import("preact").FunctionComponent<{
  *   padding?: string|number,
  *   paddingTop?: string|number,
  *   paddingBottom?: string|number,
@@ -97939,7 +99550,7 @@ const css = /* css */`.navi_side_panel {
  *   `closeByPressOutside`/`pressOutside` only say what a
  *   press on the wall does, not whether there is one (see `dialog.jsx`'s own
  *   doc).
- * @param {import("ignore:preact").ComponentChildren} props.children - No built-in
+ * @param {import("preact").ComponentChildren} props.children - No built-in
  *   close button — add one wherever it makes sense for the layout (e.g. a
  *   plain `<Button command="--navi-close">` in `SidePanel.Head`), or rely on
  *   `closeByPressOutside`/Escape instead.
@@ -98038,7 +99649,7 @@ const toCssLength = (value, propertyName) => value === undefined || value === nu
  * @param {object} props
  * @param {string} [props.className] - Merged with the shared
  *   `"navi_side_panel_head"` class this file's own CSS targets.
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  */
 const SidePanelHead = props => jsx(Box, {
   baseClassName: "navi_side_panel_head",
@@ -98051,7 +99662,7 @@ const SidePanelHead = props => jsx(Box, {
  * @param {object} props
  * @param {string} [props.className] - Merged with the shared
  *   `"navi_side_panel_foot"` class this file's own CSS targets.
- * @param {import("ignore:preact").ComponentChildren} props.children
+ * @param {import("preact").ComponentChildren} props.children
  */
 const SidePanelFoot = props => jsx(Box, {
   className: "navi_side_panel_foot",
@@ -98060,6 +99671,58 @@ const SidePanelFoot = props => jsx(Box, {
 SidePanel.Head = SidePanelHead;
 SidePanel.Foot = SidePanelFoot;
 
+/**
+ * Creates a linked `[Slot, SlotFill]` pair so content rendered anywhere in
+ * the tree (`SlotFill`) appears at a fixed location elsewhere (`Slot`) — a
+ * lightweight, signal-based alternative to a DOM portal: `SlotFill` itself
+ * renders nothing (no extra DOM node at its own call site), it just writes
+ * its props into a shared signal that `Slot` reads reactively.
+ *
+ * Holds at most one filler at a time — there is no stacking/queueing. The
+ * filler is the last `SlotFill` (from this same `createSlot()` call) to
+ * mount, or the first to render into an empty slot; later renders of a
+ * `SlotFill` that is not the filler leave the slot alone. A `SlotFill`
+ * unmounting empties the slot only while it is still that one, and so does one
+ * in a page a route transition keeps while leaving (see keepLeavingPages in
+ * nav/route.jsx): still mounted, hidden, it must neither stay in the slot nor
+ * take it back from the page arriving.
+ *
+ * **One `SlotFill`, rendered where the choice is made.** `isFilled` follows
+ * the fills as they mount and unmount, in the order the tree walks them. A
+ * slot fed from several places — a `SlotFill` in each card of a board, each
+ * card deciding on its own whether it is the open one — reads as empty
+ * between the leaver and the newcomer whenever they render separately, and
+ * anything acting on `isFilled` acts on that empty frame (a `SidePanel` with
+ * `open={isFilled}` closes for good: its `onClose` clears the state the
+ * newcomer was waiting for). The slot cannot tell that gap from a real
+ * emptying, and does not try to: render one `SlotFill` at the level that
+ * holds the choice, with the chosen content as its children, and bind a
+ * state that must not blink (a panel's `open`) to the app's own signal
+ * rather than to `isFilled` — see docs/popup_open.md, "One panel, fed by a
+ * slot".
+ *
+ * `Slot` keeps `SlotRenderer` mounted permanently — even while unfilled it
+ * still renders it, with no props and `isFilled={false}` — instead of
+ * unmounting it. This lets `SlotRenderer` be a persistent wrapper (a
+ * `SidePanel` that opens and closes with an animation instead of being
+ * mounted/unmounted alongside the filler — see 7_slot_demo.html's "Two
+ * side-panel slots" section). A `SlotRenderer` that wants the
+ * render-nothing-when-unfilled behavior can opt in with its own
+ * `if (!isFilled) return null;` (the default `Box` renderer doesn't do
+ * this — an unfilled default slot just renders an empty `<Box/>`).
+ *
+ * @param {import("preact").ComponentType} [SlotRenderer=Box] - Rendered by
+ *   `Slot`, always, with whatever props `SlotFill` last set (spread
+ *   directly) plus `isFilled`. Swap this out to reuse the same slot
+ *   mechanism for something other than a plain `Box` (e.g. a specific
+ *   component expecting its own particular props, or a persistent wrapper
+ *   like `SidePanel`).
+ * @returns {[import("preact").ComponentType, import("preact").ComponentType<object>]}
+ *   `[Slot, SlotFill]` — `Slot` takes no props, render it once wherever the
+ *   content should appear. `SlotFill` takes whatever props `SlotRenderer`
+ *   expects, render it anywhere else in the tree to supply/update that
+ *   content.
+ */
 const createSlot = (SlotRenderer = Box) => {
   const slotPropsSignal = signal();
   let filler = null;