@jsenv/navi 0.29.156 → 0.29.158

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, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, initFocusGroup, scrollIntoViewScoped, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, scrollIntoViewScoped, initFocusGroup, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { isValidElement, h, Fragment, createContext, render, toChildArray, options, cloneElement } from "preact";
@@ -888,6 +888,157 @@ const isPlainObject$2 = obj => {
   return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
 };
 
+const isSignal = (value) => {
+  return getSignalType(value) !== null;
+};
+
+const BRAND_SYMBOL = Symbol.for("preact-signals");
+const getSignalType = (value) => {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  if (value.brand !== BRAND_SYMBOL) {
+    return null;
+  }
+
+  if (typeof value._fn === "function") {
+    return "computed";
+  }
+
+  return "signal";
+};
+
+const MAX_ENTRIES = 5;
+
+const stringifyForDisplay = (
+  value,
+  maxDepth = 2,
+  currentDepth = 0,
+  options = {},
+) => {
+  const { asFunctionArgs = false } = options;
+  const indent = "  ".repeat(currentDepth);
+  const nextIndent = "  ".repeat(currentDepth + 1);
+
+  if (currentDepth >= maxDepth) {
+    return typeof value === "object" && value !== null
+      ? "[Object]"
+      : String(value);
+  }
+
+  if (value === null) {
+    return "null";
+  }
+  if (value === undefined) {
+    return "undefined";
+  }
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return `[Function ${value.name || "anonymous"}]`;
+  }
+  if (value instanceof Date) {
+    return `Date(${value.toISOString()})`;
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+
+  if (Array.isArray(value)) {
+    const openBracket = asFunctionArgs ? "(" : "[";
+    const closeBracket = asFunctionArgs ? ")" : "]";
+
+    if (value.length === 0) return `${openBracket}${closeBracket}`;
+
+    // Display arrays with only one element on a single line
+    if (value.length === 1) {
+      const item = stringifyForDisplay(
+        value[0],
+        maxDepth,
+        currentDepth + 1,
+        // Remove asFunctionArgs for nested calls
+        { ...options, asFunctionArgs: false },
+      );
+      return `${openBracket}${item}${closeBracket}`;
+    }
+
+    if (value.length > MAX_ENTRIES) {
+      const preview = value
+        .slice(0, MAX_ENTRIES)
+        .map(
+          (v) =>
+            `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `${openBracket}\n${preview.join(",\n")},\n${nextIndent}...${value.length - MAX_ENTRIES} more\n${indent}${closeBracket}`;
+    }
+
+    const items = value.map(
+      (v) =>
+        `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `${openBracket}\n${items.join(",\n")}\n${indent}${closeBracket}`;
+  }
+
+  if (typeof value === "object") {
+    const signalType = getSignalType(value);
+    if (signalType) {
+      const signalValue = value.peek();
+      const prefix = signalType === "computed" ? "computed" : "signal";
+      return `${prefix}(${stringifyForDisplay(signalValue, maxDepth, currentDepth, { ...options, asFunctionArgs: false })})`;
+    }
+
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+
+    // ✅ Inclure les clés avec valeurs undefined/null
+    const allEntries = [];
+    for (const [key, val] of entries) {
+      allEntries.push([key, val]);
+    }
+
+    // Ajouter les clés avec undefined (que Object.entries omet)
+    const descriptor = Object.getOwnPropertyDescriptors(value);
+    for (const [key, desc] of Object.entries(descriptor)) {
+      if (desc.value === undefined && !entries.some(([k]) => k === key)) {
+        allEntries.push([key, undefined]);
+      }
+    }
+
+    // Display objects with only one key on a single line
+    if (allEntries.length === 1) {
+      const [key, val] = allEntries[0];
+      const valueStr = stringifyForDisplay(val, maxDepth, currentDepth + 1, {
+        ...options,
+        asFunctionArgs: false,
+      });
+      return `{ ${key}: ${valueStr} }`;
+    }
+
+    if (allEntries.length > MAX_ENTRIES) {
+      const preview = allEntries
+        .slice(0, MAX_ENTRIES)
+        .map(
+          ([k, v]) =>
+            `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+        );
+      return `{\n${preview.join(",\n")},\n${nextIndent}...${allEntries.length - MAX_ENTRIES} more\n${indent}}`;
+    }
+
+    const pairs = allEntries.map(
+      ([k, v]) =>
+        `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
+    );
+    return `{\n${pairs.join(",\n")}\n${indent}}`;
+  }
+
+  return String(value);
+};
+
 /*
  * Deep structural equality for arbitrary JS values — what `===` can't do but this
  * codebase constantly needs: memoization cache keys ({ id: 1 } equal to { id: 1 }),
@@ -898,9 +1049,9 @@ const isPlainObject$2 = obj => {
  * "wrong" for equality purposes: NaN equals NaN, Date compared by time value,
  * cycles don't loop (a set of the pairs being compared guards circular refs),
  * and same-type is required
- * before descending. Functions, and objects with nothing enumerable to compare
- * (a Set, a Map, an element, a URL), are equal by reference only — nothing in
- * them says whether two are "the same". Cheap paths run first: reference
+ * before descending. Functions, signals, and objects with nothing enumerable to
+ * compare (a Set, a Map, an element, a URL), are equal by reference only —
+ * nothing in them says whether two are "the same". Cheap paths run first: reference
  * equality, then the identity short-circuit below, then array length before
  * element-by-element.
  *
@@ -918,6 +1069,7 @@ const isPlainObject$2 = obj => {
  *   compareTwoJsValues(a, b); // true immediately, no property walk
  */
 
+
 // Marks objects with a conceptual identity that transcends reference equality —
 // see the file comment. Symbol.for keeps it one shared symbol across modules.
 const SYMBOL_IDENTITY = Symbol.for("navi_object_identity");
@@ -1060,6 +1212,15 @@ const compareTwoJsValues = (
     if (aIsDate) {
       return a.getTime() === b.getTime();
     }
+    // A signal is a source of truth, not a value: two of them holding the same
+    // thing right now say nothing about the next tick, and one may change while
+    // the other does not. Their internals (the current value, a version
+    // counter) are enumerable, so without this they would be walked and two
+    // unrelated signals would pass for one — a params signal owned by one
+    // screen would then be handed the action bound to another's.
+    if (isSignal(a) || isSignal(b)) {
+      return false;
+    }
     const aKeys = Object.keys(a);
     const bKeys = Object.keys(b);
     if (aKeys.length !== bKeys.length) {
@@ -1142,159 +1303,37 @@ const debounceSignal = (
     clearTimeout(timeoutId);
     debouncedSignal.value = latestValue;
   };
+  // Whoever reads the debounced value gets the previous one during the delay,
+  // with nothing saying a newer one is on its way. This says it.
+  debouncedSignal.settlingSignal = computed(() => {
+    return !compareTwoJsValues(signalToDebounce.value, debouncedSignal.value);
+  });
 
   return debouncedSignal;
 };
 
-const isSignal = (value) => {
-  return getSignalType(value) !== null;
-};
-
-const BRAND_SYMBOL = Symbol.for("preact-signals");
-const getSignalType = (value) => {
-  if (!value || typeof value !== "object") {
-    return null;
-  }
-
-  if (value.brand !== BRAND_SYMBOL) {
-    return null;
-  }
-
-  if (typeof value._fn === "function") {
-    return "computed";
-  }
-
-  return "signal";
-};
-
-const MAX_ENTRIES = 5;
-
-const stringifyForDisplay = (
-  value,
-  maxDepth = 2,
-  currentDepth = 0,
-  options = {},
-) => {
-  const { asFunctionArgs = false } = options;
-  const indent = "  ".repeat(currentDepth);
-  const nextIndent = "  ".repeat(currentDepth + 1);
-
-  if (currentDepth >= maxDepth) {
-    return typeof value === "object" && value !== null
-      ? "[Object]"
-      : String(value);
-  }
-
-  if (value === null) {
-    return "null";
-  }
-  if (value === undefined) {
-    return "undefined";
-  }
-  if (typeof value === "string") {
-    return `"${value}"`;
-  }
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  if (typeof value === "function") {
-    return `[Function ${value.name || "anonymous"}]`;
-  }
-  if (value instanceof Date) {
-    return `Date(${value.toISOString()})`;
-  }
-  if (value instanceof RegExp) {
-    return value.toString();
-  }
-
-  if (Array.isArray(value)) {
-    const openBracket = asFunctionArgs ? "(" : "[";
-    const closeBracket = asFunctionArgs ? ")" : "]";
-
-    if (value.length === 0) return `${openBracket}${closeBracket}`;
+const debouncedSignalCache = new WeakMap();
 
-    // Display arrays with only one element on a single line
-    if (value.length === 1) {
-      const item = stringifyForDisplay(
-        value[0],
-        maxDepth,
-        currentDepth + 1,
-        // Remove asFunctionArgs for nested calls
-        { ...options, asFunctionArgs: false },
-      );
-      return `${openBracket}${item}${closeBracket}`;
-    }
-
-    if (value.length > MAX_ENTRIES) {
-      const preview = value
-        .slice(0, MAX_ENTRIES)
-        .map(
-          (v) =>
-            `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-        );
-      return `${openBracket}\n${preview.join(",\n")},\n${nextIndent}...${value.length - MAX_ENTRIES} more\n${indent}${closeBracket}`;
-    }
-
-    const items = value.map(
-      (v) =>
-        `${nextIndent}${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-    );
-    return `${openBracket}\n${items.join(",\n")}\n${indent}${closeBracket}`;
+/**
+ * The one debounced signal for a given source and delay.
+ *
+ * Two callers asking the same question of the same signal must wait on the same
+ * answer: a debounced signal per caller is a timer per caller, and the actions
+ * derived from them are then several instances of what is one request.
+ */
+const getDebouncedSignal = (signalToDebounce, delay) => {
+  let byDelay = debouncedSignalCache.get(signalToDebounce);
+  if (!byDelay) {
+    byDelay = new Map();
+    debouncedSignalCache.set(signalToDebounce, byDelay);
   }
-
-  if (typeof value === "object") {
-    const signalType = getSignalType(value);
-    if (signalType) {
-      const signalValue = value.peek();
-      const prefix = signalType === "computed" ? "computed" : "signal";
-      return `${prefix}(${stringifyForDisplay(signalValue, maxDepth, currentDepth, { ...options, asFunctionArgs: false })})`;
-    }
-
-    const entries = Object.entries(value);
-    if (entries.length === 0) return "{}";
-
-    // ✅ Inclure les clés avec valeurs undefined/null
-    const allEntries = [];
-    for (const [key, val] of entries) {
-      allEntries.push([key, val]);
-    }
-
-    // Ajouter les clés avec undefined (que Object.entries omet)
-    const descriptor = Object.getOwnPropertyDescriptors(value);
-    for (const [key, desc] of Object.entries(descriptor)) {
-      if (desc.value === undefined && !entries.some(([k]) => k === key)) {
-        allEntries.push([key, undefined]);
-      }
-    }
-
-    // Display objects with only one key on a single line
-    if (allEntries.length === 1) {
-      const [key, val] = allEntries[0];
-      const valueStr = stringifyForDisplay(val, maxDepth, currentDepth + 1, {
-        ...options,
-        asFunctionArgs: false,
-      });
-      return `{ ${key}: ${valueStr} }`;
-    }
-
-    if (allEntries.length > MAX_ENTRIES) {
-      const preview = allEntries
-        .slice(0, MAX_ENTRIES)
-        .map(
-          ([k, v]) =>
-            `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-        );
-      return `{\n${preview.join(",\n")},\n${nextIndent}...${allEntries.length - MAX_ENTRIES} more\n${indent}}`;
-    }
-
-    const pairs = allEntries.map(
-      ([k, v]) =>
-        `${nextIndent}${k}: ${stringifyForDisplay(v, maxDepth, currentDepth + 1, { ...options, asFunctionArgs: false })}`,
-    );
-    return `{\n${pairs.join(",\n")}\n${indent}}`;
+  const existing = byDelay.get(delay);
+  if (existing) {
+    return existing;
   }
-
-  return String(value);
+  const debouncedSignal = debounceSignal(signalToDebounce, { delay });
+  byDelay.set(delay, debouncedSignal);
+  return debouncedSignal;
 };
 
 /**
@@ -3145,8 +3184,11 @@ const SYMBOL_OBJECT_SIGNAL = Symbol.for("navi_object_signal");
  * - prerun actions may have no other reference yet, so
  *   prerunProtectionRegistry pins them for a few minutes.
  *
- * An action run never throws: failures land in errorSignal and are reported
- * once, by one rule, in action_error_report.js (see the comment in onRunError).
+ * A failing run rejects, and writes its error into errorSignal as well. The
+ * callers that cannot take a rejection — a run started from a signal effect, a
+ * control that already draws the failure — swallow it where they start it, and
+ * that is where an error nobody displayed is reported once, by one rule (see
+ * run_unwatched.js and action_error_report.js).
  *
  * Blast radius: this file is the substrate of routing (route_action.js,
  * action_run_effect.js), resources (state/rest) and every control's `action`
@@ -3157,6 +3199,10 @@ const SYMBOL_OBJECT_SIGNAL = Symbol.for("navi_object_signal");
  * routing or lists.
  */
 
+// Params waiting to settle exist only under a debounced binding; every other
+// action answers "no" so nobody has to check whether it can be asked.
+const NOT_SETTLING_SIGNAL = signal(false);
+
 let DEBUG$2 = false;
 const enableDebugActions = () => {
   DEBUG$2 = true;
@@ -3525,16 +3571,27 @@ ${lines.join("\n")}`);
 
       const actionToRunPrivateProperties =
         getActionPrivateProperties(actionToPrerunOrRun);
-      const performRunResult = actionToRunPrivateProperties.performRun({
-        globalAbortSignal,
-        abortSignal: effectiveSignal,
-        reason,
-        event,
-        isPrerun,
-        onComplete,
-        onAbort,
-        onError,
-      });
+      let performRunResult;
+      try {
+        performRunResult = actionToRunPrivateProperties.performRun({
+          globalAbortSignal,
+          abortSignal: effectiveSignal,
+          reason,
+          event,
+          isPrerun,
+          onComplete,
+          onAbort,
+          onError,
+        });
+      } catch (error) {
+        // A synchronous callback that threw. Caught here so the update carries
+        // on — the other actions of the same update have nothing to do with
+        // this one — and given back further down to whoever asked for THIS
+        // action, still as a throw.
+        activationWeakSet.add(actionToPrerunOrRun);
+        resultArray.push({ type: "sync_error", error });
+        return;
+      }
       activationWeakSet.add(actionToPrerunOrRun);
 
       if (performRunResult && typeof performRunResult.then === "function") {
@@ -3580,14 +3637,30 @@ ${lines.join("\n")}`);
     requestedResult = null;
   } else if (hasAsync) {
     requestedResult = Promise.all(
-      resultArray.map((item) =>
-        item.type === "sync" ? item.result : item.promise,
-      ),
+      resultArray.map((item) => {
+        if (item.type === "sync") {
+          return item.result;
+        }
+        if (item.type === "sync_error") {
+          return Promise.reject(item.error);
+        }
+        return item.promise;
+      }),
     );
   } else {
+    const itemFailed = resultArray.find((item) => item.type === "sync_error");
+    if (itemFailed) {
+      // Nothing of this update is left to do, so the failure can leave the way
+      // it arrived: thrown, to the caller that asked for that action.
+      throw itemFailed.error;
+    }
     requestedResult = resultArray.map((item) => item.result);
   }
 
+  // Settled rather than raced: a failure here is one outcome among several —
+  // the other actions of the same update ran too, and "the update is over" must
+  // not become "one of them failed". Waiting on this never rejects, which is
+  // what lets a navigation be waited on (see via_navigation.js).
   const allResult = allThenableArray.length
     ? Promise.allSettled(allThenableArray)
     : null;
@@ -3816,12 +3889,53 @@ const createAction = (callback, rootOptions = {}) => {
         ...options,
       });
     };
+    /**
+     * The action instance for these params.
+     *
+     * @param {any} newParamsOrSignal - params, or a signal holding them (the
+     *   result then retargets itself as the signal changes), or an object whose
+     *   values may be signals.
+     * @param {object} [options]
+     * @param {number} [options.debounce] - milliseconds the params must stay
+     *   stable before the instance follows them. What it buys is a screen that
+     *   owns its params — a search box, a picker — asking one question instead
+     *   of one per keystroke, without an effect: the binding IS the delay.
+     *   Only for a signal; params that cannot change have nothing to settle.
+     *   During the delay the instance is still the previous one, holding the
+     *   previous answer — `paramsSettlingSignal` is what says a newer one is
+     *   coming, and `useAsyncData(action, { loading: true })` reads it.
+     */
     const bindParams = (newParamsOrSignal, options = {}) => {
+      const { debounce, ...optionsWithoutDebounce } = options;
+      if (debounce) {
+        if (!isSignal(newParamsOrSignal)) {
+          console.warn(
+            `bindParams({ debounce }) expects a signal, received ${typeof newParamsOrSignal}: params that cannot change have nothing to settle.`,
+          );
+        } else {
+          // The delay lives in a signal derived from theirs, one per (signal,
+          // delay): the cache below then keys on it like on any other signal,
+          // so two call sites asking the same question with the same delay get
+          // the one instance, and two different delays get two.
+          const debouncedParamsSignal = getDebouncedSignal(
+            newParamsOrSignal,
+            debounce,
+          );
+          return bindParams(debouncedParamsSignal, {
+            ...optionsWithoutDebounce,
+            syncParams: debouncedParamsSignal.flush,
+            paramsSettlingSignal: debouncedParamsSignal.settlingSignal,
+          });
+        }
+      }
       const existingChildAction = childActionWeakMap.get(newParamsOrSignal);
       if (existingChildAction) {
         return existingChildAction;
       }
-      const childAction = _bindParams(newParamsOrSignal, options);
+      const childAction = _bindParams(
+        newParamsOrSignal,
+        optionsWithoutDebounce,
+      );
       childActionWeakMap.set(newParamsOrSignal, childAction);
       if (childAction !== action) {
         // binding that added nothing resolves to the action itself; it must
@@ -3964,6 +4078,7 @@ const createAction = (callback, rootOptions = {}) => {
       },
 
       paramsSignal,
+      paramsSettlingSignal: NOT_SETTLING_SIGNAL,
       runningStateSignal,
       isPrerunSignal,
       valueSignal,
@@ -4154,20 +4269,31 @@ const createAction = (callback, rootOptions = {}) => {
             onError?.(error, { event, action, args });
           });
 
-          // The error is in errorSignal; from here it is the UI's, and running
-          // the action is not the place to decide whether the UI wants it —
-          // that answer does not exist yet at this instant (see
-          // action_error_report.js). So the run never throws: it settles with
-          // the error as its value, and being displayed or not is constated
-          // afterwards, in one place, by one rule.
           if (onError) {
             // Asking for the error IS taking it.
             markErrorAsDisplayedBy(error, "onError");
           }
-          reportErrorIfNobodyDisplaysIt(error, { action });
+          // Handed back, not delivered: failRun decides whether this leaves as
+          // a throw or as a rejection, because only the caller below knows
+          // which of the two this run was. The error is in errorSignal either
+          // way — a screen reads it there, whether or not anything was waiting.
           return error;
         };
 
+        // A failure leaves the run the way it came: thrown when the callback
+        // threw synchronously — code that knows this action is synchronous
+        // writes a plain `try/catch` around the call and has to find it there —
+        // and rejected when the run was asynchronous, since the throw below
+        // then happens inside a `then`. An abort is neither: it settles with
+        // its reason as its value, the way it always has.
+        const failRun = (error) => {
+          const errorSettled = onRunError(error);
+          if (runningStateSignal.peek() === ABORTED) {
+            return errorSettled;
+          }
+          throw errorSettled;
+        };
+
         try {
           const thenableArray = [];
           const callbackResult = callback(...args);
@@ -4205,12 +4331,12 @@ const createAction = (callback, rootOptions = {}) => {
           }
           return Promise.all(thenableArray).then(() => {
             if (rejected) {
-              return onRunError(rejectedValue);
+              return failRun(rejectedValue);
             }
             return onRunEnd();
           });
         } catch (e) {
-          return onRunError(e);
+          return failRun(e);
         }
       };
 
@@ -4297,6 +4423,7 @@ const createActionProxyFromSignal = (
     inheritData = true,
     onChange,
     syncParams,
+    paramsSettlingSignal = NOT_SETTLING_SIGNAL,
   } = {},
 ) => {
   const actionTargetChangeCallbackSet = new Set();
@@ -4473,6 +4600,7 @@ const createActionProxyFromSignal = (
     meta: action.meta,
 
     paramsSignal: proxyParamsSignal,
+    paramsSettlingSignal,
     isPrerunSignal: proxySignal("isPrerunSignal", "isPrerun"),
     runningStateSignal: proxySignal("runningStateSignal", "runningState"),
     errorSignal: proxySignal("errorSignal", "error"),
@@ -4618,6 +4746,46 @@ const isPlainObject = (obj) => {
   );
 };
 
+/**
+ * Starts a run navi has nobody to await.
+ *
+ * A failing run does not stay quiet: it throws when the callback threw
+ * synchronously, and rejects when it was asynchronous (see failRun in
+ * actions.js). That is what makes `ACTION(params)` behave like any other call
+ * that can fail — and code that lets such a failure go gets the runtime's own
+ * unhandled-error report, which is the right answer for it.
+ *
+ * Some runs have no such caller by construction — one started from a signal
+ * effect because its params changed, one whose failure the control that started
+ * it already draws, a routing whose result every caller drops. Their failure
+ * would be an anonymous unhandled one, naming the machinery instead of what
+ * failed. They start here, which is why the run itself is passed rather than
+ * its result: both deliveries have to be taken.
+ *
+ * And taking them is what obliges this place to ask the other question: did
+ * anything ever display this error? The answer does not exist yet at this
+ * instant — a route action fails before the page that shows it exists — so it is
+ * asked with a deadline, once, in action_error_report.js.
+ *
+ * The error is never hidden: it stays in the action's `errorSignal`, which is
+ * where a screen reads it.
+ */
+const runUnwatched = (startRun) => {
+  let result;
+  try {
+    result = startRun();
+  } catch (error) {
+    reportErrorIfNobodyDisplaysIt(error);
+    return undefined;
+  }
+  if (result && typeof result.catch === "function") {
+    result.catch((error) => {
+      reportErrorIfNobodyDisplaysIt(error);
+    });
+  }
+  return result;
+};
+
 /**
  * Reactively runs an action whenever the params derived from signals change.
  *
@@ -4629,7 +4797,9 @@ const isPlainObject = (obj) => {
  * @param {number} [options.debounce] - When set, the action is only run once the derived params
  *   have been stable for this many milliseconds. Useful to avoid firing a backend call on every
  *   keystroke: set `debounce: 500` and the request is sent only after the user stops interacting
- *   with the filters for 500 ms.
+ *   with the filters for 500 ms. During that delay the action still holds the previous answer;
+ *   `action.paramsSettlingSignal` is what says a newer one is coming, and
+ *   `useAsyncData(action, { loading: true })` reads it.
  *
  *   Example — auto-refresh a result list while the user tweaks filters:
  *   ```js
@@ -4645,12 +4815,6 @@ const isPlainObject = (obj) => {
 // one — in dev, an error overlay thrown over a page that is already saying what
 // went wrong. Nothing is lost by dropping it: the failure is held by the action
 // itself, and whoever reads it (useAsyncData, <Button action>) is what shows it.
-const runUnwatched = (result) => {
-  if (result && typeof result.catch === "function") {
-    result.catch(() => {});
-  }
-};
-
 const actionRunEffect = (
   action,
   deriveActionParamsFromSignals,
@@ -4659,7 +4823,7 @@ const actionRunEffect = (
   if (typeof action === "function") {
     action = createAction(action);
   }
-  let actionParamsSignal = computed(() => {
+  const actionParamsSignal = computed(() => {
     const params = deriveActionParamsFromSignals();
     action.debug(
       `Derived params for action "${action}": ${stringifyForDisplay(params)}`,
@@ -4677,14 +4841,8 @@ const actionRunEffect = (
     }
     return params;
   });
-  if (debounce) {
-    actionParamsSignal = debounceSignal(actionParamsSignal, {
-      delay: debounce,
-    });
-  }
-
   const actionRunnedByThisEffect = action.bindParams(actionParamsSignal, {
-    syncParams: debounce ? actionParamsSignal.flush : undefined,
+    debounce,
     onChange: (actionTarget, actionTargetPrevious, { explicitRunIntent }) => {
       if (explicitRunIntent) {
         // The caller already issued an explicit run/rerun/prerun/reset/abort —
@@ -4700,7 +4858,9 @@ const actionRunEffect = (
           // falsy params, don't run
           return;
         }
-        runUnwatched(actionTarget.run({ reason: "truthy params first run" }));
+        runUnwatched(() =>
+          actionTarget.run({ reason: "truthy params first run" }),
+        );
         return;
       }
 
@@ -4717,18 +4877,18 @@ const actionRunEffect = (
         }
         if (!actionTargetPrevious.params) {
           // coming from falsy-params state: action may already be cached, avoid unnecessary rerun
-          runUnwatched(
+          runUnwatched(() =>
             actionTarget.run({ reason: "params restored from falsy state" }),
           );
         } else {
-          runUnwatched(actionTarget.rerun({ reason: "params modified" }));
+          runUnwatched(() => actionTarget.rerun({ reason: "params modified" }));
         }
       }
     },
     ...options,
   });
   if (actionParamsSignal.peek()) {
-    runUnwatched(
+    runUnwatched(() =>
       actionRunnedByThisEffect.run({ reason: "initial truthy params" }),
     );
   }
@@ -5610,6 +5770,16 @@ const ActionRequesterContext = createContext();
  * Whichever mode, the affordance's own handler runs from inside its own gate
  * rather than from the DOM: a caller's `onClick` fires before any of this, and
  * would go off from a button drawn greyed.
+ *
+ * These two answer about the GESTURE. Whose VALUE an element carries is a third
+ * question, and `standalone` is where it is answered (see useUIStateController).
+ * They are said separately because they genuinely come apart: a door that holds
+ * no value of its own can still write into the control around it — it is
+ * `standalone` and must still shut when that control is read-only — and an
+ * affordance can claim a press without ever being a field. Something that is
+ * its own on all three counts says all three (a diskette filing a name into the
+ * reader's own address book: `selfInteractions="click"`,
+ * `whenSelfInteractionsBlocked="ignore"`, `standalone`).
  */
 
 
@@ -10162,6 +10332,35 @@ const watchActionCompletion = (element, dispatchAction) => {
   };
 };
 
+/**
+ * What follows the control's OWN action: it runs once that action has
+ * succeeded, and not at all otherwise.
+ *
+ * The outcome arrives in one of three shapes and each decides differently:
+ * - the gate turned the request down (`result === false`): nothing happened,
+ *   so nothing follows;
+ * - the action is running: what follows waits for it, and an error or an abort
+ *   drops it — whatever the action left in front of the user stays;
+ * - it is already settled, or never started at all. A control with nothing to
+ *   run leaves no outcome behind, and no outcome means nothing went wrong.
+ */
+const runWhenActionSucceeded = (completion, callback) => {
+  if (completion.result === false) {
+    return;
+  }
+  if (completion.isRunning) {
+    completion.whenSucceeded(callback);
+    return;
+  }
+  let succeeded = true;
+  completion.whenSettled(({ error, aborted }) => {
+    succeeded = !error && !aborted;
+  });
+  if (succeeded) {
+    callback();
+  }
+};
+
 const tryActionAfterInteractionAllowed = (
   element,
   {
@@ -12822,7 +13021,10 @@ const useExecuteAction = (
         });
       };
 
-      return runAction();
+      // The control is already holding the failure — the error side effect
+      // above drew the callout, or threw it at the boundary — so nothing here
+      // is waiting on the rejection.
+      return runUnwatched(runAction);
     },
     [elementRef, errorEffect],
   );
@@ -15174,8 +15376,12 @@ const createResource = (
     idKey,
     uniqueKeys,
 
+    // Reactive reads, not hooks: they subscribe the render that calls them to
+    // the store's array signal. Nothing hook-shaped inside, so a loop or a
+    // condition is fine. `useAllByIds` skips the ids the store does not hold.
     useArray: () => store.arraySignal.value,
     useById: (id) => store.select(idKey, id),
+    useAllByIds: (idArray) => store.selectAll(idArray),
 
     withParams: undefined,
     one: undefined,
@@ -17332,15 +17538,11 @@ const useActionAsyncData = (action, {
   // the wait is the ordinary one: suspended into <Loading>, or drawn by the
   // component under `loading: true`, exactly as for data someone else ran.
   if (run && action.runningStateSignal.peek() === IDLE && action.paramsSignal.peek() !== undefined) {
-    const runResult = action.run({
+    // Nothing waits on this run: the failure is held by the action, and this
+    // hook is what reads it back.
+    runUnwatched(() => action.run({
       reason: "useAsyncData({ run: true })"
-    });
-    // Nobody awaits this run, and a rejection nobody awaits is an unhandled
-    // one — in dev, an overlay over a component already saying what failed.
-    // The failure is held by the action, and this hook is what reads it.
-    if (runResult && typeof runResult.catch === "function") {
-      runResult.catch(() => {});
-    }
+    }));
   }
 
   // Use peek() instead of .value to avoid subscribing this component to the signal.
@@ -17374,14 +17576,34 @@ const useActionAsyncData = (action, {
       }
       setTick(n => n + 1);
     });
+    // A debounced binding waits before it retargets, so nothing above changes
+    // while the delay runs — but what is on screen is already out of date.
+    let settlingNotificationIsInitial = true;
+    const unsubscribeFromParamsSettling = action.paramsSettlingSignal.subscribe(() => {
+      if (settlingNotificationIsInitial) {
+        settlingNotificationIsInitial = false;
+        return;
+      }
+      setTick(n => n + 1);
+    });
     return () => {
       unsubscribeFromRunningState();
       unsubscribeFromData();
+      unsubscribeFromParamsSettling();
     };
     // Bound to the action, not to the mount: params given as a plain object
     // make another action instance, and the component would otherwise stay
     // subscribed to the state of the one it no longer reads.
   }, [action]);
+
+  // The params moved and the run has not started: under a debounce the action
+  // is still the previous one, COMPLETED with the previous answer. There is no
+  // run to await yet, so nothing can be suspended on — but a component drawing
+  // its own wait can say the answer on screen is on its way out, which is the
+  // whole reason it asked for `loading`.
+  if (loadingEffect === "use" && runningState !== FAILED && action.paramsSettlingSignal.peek()) {
+    return [action.dataSignal.peek(), true, undefined];
+  }
   if (runningState === COMPLETED) {
     return [action.dataSignal.peek(), false, undefined];
   }
@@ -17431,12 +17653,6 @@ const useActionAsyncData = (action, {
     throw actionError;
   }
 
-  // RUNNING with loadingEffect: "use" — return stale data + loading flag, no suspend
-  if (loadingEffect === "use" && runningState === RUNNING) {
-    const staleData = action.dataSignal.peek();
-    return [staleData, true, undefined];
-  }
-
   // An action without params has nothing to run and no one to start it: this is
   // where a route action lands when its params getter returns false. It is not a
   // load in progress, so there is nothing to wait for — suspending here would
@@ -17446,6 +17662,17 @@ const useActionAsyncData = (action, {
     return [action.dataSignal.peek(), false, undefined];
   }
 
+  // `loading: true` says the component draws its own wait, so this hook never
+  // suspends: running, or holding params nobody has started yet — a debounced
+  // binding that just retargeted, an aborted run, a run this very render is
+  // about to issue. Either way what is on screen is not the current answer,
+  // which is what `loading` says. Suspending would not draw a spinner: it swaps
+  // the subtree for the boundary, and everything under it remounts — a dialog
+  // open inside it is then closed, by a hook the caller told to stay out of it.
+  if (loadingEffect === "use") {
+    return [action.dataSignal.peek(), true, undefined];
+  }
+
   // IDLE or RUNNING with loadingEffect: "delegate" — suspend
   const reason = runningState === RUNNING ? "loading" : "idle";
   loadingRef.current = {
@@ -26222,18 +26449,12 @@ const setupBrowserIntegrationViaHistory = ({
     // something at the first announcement has a definite place to give it back.
     publishBeforeRouting({ url, ...options });
     try {
-      const routingResult = applyRoutingTask(url, options);
-      if (routingResult && typeof routingResult.then === "function") {
-        // Every caller below drops this value — a click handler has nothing to
-        // do with what the routing returns — so a rejection here would become
-        // an anonymous unhandled one, pointing at the navigation rather than at
-        // what failed. It goes to the single place that knows what to do with
-        // an error nobody displays (see action_error_report.js).
-        routingResult.catch((e) => {
-          reportErrorIfNobodyDisplaysIt(e);
-        });
-      }
-      return routingResult;
+      // Every caller below drops this value — a click handler has nothing to do
+      // with what the routing returns — so a rejection here would become an
+      // anonymous unhandled one, pointing at the navigation rather than at what
+      // failed. Taken, and passed to the one place that knows what to do with
+      // an error nobody displays (see run_unwatched.js).
+      return runUnwatched(() => applyRoutingTask(url, options));
     } finally {
       publishAfterRouting({ url, ...options });
     }
@@ -28105,8 +28326,10 @@ const RouteTransitionArea = ({
  * @param {object} to - same forms. Going from `from` to `to` plays forward,
  *   the reverse plays back — unless the reverse is written as a relation of
  *   its own, which then owns that way (a movement of its own, or `"none"` for
- *   a plain cut). A change between two pages no relation was written for plays
- *   nothing.
+ *   a plain cut). Written with the SAME movement it owns that way all the
+ *   same, so both crossings play forward and the pair can never say "back":
+ *   that pair is warned about. A change between two pages no relation was
+ *   written for plays nothing.
  * @param {string|{type?: string, duration?: number|string}} [transition] -
  *   what plays: a type name, or `{ type, duration }` to also say how long
  *   (`--navi-route-transition-duration` says it for everyone otherwise).
@@ -28155,6 +28378,7 @@ const defineRouteTransition = (from, to, transition) => {
     type,
     duration
   };
+  warnAboutBothWaysWritten(relation);
   relations.push(relation);
   rebuildWatcher();
   return () => {
@@ -28749,6 +28973,38 @@ const currentPageIndex$1 = pages => {
   }
   return currentIndex;
 };
+
+// Both ways of a pair written with the SAME movement. The exact way travelled
+// is searched before any reverse (see findRelation), so each way then finds
+// its own relation and BOTH play forward: the pair loses the one thing a
+// direction is for. That is not a resolution to fix — it is what makes
+// reciprocity a default — it is a definition with no reading under which it is
+// what the author meant, so it is said here, where both relations are known.
+// Narrow on purpose: a different type is the asymmetry the reverse exists for,
+// "none" is silence said out loud, and a different duration is a way out taken
+// slower.
+const warnAboutBothWaysWritten = ({
+  from,
+  to,
+  type,
+  duration
+}) => {
+  const reverse = relations.find(candidate => samePage$1(candidate.from, to) && samePage$1(candidate.to, from));
+  if (!reverse) {
+    return;
+  }
+  if (reverse.type !== type || reverse.duration !== duration) {
+    return;
+  }
+  if (type === "none") {
+    return;
+  }
+  // The one already written is named first: that is the order the application
+  // wrote them in, and the order it will find them in to fix them.
+  const written = `${describePage(reverse.from)} → ${describePage(reverse.to)}`;
+  const added = `${describePage(from)} → ${describePage(to)}`;
+  warnOnce(`both-ways-written:${written}|${added}`, `${written} and ${added} are both written with the same movement, so BOTH crossings play forward and this pair can never say "back" — the back button included. A relation written for the exact way travelled wins over being the reverse of another (see findRelation), which is what makes reciprocity the default: write the way back only to give it a DIFFERENT movement, or "none" to silence it. A single crossing that walks the map backwards says so on itself instead: <Link routeTransition={{ direction: "forward" }}>, or navTo(url, { routeTransition: { direction: "forward" } }).`);
+};
 const warnPagesBothCurrent = (pageKept, pageIgnored) => {
   const kept = describePage(pageKept);
   const ignored = describePage(pageIgnored);
@@ -32613,20 +32869,21 @@ const ParentUIStateControllerContext = createContext();
  */
 const useUIStateController = (
   props,
-  {
-    controlInfo,
-    syncDomState,
-    uiActionInternal,
-    persists,
-    allowNameless = false,
-  } = {},
+  { controlInfo, syncDomState, uiActionInternal, persists, standalone } = {},
 ) => {
   const debugPopup = useDebugPopup();
   const debugInteraction = useDebugInteraction();
   const debugUIState = useDebugUIState();
   const debugFocus = useDebugFocus();
 
-  const parentUIStateController = useContext(ParentUIStateControllerContext);
+  // The whole of `standalone`: with no parent to register into, the effect
+  // below has nobody to call, and every question a group asks about its
+  // children is asked about someone else. Read here rather than filtered by
+  // each group shape in turn, so a control that answers for itself is out of
+  // the value on the way up AND out of the reset, the validation cascade and
+  // the distribution on the way down.
+  const parentFromContext = useContext(ParentUIStateControllerContext);
+  const parentUIStateController = standalone ? undefined : parentFromContext;
   const formContext = useContext(FormContext);
   if (persists === undefined && formContext) {
     persists = true;
@@ -32700,7 +32957,6 @@ const useUIStateController = (
         parentUIStateController,
         parentUiStateSignalHolder,
         isProxy,
-        allowNameless,
         emptyUIState,
         // Set here too, not only in `update` below: a control rendered once and
         // never re-rendered would otherwise never say whether it was GIVEN a
@@ -33366,18 +33622,14 @@ const GROUP_DEFAULTS = {
   single: {
     // The same exclusions canRegisterAsFacadeChild already makes below (the
     // picker façade asked the very same question: which child IS the value).
-    // Buttons and links never hold one, and neither does a control that
-    // declared itself nameless. A control *carrying* navi-list is the search
-    // box driving some other list — not the list itself, which stays a
+    // Buttons and links never hold one. A control *carrying* navi-list is the
+    // search box driving some other list — not the list itself, which stays a
     // perfectly good single value here (one item, or the array a multiple list
     // exposes). Excluding the searcher is what leaves the list alone.
     childControlFilter: (child) => {
       if (child.controlType === "button" || child.controlType === "link") {
         return false;
       }
-      if (child.allowNameless) {
-        return false;
-      }
       if (child.props?.["navi-list"]) {
         return false;
       }
@@ -33402,7 +33654,7 @@ const GROUP_DEFAULTS = {
     aggregateChildStates: (children) => {
       const groupValues = {};
       for (const child of children) {
-        const { name, allowNameless, emptyUIState } = child;
+        const { name, emptyUIState } = child;
         // A control holding nothing writes its own empty, not a hole: the key
         // is in the object either way, and what is read from it keeps the shape
         // the reader was promised (see resolveEmptyUIState).
@@ -33411,13 +33663,6 @@ const GROUP_DEFAULTS = {
             ? emptyUIState
             : child.uiState;
         if (!name) {
-          if (allowNameless) {
-            // A control that says it is not a field is not one, whatever it
-            // holds: a picker used as a door holds the shape its popup draws,
-            // and merging that in would put the popup's keys in the object as
-            // if the door had been a group.
-            continue;
-          }
           // A nameless GROUP is a grouping, not a value: it exists to hold its
           // children together (a WheelGroup sharing navigation, a fieldset-ish
           // cluster) without claiming a key of its own, so what it holds is
@@ -33530,6 +33775,7 @@ const useUIGroupStateController = (
     uiActionInternal,
     allowCapture = false,
     cascadeValidationToChildren = false,
+    standalone,
   },
 ) => {
   const debugPopup = useDebugPopup();
@@ -33565,7 +33811,11 @@ const useUIGroupStateController = (
         `Either use a known controlType/stateType or provide aggregateChildStates and distributeChildUIState explicitly.`,
     );
   }
-  const parentUIStateController = useContext(ParentUIStateControllerContext);
+  // See the leaf controller's own `standalone` above: the same opt-out, and a
+  // group taking it also takes its whole subtree out — the controls inside it
+  // register into IT, and it registers into nobody.
+  const parentFromContext = useContext(ParentUIStateControllerContext);
+  const parentUIStateController = standalone ? undefined : parentFromContext;
   // A bound signal seeds the group the way `defaultValue` does — uncontrolled,
   // with the signal's current value as what it starts on. Write-back is handled
   // by applyState's own boundSignal; the read half is below: children are
@@ -34336,7 +34586,6 @@ const EMPTY_OBJECT = {};
  */
 const useUIFacadeStateController = (props, realUIStateController) => {
   const firstChildControllerRef = useRef(null);
-  const namelessChildSetRef = useRef(new Set());
   const updatingRef = useRef(false);
   const debugPopup = useDebugPopup();
   const debugInteraction = useDebugInteraction();
@@ -34364,16 +34613,9 @@ const useUIFacadeStateController = (props, realUIStateController) => {
         if (childController.isProxy) {
           return false;
         }
-        if (childController.allowNameless) {
-          // A control saying it is not a field is not the one the picker talks
-          // to: the search box above the list, the "select all" switch beside
-          // it. It is there to help find the answer, not to be it.
-          namelessChildSetRef.current.add(childController);
-          return false;
-        }
         if (childController.props["navi-list"]) {
-          // Controls with navi-list act as standalone list navigators and should
-          // not be treated as the picker's synced child.
+          // Controls with navi-list act as list navigators driving some other
+          // list, not as the picker's synced child.
           return false;
         }
         return true;
@@ -34391,10 +34633,6 @@ const useUIFacadeStateController = (props, realUIStateController) => {
         }
         const child = firstChildControllerRef.current;
         if (!child) {
-          warnPopupHasNothingButNamelessControls(
-            props,
-            namelessChildSetRef.current,
-          );
           return;
         }
         updatingRef.current = true;
@@ -34429,7 +34667,7 @@ const useUIFacadeStateController = (props, realUIStateController) => {
                 `A picker talks to ONE control: the first one receives the picker's whole value and is the only one read back, ` +
                 `so this one is neither filled nor collected. ` +
                 `A popup holding several values needs one group around them — wrap them in a <ControlGroup>, name each control inside it, and give the picker type="object". ` +
-                `A control that is there to FIND the answer rather than be it (a search box, a "select all") says so with allowNameless and steps out of the way.`,
+                `A control that answers for itself rather than for the picker — a search box, a list acting on every touch — says so with standalone and steps out of the way.`,
               child,
             );
           } else {
@@ -34556,11 +34794,6 @@ const useUIFacadeStateController = (props, realUIStateController) => {
 
 const describePicker = (props) =>
   `<Picker${props.name ? ` name="${props.name}"` : ""}${props.type ? ` type="${props.type}"` : ""}>`;
-const warnPopupHasNothingButNamelessControls = (props, namelessChildSet) => {
-  {
-    return;
-  }
-};
 
 /**
  * Returns true when `e` should trigger parent notification (child → parent bubbling).
@@ -34833,19 +35066,19 @@ const ControlgroupChildrenWrapper = ({
  */
 const useControlProps = (props, {
   controlType,
-  allowNameless: allowNamelessByDefault,
   persists,
   uiActionInternal
 }) => {
   const debugUIState = useDebugUIState();
   const debugAction = useDebugAction();
 
-  // A control that is not a field: it opens something, it goes somewhere, and
-  // the group around it must expect no value from it — no name, and no warning
-  // about the missing name. Buttons and links say so from inside navi; the prop
-  // is how a control used as a door says the same thing from the outside.
-  const allowNameless = props.allowNameless ?? allowNamelessByDefault;
-  delete props.allowNameless;
+  // This control answers for itself: whatever group it sits in expects nothing
+  // from it and gives it nothing back. See useUIStateController, which is where
+  // the whole of it happens.
+  const {
+    standalone
+  } = props;
+  delete props.standalone;
   const idDefault = useId();
   const controlId = useContext(ControlIdContext);
   props.id = props.id || controlId || idDefault;
@@ -34901,7 +35134,7 @@ const useControlProps = (props, {
   const uiStateController = useUIStateController(props, {
     controlInfo,
     syncDomState,
-    allowNameless,
+    standalone,
     persists,
     uiActionInternal
   });
@@ -35100,28 +35333,7 @@ const useControlProps = (props, {
           if (!deferredCommand) {
             return;
           }
-          if (completion.result === false) {
-            // The action was turned down (a failing constraint, a gate saying
-            // no) — nothing happened, so nothing follows.
-            return;
-          }
-          if (completion.isRunning) {
-            completion.whenSucceeded(deferredCommand);
-            return;
-          }
-          // Synchronous: already settled, and how it ended still decides. An
-          // action that never started (nothing to run) leaves no outcome, and
-          // the command runs as it always did.
-          let succeeded = true;
-          completion.whenSettled(({
-            error,
-            aborted
-          }) => {
-            succeeded = !error && !aborted;
-          });
-          if (succeeded) {
-            deferredCommand();
-          }
+          runWhenActionSucceeded(completion, deferredCommand);
         };
         return {
           keyDown: keyDownDefault,
@@ -35882,8 +36094,10 @@ const useControlgroupProps = (props, {
   cascadeValidationToChildren = false
 }) => {
   const {
-    action
+    action,
+    standalone
   } = props;
+  delete props.standalone;
   const uiGroupStateController = useUIGroupStateController(props, controlType, {
     stateType,
     childControlFilter,
@@ -35893,7 +36107,8 @@ const useControlgroupProps = (props, {
     wantRequesterButtonState,
     uiActionInternal,
     allowCapture,
-    cascadeValidationToChildren
+    cascadeValidationToChildren,
+    standalone
   });
   const [boundAction] = useActionBoundToOneParam(action, uiGroupStateController.uiStateSignal);
   // Mirror single-input behaviour: a controlled value with nobody listening
@@ -40261,8 +40476,7 @@ const LinkPlain = props => {
     selectionController
   });
   const [controlRootProps, controlHostProps] = useControlProps(props, {
-    controlType: "link",
-    allowNameless: true
+    controlType: "link"
   });
   const {
     basePseudoState
@@ -40694,6 +40908,10 @@ let navCount = 0;
 // Worn by a nav of routes while a route movement between two of its tabs is
 // pictured (see markIndicatorTakesPart, and the CSS below for what it decides).
 const BETWEEN_TABS_ATTRIBUTE = "data-nav-between-tabs";
+// What one notch of a wheel that counts in LINES is worth on a row that counts
+// in pixels. A rough line, deliberately: nothing here needs to agree with a
+// paragraph, only to move the row about as far as a notch moves a page.
+const WHEEL_LINE_SIZE = 16;
 const css$W = /* css */`@layer navi {
   .navi_nav {
     --nav-border: none;
@@ -40777,6 +40995,14 @@ const css$W = /* css */`@layer navi {
   justify-content: stretch;
   display: flex;
 
+  &[data-scrollable] {
+    max-width: 100%;
+  }
+
+  &[data-scrollable][data-vertical] {
+    max-height: 100%;
+  }
+
   & .navi_link {
     user-select: none;
     --x-nav-child-border-radius: calc(var(--nav-border-radius) - var(--nav-padding));
@@ -40945,6 +41171,39 @@ const Nav = ({
   const slideContainerElementRef = useRef(null);
   const indicatorPosition = slideContainer ? positionOfCurrentIndicator(currentIndicator, vertical) : null;
 
+  // Which tab of this row is the one being shown: the slide the container says
+  // it is on, or, for a row of routes, the link the browser is on.
+  const getCurrentTabElement = () => {
+    const navElement = navRef.current;
+    if (!navElement) {
+      return null;
+    }
+    const containerElement = slideContainerElementRef.current;
+    if (!containerElement) {
+      return navElement.querySelector("[data-href-current]");
+    }
+    const currentArea = containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
+    if (currentArea === null) {
+      return null;
+    }
+    return navElement.querySelector(`[data-slide-target="${CSS.escape(currentArea)}"]`);
+  };
+  // …and which one the picture leans on while it is not on the current one:
+  // the slide a finger is pulling in, the slide an animation is leaving. There
+  // is one only while a travel is playing.
+  const getTowardTabElement = () => {
+    const navElement = navRef.current;
+    const containerElement = slideContainerElementRef.current;
+    if (!navElement || !containerElement) {
+      return null;
+    }
+    const towardArea = containerElement.getAttribute(SLIDE_TOWARD_ATTRIBUTE);
+    if (towardArea === null) {
+      return null;
+    }
+    return navElement.querySelector(`[data-slide-target="${CSS.escape(towardArea)}"]`);
+  };
+
   // Where the trait is and where it is headed, as four numbers of pixels the
   // CSS above interpolates between (see the .navi_nav_indicator rules). Written
   // by hand rather than rendered: it is read off the row as it stands, and the
@@ -40958,8 +41217,7 @@ const Nav = ({
     }
     const tabElements = Array.from(navElement.querySelectorAll("[data-slide-target]"));
     const areaOf = tabElement => tabElement.getAttribute("data-slide-target");
-    const currentArea = containerElement.getAttribute("data-slide-current");
-    const currentIndex = tabElements.findIndex(tabElement => areaOf(tabElement) === currentArea);
+    const currentIndex = tabElements.indexOf(getCurrentTabElement());
     if (currentIndex === -1) {
       // On a slide no tab in this row names: there is no tab to sit under.
       navElement.removeAttribute("data-nav-indicator-measured");
@@ -41001,6 +41259,226 @@ const Nav = ({
   // about the row as it is now.
   const paintIndicatorGeometryRef = useRef(null);
   paintIndicatorGeometryRef.current = paintIndicatorGeometry;
+
+  // A row of tabs wider than the box holding it scrolls (the caller asks for
+  // that with overflowX) — and then saying which tab one is on is not enough,
+  // that tab must be somewhere one can see. The trait needs nothing here: it
+  // is placed with offsetLeft, inside the row, so it rides along.
+  // The ROW is what gets scrolled, never the tab: element.scrollIntoView()
+  // walks every scrolling ancestor it finds, and a tab row lives in sheets
+  // that sit on pages that scroll — bringing a tab into sight must move the
+  // row and nothing else.
+  const tabInSightRef = useRef(null);
+  const keepCurrentTabInSight = () => {
+    const navElement = navRef.current;
+    const currentTabElement = getCurrentTabElement();
+    // Brought into sight once, and then left where it is: the row scrolls, so
+    // the user may have pushed it elsewhere since to read the other tabs, and
+    // a render that changed none of this has no business taking that back.
+    if (currentTabElement === tabInSightRef.current) {
+      return;
+    }
+    tabInSightRef.current = currentTabElement;
+    if (!currentTabElement) {
+      return;
+    }
+    scrollIntoViewScoped(currentTabElement, {
+      container: navElement
+    });
+  };
+
+  // …and while a travel is playing the row gets there AT THE PACE OF THE
+  // TRAVEL, off the very number the trait is drawn from: the container
+  // publishes how far between the two slides the picture stands
+  // (--slide-travel-progress, written on this row — see followerElements), and
+  // the row is scrolled the same fraction of the way between the two tabs. The
+  // slides gliding while the tabs jump at the end is one movement told twice.
+  //
+  // Read frame by frame, because that number is nobody's news: under a finger
+  // the container writes it per frame with no announcement (a write is not a
+  // change), and for a travel that was asked for it is the browser that
+  // animates it. So the row samples it, exactly as the trait does — except that
+  // a scroll offset is not a thing CSS can be handed.
+  const travelScrollRef = useRef(null);
+  const syncTabScroll = ({
+    afterAFrame
+  } = {}) => {
+    const navElement = navRef.current;
+    if (!navElement) {
+      return;
+    }
+    const currentTabElement = getCurrentTabElement();
+    const towardTabElement = getTowardTabElement();
+    if (!currentTabElement || !towardTabElement) {
+      travelScrollRef.current = null;
+      // Nothing is travelling — but a travel that was ASKED for is announced a
+      // breath after the slide it lands on, so a row that lands the moment the
+      // current tab changes lands ahead of the movement it should have ridden,
+      // and the slides then glide towards a row already there. Giving it a
+      // frame costs nothing: the slides have not moved either.
+      // Only for a row of slides, and only once — a row of routes has no travel
+      // to ride, and the second look is the one that lands.
+      if (slideContainer && !afterAFrame && tabInSightRef.current && tabInSightRef.current !== currentTabElement) {
+        scheduleTabScrollSync({
+          nextFrame: true
+        });
+        return;
+      }
+      // Nowhere between: the row lands where it belongs.
+      keepCurrentTabInSight();
+      return;
+    }
+    let travel = travelScrollRef.current;
+    if (!travel || travel.from !== currentTabElement || travel.toward !== towardTabElement) {
+      // The two ends, measured once for this travel: measuring them again on a
+      // row that has since moved would be measuring from the answer.
+      const fromOffsets = getScrollIntoViewScopedOffsets(currentTabElement, {
+        container: navElement
+      });
+      const towardOffsets = getScrollIntoViewScopedOffsets(towardTabElement, {
+        container: navElement
+      });
+      // Signed the way the container counts: +1 when the picture leans on a
+      // slide sitting BEFORE the current one, -1 when it sits after — the same
+      // reading paintIndicatorGeometry does of the same number.
+      const sign = currentTabElement.compareDocumentPosition(towardTabElement) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      travel = {
+        from: currentTabElement,
+        toward: towardTabElement,
+        left: fromOffsets.left,
+        top: fromOffsets.top,
+        leftDelta: (towardOffsets.left - fromOffsets.left) * sign,
+        topDelta: (towardOffsets.top - fromOffsets.top) * sign
+      };
+      travelScrollRef.current = travel;
+    }
+    const progress = parseFloat(getComputedStyle(navElement).getPropertyValue("--slide-travel-progress")) || 0;
+    navElement.scrollTo({
+      left: travel.left + progress * travel.leftDelta,
+      top: travel.top + progress * travel.topDelta,
+      // The row is being driven frame by frame: a caller who asked for smooth
+      // scrolling asked it of a scroll that lands, not of one that is held.
+      behavior: "instant"
+    });
+    scheduleTabScrollSync({
+      nextFrame: true
+    });
+  };
+  const syncTabScrollRef = useRef(null);
+  syncTabScrollRef.current = syncTabScroll;
+
+  // When to look: on the next frame while a travel is being followed, and
+  // otherwise at the end of the current task. A MICROTASK and not a frame,
+  // because the two are told apart in the same breath — a travel that was
+  // asked for announces the slide it lands on before it announces the one it
+  // is leaving, so a row settling straight away would jump to the destination
+  // and only then be asked to travel there. And it is still before the paint,
+  // which a frame is not: a row that opens on a far tab must be scrolled
+  // already the first time it is seen.
+  const syncScheduledRef = useRef(false);
+  const syncFrameRef = useRef(0);
+  const scheduleTabScrollSync = ({
+    nextFrame
+  } = {}) => {
+    if (syncScheduledRef.current) {
+      return;
+    }
+    syncScheduledRef.current = true;
+    const run = () => {
+      syncScheduledRef.current = false;
+      syncFrameRef.current = 0;
+      syncTabScrollRef.current({
+        afterAFrame: nextFrame
+      });
+    };
+    if (nextFrame) {
+      syncFrameRef.current = requestAnimationFrame(run);
+    } else {
+      queueMicrotask(run);
+    }
+  };
+  const scheduleTabScrollSyncRef = useRef(null);
+  scheduleTabScrollSyncRef.current = scheduleTabScrollSync;
+  useLayoutEffect(() => {
+    return () => {
+      cancelAnimationFrame(syncFrameRef.current);
+    };
+  }, []);
+
+  // The row watches its own size and reads itself again when it changes — a
+  // badge count, a font that just arrived, a window resized: what was written
+  // is pixels, where the trait sits and how far the row is scrolled, and
+  // pixels measured on a row of another width are wrong. A row that had no
+  // width at all is the same story with a sharper edge: inside a closed
+  // <dialog> everything measures 0, and the current tab does not change when
+  // the dialog opens, so nothing else would ever look again.
+  // A scroll takes no size from anything, so this stays quiet while the row is
+  // being pushed around by hand.
+  useLayoutEffect(() => {
+    const sizeObserver = new ResizeObserver(() => {
+      paintIndicatorGeometryRef.current();
+      // What was brought into sight was brought there for another row.
+      tabInSightRef.current = null;
+      scheduleTabScrollSyncRef.current();
+    });
+    sizeObserver.observe(navRef.current);
+    return () => {
+      sizeObserver.disconnect();
+    };
+  }, []);
+
+  // A row that scrolls sideways, and a mouse that only turns one way. A
+  // vertical wheel is left to the vertical axis, which a row of tabs does not
+  // have: the push goes past the row to the page, and the tabs stay where they
+  // were — a row a trackpad can push around and a mouse cannot reach at all.
+  // Up and further along are the same wish here, so the push moves the row.
+  // Only for a row that scrolls on ONE axis: one that scrolls the way the
+  // wheel turns already has the answer it wants, and taking the push would be
+  // answering it twice.
+  useLayoutEffect(() => {
+    const navElement = navRef.current;
+    const onWheel = wheelEvent => {
+      // The burst is already somebody else's — a box travelling under the
+      // pointer, a wheel picker — and stays theirs until it dies out, wherever
+      // the pointer has drifted since (see wheel_gesture.js).
+      if (wheelGestureIsTakenFrom(navElement)) {
+        return;
+      }
+      const {
+        deltaX,
+        deltaY
+      } = wheelEvent;
+      if (Math.abs(deltaY) <= Math.abs(deltaX)) {
+        // Sideways already: the browser knows where to put it.
+        return;
+      }
+      const scrollableWidth = navElement.scrollWidth - navElement.clientWidth;
+      const scrollableHeight = navElement.scrollHeight - navElement.clientHeight;
+      if (scrollableWidth <= 0 || scrollableHeight > 0) {
+        return;
+      }
+      // Not every wheel speaks in pixels: some count lines, some count pages.
+      const notch = wheelEvent.deltaMode === 1 ? WHEEL_LINE_SIZE : wheelEvent.deltaMode === 2 ? navElement.clientWidth : 1;
+      const scrollLeftBefore = navElement.scrollLeft;
+      const scrollLeftWanted = Math.max(0, Math.min(scrollableWidth, scrollLeftBefore + deltaY * notch));
+      if (scrollLeftWanted === scrollLeftBefore) {
+        // The row is at its end and the hand is still pushing: what is left
+        // over is the page's, exactly as it would have been without any of
+        // this.
+        return;
+      }
+      wheelEvent.preventDefault();
+      claimWheelGesture(navElement);
+      navElement.scrollLeft = scrollLeftWanted;
+    };
+    navElement.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return () => {
+      navElement.removeEventListener("wheel", onWheel);
+      releaseWheelGesture(navElement);
+    };
+  }, []);
   useLayoutEffect(() => {
     if (!slideContainer) {
       return undefined;
@@ -41014,6 +41492,7 @@ const Nav = ({
     const readContainer = () => {
       setCurrentSlideArea(containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ?? undefined);
       paintIndicatorGeometryRef.current();
+      scheduleTabScrollSyncRef.current();
     };
     readContainer();
     // Where one is and what the picture leans on are written on the container,
@@ -41023,16 +41502,8 @@ const Nav = ({
     // because a write is not a change — the attribute the trait follows is
     // written on every frame of a gesture with the same value in it.
     containerElement.addEventListener(SLIDE_STATE_EVENT, readContainer);
-    // A row whose tabs changed width — a badge count, a font that just
-    // arrived, a window resized — is measured again: what was written is
-    // pixels, and pixels go stale.
-    const sizeObserver = new ResizeObserver(() => {
-      paintIndicatorGeometryRef.current();
-    });
-    sizeObserver.observe(navRef.current);
     return () => {
       containerElement.removeEventListener(SLIDE_STATE_EVENT, readContainer);
-      sizeObserver.disconnect();
       slideContainerElementRef.current = null;
     };
   }, [slideContainer]);
@@ -41041,6 +41512,7 @@ const Nav = ({
   // and no observer above watches this row's own children.
   useLayoutEffect(() => {
     paintIndicatorGeometry();
+    scheduleTabScrollSync();
   });
 
   // Whether the bar keeps its name for the route movement about to be pictured
@@ -43708,7 +44180,7 @@ const Expandable = props => {
     }
     if (hasAction) {
       if (nextOpen) {
-        effectiveAction.run();
+        runUnwatched(() => effectiveAction.run());
       } else {
         effectiveAction.abort();
       }
@@ -43859,7 +44331,7 @@ const Expandable = props => {
   // Mounted already open: the content is visible, its data is due.
   useEffect(() => {
     if (openedRef.current && hasAction) {
-      effectiveAction.run();
+      runUnwatched(() => effectiveAction.run());
     }
   }, []);
   const onRootKeyDown = keyboardEvent => {
@@ -44675,8 +45147,7 @@ const ButtonUI = props => {
     loadingOutline = true
   } = props;
   const [buttonControlRootProps, buttonControlHostProps, controlChildrenWrapperProps] = useControlProps(props, {
-    controlType: "button",
-    allowNameless: true
+    controlType: "button"
   });
   const {
     basePseudoState,
@@ -49740,30 +50211,18 @@ const Form = props => {
   // is a different component: same group, no <form> element and none of the
   // browser machinery that comes with it.
   const isNested = Boolean(useContext(FormContext));
-  const form = isNested ? jsx(FormNested, {
+  return isNested ? jsx(FormNested, {
     ...props
   }) : jsx(FormControl, {
     ...props
   });
-  if (props.standalone) {
-    // Nothing above to register with: the group hooks read the parent from
-    // this context, so emptying it here is the whole opt-out.
-    return jsx(ParentUIStateControllerContext.Provider, {
-      value: undefined,
-      children: form
-    });
-  }
-  return form;
 };
 
 // What both forms are made of: one group, one context for what is inside it.
-// standalone is read by Form above and never goes further — least of all to the
-// DOM.
 const useFormGroup = props => {
   const propsForGroup = {
     ...props
   };
-  delete propsForGroup.standalone;
   delete propsForGroup.canSendWhileUnchanged;
   delete propsForGroup.pristineKey;
   // Not the generic control `command`, which a control triggers on its own ui
@@ -58653,9 +59112,16 @@ const PickerCustomResolver = props => {
     if (circle) {
       props.variant = "icon";
     }
-    // A door, never a field (see `allowNameless`): the form around it expects
-    // no value from it, and no name.
-    props.allowNameless = true;
+    // A door, never a field (see `standalone`): the form around it expects no
+    // value from it. So the trigger answers to "button" — it is pressed to read
+    // something, never typed into — the same thing a confirm picker says
+    // through `picksNothing` (see picker.jsx). Said as the role here rather
+    // than through that prop: `picksNothing` also takes the right slot away,
+    // and the status icon a callout trigger draws sits in it.
+    props.standalone = true;
+    if (props.role === undefined) {
+      props.role = "button";
+    }
     // A word in a sentence asks for a plain tooltip — no icon in the callout,
     // no status color; an icon one presses is the callout's own status icon,
     // and says "info" like the callout it opens.
@@ -59494,7 +59960,8 @@ installImportMetaCssBuild(import.meta);/**
  *
  * Yes is said with `--navi-confirm` (see commands.js). The popup closes on it,
  * and only then does the picker do what it was standing in for — run its
- * `action`, or trigger its `command` — so the work runs on the trigger, where
+ * `action`, trigger its `command`, or both, the command following the action
+ * and only if it succeeded — so the work runs on the trigger, where
  * the loading state and the error callout are drawn, and where the user is
  * looking again. Anything else that closes the popup (the cancel button,
  * Escape, a click outside) is no.
@@ -59556,21 +60023,31 @@ const PickerConfirmResolver = props => {
   // trigger.
   const onConfirm = confirmEvent => {
     const inputEl = getPickerInput(ref.current);
-    if (action !== undefined) {
-      dispatchRequestAction(inputEl, {
-        event: confirmEvent,
-        name: "confirm"
-      });
+    const runCommand = () => {
+      triggerNaviCommand(inputEl, command, confirmEvent);
+    };
+    if (action === undefined) {
+      if (command) {
+        runCommand();
+      }
       return;
     }
+    // Both props on one trigger means "do this, then go there": the action runs
+    // and the command follows it, only if it worked — a delete that fails must
+    // not send the user to the list it did not leave. Same rule a `<Button
+    // action command>` has (see onButtonInteractionAllowed in control_hooks).
+    const completion = watchActionCompletion(findControlHost(inputEl) || inputEl, () => dispatchRequestAction(inputEl, {
+      event: confirmEvent,
+      name: "confirm"
+    }));
     if (command) {
-      triggerNaviCommand(inputEl, command, confirmEvent);
+      runWhenActionSucceeded(completion, runCommand);
     }
   };
   return jsx(Next, {
     ...props,
     type: "navi_js",
-    allowNameless: true
+    standalone: true
     // No chevron, no clear cross, whatever variant the trigger is drawn in:
     // both announce a value, and a question holds none.
     ,
@@ -61970,6 +62447,7 @@ const ListFirstResolver = props => {
  *   deselectable?: boolean,
  *   maxLength?: number,
  *   maxLengthGuard?: number,
+ *   standalone?: boolean,
  *   action?: (value: any) => void,
  *   uiAction?: (value: any) => void,
  *   popover?: boolean,
@@ -62145,6 +62623,12 @@ const ListFirstResolver = props => {
  *   taking — and `uiAction` is not called. The selected ones stay takeable
  *   back, so a selection that arrived too long can always be brought back
  *   under the limit. Implies `maxLength` for validity.
+ * @param {boolean} [props.standalone]
+ *   This list answers for itself: it does not register with the control group
+ *   or picker around it, so its selection stays out of that value and nothing
+ *   coming down — a distributed value, a reset — reaches it. What a popup whose
+ *   one answer is spread over several lists says, so that none of them is taken
+ *   for the answer itself.
  */
 const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
 const ListContent = ({
@@ -65911,8 +66395,7 @@ const BadgeButtonUI = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const [buttonRootProps, buttonHostProps] = useControlProps(props, {
-    controlType: "button",
-    allowNameless: true
+    controlType: "button"
   });
   return jsx(Text, {
     className: "navi_badge_button",
@@ -67364,6 +67847,11 @@ const PickerButton = props => {
     // confirm resolver (see picker_confirm.jsx), which is the picker that is
     // one — a caller whose popup is a menu of actions says it for themselves.
     picksNothing,
+    // Where the caller's own role goes: onto the host, beside the name (see
+    // control_context.js) — a role and a name on two different elements name
+    // nothing at all. Left unsaid, a picker that picks nothing takes "button"
+    // (see PickerInput below).
+    role,
     readOnly,
     error
   } = props;
@@ -67418,6 +67906,21 @@ const PickerButton = props => {
   // clearing being a modification like any other.
   const interactive = !basePseudoState[":disabled"] && !basePseudoState[":read-only"] && !loading;
   usePickerErrorCallout(uiStateController, error);
+  // What the picker really is, said on the element that holds the name and
+  // takes the focus (the host input below): a picker that picks nothing is a
+  // door — its popup is a question (type="confirm") or something to read
+  // (mode="callout", which says it for itself) — and a door is pressed. So it
+  // answers to "button" rather than to the "textbox" its <input> would
+  // otherwise be, which is both what a screen reader announces and what
+  // getByRole("button", { name }) finds. A picker holding a value stays a
+  // textbox: it does hold text.
+  const hostRole = role ?? (picksNothing ? "button" : undefined);
+  // And what that button is called, when the caller wrote it as a drawing
+  // rather than as a word: a door draws no value, so what sits in its value
+  // slot IS its label — the `ui` a caller gave it, or its placeholder. Skipped
+  // the moment the caller names it themselves (aria-label/aria-labelledby),
+  // which is the only way to name a door drawn as an icon.
+  const hostLabelId = hostRole === "button" && inputProps["aria-label"] === undefined && inputProps["aria-labelledby"] === undefined && variant !== "headless" && ui !== "default" ? `${inputProps.id}_picker_label` : undefined;
   // What the picker knows about itself, for the pieces it does not place: the
   // drawings of its value (Picker.UI.*), and the affordances a caller may put
   // in their own `ui` (Picker.Clear) as much as the ones it puts in its slot.
@@ -67464,6 +67967,7 @@ const PickerButton = props => {
         basePseudoState: basePseudoState,
         styleCSSVars: PickerStyleCSSVars,
         variant: undefined,
+        role: undefined,
         rightSlotIcon: undefined,
         rightSlotIconSize: undefined,
         rightSlot: undefined,
@@ -67512,6 +68016,8 @@ const PickerButton = props => {
               color: "var(--picker-loader-color)",
               inset: -2
             }), jsx(PickerInput, {
+              role: hostRole,
+              "aria-labelledby": hostLabelId,
               tabIndex: variant === "headless" ? -1 : undefined,
               "aria-hidden": variant === "headless" ? "true" : undefined,
               ...inputProps,
@@ -67587,6 +68093,10 @@ const PickerButton = props => {
               }
             }), variant === "headless" || ui === "default" ? null : jsx(Text, {
               className: "navi_picker_value"
+              // Only when it names the trigger (see hostLabelId above).
+              ,
+
+              id: hostLabelId
               // Tells the caller's own drawing of the control from the value
               // the picker draws itself, so each is written on its own line
               // (see .navi_picker_value in the CSS above).
@@ -70549,7 +71059,7 @@ const SplitButton = props => {
         }), jsx(Picker, {
           id: menuId,
           variant: "headless",
-          allowNameless: true,
+          standalone: true,
           anchor: rootRef,
           ...popupProps,
           readOnly: readOnly,