@jsenv/navi 0.29.90 → 0.29.92

package/dist/jsenv_navi.js

@@ -4,7 +4,7 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, stringifyStyle as stringifyStyle$1 } from "@jsenv/dom";
+import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, stringifyStyle as stringifyStyle$1, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, untracked, useSignal } from "@preact/signals";
 import { createContext, isValidElement, h, Fragment, render, toChildArray, options, cloneElement } from "preact";
@@ -38,7 +38,7 @@ installImportMetaCssBuild(import.meta);/**
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$12 = /* css */`
+const css$13 = /* css */`
   @layer navi {
     :root {
       /* A control that overlaps its neighbours (the members of a Group share
@@ -92,7 +92,7 @@ const css$12 = /* css */`
     }
   }
 `;
-import.meta.css = [css$12, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$13, "@jsenv/navi/src/navi_z_indexes.js"];
 
 const addIntoArray = (array, ...valuesToAdd) => {
   if (valuesToAdd.length === 1) {
@@ -342,11 +342,11 @@ installImportMetaCssBuild(import.meta);/**
  *
  * Two decisions worth knowing before reading:
  *
- * - **navi places the target itself, every time.** Where the browser does
- *   answer a fragment it puts the element against the top edge, where it reads
- *   as the first thing on the page rather than as the one that was pointed at;
- *   the alignment below is applied after, so one rule holds whether the target
- *   was there all along or arrived late. A page with nothing to scroll simply
+ * - **navi places the target itself, every time.** The scroll the browser
+ *   would have done — target against the top edge, instantly — is applied
+ *   here, after layout, so one rule holds whether the target was there all
+ *   along or arrived late; `setUrlTargetOptions` lets an app pick another
+ *   alignment or a smooth behavior. A page with nothing to scroll simply
  *   does not move, which is the whole of the "the list already fits on screen"
  *   case — the transient mark alone then says which one was meant.
  *
@@ -361,7 +361,7 @@ installImportMetaCssBuild(import.meta);/**
  * the very first render and the browser does everything on its own.
  */
 const URL_TARGET_ATTRIBUTE = "data-url-target";
-const css$11 = /* css */`
+const css$12 = /* css */`
   @layer navi {
     [${URL_TARGET_ATTRIBUTE}] {
       animation: navi_url_target var(--navi-url-target-duration, 2000ms)
@@ -379,10 +379,10 @@ const css$11 = /* css */`
     }
   }
 `;
-import.meta.css = [css$11, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$12, "@jsenv/navi/src/nav/url_target/url_target.js"];
 let urlTargetOptions = {
-  block: "center",
-  behavior: "smooth",
+  block: "start",
+  behavior: "instant",
   markDuration: 2000,
   graceAfterIdle: 1000,
   maxWait: 10_000
@@ -392,12 +392,12 @@ let urlTargetOptions = {
  * Adjusts how navi answers the element designated by the URL hash.
  *
  * @param {object} options
- * @param {"start"|"center"|"end"|"nearest"} [options.block="center"]
- *   Vertical alignment of the scroll. "center" by default: an element stuck to
- *   the top of the screen reads as the first one of the page rather than as the
- *   one that was pointed at.
- * @param {ScrollBehavior} [options.behavior="smooth"]
- *   Overridden with "instant" under `prefers-reduced-motion: reduce`.
+ * @param {"start"|"center"|"end"|"nearest"} [options.block="start"]
+ *   Vertical alignment of the scroll. "start" by default — the alignment the
+ *   browser itself uses when it answers a fragment.
+ * @param {ScrollBehavior} [options.behavior="instant"]
+ *   "instant" by default, like the browser. When set to "smooth", it is
+ *   overridden with "instant" under `prefers-reduced-motion: reduce`.
  * @param {number} [options.markDuration=2000]
  *   How long, in ms, the element carries `data-url-target`. Published to CSS as
  *   `--navi-url-target-duration`.
@@ -6403,7 +6403,7 @@ installImportMetaCssBuild(import.meta);/**
  * - Arrow automatically shows when pointing at a valid anchor element
  * - Centers in viewport when no anchor element provided or anchor is too big
  */
-const css$10 = /* css */`
+const css$11 = /* css */`
   @layer navi {
     .navi_callout {
       /* A callout is parented to what it explains, so it inherits from it — and
@@ -6646,7 +6646,7 @@ const openCallout = (message, {
   skipFocus = false,
   debug = () => {}
 } = {}) => {
-  import.meta.css = [css$10, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$11, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -8009,7 +8009,14 @@ const isControlBusy = (field) => {
     return true;
   }
   const { boundAction } = field;
-  if (boundAction && boundAction.runningStateSignal.value === RUNNING) {
+  // An optimistic control stays interactive while its bound action runs:
+  // a new interaction is queued behind the run (see the action queue in
+  // control_hooks.jsx) rather than refused.
+  if (
+    !field.optimistic &&
+    boundAction &&
+    boundAction.runningStateSignal.value === RUNNING
+  ) {
     return true;
   }
   if (field.loadingFromParent) {
@@ -18866,7 +18873,7 @@ const setupNetworkMonitoring = () => {
 };
 setupNetworkMonitoring();
 
-installImportMetaCssBuild(import.meta);const css$$ = /* css */`
+installImportMetaCssBuild(import.meta);const css$10 = /* css */`
   .navi_loading_indicator_fluid_container {
     position: relative;
     display: flex;
@@ -18898,7 +18905,7 @@ const LoadingIndicatorFluid = ({
   visuallyHidden,
   ...rest
 }) => {
-  import.meta.css = [css$$, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
+  import.meta.css = [css$10, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
   const ref = useRef(null);
   // The container dimensions can be deduced from the ref itself as the indicator is absolute inset 0
   const [containerWidth, setContainerWidth] = useState(0);
@@ -19103,7 +19110,7 @@ const LoadingRectangleSvg = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$_ = /* css */`
+installImportMetaCssBuild(import.meta);const css$$ = /* css */`
   .navi_loading_outline_wrapper {
     position: absolute;
     /* Controls place the outline slightly outside their box, right on top of
@@ -19140,7 +19147,7 @@ installImportMetaCssBuild(import.meta);const css$_ = /* css */`
   }
 `;
 const LoadingOutline = props => {
-  import.meta.css = [css$_, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
+  import.meta.css = [css$$, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
   if (props.containerRef) {
     const container = props.containerRef.current;
     if (!container) {
@@ -19430,7 +19437,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);// https://jsfiddle.net/v5xzJ/4/
-const css$Z = /* css */`
+const css$_ = /* css */`
   @layer navi {
     .navi_text {
       &[data-skeleton] {
@@ -19951,7 +19958,7 @@ const TextShrinkWrap = props => {
   });
 };
 const TextUI = props => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
   let {
     ref,
     spacing,
@@ -23198,6 +23205,7 @@ const CONTROL_PROP_SET = new Set([
   "resetOnCancel",
   "resetOnAbort",
   "resetOnError",
+  "optimistic",
 
   "charGuard",
   "maxLengthGuard",
@@ -23897,7 +23905,15 @@ const useUIStateController = (
           // Uses the in-memory registry instead of DOM queries so this works even
           // when sibling items are virtualized (not in the DOM).
           // Form scoping is preserved by comparing parentUIStateController references.
-          if (isRadio && newUIState && controller.name && !controlProxyFor) {
+          // Checked, not truthy: a radio holding `false` (two rows asking a
+          // yes/no) is as checked as one holding a name, and the row that was
+          // checked before has to let go all the same.
+          if (
+            isRadio &&
+            newUIState !== undefined &&
+            controller.name &&
+            !controlProxyFor
+          ) {
             const siblings = getRadioSiblings(controller);
             if (siblings) {
               const siblingUncheckEvent = new CustomEvent(
@@ -24422,6 +24438,18 @@ const GROUP_DEFAULTS = {
       if (isNamelessGrouping(child, child.uiState)) {
         return newUIState;
       }
+      if (
+        newUIState !== null &&
+        typeof newUIState === "object" &&
+        Object.keys(newUIState).length === 0
+      ) {
+        // An object with nothing in it is not a partial answer, it is the
+        // absence of one — a group being cleared — and every child empties. A
+        // partial object leaves the children it does not name alone, which is
+        // what CANNOT_DERIVE says below: a value that mentions `start` says
+        // nothing about `end`, an empty one says there is no answer at all.
+        return undefined;
+      }
       return CANNOT_DERIVE;
     },
   },
@@ -24465,6 +24493,7 @@ const useUIGroupStateController = (
     childControlFilter,
     aggregateChildStates,
     distributeChildUIState,
+    distributeChildStates,
     wantRequesterButtonState,
     uiActionInternal,
     allowCapture = false,
@@ -24481,7 +24510,7 @@ const useUIGroupStateController = (
   // whatever IT says — a "HH:MM", an ISO duration — and the shape checks in
   // setUIState below are about the default shape, not about that one.
   const stateShapeIsTheDefaultOne =
-    !aggregateChildStates && !distributeChildUIState;
+    !aggregateChildStates && !distributeChildUIState && !distributeChildStates;
   const defaults = GROUP_DEFAULTS[controlType] ?? GROUP_DEFAULTS[stateType];
   const resolvedChildControlFilter =
     childControlFilter ?? defaults?.childControlFilter ?? null;
@@ -24489,6 +24518,12 @@ const useUIGroupStateController = (
     aggregateChildStates ?? defaults?.aggregateChildStates;
   const resolvedDistributeChildUIState =
     distributeChildUIState ?? defaults?.distributeChildUIState;
+  // The plural half of the pair: `aggregateChildStates` already sees all the
+  // children at once, and a group whose value is not one key per child usually
+  // needs the same view on the way down — which of four seats each player takes
+  // cannot be decided one seat at a time. Given both, the plural one wins.
+  const resolvedDistributeChildStates =
+    distributeChildStates ?? defaults?.distributeChildStates;
   if (
     typeof resolvedAggregateChildStates !== "function" ||
     typeof resolvedDistributeChildUIState !== "function"
@@ -24743,6 +24778,48 @@ const useUIGroupStateController = (
         // Where the group puts a value on ONE child: the only place that knows
         // what each child gets, and the only one that sees a child it cannot
         // place — see warnChildAnswersForItself.
+        // One pass over every child, which is what a plural distribute needs:
+        // it is asked once, sees the whole group, and answers for all of them.
+        placeChildrenUIState: (groupUIState, e) => {
+          if (!resolvedDistributeChildStates) {
+            for (const childUIStateController of childUIStateControllerArray) {
+              controller.placeChildUIState(
+                childUIStateController,
+                groupUIState,
+                e,
+              );
+            }
+            return;
+          }
+          const monitoredChildren = childUIStateControllerArray.filter(
+            shouldPropagateStateToChild,
+          );
+          const stateByChild = resolvedDistributeChildStates(
+            groupUIState,
+            monitoredChildren,
+          );
+          if (!stateByChild) {
+            return;
+          }
+          for (const childUIStateController of monitoredChildren) {
+            if (!stateByChild.has(childUIStateController)) {
+              // Not named by the answer: left where it is, the way
+              // CANNOT_DERIVE leaves a child a per-child distribute says
+              // nothing about.
+              continue;
+            }
+            if (
+              childUIStateController.hasStateProp &&
+              !childUIStateController.props.signal
+            ) {
+              continue;
+            }
+            childUIStateController.setUIState(
+              stateByChild.get(childUIStateController),
+              e,
+            );
+          }
+        },
         placeChildUIState: (childUIStateController, groupUIState, e) => {
           if (!shouldPropagateStateToChild(childUIStateController)) {
             return;
@@ -24804,13 +24881,7 @@ const useUIGroupStateController = (
             detail: {},
           });
           chainEvent(propagateDownEvent, e);
-          for (const childUIStateController of childUIStateControllerArray) {
-            controller.placeChildUIState(
-              childUIStateController,
-              newUIState,
-              propagateDownEvent,
-            );
-          }
+          controller.placeChildrenUIState(newUIState, propagateDownEvent);
           const groupUIState = aggregateGroupUIState(newUIState);
           if (e.type === "initial_state_push") {
             controller.syncInternalState(groupUIState);
@@ -24885,11 +24956,21 @@ const useUIGroupStateController = (
             const initialEvent = new CustomEvent("initial_state_push", {
               detail: {},
             });
-            controller.placeChildUIState(
-              childUIStateController,
-              stateToPlaceChildFrom,
-              initialEvent,
-            );
+            if (resolvedDistributeChildStates) {
+              // A group answering for all its children at once has to be asked
+              // again now that there is one more: what each of them shows may
+              // depend on who else is there.
+              controller.placeChildrenUIState(
+                stateToPlaceChildFrom,
+                initialEvent,
+              );
+            } else {
+              controller.placeChildUIState(
+                childUIStateController,
+                stateToPlaceChildFrom,
+                initialEvent,
+              );
+            }
           }
           onChange(new CustomEvent(`${childControlType}_mount`), {
             notifyExternal: "silent",
@@ -25064,13 +25145,7 @@ const useUIGroupStateController = (
           "propagate_down_set_ui_state",
           { detail: {} },
         );
-        for (const childUIStateController of childUIStateControllerArray) {
-          controller.placeChildUIState(
-            childUIStateController,
-            groupUIState,
-            propagateDownEvent,
-          );
-        }
+        controller.placeChildrenUIState(groupUIState, propagateDownEvent);
         controller.syncInternalState(groupUIState);
       };
       if (
@@ -25361,6 +25436,7 @@ const useUIFacadeStateController = (props, realUIStateController) => {
       return {
         controller: facadeUIStateController,
         realUIStateController,
+        props,
       };
     },
     // ── update: runs every render after the first ─────────────────────────
@@ -25374,6 +25450,7 @@ const useUIFacadeStateController = (props, realUIStateController) => {
 
       return {
         realUIStateController,
+        props,
       };
     },
   );
@@ -25536,17 +25613,21 @@ const resolveClearedUIState = (controller) => {
   return "";
 };
 
-// What a control says when it has nothing to say: no value at all, or the empty
-// array/object a group falls back to while it has no child to aggregate.
+// What a control says when it has nothing to say: no value at all, the empty
+// array/object a group falls back to while it has no child to aggregate — or a
+// shape whose every part is itself nothing. That last one is what a group with
+// an aggregate of its own produces before its children have arrived
+// (`{ mode: undefined, levels: [] }` has two keys and says nothing), and
+// reading it as an answer is how a popup opening empties the row above it.
 const uiStateHoldsNothing = (uiState) => {
   if (uiState === undefined) {
     return true;
   }
   if (Array.isArray(uiState)) {
-    return uiState.length === 0;
+    return uiState.every(uiStateHoldsNothing);
   }
   if (uiState !== null && typeof uiState === "object") {
-    return Object.keys(uiState).length === 0;
+    return Object.values(uiState).every(uiStateHoldsNothing);
   }
   return false;
 };
@@ -26420,7 +26501,11 @@ const createControlInfo = (props, {
     if (typeProp === "checkbox" || typeProp === "radio") {
       statePropName = "checked";
       defaultStatePropName = "defaultChecked";
-      value = props.value || "on";
+      // "on" is what HTML sends for a checkbox given no value of its own — the
+      // default of an ABSENT prop, not of a falsy one: `value={false}` and
+      // `value={0}` are values, and two rows holding true and false are how a
+      // list asks a yes/no question.
+      value = props.value === undefined ? "on" : props.value;
       signalHoldsChecked = true;
       if (signal) {
         if (props.defaultChecked) {
@@ -26605,6 +26690,7 @@ const useControlgroupProps = (props, {
   childControlFilter,
   aggregateChildStates,
   distributeChildUIState,
+  distributeChildStates,
   wantRequesterButtonState,
   uiActionInternal,
   allowCapture = false,
@@ -26618,6 +26704,7 @@ const useControlgroupProps = (props, {
     childControlFilter,
     aggregateChildStates,
     distributeChildUIState,
+    distributeChildStates,
     wantRequesterButtonState,
     uiActionInternal,
     allowCapture,
@@ -26832,7 +26919,8 @@ const useInteractiveProps = (props, {
       disabled,
       required,
       readOnly,
-      loading
+      loading,
+      optimistic
     } = props;
     const disabledResolved = disabled || controlDisabled;
     const requiredResolved = required || controlRequired;
@@ -26847,14 +26935,22 @@ const useInteractiveProps = (props, {
     // but cannot be taken.
     const readOnlyFromParentMaxLengthGuard = Boolean(uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
     const readOnlyBase = readOnly || controlReadOnly || loadingBase || readOnlyFromParentMaxLengthGuard || controlInfo.readOnlyUncontrolled;
-    const loadingResolved = loadingBase || actionStatus.loading;
-    const readOnlyResolved = readOnlyBase || actionStatus.loading;
+    // An optimistic control trusts its action to succeed: the state the user
+    // just set stays visible and interactive while the action runs — no
+    // loading, no readonly. On failure resetOnError rolls the state back and
+    // the error callout says why.
+    const actionLoading = optimistic ? false : actionStatus.loading;
+    const loadingResolved = loadingBase || actionLoading;
+    const readOnlyResolved = readOnlyBase || actionLoading;
     // Both halves of "busy" that do not come from the bound action, kept apart
     // from each other and from it: BUSY_CONSTRAINT answers each from its own
     // live source rather than from the rendered aria-busy, which conflates all
     // three and is a frame behind. See its own comment.
     uiStateController.loadingFromOwnProp = Boolean(loading);
     uiStateController.loadingFromParent = loadingFromParent;
+    // Read by BUSY_CONSTRAINT: an optimistic control stays interactive while
+    // its bound action runs (a new toggle replaces the run instead of waiting).
+    uiStateController.optimistic = Boolean(optimistic);
     Object.assign(controlHostProps, {
       "required": requiredResolved,
       "aria-busy": loadingResolved ? "true" : "false",
@@ -27020,7 +27116,8 @@ const useInteractiveProps = (props, {
       onActionEnd,
       resetOnCancel,
       resetOnAbort,
-      resetOnError
+      resetOnError,
+      optimistic
     } = props;
     Object.assign(controlHostProps, {
       onFocus: e => {
@@ -27075,14 +27172,80 @@ const useInteractiveProps = (props, {
           // special case for the use case where form.requestSubmit is called
           e.detail.action = boundAction;
         }
+        // An optimistic control stays interactive while its action runs, so a
+        // second request can arrive mid-run. The server must receive them in
+        // order: the new request is queued (latest wins — the bound action
+        // reads the UI state signal at run time, so what goes out is always
+        // the current state) and goes out once the running one has truly
+        // settled (see onnavi_action_start). The running action is asked to
+        // abort — its outcome is already outdated — but aborting is only a
+        // resource optimization (a fetch wired to the action's signal gets
+        // cancelled): the server may have done the work anyway, and only the
+        // settlement says which. So even aborted, the underlying work is
+        // awaited before the queued request runs. See the abort section in
+        // docs/actions.md.
+        if (optimistic && uiStateController.actionInFlight) {
+          debugAction(e, `queueing action (one already in flight)`);
+          uiStateController.queuedActionAllowedEvent = e;
+          // The instance captured at navi_action_start, NOT boundAction:
+          // boundAction is a proxy following the UI state signal, and the UI
+          // state has already moved to the new value by now — the proxy would
+          // resolve to the instance for that new value, which is not the one
+          // running.
+          uiStateController.runningAction?.abort(`superseded by a newer request on this control`);
+          return;
+        }
         debugAction(e, `executing action ${e.detail.action.callSource}`);
         executeAction(e);
       },
       onnavi_action_start: e => {
+        // The run this control currently waits on, identified by the
+        // navi_action_allowed event that launched it (unique per execution,
+        // carried by every navi_action_* event of that run).
+        uiStateController.pendingActionEvent = e.detail.event;
+        uiStateController.actionInFlight = true;
+        // The very instance this run uses, resolved now — while the UI state
+        // still holds the value the run was made for. detail.action may be a
+        // proxy following that state, and by the time anyone wants to abort
+        // this run (see the optimistic queue above), the state — and the
+        // proxy's resolution — will have moved on.
+        const runAction = e.detail.action;
+        uiStateController.runningAction = runAction.getCurrentAction?.() ?? runAction;
+        // Fires when the run's underlying work has settled — even for an
+        // aborted run, whose promise is awaited to completion (see
+        // performRun in actions.js) — which is exactly what "the server is
+        // done with it" means, and therefore when the queued request may go.
+        e.detail.addSideEffect(outcome => {
+          uiStateController.actionInFlight = false;
+          uiStateController.runningAction = null;
+          const queuedEvent = uiStateController.queuedActionAllowedEvent;
+          uiStateController.queuedActionAllowedEvent = null;
+          if (!queuedEvent) {
+            return;
+          }
+          if (outcome.error) {
+            // A failure abandons the queue: the UI is rolled back to the last
+            // known state (resetOnError above), and what was queued was built
+            // on top of the state that just failed.
+            return;
+          }
+          // A microtask later, not right here: this runs inside the batch()
+          // that settles the action (see watchActionCompletion for the same
+          // constraint).
+          queueMicrotask(() => {
+            executeAction(queuedEvent);
+          });
+        });
         onActionStart?.(e);
       },
       onnavi_action_abort: e => {
-        if (resetOnAbort) {
+        // Only an abort that leaves the control with nothing left to do may
+        // reset the UI state. An abort whose run was superseded — a queued
+        // request waits behind it (optimistic), or a newer run already
+        // started — must leave the state alone: it belongs to the newer
+        // request, resetting would throw away what the user just set.
+        const superseded = Boolean(uiStateController.queuedActionAllowedEvent) || e.detail.event !== uiStateController.pendingActionEvent;
+        if (resetOnAbort && !superseded) {
           dispatchRequestResetUIState(e.currentTarget, e);
         }
         onActionAborted?.(e);
@@ -27180,7 +27343,7 @@ const getAssociatedLabels = element => {
   return Array.from(element.labels);
 };
 
-installImportMetaCssBuild(import.meta);const css$Y = /* css */`
+installImportMetaCssBuild(import.meta);const css$Z = /* css */`
   @layer navi {
     .navi_button {
       --button-border-radius: var(--navi-control-border-radius);
@@ -27611,7 +27774,7 @@ installImportMetaCssBuild(import.meta);const css$Y = /* css */`
   }
 `;
 const ButtonUI = props => {
-  import.meta.css = [css$Y, "@jsenv/navi/src/control/input/button_ui.jsx"];
+  import.meta.css = [css$Z, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -29322,7 +29485,7 @@ installImportMetaCssBuild(import.meta);/**
  * reaches the real container.
  */
 let openLocalDialogCount = 0;
-const css$X = /* css */`
+const css$Y = /* css */`
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -29906,7 +30069,7 @@ const css$X = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
-  import.meta.css = [css$X, "@jsenv/navi/src/layout/dialog.jsx"];
+  import.meta.css = [css$Y, "@jsenv/navi/src/layout/dialog.jsx"];
   if (props.openController) {
     return jsx(ControlledDialog, {
       ...props
@@ -30898,7 +31061,7 @@ installImportMetaCssBuild(import.meta);/**
  * and applied.
  */
 let openLocalPopoverCount = 0;
-const css$W = /* css */`
+const css$X = /* css */`
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*
@@ -31354,7 +31517,7 @@ const css$W = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
-  import.meta.css = [css$W, "@jsenv/navi/src/layout/popover.jsx"];
+  import.meta.css = [css$X, "@jsenv/navi/src/layout/popover.jsx"];
   if (props.openController) {
     return jsx(ControlledPopover, {
       ...props
@@ -32382,7 +32545,7 @@ installImportMetaCssBuild(import.meta);/**
  * event, and a caller replacing the body entirely then has one protocol to
  * follow — `--navi-confirm` for yes, anything that closes for no.
  */
-const css$V = /* css */`
+const css$W = /* css */`
   /* The width lives on the body rather than on the popup, so that custom
      content (which replaces this body entirely) sizes itself instead of
      inheriting a ceiling meant for a sentence-long question. */
@@ -32519,7 +32682,7 @@ const ConfirmPopup = ({
   onAnswer,
   onClosed
 }) => {
-  import.meta.css = [css$V, "@jsenv/navi/src/action/confirm_popup.jsx"];
+  import.meta.css = [css$W, "@jsenv/navi/src/action/confirm_popup.jsx"];
   const {
     mode,
     confirmLabel,
@@ -32603,7 +32766,7 @@ const defaultBody = (message, {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$U = /* css */`
+installImportMetaCssBuild(import.meta);const css$V = /* css */`
   .action_error {
     margin-top: 0;
     margin-bottom: 20px;
@@ -32628,7 +32791,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$U, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$V, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -38372,7 +38535,7 @@ const ROUTE_TRAVEL_ATTRIBUTE = "data-navi-route-travel";
 // the root pictures must NOT move (they carry the whole viewport, blank bands
 // included).
 
-const css$T = /* css */`
+const css$U = /* css */`
   /* The marked region is a picture of its own for the length of a transition of
      OURS, and only then — the name is what makes the pages a picture the
      movement below can carry.
@@ -38801,7 +38964,7 @@ const RouteTransitionArea = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const props = {
     ...rest,
     [TRANSITION_AREA_ATTRIBUTE]: ""
@@ -38858,7 +39021,7 @@ const RouteTransitionArea = ({
  * @returns {() => void} remove this relation.
  */
 const defineRouteTransition = (from, to, transition) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const {
     type,
     duration
@@ -38894,7 +39057,7 @@ const defineRouteTransition = (from, to, transition) => {
  * @returns {() => void} remove this default.
  */
 const defineRouteDefaultTransition = transition => {
-  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const value = normalizeTransition(transition);
   defaultTransition = value;
   return () => {
@@ -39495,7 +39658,7 @@ const DRAGGED_ATTRIBUTE = "data-navi-route-travel-dragged";
 const TURNED_ATTRIBUTE = "data-navi-route-travel-turned";
 // The name the box wears while it travels, and only then (see nameForTravel).
 const TRAVEL_NAME = "navi-route-travel";
-const css$S = /* css */`
+const css$T = /* css */`
   /* The name that makes the page inside this box a picture of its own during a
      transition — rather than part of the one big picture the document takes, so
      the two pages can move past each other while everything else stays where it
@@ -39885,7 +40048,7 @@ const RouteTravel = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$S, "@jsenv/navi/src/nav/route_travel.jsx"];
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_travel.jsx"];
   const elementRef = useRef();
   const gestureRef = useRef(null);
   // The travel in hand: the transition keeping the picture of the page being
@@ -42447,7 +42610,7 @@ const PhoneSvg = () => {
 };
 
 installImportMetaCssBuild(import.meta);// # TextAnchor — how it works
-const css$R = /* css */`
+const css$S = /* css */`
   .navi_text_anchor {
     vertical-align: baseline;
     user-select: none;
@@ -42482,7 +42645,7 @@ const TextAnchor = ({
   textSize,
   lineLayout
 }) => {
-  import.meta.css = [css$R, "@jsenv/navi/src/text/text_anchor.jsx"];
+  import.meta.css = [css$S, "@jsenv/navi/src/text/text_anchor.jsx"];
   const anchorRef = useRef();
 
   // Plain useLayoutEffect would also fire while an ancestor dialog/popover
@@ -42597,7 +42760,7 @@ const computeTopOffset = ({
 };
 const charTopCanvas = document.createElement("canvas");
 
-installImportMetaCssBuild(import.meta);const css$Q = /* css */`
+installImportMetaCssBuild(import.meta);const css$R = /* css */`
   @layer navi {
     /* Ensure data attributes from box.jsx can win to update display */
     .navi_icon {
@@ -42755,7 +42918,7 @@ const Icon = ({
   fillLine,
   ...props
 }) => {
-  import.meta.css = [css$Q, "@jsenv/navi/src/text/icon.jsx"];
+  import.meta.css = [css$R, "@jsenv/navi/src/text/icon.jsx"];
   const innerChildren = href ? jsx("svg", {
     width: "100%",
     height: "100%",
@@ -42917,7 +43080,7 @@ const useDimColorWhen = (elementRef, shouldDim) => {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$P = /* css */`
+installImportMetaCssBuild(import.meta);const css$Q = /* css */`
   @layer navi {
     .navi_link {
       --link-border-radius: unset;
@@ -43379,7 +43542,7 @@ Object.assign(PSEUDO_CLASSES, {
  * @param {boolean} [props.readOnly]
  */
 const Link = props => {
-  import.meta.css = [css$P, "@jsenv/navi/src/nav/link/link.jsx"];
+  import.meta.css = [css$Q, "@jsenv/navi/src/nav/link/link.jsx"];
   if (props.route) {
     return jsx(LinkWithRoute, {
       ...props
@@ -43702,7 +43865,7 @@ installImportMetaCssBuild(import.meta);/**
  * https://dribbble.com/search/tabs
  */
 let navCount = 0;
-const css$O = /* css */`
+const css$P = /* css */`
   @layer navi {
     .navi_nav {
       --nav-border: none;
@@ -43985,7 +44148,7 @@ const Nav = ({
   slideContainer,
   ...props
 }) => {
-  import.meta.css = [css$O, "@jsenv/navi/src/nav/link/nav.jsx"];
+  import.meta.css = [css$P, "@jsenv/navi/src/nav/link/nav.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const navRef = props.ref;
@@ -44512,7 +44675,7 @@ installImportMetaCssBuild(import.meta);/**
  * Border width participates in layout (it is added to the tab and page
  * padding): a thick border grows the binder rather than eating into the text.
  */
-const css$N = /* css */`
+const css$O = /* css */`
   @layer navi {
     .navi_binder {
       --binder-border-width: var(--navi-control-border-width);
@@ -44825,7 +44988,7 @@ const Binder = ({
   pagePadding,
   ...props
 }) => {
-  import.meta.css = [css$N, "@jsenv/navi/src/nav/binder/binder.jsx"];
+  import.meta.css = [css$O, "@jsenv/navi/src/nav/binder/binder.jsx"];
   const items = toChildArray(children).map((child, index) => {
     const {
       value: itemValue,
@@ -45312,7 +45475,7 @@ installImportMetaCssBuild(import.meta);/**
  *    added to the size asked for exactly like the notch inset is, so the
  *    content still gets the size the prop names.
  */
-const css$M = /* css */`
+const css$N = /* css */`
   @layer navi {
     :root {
       --navi-fixed-bar-width: 56px;
@@ -45460,7 +45623,7 @@ const FixedBar = ({
   border = true,
   ...props
 }) => {
-  import.meta.css = [css$M, "@jsenv/navi/src/layout/fixed_bar/fixed_bar.jsx"];
+  import.meta.css = [css$N, "@jsenv/navi/src/layout/fixed_bar/fixed_bar.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   // Said with the width the border rule reads rather than with an attribute of
@@ -45554,7 +45717,7 @@ const FixedBar = ({
 // Subpixel layout rounds rectangles up on boxes that fit exactly.
 const OVERFLOW_TOLERANCE = 1;
 
-const css$L = /* css */ `
+const css$M = /* css */ `
   [data-navi-overflow-x] {
     outline: 2px dashed #e74c3c;
     outline-offset: -2px;
@@ -45578,7 +45741,7 @@ const detectHorizontalOverflow = ({
   let styleEl = null;
   if (highlight) {
     styleEl = document.createElement("style");
-    styleEl.textContent = css$L;
+    styleEl.textContent = css$M;
     document.head.appendChild(styleEl);
   }
 
@@ -45733,8 +45896,7 @@ const useFocusGroup = (
 };
 
 installImportMetaCssBuild(import.meta);const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
-const downArrowPath = "M480-280L160-600l80-80 240 240 240-240 80 80-320 320z";
-const css$K = /* css */`
+const css$L = /* css */`
   .navi_summary_marker {
     width: 1em;
     height: 1em;
@@ -45758,22 +45920,31 @@ const css$K = /* css */`
       }
     }
 
-    .navi_summary_marker_arrow {
-      opacity: 1;
-      transition: opacity 0.3s ease-in-out;
-      animation-duration: 0.3s;
-      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-      animation-fill-mode: forwards;
+    /* One chevron, rotated: the transition only ever plays on a direction
+       change, so the first paint shows the resting direction with no
+       movement. */
+    .navi_summary_marker_arrow_group {
+      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 
-      &[data-animation-target="down"] {
-        animation-name: morph-to-down;
+      &[data-direction="right"] {
+        transform: rotate(0deg);
       }
-
-      &[data-animation-target="right"] {
-        animation-name: morph-to-right;
+      &[data-direction="down"] {
+        transform: rotate(90deg);
+      }
+      &[data-direction="up"] {
+        transform: rotate(-90deg);
+      }
+      &[data-direction="left"] {
+        transform: rotate(180deg);
       }
     }
 
+    .navi_summary_marker_arrow {
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+
     &[data-loading] {
       .navi_summary_marker_loading_container {
         transform: scale(1);
@@ -45798,39 +45969,25 @@ const css$K = /* css */`
       stroke-dashoffset: -2010;
     }
   }
-  @keyframes morph-to-down {
-    from {
-      d: path("${rightArrowPath}");
-    }
-    to {
-      d: path("${downArrowPath}");
-    }
-  }
-  @keyframes morph-to-right {
-    from {
-      d: path("${downArrowPath}");
-    }
-    to {
-      d: path("${rightArrowPath}");
-    }
-  }
 `;
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   open?: boolean,
+ *   loading?: boolean,
+ *   openDirection?: "down" | "up" | "left",
+ * }>}
+ * @param openDirection - Where the chevron points while open; closed always
+ *   points right. "down" fits content revealed below (the <details> shape),
+ *   "up" content revealed above, "left" content revealed beside.
+ */
 const SummaryMarker = ({
   open,
-  loading
+  loading,
+  openDirection = "down"
 }) => {
-  import.meta.css = [css$K, "@jsenv/navi/src/control/details/summary_marker.jsx"];
+  import.meta.css = [css$L, "@jsenv/navi/src/control/details/summary_marker.jsx"];
   const showLoading = useDebounceTrue(loading, 300);
-  const mountedRef = useRef(false);
-  const prevOpenRef = useRef(open);
-  useLayoutEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  const shouldAnimate = mountedRef.current && prevOpenRef.current !== open;
-  prevOpenRef.current = open;
   return jsx("span", {
     className: "navi_summary_marker",
     "data-loading": showLoading ? "" : undefined,
@@ -45861,19 +46018,20 @@ const SummaryMarker = ({
           strokeDasharray: "503 1507"
         })]
       }), jsx("g", {
+        className: "navi_summary_marker_arrow_group",
+        "data-direction": open ? openDirection : "right",
         "transform-origin": "480px -480px",
         children: jsx("path", {
           className: "navi_summary_marker_arrow",
           fill: "currentColor",
-          "data-animation-target": shouldAnimate ? open ? "down" : "right" : undefined,
-          d: open ? downArrowPath : rightArrowPath
+          d: rightArrowPath
         })
       })]
     })
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$J = /* css */`
+installImportMetaCssBuild(import.meta);const css$K = /* css */`
   .navi_details {
     position: relative;
     z-index: 1;
@@ -45919,7 +46077,7 @@ const Details = props => {
   return details;
 };
 const DetailsField = props => {
-  import.meta.css = [css$J, "@jsenv/navi/src/control/details/details.jsx"];
+  import.meta.css = [css$K, "@jsenv/navi/src/control/details/details.jsx"];
   const {
     ref,
     persists,
@@ -46075,12 +46233,865 @@ const DetailsFieldContent = ({
   children
 }) => {
   const action = useContext(ActionContext);
+  if (!action) {
+    return children;
+  }
   return jsx(ActionRenderer, {
     action: action,
     children: children
   });
 };
 
+installImportMetaCssBuild(import.meta);/**
+ * Expandable: an in-flow disclosure — a UI part that reveals a content part.
+ * It covers the same ground as <Details> with structural differences:
+ *
+ * - the two parts are explicit and free to order/orient:
+ *
+ *     <Expandable>
+ *       <Expandable.UI>See more</Expandable.UI>
+ *       <Expandable.Content>…</Expandable.Content>
+ *     </Expandable>
+ *
+ *   Content after UI expands below (the <details> shape), Content before UI
+ *   expands above; `layout="column"` puts the parts side by side (sharing
+ *   their height), the content then expanding horizontally. The marker
+ *   chevron follows: it points right while closed and toward where the
+ *   content went while open (down, up, or left). The common shape has a
+ *   shorthand: `ui` prop + children as content.
+ * - the UI part is the focusable toggle itself (role button, Space/Enter,
+ *   arrow keys) and accepts any markup: controls inside it keep their own
+ *   behavior, the marker is purely decorative.
+ *
+ * Reach for it knowingly: expanding in-flow SHIFTS the layout — everything
+ * below (or beside) moves when it opens. A Popover, Dialog, Picker or Callout
+ * answers the same click on its own layer, moving nothing, which is usually
+ * the better UX: a layout that stays where it is reads and operates better —
+ * all the more on small screens, mobile first of all, where the shift can
+ * push most of the page away. Expandable is for content that genuinely
+ * belongs in the flow (a tree, a changelog, a settings group read top to
+ * bottom).
+ *
+ * What <details> gives for free is rebuilt here:
+ * - a "toggle" event (a real ToggleEvent when the browser has it) dispatched on
+ *   the root whenever the state actually changes — but never on mount, unlike
+ *   the native one (see the workaround comment in details.jsx);
+ * - `--navi-toggle`/`--navi-open`/`--navi-close` commands work against it: the
+ *   root and the UI part carry `aria-expanded` (what the command system reads)
+ *   and answer the `navi_command`/`navi_request_open`/`navi_request_close`
+ *   events.
+ *
+ * Content is not built until the first expansion and stays built afterwards —
+ * same policy, same prop names as popups (see popup_content_mount.js):
+ * `mountWhenClosed` builds it right away, `unmountWhenClosed` throws it away
+ * once the collapse settles (so a closing animation still plays on real
+ * content).
+ *
+ * The animation is a REVEAL, not a resize: the expandable's own footprint
+ * grows/shrinks progressively (the content's grid track interpolates
+ * 0fr <-> 1fr — rows for the stacked layout, columns for `layout="column"`),
+ * but the content inside is laid out at its final size for the whole movement
+ * (its animated dimension is frozen to the measured final value, see the
+ * [opened] effect) and the container simply uncovers it. Text never rewraps
+ * mid-animation. The content is revealed from its UI side (pinned against the
+ * UI when it comes first). Once settled open the clipping is released, so a
+ * popover or focus ring inside is not cut at the edges.
+ */
+const css$J = /* css */`
+  .navi_expandable {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+
+    > .navi_expandable_ui {
+      display: flex;
+      flex-shrink: 0;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.2em;
+      cursor: pointer;
+      user-select: none;
+
+      &:focus-visible {
+        border-radius: 4px;
+        outline: 2px solid AccentColor;
+        outline-offset: 1px;
+      }
+
+      > .navi_expandable_marker {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+      }
+
+      > .navi_expandable_ui_label {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: 0.2em;
+      }
+    }
+
+    > .navi_expandable_content_container {
+      position: relative;
+      display: grid;
+      grid-template-rows: 0fr;
+      /* The clip lives here, on the moving box, because the content inside
+         keeps its final size during the animation (see the top comment) and
+         overflows the track on purpose. One-sided (a clip-path with the free
+         sides pushed far out) rather than overflow: hidden: only the side
+         being revealed hides anything, so a badge sticking out of the other
+         sides is visible from the very first frame of the movement. */
+      clip-path: inset(-9999px -9999px 0 -9999px);
+
+      /* The sizer is what lets the track actually collapse: min-height 0 on
+         an auto-sized item zeroes its min-content contribution. The frozen
+         content cannot play that role itself — a definite height makes the
+         contribution definite too, and the track then never goes below it. */
+      > .navi_expandable_content_sizer {
+        display: grid;
+        min-height: 0;
+      }
+    }
+    &[aria-expanded="true"] > .navi_expandable_content_container {
+      grid-template-rows: 1fr;
+    }
+    /* Content before the UI: revealed against the UI side — the edge touching
+       the UI stays, the far edge is what gets uncovered. Said at BOTH levels:
+       a transitioning fr resolves once for the container's own size and once
+       more inside it (the row is fraction² high), so the row must be glued to
+       the container's UI edge and the oversized frozen content to the row's —
+       anchoring only the inner one leaves the content following the drifting
+       fraction² row. */
+    &[data-content-first]:not([data-layout="column"])
+      > .navi_expandable_content_container {
+      align-content: end;
+      clip-path: inset(0 -9999px -9999px -9999px);
+
+      > .navi_expandable_content_sizer {
+        align-content: end;
+      }
+    }
+
+    /* The parts sit side by side, sharing their height: the UI part becomes a
+       vertical strip and the content expands horizontally, on the columns
+       track — the rows track collapses too, so a closed expandable is only as
+       tall as its UI (the content, unmounted or 0-wide, says nothing about
+       the height it will bring). */
+    &[data-layout="column"] {
+      flex-direction: row;
+
+      > .navi_expandable_ui {
+        flex-direction: column;
+        align-items: center;
+
+        > .navi_expandable_ui_label {
+          flex-direction: column;
+        }
+      }
+      > .navi_expandable_content_container {
+        grid-template-columns: 0fr;
+        grid-template-rows: 0fr;
+        /* Both tracks reveal: clip the far side of each (right and bottom),
+           the UI side and the top stay free. */
+        clip-path: inset(-9999px 0 0 -9999px);
+
+        > .navi_expandable_content_sizer {
+          min-width: 0;
+          min-height: 0;
+        }
+      }
+      &[aria-expanded="true"] > .navi_expandable_content_container {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+      }
+      /* mountWhenClosed: the content is built and width-frozen while closed
+         (see the component), so it can size the height at all times — the
+         expandable then keeps one stable height and only the width reveals. */
+      &[data-closed-content-sized] > .navi_expandable_content_container {
+        grid-template-rows: none;
+      }
+      &[data-content-first] > .navi_expandable_content_container {
+        justify-content: end;
+        clip-path: inset(-9999px -9999px 0 0);
+
+        > .navi_expandable_content_sizer {
+          justify-content: end;
+        }
+      }
+    }
+
+    &[data-animation] > .navi_expandable_content_container {
+      transition:
+        grid-template-rows var(--navi-expandable-animation-duration, 0.3s) ease,
+        grid-template-columns var(--navi-expandable-animation-duration, 0.3s)
+          ease;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      &[data-animation] > .navi_expandable_content_container {
+        transition: none;
+      }
+    }
+    /* Settled open: stop clipping entirely, so a popover, a focus ring or a
+       dragged element inside the content can spill out on any side. Settled
+       closed: clip every side — the collapsed box must show nothing, a
+       stick-out included. In between (any movement, opening or closing) the
+       one-sided clips above apply. */
+    &[aria-expanded="true"][data-settled] > .navi_expandable_content_container {
+      clip-path: none;
+    }
+    &:not([aria-expanded="true"])[data-settled]
+      > .navi_expandable_content_container {
+      clip-path: inset(0 0 0 0);
+    }
+    &[data-content-scrolls]
+      > .navi_expandable_content_container
+      > .navi_expandable_content_sizer
+      > .navi_expandable_content {
+      max-height: var(--navi-expandable-max-content-height);
+      overflow-y: auto;
+    }
+  }
+`;
+const ExpandableContext = createContext(null);
+const useExpandableContext = partName => {
+  const expandableContext = useContext(ExpandableContext);
+  if (!expandableContext) {
+    throw new Error(`<Expandable.${partName}> must be used inside <Expandable>`);
+  }
+  return expandableContext;
+};
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   ui?: import("ignore:preact").ComponentChildren | ((state: { open: boolean }) => import("ignore:preact").ComponentChildren),
+ *   open?: boolean,
+ *   defaultOpen?: boolean,
+ *   signal?: import("@preact/signals").Signal<boolean>,
+ *   onToggle?: (event: Event) => void,
+ *   action?: Function,
+ *   loading?: boolean,
+ *   animation?: boolean,
+ *   layout?: "row" | "column",
+ *   autoFocus?: boolean,
+ *   maxContentHeight?: string | number,
+ *   mountWhenClosed?: boolean,
+ *   unmountWhenClosed?: boolean,
+ *   arrowKeyShortcuts?: boolean,
+ *   openKeyShortcut?: string,
+ *   closeKeyShortcut?: string,
+ * }>}
+ * @param ui - Shorthand for the common shape: renders `<Expandable.UI>{ui}</Expandable.UI>`
+ *   above the content (children). Any markup is allowed (buttons, links,
+ *   fields inside it keep their own behavior and do not toggle the
+ *   expandable). A function receives `{ open }` to render differently per
+ *   state. For other orders/orientations, pass `<Expandable.UI>` and
+ *   `<Expandable.Content>` as children instead.
+ * @param open - Drives the state from outside: the expandable opens/closes to
+ *   match every change of this prop, but user interaction can still toggle it
+ *   in between (same semantics as Dialog/Popover's own `open`).
+ * @param defaultOpen - Uncontrolled, mount-only initial state.
+ * @param signal - Two-way binding: the expandable follows the signal and
+ *   writes back into it whenever it toggles on its own. Excludes `open`.
+ * @param onToggle - Listens the "toggle" event dispatched on the root (a
+ *   ToggleEvent with newState/oldState where supported). Fires on every actual
+ *   state change, never on mount.
+ * @param action - Ran when the expandable opens, aborted when it closes.
+ *   Content children may then be a function `(data) => ui` or a branches
+ *   object (`{ loading, error, completed, ... }`) — see ActionRenderer.
+ * @param loading - Shows the loading spinner on the marker regardless of
+ *   `action`'s own loading state.
+ * @param animation - Off by default. `true` plays the reveal transition;
+ *   duration comes from `--navi-expandable-animation-duration` (0.3s).
+ * @param layout - `"row"` (default): the parts stack, the content expands
+ *   vertically. `"column"`: the parts sit side by side sharing their height,
+ *   the content expands horizontally next to the UI part.
+ * @param autoFocus - Off by default (the focus stays on the UI part when
+ *   opening). `true` moves the focus into the content on open — the
+ *   `[autofocus]` element if any, the first focusable otherwise. Whatever the
+ *   setting, closing while the focus is inside the content hands it back to
+ *   the UI part (it would otherwise be lost to the closed, inert content).
+ * @param maxContentHeight - Caps the content height; taller content scrolls
+ *   inside the expandable instead of growing it.
+ * @param mountWhenClosed - Builds the content right away instead of on first
+ *   expansion. In layout="column" it also gives the closed expandable its
+ *   content's height (the content is kept laid out at its open width), so
+ *   opening only reveals the width instead of changing the height too.
+ * @param unmountWhenClosed - Throws the content away once the collapse
+ *   settles — after the closing animation, so it still plays on real content —
+ *   and rebuilds it from scratch on every expansion.
+ */
+const Expandable = props => {
+  import.meta.css = [css$J, "@jsenv/navi/src/control/expandable/expandable.jsx"];
+  const {
+    ref,
+    ui,
+    open,
+    defaultOpen,
+    signal,
+    action,
+    loading,
+    animation = false,
+    layout,
+    autoFocus,
+    maxContentHeight,
+    mountWhenClosed,
+    unmountWhenClosed,
+    arrowKeyShortcuts = true,
+    openKeyShortcut = "ArrowRight",
+    closeKeyShortcut = "ArrowLeft",
+    children,
+    ...rest
+  } = props;
+  const defaultRef = useRef();
+  const rootRef = ref || defaultRef;
+  const uiRef = useRef();
+  const contentContainerRef = useRef();
+  const contentId = useId();
+  const isColumn = layout === "column";
+  const closedContentSized = Boolean(isColumn && mountWhenClosed);
+  // Reading .value during render is what subscribes the expandable to it.
+  const openRequested = signal ? signal.value : open;
+  const [opened, setOpened] = useState(() => Boolean(openRequested === undefined ? defaultOpen : openRequested));
+  const openedRef = useRef(opened);
+  openedRef.current = opened;
+  const hasAction = Boolean(action);
+  const effectiveAction = useAction(action);
+  const {
+    loading: actionLoading
+  } = useActionStatus(effectiveAction);
+  const [contentMounted, setContentMounted] = useState(() => Boolean(mountWhenClosed) || opened);
+  // Same exclusion as popup_content_mount.js: content that must exist while
+  // closed cannot also be thrown away on close.
+  const effectiveUnmountWhenClosed = unmountWhenClosed && !mountWhenClosed;
+
+  // Fully open and no longer moving — what allows overflow to become visible
+  // (see the CSS) and what unmountWhenClosed waits for before emptying.
+  const [settled, setSettled] = useState(true);
+
+  // Read before the close touches the DOM: flipping the content to inert can
+  // blur what it held, so by effect time the focus to hand back to the UI part
+  // could already be gone.
+  const focusedBeforeCloseRef = useRef(null);
+  // The pointer press that is about to toggle can blur the focused field
+  // before the click ever fires — so what held the focus has to be remembered
+  // at pointerdown time.
+  const focusedAtPointerDownRef = useRef(null);
+  const onUIPointerDown = () => {
+    focusedAtPointerDownRef.current = document.activeElement;
+  };
+
+  // The content keeps its final size while the track animates (see the top
+  // comment): its animated dimension is pinned to a measured pixel value, and
+  // released once the movement settles.
+  const freezeContentSize = () => {
+    const contentContainer = contentContainerRef.current;
+    const contentElement = contentContainer ? contentContainer.firstElementChild.firstElementChild : null;
+    if (!contentElement) {
+      return;
+    }
+    const rect = contentElement.getBoundingClientRect();
+    if (isColumn) {
+      // Both, not just the width: a max-height-capped content otherwise
+      // follows the collapsing rows track down instead of holding its size.
+      contentElement.style.width = `${rect.width}px`;
+      contentElement.style.height = `${rect.height}px`;
+    } else {
+      contentElement.style.height = `${rect.height}px`;
+    }
+  };
+
+  // Where the last paint left the track, measured before the toggle commits:
+  // 0 when fully closed, partway when reopening during a collapse. Read here
+  // rather than in the effect — a layout read after the commit would also be
+  // the first style recalc of the open state, starting the track transition
+  // right there; once canceled (to measure the final size), a new transition
+  // to the same end value refuses to start and the reveal jumps.
+  const revealStartSizeRef = useRef(null);
+  const toggleTo = nextOpen => {
+    nextOpen = Boolean(nextOpen);
+    if (nextOpen === openedRef.current) {
+      return;
+    }
+    openedRef.current = nextOpen;
+    if (nextOpen) {
+      if (animation) {
+        const contentContainer = contentContainerRef.current;
+        revealStartSizeRef.current = contentContainer ? contentContainer.getBoundingClientRect() : null;
+      }
+      setContentMounted(true);
+    } else {
+      const activeElement = document.activeElement;
+      focusedBeforeCloseRef.current = !activeElement || activeElement === document.body ? focusedAtPointerDownRef.current : activeElement;
+      if (animation) {
+        // Now, while the content is still fully laid out — by effect time the
+        // track is already heading to 0 (the opening case measures in the
+        // effect instead, where the just-mounted content exists).
+        freezeContentSize();
+      }
+    }
+    focusedAtPointerDownRef.current = null;
+    setOpened(nextOpen);
+    // Flipped here, before the closing/opening commit, so effects of that very
+    // commit already see the movement as started — unmountWhenClosed must not
+    // read a stale "settled" and empty the content under a closing animation.
+    setSettled(!animation);
+    if (signal) {
+      signal.value = nextOpen;
+    }
+    if (hasAction) {
+      if (nextOpen) {
+        effectiveAction.run();
+      } else {
+        effectiveAction.abort();
+      }
+    }
+  };
+  const findFirstFocusableInContent = () => {
+    const contentContainer = contentContainerRef.current;
+    if (!contentContainer) {
+      return null;
+    }
+    const autofocusElement = contentContainer.querySelector("[autofocus]");
+    if (autofocusElement) {
+      return autofocusElement;
+    }
+    return findAfter(contentContainer, elementIsFocusable, {
+      root: contentContainer
+    });
+  };
+
+  // Follow `open`/`signal` changes after mount (the initial value is already
+  // in the state above). A self-initiated toggle that wrote the signal lands
+  // here too and no-ops, since the state already matches.
+  const isFirstOpenRequestedRunRef = useRef(true);
+  useLayoutEffect(() => {
+    if (isFirstOpenRequestedRunRef.current) {
+      isFirstOpenRequestedRunRef.current = false;
+      return;
+    }
+    if (openRequested === undefined) {
+      return;
+    }
+    toggleTo(openRequested);
+  }, [openRequested]);
+
+  // A state change: tell the world (the "toggle" event), move the focus, and
+  // set up the reveal. Skipped on mount — nothing changed, so neither the
+  // event nor a transition exists (and a page must not have its focus stolen
+  // by an expandable that was simply already open).
+  const isFirstOpenedRunRef = useRef(true);
+  useLayoutEffect(() => {
+    if (isFirstOpenedRunRef.current) {
+      isFirstOpenedRunRef.current = false;
+      return undefined;
+    }
+    const root = rootRef.current;
+    root.dispatchEvent(createToggleEvent(opened));
+    if (opened) {
+      if (autoFocus) {
+        const firstFocusableElement = findFirstFocusableInContent();
+        if (firstFocusableElement) {
+          firstFocusableElement.focus();
+        }
+      }
+    } else {
+      const focusedBeforeClose = focusedBeforeCloseRef.current;
+      focusedBeforeCloseRef.current = null;
+      if (focusedBeforeClose && contentContainerRef.current && contentContainerRef.current.contains(focusedBeforeClose)) {
+        uiRef.current.focus();
+      }
+    }
+    if (!animation) {
+      return undefined;
+    }
+    const contentContainer = contentContainerRef.current;
+    const contentElement = contentContainer.firstElementChild.firstElementChild;
+    if (opened) {
+      // The reveal needs the content at its final size before the track
+      // starts moving, and the final size only exists in the open state —
+      // the reflow trick (see instructions.md, CSS section), with transitions
+      // suppressed BEFORE the first layout read: this effect runs pre-paint,
+      // so any earlier read would itself be the first recalc of the open
+      // state and would start the track transition (see revealStartSizeRef).
+      contentContainer.style.transitionProperty = "none";
+      const finalRect = contentElement.getBoundingClientRect();
+      if (isColumn) {
+        contentElement.style.width = `${finalRect.width}px`;
+        contentElement.style.height = `${finalRect.height}px`;
+      } else {
+        contentElement.style.height = `${finalRect.height}px`;
+      }
+      // Put the tracks back where the last paint left them and let the
+      // transition play from there. In fr — px does not interpolate with fr.
+      const startRect = revealStartSizeRef.current;
+      revealStartSizeRef.current = null;
+      const startFrOf = (startSize, finalSize) => finalSize > 0 ? startSize / finalSize : 0;
+      if (isColumn) {
+        contentContainer.style.gridTemplateColumns = `${startFrOf(startRect ? startRect.width : 0, finalRect.width)}fr`;
+        if (!closedContentSized) {
+          // The height opens alongside the width (a closed column expandable
+          // is only as tall as its UI) — unless the closed content already
+          // sizes it, where only the width has anywhere to go.
+          contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
+        }
+      } else {
+        contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
+      }
+      // That starting frame must be genuinely rendered to transition from it,
+      // and transitions re-enabled BEFORE the flip back to the open value —
+      // same order as popover.jsx's own reflow trick.
+      contentContainer.getBoundingClientRect();
+      contentContainer.style.transitionProperty = "";
+      contentContainer.style.gridTemplateColumns = "";
+      contentContainer.style.gridTemplateRows = "";
+    }
+    // (closing froze the content in toggleTo, while it was still laid out)
+    const cancel = whenTransitionSettles(contentContainer, () => {
+      contentElement.style.width = "";
+      contentElement.style.height = "";
+      setSettled(true);
+    });
+    return cancel;
+  }, [opened]);
+  useLayoutEffect(() => {
+    if (settled && !opened && effectiveUnmountWhenClosed) {
+      setContentMounted(false);
+    }
+  }, [settled, opened, effectiveUnmountWhenClosed]);
+  useLayoutEffect(() => {
+    if (mountWhenClosed) {
+      setContentMounted(true);
+    }
+  }, [mountWhenClosed]);
+
+  // closedContentSized (column + mountWhenClosed): the closed content sizes
+  // the height (see the CSS), which is only right if it lies at its OPEN
+  // width — at its natural closed width (a 0-wide track) it would wrap
+  // against nothing and stack word by word. So while closed, its width is
+  // frozen to a silently measured open width.
+  useLayoutEffect(() => {
+    if (!closedContentSized || opened || !settled || !contentMounted) {
+      return;
+    }
+    const contentContainer = contentContainerRef.current;
+    const contentElement = contentContainer.firstElementChild.firstElementChild;
+    contentContainer.style.transitionProperty = "none";
+    contentContainer.style.gridTemplateColumns = "1fr";
+    contentElement.style.width = "";
+    const openRect = contentElement.getBoundingClientRect();
+    contentElement.style.width = `${openRect.width}px`;
+    contentContainer.style.gridTemplateColumns = "";
+    // The closed frame must be committed while transitions are still off —
+    // re-enabled in the same recalc, the 1fr-to-0fr trip back from the silent
+    // measurement above would play as a second closing animation.
+    contentContainer.getBoundingClientRect();
+    contentContainer.style.transitionProperty = "";
+  }, [closedContentSized, opened, settled, contentMounted]);
+
+  // Mounted already open: the content is visible, its data is due.
+  useEffect(() => {
+    if (openedRef.current && hasAction) {
+      effectiveAction.run();
+    }
+  }, []);
+  const onRootKeyDown = keyboardEvent => {
+    if (!arrowKeyShortcuts) {
+      return;
+    }
+    // A nested expandable (deeper, so heard first) already answered this key.
+    if (keyboardEvent.defaultPrevented) {
+      return;
+    }
+    // Leave the key to whatever native use its target has for it (moving the
+    // caret in a field, changing a slider) — only a press with nothing else
+    // to do drives the expandable.
+    const defaultAction = getKeyboardEventDefaultAction(keyboardEvent);
+    if (defaultAction && defaultAction !== "scroll") {
+      return;
+    }
+    const {
+      key
+    } = keyboardEvent;
+    if (key === openKeyShortcut) {
+      if (document.activeElement !== uiRef.current) {
+        return;
+      }
+      if (!openedRef.current) {
+        keyboardEvent.preventDefault();
+        toggleTo(true);
+        return;
+      }
+      const firstFocusableElementInContent = findFirstFocusableInContent();
+      if (!firstFocusableElementInContent) {
+        return;
+      }
+      keyboardEvent.preventDefault();
+      firstFocusableElementInContent.focus();
+      return;
+    }
+    if (key === closeKeyShortcut) {
+      if (!openedRef.current) {
+        return;
+      }
+      const uiElement = uiRef.current;
+      if (document.activeElement === uiElement) {
+        keyboardEvent.preventDefault();
+        toggleTo(false);
+      } else {
+        keyboardEvent.preventDefault();
+        uiElement.focus();
+      }
+    }
+  };
+  const onUIClick = clickEvent => {
+    // A navi control inside the UI part cancels the click it consumed (see
+    // click_to_expand.js — the UI part's own aria-expanded is what it finds).
+    if (clickEvent.defaultPrevented) {
+      return;
+    }
+    const {
+      target
+    } = clickEvent;
+    if (target.nodeType === 1) {
+      const interactiveElement = target.closest(UI_INTERACTIVE_SELECTOR);
+      if (interactiveElement && interactiveElement !== uiRef.current && uiRef.current.contains(interactiveElement)) {
+        return;
+      }
+    }
+    toggleTo(!openedRef.current);
+  };
+
+  // Space/Enter on the UI part itself (role button) — a key pressed on a
+  // control inside it belongs to that control.
+  const onUIKeyDown = keyboardEvent => {
+    if (keyboardEvent.defaultPrevented) {
+      return;
+    }
+    if (keyboardEvent.target !== uiRef.current) {
+      return;
+    }
+    const {
+      key
+    } = keyboardEvent;
+    if (key === " " || key === "Enter") {
+      keyboardEvent.preventDefault();
+      toggleTo(!openedRef.current);
+    }
+  };
+
+  // Where the content went, so the marker can point at it while open (closed
+  // always points right): below by default, above when the content part comes
+  // first, beside for layout="column" (the chevron then points back toward
+  // the UI: left).
+  const childArray = toChildArray(children);
+  const firstPart = childArray.find(child => child && (child.type === ExpandableUI || child.type === ExpandableContent));
+  const hasParts = Boolean(firstPart);
+  const contentFirst = hasParts && firstPart.type === ExpandableContent;
+  const openDirection = isColumn ? "left" : contentFirst ? "up" : "down";
+  const expandableContextValue = {
+    opened,
+    loading: loading || hasAction && actionLoading,
+    contentMounted,
+    hasAction,
+    effectiveAction,
+    openDirection,
+    toggleTo,
+    onUIClick,
+    onUIPointerDown,
+    onUIKeyDown,
+    uiRef,
+    contentContainerRef,
+    contentId
+  };
+
+  // Explicit parts win; the `ui` prop + children is the shorthand for the
+  // common shape (UI above, content below). Parts are cloned on every render:
+  // reference-stable children would be bailed out of the commit, leaving
+  // their context subscription to re-render them asynchronously — after the
+  // [opened] effect above, which measures the content they render.
+  const body = hasParts ? childArray.map(child => child && (child.type === ExpandableUI || child.type === ExpandableContent) ? cloneElement(child) : child) : jsxs(Fragment$1, {
+    children: [jsx(ExpandableUI, {
+      children: ui
+    }), jsx(ExpandableContent, {
+      children: children
+    })]
+  });
+  return jsx(Box, {
+    ref: rootRef,
+    baseClassName: "navi_expandable",
+    "aria-expanded": opened ? "true" : "false",
+    "data-layout": isColumn ? "column" : undefined,
+    "data-content-first": contentFirst ? "" : undefined,
+    "data-animation": animation ? "" : undefined,
+    "data-settled": settled ? "" : undefined,
+    "data-content-scrolls": maxContentHeight === undefined ? undefined : "",
+    "data-closed-content-sized": closedContentSized ? "" : undefined,
+    ...rest,
+    // The protocol every command target answers (see commands.js): a
+    // `--navi-toggle`/`--navi-open`/`--navi-close` lands here as a
+    // navi_command whose implementation dispatches the request events below.
+    onnavi_command: e => {
+      rest.onnavi_command?.(e);
+      onNaviCommand(e);
+    },
+    onnavi_request_open: e => {
+      rest.onnavi_request_open?.(e);
+      toggleTo(true);
+    },
+    onnavi_request_close: e => {
+      rest.onnavi_request_close?.(e);
+      toggleTo(false);
+    },
+    onKeyDown: e => {
+      rest.onKeyDown?.(e);
+      onRootKeyDown(e);
+    },
+    style: maxContentHeight === undefined ? rest.style : {
+      "--navi-expandable-max-content-height": stringifyStyle$1(maxContentHeight, "maxHeight"),
+      ...rest.style
+    },
+    children: jsx(ExpandableContext.Provider, {
+      value: expandableContextValue,
+      children: body
+    })
+  });
+};
+
+/**
+ * The always-visible part that reveals the content: the focusable toggle
+ * itself (role button — click, Space/Enter, arrow keys), holding the marker
+ * plus whatever it is given — any markup, a function of `{ open }` included.
+ * Controls inside it keep their own behavior and do not toggle. Its position
+ * among the parts decides where the content goes (before the content: content
+ * below/right; after it: content above/left).
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   children?: import("ignore:preact").ComponentChildren | ((state: { open: boolean }) => import("ignore:preact").ComponentChildren),
+ * }>}
+ */
+const ExpandableUI = ({
+  children,
+  ...rest
+}) => {
+  const {
+    opened,
+    loading,
+    openDirection,
+    toggleTo,
+    onUIClick,
+    onUIPointerDown,
+    onUIKeyDown,
+    uiRef,
+    contentId
+  } = useExpandableContext("UI");
+  return jsxs("div", {
+    ref: uiRef,
+    className: "navi_expandable_ui",
+    role: "button",
+    tabIndex: 0,
+    "aria-expanded": opened,
+    "aria-controls": contentId,
+    onClick: onUIClick,
+    onPointerDown: onUIPointerDown,
+    onKeyDown: onUIKeyDown
+    // A command from a control inside the UI part resolves its target to
+    // the closest [aria-expanded] — this very element (see commands.js's
+    // resolveClosestExpandable) — so it answers the protocol too. Spread as
+    // an object: eslint's known-DOM-property check doesn't apply to navi's
+    // own custom events.
+    ,
+
+    onnavi_command: e => {
+      onNaviCommand(e);
+    },
+    onnavi_request_open: () => {
+      toggleTo(true);
+    },
+    onnavi_request_close: () => {
+      toggleTo(false);
+    },
+    ...rest,
+    children: [jsx("span", {
+      className: "navi_expandable_marker",
+      "aria-hidden": "true",
+      children: jsx(SummaryMarker, {
+        open: opened,
+        loading: loading,
+        openDirection: openDirection
+      })
+    }), jsx("div", {
+      className: "navi_expandable_ui_label",
+      children: typeof children === "function" ? children({
+        open: opened
+      }) : children
+    })]
+  });
+};
+
+/**
+ * The revealed part. With an `action` on the Expandable, children may be a
+ * function `(data) => ui` or a branches object — see ActionRenderer.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{}>}
+ */
+const ExpandableContent = ({
+  children,
+  ...rest
+}) => {
+  const {
+    opened,
+    contentMounted,
+    hasAction,
+    effectiveAction,
+    contentContainerRef,
+    contentId
+  } = useExpandableContext("Content");
+  let content = children;
+  if (hasAction) {
+    content = jsx(ActionRenderer, {
+      action: effectiveAction,
+      children: children
+    });
+  }
+  return jsx("div", {
+    ref: contentContainerRef,
+    id: contentId,
+    className: "navi_expandable_content_container",
+    inert: opened ? undefined : true,
+    ...rest,
+    children: jsx("div", {
+      className: "navi_expandable_content_sizer",
+      children: jsx("div", {
+        className: "navi_expandable_content",
+        children: contentMounted ? content : null
+      })
+    })
+  });
+};
+Expandable.UI = ExpandableUI;
+Expandable.Content = ExpandableContent;
+
+// What a click inside the UI part must not toggle: it was aimed at the
+// control, not at the row. The UI part itself matches [role='button'] and is
+// the one exception, excluded at the call site.
+const UI_INTERACTIVE_SELECTOR = ["a[href]", "button", "input", "select", "textarea", "label", "[role='button']", "[contenteditable='']", "[contenteditable='true']", "audio[controls]", "video[controls]"].join(", ");
+const createToggleEvent = open => {
+  const newState = open ? "open" : "closed";
+  const oldState = open ? "closed" : "open";
+  if (typeof window.ToggleEvent === "function") {
+    return new window.ToggleEvent("toggle", {
+      newState,
+      oldState
+    });
+  }
+  const toggleEvent = new CustomEvent("toggle");
+  toggleEvent.newState = newState;
+  toggleEvent.oldState = oldState;
+  return toggleEvent;
+};
+
 const DEFAULT_VALIDITY_STATE = { valid: true };
 const useConstraintValidityState = (ref) => {
   const checkValue = () => {
@@ -46149,7 +47160,8 @@ const ControlGroup = props => {
     stateType: "object",
     cascadeValidationToChildren: true,
     aggregateChildStates: props.aggregateChildStates,
-    distributeChildUIState: props.distributeChildUIState
+    distributeChildUIState: props.distributeChildUIState,
+    distributeChildStates: props.distributeChildStates
   });
   const {
     children
@@ -46163,6 +47175,7 @@ const ControlGroup = props => {
     ,
     aggregateChildStates: undefined,
     distributeChildUIState: undefined,
+    distributeChildStates: undefined,
     pseudoClasses: CONTROL_GROUP_PSEUDO_CLASSES,
     children: jsx(ControlgroupChildrenWrapper, {
       ...childrenWrapperProps,
@@ -49600,7 +50613,7 @@ const seedDefaultValueFromSignal = (props) => {
   }
 };
 
-const resolveInputProps = (props) => {
+const resolveInputProps = (props, { controlType = "input" } = {}) => {
   // `signal` carries a bound state signal. It is left on `props` on purpose:
   // `createControlInfo` (control_hooks.jsx) reads it to seed the state and to
   // follow it, and `onUIAction` (ui_state_controller.js) writes user
@@ -49617,8 +50630,20 @@ const resolveInputProps = (props) => {
         }
       }
       if (props.type === undefined && signalOptions.type !== undefined) {
-        props.type =
+        const typeFromSignal =
           VALIDITY_TYPE_TO_INPUT_TYPE[signalOptions.type] ?? signalOptions.type;
+        // What a signal says is what its value IS; what a control's `type` says
+        // is what the control is. They usually agree — a date-typed signal wants
+        // a date field — but a boolean one maps to a checkbox, and a picker made
+        // into a checkbox is not a picker with a different look: it is another
+        // control, with no popup to open. A picker asked to hold a yes/no keeps
+        // its two rows and stays itself.
+        const wouldChangeWhatTheControlIs =
+          controlType === "picker" &&
+          (typeFromSignal === "checkbox" || typeFromSignal === "radio");
+        if (!wouldChangeWhatTheControlIs) {
+          props.type = typeFromSignal;
+        }
       }
     }
 
@@ -54444,6 +55469,20 @@ const PickerCustomResolver = props => {
       ...props
     });
   }
+  if (props.type === undefined) {
+    // A picker with a popup of its own holds whatever the control inside it
+    // holds — a boolean, a number, an id — and a field with no type is read
+    // back off the DOM, where every value is a string. "false" then matches no
+    // row, the popup empties, and that emptiness climbs back into the picker:
+    // a value survives its own round trip only while it is text. "navi_js" is
+    // how a field says its value is a JS one, kept beside the DOM (see
+    // controller_registry.js) — the same thing type="array"/"object" already
+    // say for their shapes.
+    return jsx(PickerCustom, {
+      ...props,
+      type: "navi_js"
+    });
+  }
   return jsx(PickerCustom, {
     ...props
   });
@@ -61455,7 +62494,7 @@ const PickerObjectUI = () => {
     value,
     placeholder
   } = useContext(PickerContext);
-  if (!value || Object.keys(value).length === 0) {
+  if (uiStateHoldsNothing(value)) {
     if (!placeholder) {
       return null;
     }
@@ -61492,7 +62531,7 @@ const PickerArrayUI = () => {
     placeholder,
     maxLines
   } = useContext(PickerContext);
-  if (!value || value.length === 0) {
+  if (uiStateHoldsNothing(value)) {
     if (!placeholder) {
       return null;
     }
@@ -62524,7 +63563,9 @@ const PickerFirstResolver = props => {
   const Next = useNextResolver();
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
-  resolveInputProps(props);
+  resolveInputProps(props, {
+    controlType: "picker"
+  });
   return jsx(Next, {
     ...props
   });
@@ -63600,7 +64641,8 @@ const SpinGroup = props => {
     stateType: "object",
     cascadeValidationToChildren: true,
     aggregateChildStates: props.aggregateChildStates,
-    distributeChildUIState: props.distributeChildUIState
+    distributeChildUIState: props.distributeChildUIState,
+    distributeChildStates: props.distributeChildStates
   });
   const {
     children
@@ -63617,6 +64659,7 @@ const SpinGroup = props => {
     // not reach the DOM as unknown attributes.
     aggregateChildStates: undefined,
     distributeChildUIState: undefined,
+    distributeChildStates: undefined,
     baseClassName: "navi_spin_group",
     pseudoClasses: SPIN_GROUP_PSEUDO_CLASSES
     // What the frame and what sits between the spins are drawn from: the
@@ -68128,7 +69171,8 @@ const WheelGroup = props => {
     stateType: "object",
     cascadeValidationToChildren: true,
     aggregateChildStates: props.aggregateChildStates,
-    distributeChildUIState: props.distributeChildUIState
+    distributeChildUIState: props.distributeChildUIState,
+    distributeChildStates: props.distributeChildStates
   });
   const {
     children
@@ -68187,6 +69231,7 @@ const WheelGroup = props => {
     zoom: undefined,
     aggregateChildStates: undefined,
     distributeChildUIState: undefined,
+    distributeChildStates: undefined,
     baseClassName: "navi_wheel_group",
     "data-horizontal": horizontal ? "" : undefined,
     style: groupStyle,
@@ -68295,6 +69340,10 @@ const LAST_MINUTE_OF_DAY = 23 * 60 + 59;
  * @param {string} [value] The time shown, as "HH:MM".
  * @param {number} [minuteStep=1] How many minutes apart the values on the
  *   minute wheel are — 15 for quarters of an hour.
+ * @param {{min?: number, max?: number}|number[]} [hours] Which hours the wheel
+ *   offers: `{ min: 7, max: 21 }` for a day that starts and ends somewhere, or
+ *   the list itself. All 24 by default. Rows nobody will ever land on are rows
+ *   in the way.
  * @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.
@@ -68311,6 +69360,7 @@ const LAST_MINUTE_OF_DAY = 23 * 60 + 59;
  */
 const TimeWheel = ({
   minuteStep = 1,
+  hours,
   loop = true,
   placeholder,
   separator = naviI18n("time.hour_separator"),
@@ -68329,13 +69379,15 @@ const TimeWheel = ({
     }
     return minuteList;
   }, [minuteStep]);
+  const hourList = useMemo(() => resolveHourList(hours), [hours ? hours.min : undefined, hours ? hours.max : undefined, hours]);
   const {
-    aggregateChildStates
-  } = useAnswered(placeholder, rest, aggregateTime);
+    aggregateChildStates,
+    distributeChildUIState
+  } = useAnswered(placeholder, rest, aggregateTime, distributeTime);
   const placeholderParts = parseTimeParts(placeholder);
   return jsxs(WheelGroup, {
     aggregateChildStates: aggregateChildStates,
-    distributeChildUIState: distributeTime,
+    distributeChildUIState: distributeChildUIState,
     ...rest,
     children: [jsx(Wheel, {
       name: "hour",
@@ -68345,7 +69397,7 @@ const TimeWheel = ({
       "aria-label": hourLabel,
       defaultValue: placeholderParts ? placeholderParts.hour : undefined,
       ...wheelProps,
-      children: HOURS.map(hour => jsx(Wheel.Item, {
+      children: hourList.map(hour => jsx(Wheel.Item, {
         value: hour,
         paddingX: "s",
         children: padTwo(hour)
@@ -68392,6 +69444,8 @@ const TimeWheel = ({
  *   `null` for neither.
  * @param {number} [minuteStep=1] How many minutes apart the values on both
  *   minute wheels are.
+ * @param {{min?: number, max?: number}|number[]} [hours] Which hours both
+ *   wheels offer — see `TimeWheel`.
  * @param {number} [minDuration=0] How long the span must last at least, in
  *   minutes. Zero by default: a span of no length is a span all the same, only
  *   one that goes backwards is not. It is what the bounds keep between them as
@@ -68409,6 +69463,7 @@ const TimeWheel = ({
  */
 const TimeRangeWheel = ({
   minuteStep = 1,
+  hours,
   minDuration = 0,
   loop = true,
   placeholder,
@@ -68427,8 +69482,9 @@ const TimeRangeWheel = ({
   // answer too, left where the placeholder put it.
   const {
     answeredRef,
-    aggregateChildStates
-  } = useAnswered(placeholder, rest, aggregateSpan);
+    aggregateChildStates,
+    distributeChildUIState
+  } = useAnswered(placeholder, rest, aggregateSpan, distributeSpan);
 
   // What the pair does while it is being turned: the bound that just moved is
   // the one the user is holding, so it stays where it was put and the OTHER one
@@ -68471,6 +69527,7 @@ const TimeRangeWheel = ({
     spacing: "s",
     size: size,
     aggregateChildStates: aggregateChildStates,
+    distributeChildUIState: distributeChildUIState,
     ...rest,
     children: jsxs(AnsweredContext.Provider, {
       value: answeredRef,
@@ -68482,6 +69539,7 @@ const TimeRangeWheel = ({
         ref: startRef,
         name: "start",
         minuteStep: minuteStep,
+        hours: hours,
         loop: loop,
         size: size,
         placeholder: placeholder ? placeholder.start : undefined,
@@ -68495,6 +69553,7 @@ const TimeRangeWheel = ({
         ref: endRef,
         name: "end",
         minuteStep: minuteStep,
+        hours: hours,
         loop: loop,
         size: size,
         placeholder: placeholder ? placeholder.end : undefined,
@@ -68536,7 +69595,7 @@ const TimeRangeWheel = ({
  * compare its own placeholder against.
  */
 const AnsweredContext = createContext(null);
-const useAnswered = (placeholder, props, aggregateWhenAnswered) => {
+const useAnswered = (placeholder, props, aggregateWhenAnswered, distributeWhenAnswered) => {
   const answeredFromPair = useContext(AnsweredContext);
   const ownAnsweredRef = useRef(false);
   const answeredRef = answeredFromPair || ownAnsweredRef;
@@ -68548,31 +69607,81 @@ const useAnswered = (placeholder, props, aggregateWhenAnswered) => {
   const gates = !answeredFromPair;
   const placeholderRef = useRef(placeholder);
   placeholderRef.current = placeholder;
-  const aggregateRef = useRef(null);
-  if (!aggregateRef.current) {
-    aggregateRef.current = children => {
-      const aggregated = aggregateWhenAnswered(children);
-      if (answeredRef.current) {
+  const scopeRef = useRef(null);
+  if (!scopeRef.current) {
+    scopeRef.current = {
+      aggregateChildStates: children => {
+        const aggregated = aggregateWhenAnswered(children);
+        if (answeredRef.current) {
+          return aggregated;
+        }
+        if (compareTwoJsValues(aggregated, placeholderRef.current)) {
+          return undefined;
+        }
+        // It moved: from here on this is an answer, and stays one even when it
+        // is turned back onto the placeholder — somebody chose that time.
+        answeredRef.current = true;
         return aggregated;
+      },
+      distributeChildUIState: (groupState, child) => {
+        if (placeholderRef.current && holdsNothing(groupState)) {
+          // Being told there is no value is not a finger bringing a wheel back:
+          // it is a clear, or the app writing `undefined`. The wheels go back to
+          // showing the placeholder, and the pair is unanswered again — without
+          // this the wheels would empty (a wheel has no blank row) and what they
+          // still showed would climb straight back up as an answer.
+          answeredRef.current = false;
+          return distributeWhenAnswered(placeholderRef.current, child);
+        }
+        return distributeWhenAnswered(groupState, child);
       }
-      if (compareTwoJsValues(aggregated, placeholderRef.current)) {
-        return undefined;
-      }
-      // It moved: from here on this is an answer, and stays one even when it is
-      // turned back onto the placeholder — somebody chose that time.
-      answeredRef.current = true;
-      return aggregated;
     };
   }
   return {
     answeredRef,
-    aggregateChildStates: gates ? aggregateRef.current : aggregateWhenAnswered
+    aggregateChildStates: gates ? scopeRef.current.aggregateChildStates : aggregateWhenAnswered,
+    distributeChildUIState: gates ? scopeRef.current.distributeChildUIState : distributeWhenAnswered
   };
 };
+
+// Nothing at all: no value, an empty shape, or a shape whose every part is
+// itself nothing — which is what a cleared span looks like on the way down.
+const holdsNothing = value => {
+  if (value === undefined || value === null || value === "") {
+    return true;
+  }
+  if (typeof value !== "object") {
+    return false;
+  }
+  return Object.values(value).every(holdsNothing);
+};
 const isAnswerGivenByProps = props => props.value !== undefined || props.defaultValue !== undefined || props.signal && props.signal.value !== undefined;
-const HOURS = Array.from({
+
+// Which hours the wheel offers: all of them, a slice of the day, or a list
+// written by the caller. An app whose day ends at 21h has nothing to say about
+// 22h and 23h, and two rows nobody will ever land on are two rows in the way.
+const ALL_HOURS = Array.from({
   length: HOUR_COUNT
 }, (_, hour) => hour);
+const resolveHourList = hours => {
+  if (hours === undefined) {
+    return ALL_HOURS;
+  }
+  if (Array.isArray(hours)) {
+    return hours;
+  }
+  const {
+    min = 0,
+    max = HOUR_COUNT - 1
+  } = hours;
+  const hourList = [];
+  let hour = min;
+  while (hour <= max) {
+    hourList.push(hour);
+    hour += 1;
+  }
+  return hourList;
+};
 const padTwo = value => String(value).padStart(2, "0");
 
 // The two times as one span, { start, end } — the shape a pair carries.
@@ -68586,6 +69695,14 @@ const aggregateSpan = childUIStateControllers => {
   return span;
 };
 
+// The way back for a span: each time takes its own side.
+const distributeSpan = (groupState, childUIStateController) => {
+  if (!groupState) {
+    return undefined;
+  }
+  return groupState[childUIStateController.name];
+};
+
 // The two wheels as one value, "HH:MM".
 const aggregateTime = childUIStateControllers => {
   let hour = "";
@@ -74645,5 +75762,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map