@jsenv/navi 0.29.488 → 0.29.489

package/dist/dev/jsenv_navi.js

@@ -993,6 +993,10 @@ const buttonI18n = /*#__PURE__*/ defineNaviMessages({
     en: "Copied!",
     fr: "Copié !",
   },
+  "button.copy_refused": {
+    en: "Could not copy.",
+    fr: "Impossible de copier.",
+  },
 });
 
 // Spin messages — the ends of what one steps through when the control holding
@@ -2755,18 +2759,18 @@ const debounceSignal = (
   signalToDebounce,
   { delay = 300, deepCompare = true } = {},
 ) => {
+  const isSameValue = (a, b) =>
+    deepCompare ? compareTwoJsValues(a, b) : a === b;
   let timeoutId;
   let latestValue = signalToDebounce.peek();
-  const debouncedSignal = signal(latestValue);
-
-  effect(() => {
+  // Following the source subscribes to it, and through it to whatever it reads:
+  // an app-level signal it reads would keep it — and its timer — alive for
+  // good. So it is followed only while something reads the debounced value.
+  let stopFollowing = null;
+  const follow = () => {
     const value = signalToDebounce.value;
     const debouncedValue = debouncedSignal.peek();
-    if (
-      deepCompare
-        ? compareTwoJsValues(value, debouncedValue)
-        : value === debouncedValue
-    ) {
+    if (isSameValue(value, debouncedValue)) {
       // The signal came back to where the debounced one already is: whatever it
       // passed through on the way is not on its way any more. Leaving the timer
       // armed would publish that in-between value once the delay elapses, and
@@ -2781,11 +2785,37 @@ const debounceSignal = (
     timeoutId = setTimeout(() => {
       debouncedSignal.value = latestValue;
     }, delay);
+  };
+  const catchUp = () => {
+    const value = signalToDebounce.peek();
+    if (!isSameValue(value, debouncedSignal.peek())) {
+      debouncedSignal.value = value;
+    }
+    latestValue = debouncedSignal.peek();
+  };
+  const debouncedSignal = signal(latestValue, {
+    watched: () => {
+      // Nobody was waiting on what the source said while nothing read it:
+      // that is taken at once, not after a delay.
+      catchUp();
+      stopFollowing = effect(follow);
+    },
+    unwatched: () => {
+      stopFollowing();
+      stopFollowing = null;
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    },
   });
 
   debouncedSignal.flush = () => {
     clearTimeout(timeoutId);
-    debouncedSignal.value = latestValue;
+    timeoutId = undefined;
+    if (stopFollowing) {
+      debouncedSignal.value = latestValue;
+      return;
+    }
+    catchUp();
   };
   // 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.
@@ -4936,10 +4966,46 @@ const createActionProxyFromSignal = (
   });
   actionWeakMap.set(actionProxy, actionProxy);
 
+  // Following the params subscribes to them, and through them to whatever
+  // they read: a component's computed params reading an app-level signal stay
+  // reachable from that signal for as long as anything listens to them. So a
+  // binding follows its params only while something reads what it says (a
+  // mounted component, a run's subscriber), and catches up when read again;
+  // unread, every method retargets first (see proxyMethod). A binding asked to
+  // act on their changes (runOnce, rerunOnChange, onChange: a route action,
+  // actionRunEffect) follows them for as long as it exists.
+  const followsParamsAlways = runOnce || rerunOnChange || Boolean(onChange);
+  let readerCount = 0;
+  let stopFollowingParams = null;
+  const readerWatchOptions = followsParamsAlways
+    ? undefined
+    : {
+        watched: () => {
+          readerCount++;
+          if (readerCount === 1) {
+            const stopMirroringParams = effect(() => {
+              proxyParamsSignal.value = paramsSignal.value;
+            });
+            const stopRetargeting = effect(retargetOnParamsChange);
+            stopFollowingParams = () => {
+              stopMirroringParams();
+              stopRetargeting();
+            };
+          }
+        },
+        unwatched: () => {
+          readerCount--;
+          if (readerCount === 0) {
+            stopFollowingParams();
+            stopFollowingParams = null;
+          }
+        },
+      };
+
   // Create our own signal for params that we control completely
   const proxyParamsSignal = signal(paramsSignal.value);
   const proxySignal = (signalPropertyName, propertyName) => {
-    const signalProxy = signal();
+    const signalProxy = signal(undefined, readerWatchOptions);
     let dispose;
     onActionTargetChange(() => {
       if (dispose) {
@@ -5066,20 +5132,34 @@ const createActionProxyFromSignal = (
   }
   // Watch for changes in the original paramsSignal and update ours
   // (original signal wins over any replaceParams calls)
-  weakEffect(
-    [paramsSignal, proxyParamsSignal],
-    (paramsSignalRef, proxyParamsSignalRef) => {
-      const newParams = paramsSignalRef.value;
-      proxyParamsSignalRef.value = newParams;
-    },
-  );
-  weakEffect([action], () => {
+  const retargetOnParamsChange = () => {
     // eslint-disable-next-line no-unused-expressions
     proxyParamsSignal.value;
     _updateTarget({
       changeCause: "params_signal_change",
     });
-  });
+  };
+  if (followsParamsAlways) {
+    weakEffect(
+      [paramsSignal, proxyParamsSignal],
+      (paramsSignalRef, proxyParamsSignalRef) => {
+        const newParams = paramsSignalRef.value;
+        proxyParamsSignalRef.value = newParams;
+      },
+    );
+    weakEffect([action], retargetOnParamsChange);
+  } else {
+    // The first target is resolved now, as following would resolve it: the
+    // subscribers wired above read what it says from the start (see
+    // onActionTargetChange above). Untracked, as inside the effect that
+    // resolves it otherwise: a binding is made during a render, which must
+    // not subscribe to what retargeting reads.
+    untracked(() => {
+      _updateTarget({
+        changeCause: "params_signal_change",
+      });
+    });
+  }
   actionProxy.replaceParams = (newParams) => {
     if (currentAction === action) {
       const currentParams = proxyParamsSignal.value;
@@ -6068,6 +6148,10 @@ const isPickerBoundaryFor = (candidate, el) => {
  */
 const getParentControl = (el) => {
   const ownControlRoot = el.closest("[navi-control]");
+  if (!ownControlRoot) {
+    // In no control at all (a list's root, a plain element): none around it.
+    return null;
+  }
   const parentControlRoot = ownControlRoot.parentNode.closest("[navi-control]");
   return parentControlRoot;
 };
@@ -6543,10 +6627,14 @@ const resolveInputProps = (props, { controlType = "input" } = {}) => {
         // 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.
+        // a yes/no keeps its two rows and stays itself. Nor does a picker with
+        // a popup of its own become the field for that type: it is what its
+        // popup is — a frise one slides in is no number one types.
         const wouldChangeWhatTheControlIs =
           controlType === "picker" &&
-          (typeFromSignal === "checkbox" || typeFromSignal === "radio");
+          (props.children !== undefined ||
+            typeFromSignal === "checkbox" ||
+            typeFromSignal === "radio");
         if (typeFromSignal !== undefined && !wouldChangeWhatTheControlIs) {
           props.type = typeFromSignal;
         }
@@ -7818,7 +7906,8 @@ const STATE_SIGNAL_OPTIONS = new Set([
  *   deploys holds one copy, not ten. Only the storage key changes, the id the url reads stays `id`.
  * @param {string} [options.type] - Type the value is coerced to, and read back as from localStorage and the url:
  *   any @jsenv/validity type (`"string"`, `"number"`, `"boolean"`, `"array"`, `"object"`, `"integer"`, `"date"`,
- *   `"time"`…). Without it the value is not coerced.
+ *   `"time"`…). Without it the value is not coerced. On a type that is not text (`"string"`, `"email"`,
+ *   `"url"`), `""` — what a cleared control writes — is absence.
  * @param {"string" | "number" | "boolean"} [options.itemType] - For array type: type of the array items.
  *   Used when reading the value back from a url search param, where everything is a string:
  *   `?level=3,4` becomes `[3, 4]` instead of `["3", "4"]`. Without it items stay strings.
@@ -7913,6 +8002,8 @@ const STATE_SIGNAL_OPTIONS = new Set([
  * const childTab = stateSignal(parentTab);
  * // childTab follows parentTab changes unless explicitly set
  */
+// The types "" is a value of: an empty text is still a text.
+const TEXT_TYPE_SET = new Set(["string", "email", "url"]);
 const stateSignal = (defaultValue, options = {}) => {
   const {
     id,
@@ -8104,8 +8195,13 @@ const stateSignal = (defaultValue, options = {}) => {
   };
 
   // Create signal with initial value: use stored value, or undefined to indicate no explicit value
+  // Whether "" says nothing at all: on a type that is not text, it is what a
+  // cleared control writes (an empty field, a picker's cross) — no number, no
+  // date — and kept, it would be an invalid value the address carries.
+  const emptyStringIsAbsence =
+    type !== undefined && !TEXT_TYPE_SET.has(type);
   const processValue = (value) => {
-    if (value === undefined) {
+    if (value === undefined || (value === "" && emptyStringIsAbsence)) {
       // Absence is never validated, and the verdict on the previous value
       // (validSignal, validity.valid) must not outlive it.
       clearValidity();
@@ -15651,6 +15747,14 @@ PSEUDO_CLASSES[":active"] = {
 // focus_classes block below. At module scope so isMatchingFocusVisible (used
 // here and in control_hooks.jsx) can read it.
 let keyboardNavigationUsed = false;
+// The element a caller focused saying the ring must show (`focusVisible: true`
+// to moveFocusTo or autoFocus): it knows better than the modality — a screen
+// showing where Enter goes before any key was pressed. Until a pointer goes
+// down, which says the hand is elsewhere.
+let focusVisibleAskedElement = null;
+const askFocusVisible = (element) => {
+  focusVisibleAskedElement = element;
+};
 
 // HOW FOCUS-VISIBLE IS DECIDED (the details behind isMatchingFocusVisible)
 //
@@ -15680,7 +15784,10 @@ let keyboardNavigationUsed = false;
 //
 //    `keyboardNavigationUsed` has no such blind spot — it is set by navigation
 //    keydowns and cleared by pointerdown, whatever anyone prevents afterwards
-//    — so it is the authority for everything rule 1 does not cover.
+//    — so it is the authority for everything rule 1 does not cover. Save for
+//    the element a caller explicitly focused with a ring (askFocusVisible):
+//    that is somebody knowing better than the last interaction, not a state
+//    left behind.
 //
 // Ring INHERITANCE (a controlled element ringing because its aria-controls
 // controller is focused) stays gated on the keyboard modality even for an
@@ -15703,7 +15810,7 @@ const isMatchingFocusVisible = (el) => {
     return false;
   }
   if (!keyboardNavigationUsed) {
-    return false;
+    return el === focusVisibleAskedElement;
   }
   return true;
 };
@@ -15824,6 +15931,7 @@ const isKeyboardModality = () => keyboardNavigationUsed;
     "pointerdown",
     () => {
       keyboardNavigationUsed = false;
+      focusVisibleAskedElement = null;
     },
     { capture: true },
   );
@@ -17000,7 +17108,8 @@ const retryWhenPlaceable = (
  * @param {object} [options]
  * @param {boolean} [options.focusVisible] Decides the ring instead of the
  *   modality — for a caller that knows better than the last interaction does
- *   (a transfer speaking for the gesture that opened a container, say).
+ *   (a transfer speaking for the gesture that opened a container, say). `true`
+ *   draws the ring even before any key was pressed, until a pointer goes down.
  * @param {boolean} [options.preventScroll=true] Pass false to let the browser
  *   scroll the element into view.
  */
@@ -17008,6 +17117,9 @@ const moveFocusTo = (
   element,
   { focusVisible, preventScroll = true } = {},
 ) => {
+  if (focusVisible === true) {
+    askFocusVisible(element);
+  }
   element.focus({
     preventScroll,
     focusVisible:
@@ -17185,6 +17297,14 @@ document.addEventListener(
 const openedDuringThisPress = (openController) =>
   openController.pressCountAtOpen === pressCount;
 
+/**
+ * Which press the events landing now belong to: the pointerdown, mousedown and
+ * click of one press read the same count, a tap's compatibility events
+ * included (see above). A click the keyboard makes brings no pointerdown, so it
+ * reads the count of the last press: tell it apart by `event.detail === 0`.
+ */
+const readPressCount = () => pressCount;
+
 // How long a popup waits before handing the focus to a field, when giving it
 // is what raises the on-screen keyboard.
 //
@@ -17577,6 +17697,14 @@ const createOpenController = (
     // whole point: learning it afterwards means the content mounted on the
     // previous subject first.
     onOpen: null,
+    // What the popup is open ON, as its content reads it (usePopupValue in
+    // popup_value.js): written at the opening, right after `onOpen`, and left
+    // alone by the close, so the content keeps drawing it while it leaves.
+    popupValueSignal: signal(undefined),
+    // How the opening reads that value, set by whoever holds the open state
+    // (see useOpenPropsEffectOnOpenController); left unset, the value the
+    // opening carries (a --navi-open source's).
+    readPopupValue: null,
     // What an Escape means for this popup, whoever heard the key — its own
     // shortcut, its trigger's, the group it stands in, a bubble's: a cancel
     // (what it holds reverts), unless its owner says otherwise (a Picker's
@@ -17711,6 +17839,9 @@ const createOpenController = (
           // openEffect, which shows it: what the popup opens ON has to be
           // known before either (see `onOpen` above).
           controller.onOpen?.(requestOpenEvent);
+          controller.popupValueSignal.value = controller.readPopupValue
+            ? controller.readPopupValue(requestOpenEvent)
+            : requestOpenEvent.detail.value;
           // After prepareFocusTransfer, which has to record what held the
           // focus before anything inside the popup can claim it, and before
           // openEffect, which measures the popup to place it.
@@ -18090,6 +18221,39 @@ const useOpenPropsEffectOnOpenController = (
   if (signal && open) {
     openSignalValueRef.current = signal.value;
   }
+  // What the popup is open ON (see usePopupValue): the id the signal names
+  // when it holds more than "open", else the popup's own `value`, else what the
+  // opening carries. Read once `onOpen` has run, which may write the signal.
+  openController.readPopupValue = (requestOpenEvent) => {
+    if (signal) {
+      const signalValue = signal.peek();
+      if (signalValue !== true && readOpened(signalValue, value)) {
+        return signalValue;
+      }
+    }
+    if (value !== undefined) {
+      return value;
+    }
+    return requestOpenEvent.detail.value;
+  };
+  // The signal walked to another id while open (a sheet's "next"): the
+  // content follows it. Written closed, it is left alone — that is the close
+  // starting, and the content still has its exit to draw.
+  useLayoutEffect(() => {
+    if (!signal) {
+      return undefined;
+    }
+    return effect(() => {
+      const signalValue = signal.value;
+      if (
+        openController.opened &&
+        signalValue !== true &&
+        readOpened(signalValue, value)
+      ) {
+        openController.popupValueSignal.value = signalValue;
+      }
+    });
+  }, [signal, value]);
   // Assigned on every render, like openEffect, so it always closes over the
   // latest prop: a popup that opens or closes on its own (Escape, backdrop, a
   // --navi-close command) writes what happened where the caller keeps it, so
@@ -26049,6 +26213,14 @@ const arraySignalStore = (
     if (props === null || typeof props !== "object") {
       return props;
     }
+    if (props[idKey] === undefined) {
+      // Kept under `undefined`, every such item would be one and the same: a
+      // list drawing its last row as many times as it has rows, a creation
+      // rewriting all of them — and nothing saying why.
+      throw new Error(
+        `${name || "store"}: an item arrived without "${idKey}" (it has ${Object.keys(props).join(", ")}) — declare its key with idKey, or give a single item an id of its own ({ id: "me", … })`,
+      );
+    }
     const item = createItem(props);
     return item;
   };
@@ -27234,13 +27406,12 @@ const createResourceLifecycleManager = () => {
       if (!isSameResource && !isDependent) {
         continue;
       }
+      // A write of a resource this one depends on reaches its lists as it
+      // reruns its GET and GET_MANY: being heard is the whole condition (see
+      // findEffectOnActions). rerunOn is about this resource's own writes.
       if (
-        !shouldReadRerunAfter(
-          "GET_RANGE",
-          config,
-          triggeringAction,
-          isSameResource,
-        )
+        isSameResource &&
+        !shouldReadRerunAfter("GET_RANGE", config, triggeringAction, true)
       ) {
         continue;
       }
@@ -30437,6 +30608,17 @@ const useActionAsyncData = (action, {
   useOnLoad(action, onLoad);
   usePoll(action, poll);
 
+  // The instance the binding points at, remembered from one render to the
+  // next: a binding that comes back to params whose instance failed — a search
+  // typed again after a network blip — asks again, as typing them the first
+  // time did. Staying on the instance that just failed asks nothing (see
+  // runIsOwed), and neither does a mount, which never switched to anything.
+  // Read as it stands: getCurrentAction() would flush a debounced binding,
+  // publishing every keystroke the moment it renders.
+  const instance = action.isProxy ? getActionPrivateProperties(action).currentAction : action;
+  const instanceRef = useRef(instance);
+  const backOnFailure = instanceRef.current !== instance && action.runningStateSignal.peek() === FAILED;
+  instanceRef.current = instance;
   // `run: true` — this component owns the request, so it is what starts it, and
   // it starts it from the render rather than from an effect: a component that
   // suspends has no effects, so a run written in one would be waiting for
@@ -30444,7 +30626,7 @@ const useActionAsyncData = (action, {
   // no-op — which is what makes starting it while rendering sound. From there
   // 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.paramsSignal.peek() !== undefined && runIsOwed(action)) {
+  if (run && action.paramsSignal.peek() !== undefined && (runIsOwed(action) || backOnFailure)) {
     // Nothing waits on this run: the failure is held by the action, and this
     // hook is what reads it back.
     runUnwatched(() => action.run({
@@ -32082,6 +32264,38 @@ const resolveContainerLength = (size, element) => {
   return (parseFloat(amount) / 100) * containerSize;
 };
 
+// "s", "-m" — the spacing scale, whose tokens are ems of the font where they
+// apply: a length only CSS knows, handed back as the var() it maps to, which
+// nothing can place with. Read off the given element (the root when none is),
+// for a caller asking for a number.
+const SCALE_WORD_REGEX = /^(-?)(xxs|xs|xl|xxl|[lms])$/;
+const TOKEN_LENGTH_REGEX = /^(-?[\d.]+)(px|r?em)$/;
+const resolveScaleLength = (size, element = document.documentElement) => {
+  if (typeof size !== "string") {
+    return null;
+  }
+  const match = SCALE_WORD_REGEX.exec(size);
+  if (!match) {
+    return null;
+  }
+  const [, sign, word] = match;
+  const computedStyle = getComputedStyle(element);
+  const token = computedStyle.getPropertyValue(`--navi-${word}`).trim();
+  const tokenMatch = TOKEN_LENGTH_REGEX.exec(token);
+  if (!tokenMatch) {
+    return null;
+  }
+  const [, amount, unit] = tokenMatch;
+  let unitInPx = 1;
+  if (unit === "em") {
+    unitInPx = parseFloat(computedStyle.fontSize);
+  } else if (unit === "rem") {
+    unitInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  }
+  const length = parseFloat(amount) * unitInPx;
+  return sign ? -length : length;
+};
+
 const resolveSpacingSize = (size, element, property = "padding") => {
   const viewportLength = resolveViewportLength(size);
   if (viewportLength !== null) {
@@ -32091,6 +32305,10 @@ const resolveSpacingSize = (size, element, property = "padding") => {
   if (containerLength !== null) {
     return containerLength;
   }
+  const scaleLength = resolveScaleLength(size, element);
+  if (scaleLength !== null) {
+    return scaleLength;
+  }
   return normalizeStyle(SIZE_MAP[size] || size, property, "js", element);
 };
 // Whether a spacing is nothing at all, answered without resolving it. A
@@ -34725,20 +34943,32 @@ const useUrlSearchParam = (paramName, defaultValue) => {
  * the one it would have picked, painted over.
  */
 
-const headEntries = [];
+const headEntries$1 = [];
 const popupLayers = [];
 const ownMetas = [];
 
 /**
- * @param {Array<{ content: string, media: string|null }>} themeColors
- * @returns {() => void} Takes them away.
+ * A Head's place in the stack, taken as it arrives and kept while what it asks
+ * for changes (see head.jsx).
+ *
+ * @returns {{
+ *   set: (themeColors: Array<{ content: string, media: string|null }>) => void,
+ *   remove: () => void,
+ * }}
  */
-const pushHeadThemeColors = (themeColors) => {
-  headEntries.push(themeColors);
-  queueRender();
-  return () => {
-    headEntries.splice(headEntries.indexOf(themeColors), 1);
-    queueRender();
+const pushHeadThemeColors = () => {
+  const themeColors = [];
+  headEntries$1.push(themeColors);
+  return {
+    set: (themeColorsNext) => {
+      themeColors.length = 0;
+      themeColors.push(...themeColorsNext);
+      queueRender();
+    },
+    remove: () => {
+      headEntries$1.splice(headEntries$1.indexOf(themeColors), 1);
+      queueRender();
+    },
   };
 };
 
@@ -34836,8 +35066,8 @@ const readBackdropColor = (element) => {
 };
 
 let renderQueued = false;
-// Once per commit: a Head re-rendering leaves and arrives again in the same
-// commit, and the browser must not be handed the colour from in between.
+// Once per commit: a page leaving as another arrives, or several Heads
+// changing together, hand the browser one colour, never the one in between.
 const queueRender = () => {
   if (renderQueued) {
     return;
@@ -34856,8 +35086,8 @@ const render = () => {
     media: meta.getAttribute("media"),
   }));
   let colors = [];
-  for (let i = headEntries.length - 1; i >= 0; i--) {
-    colors.push(...headEntries[i]);
+  for (let i = headEntries$1.length - 1; i >= 0; i--) {
+    colors.push(...headEntries$1[i]);
   }
   colors.push(...htmlColors);
   for (const layer of popupLayers) {
@@ -34983,67 +35213,119 @@ const drawColor = (color) => {
 // title it found would put its own page's title over the new one. A
 // theme-color meta follows the same rule, kept by theme_color.js, where the
 // popups of the top layer paint over it.
-const titleEntries = [];
+// Arriving is mounting: a Head that renders again — a layout's head whose
+// count moved, children built anew at every render — is updated where it
+// stands, under the Heads that arrived after it. Taken off and pushed back, a
+// layout's head would take the title from every page below it.
+const headEntries = [];
 let titleWithoutHead = null;
 const Head = ({
   children
 }) => {
+  const entryRef = useRef(null);
   useLayoutEffect(() => {
-    if (!children) {
-      return undefined;
+    const entry = {
+      title: null,
+      themeColors: pushHeadThemeColors()
+    };
+    headEntries.push(entry);
+    entryRef.current = entry;
+    return () => {
+      entry.themeColors.remove();
+      headEntries.splice(headEntries.indexOf(entry), 1);
+      writeDocumentTitle();
+    };
+  }, []);
+  const {
+    title,
+    themeColors,
+    elements
+  } = readHeadChildren(children);
+  // What the children say, rather than the children: the elements are built
+  // anew at every render, and saying the same thing again changes nothing.
+  const contentKey = JSON.stringify([title, themeColors, elements]);
+  useLayoutEffect(() => {
+    const entry = entryRef.current;
+    if (title !== null && !headEntries.some(other => other.title !== null)) {
+      titleWithoutHead = document.title;
     }
-    const childArray = Array.isArray(children) ? children : [children];
+    entry.title = title;
+    writeDocumentTitle();
+    entry.themeColors.set(themeColors);
     const appendedElements = [];
-    const themeColors = [];
-    let titleEntry = null;
-    for (const child of childArray) {
-      if (!child) {
-        continue;
-      }
-      if (child.type === "title") {
-        const titleChildren = child.props.children;
-        titleEntry = {
-          title: Array.isArray(titleChildren) ? titleChildren.join("") : titleChildren ?? ""
-        };
-        continue;
-      }
-      if (child.type === "meta" && child.props.name === "theme-color") {
-        themeColors.push({
-          content: child.props.content,
-          media: child.props.media ?? null
-        });
-        continue;
-      }
-      const el = document.createElement(child.type);
-      const props = child.props || {};
+    for (const {
+      type,
+      props
+    } of elements) {
+      const el = document.createElement(type);
       for (const [key, value] of Object.entries(props)) {
         el.setAttribute(key, value);
       }
       document.head.appendChild(el);
       appendedElements.push(el);
     }
-    if (titleEntry) {
-      if (titleEntries.length === 0) {
-        titleWithoutHead = document.title;
-      }
-      titleEntries.push(titleEntry);
-      document.title = titleEntry.title;
-    }
-    const removeThemeColors = themeColors.length > 0 ? pushHeadThemeColors(themeColors) : null;
     return () => {
-      removeThemeColors?.();
-      if (titleEntry) {
-        titleEntries.splice(titleEntries.indexOf(titleEntry), 1);
-        const lastEntry = titleEntries[titleEntries.length - 1];
-        document.title = lastEntry ? lastEntry.title : titleWithoutHead;
-      }
       for (const el of appendedElements) {
         el.remove();
       }
     };
-  }, [children]);
+  }, [contentKey]);
   return null;
 };
+const writeDocumentTitle = () => {
+  for (let i = headEntries.length - 1; i >= 0; i--) {
+    const {
+      title
+    } = headEntries[i];
+    if (title !== null) {
+      document.title = title;
+      return;
+    }
+  }
+  if (titleWithoutHead !== null) {
+    document.title = titleWithoutHead;
+    titleWithoutHead = null;
+  }
+};
+const readHeadChildren = children => {
+  let title = null;
+  const themeColors = [];
+  const elements = [];
+  if (!children) {
+    return {
+      title,
+      themeColors,
+      elements
+    };
+  }
+  const childArray = Array.isArray(children) ? children : [children];
+  for (const child of childArray) {
+    if (!child) {
+      continue;
+    }
+    if (child.type === "title") {
+      const titleChildren = child.props.children;
+      title = Array.isArray(titleChildren) ? titleChildren.join("") : titleChildren ?? "";
+      continue;
+    }
+    if (child.type === "meta" && child.props.name === "theme-color") {
+      themeColors.push({
+        content: child.props.content,
+        media: child.props.media ?? null
+      });
+      continue;
+    }
+    elements.push({
+      type: child.type,
+      props: child.props || {}
+    });
+  }
+  return {
+    title,
+    themeColors,
+    elements
+  };
+};
 
 /**
  * A page is `{ route, params }`, never the route alone: a section of a page is
@@ -41789,7 +42071,7 @@ const resolveCommandValue = (source, event) => {
     return event.detail.value;
   }
   if (source.hasAttribute("command-value")) {
-    return source.getAttribute("command-value");
+    return readCommandValue(source);
   }
   if (source.type === "radio" || source.type === "checkbox") {
     // Use readControlValue so that radio/checkbox sources return their `value`
@@ -41805,6 +42087,20 @@ const resolveCommandValue = (source, event) => {
   // selected, and the screen it opens would prefill a new entry with it.
   return getUIStateFromElement(source, { own: true });
 };
+// The value as it was given: a <Button command-value={12}> holds the number, an
+// object, whatever the prop said, where its attribute can only say a string. A
+// plain element carrying the attribute says that string.
+const readCommandValue = (source) => {
+  let responded = false;
+  let value;
+  dispatchCustomEvent(source, "navi_get_command_value", {
+    respondWith: (jsValue) => {
+      responded = true;
+      value = jsValue;
+    },
+  });
+  return responded ? value : source.getAttribute("command-value");
+};
 
 const onNaviCommand = (e, { debugCommand = () => {} } = {}) => {
   const { command, event, source, implementation } = e.detail;
@@ -42572,7 +42868,11 @@ const executeNaviDefine = (source, event, target) => {
 // reads it (see List). "--navi-scroll:smooth" asks for the glide.
 const scrollCommand = (source, event, { argument, value }) => {
   const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+    resolveExplicitTarget(source) ||
+    // The list sending it about itself, as List's JSDoc writes a scroll asked
+    // by code: triggerNaviCommand(listEl, "--navi-scroll", event, { value }).
+    (source.matches(".navi_list_container") ? source : null) ||
+    resolveFirstParentControl(source);
   if (!target) {
     return undefined;
   }
@@ -44106,6 +44406,9 @@ const useAutoFocus = (
         `[autofocus] "${ancestorType}" opened ${getElementSignature(ancestor)} -> ${focusDebugCall}`,
       );
     }
+    if (focusVisible === true) {
+      askFocusVisible(focusableElement);
+    }
     focusableElement.focus({ preventScroll, focusVisible });
     if (autoSelect) {
       focusableElement.select();
@@ -49147,12 +49450,17 @@ const useControlProps = (props, {
           }
         };
       }
+
+      // A field with an action of its own has Enter answered already: the
+      // input effect (input_effect.js) commits it — through the change Enter
+      // fires, or on the keydown itself under actionDebounce — and an action
+      // run on every keystroke has nothing left to commit. --navi-send would
+      // run that same action a second time. Nothing answers it under
+      // actionEvent="custom", where the field's caller does.
+      const enterAnsweredByInputEffect = Boolean(actionDebounce) || props.action !== undefined && actionEvent !== "custom";
       const keyDownDefaultOnInput = e => {
         if (e.key === "Enter") {
-          if (actionDebounce) {
-            // The input has its own debounced action; Enter fires it directly
-            // (input_effect.js cancels the debounce and triggers the action via the change event).
-            // Don't propagate to --navi-send, which would cause a double action call.
+          if (enterAnsweredByInputEffect) {
             return null;
           }
           return enterToSend(e);
@@ -53837,12 +54145,15 @@ const TextOverflow = ({
 }) => {
   return jsx(Text, {
     block: true,
-    as: "div",
-    pre: noWrap === undefined ? true : undefined
+    as: "div"
+    // One line does not wrap, at a typed newline either: white-space: pre
+    // would keep every newline, and the text would be one line only while it
+    // has none. A white-space the caller says wins.
+    ,
+    noWrap: noWrap ?? (rest.as === "p" || saysWhiteSpace(rest) ? undefined : true)
     // For paragraph we prefer to keep lines and only hide unbreakable long sections
     ,
     preLine: rest.as === "p" ? true : undefined,
-    noWrap: noWrap,
     ...rest,
     maxLines: undefined,
     "data-text-overflow": "",
@@ -59432,7 +59743,7 @@ const css$S = /* css */`@layer navi {
         transparent);
   }
 
-  .navi_button[data-content-display="contents"] {
+  .navi_button {
     background: none;
     border: none;
     padding: 0;
@@ -59464,10 +59775,8 @@ a.navi_button {
   outline: none;
   position: relative;
 
-  &:where(:not([data-content-display="contents"])) {
-    background: none;
-    border: none;
-    padding: 0;
+  & .navi_button_content > [data-navi-space] {
+    display: contents;
   }
 
   & .navi_button_content {
@@ -59742,6 +60051,12 @@ const ButtonUI = props => {
     ,
     onnavi_get_value: e => {
       e.detail.respondWith(props.value);
+    }
+    // Same for what a command is about, when it is not the button's value
+    // (see resolveCommandValue).
+    ,
+    onnavi_get_command_value: e => {
+      e.detail.respondWith(props["command-value"]);
     },
     onContextMenu: e => {
       if (as === "a") {
@@ -59782,7 +60097,12 @@ const ButtonUI = props => {
       ...controlChildrenWrapperProps,
       children: jsx(ButtonContent, {
         spacing: spacing,
-        contentDisplay: contentDisplay,
+        contentDisplay: contentDisplay
+        // The frame lays the children out in the button's flow: told so, a
+        // `spacing` is its gap rather than a space one line tall. Not without
+        // a frame: the button's box lays them out then.
+        ,
+        flex: contentDisplay === "contents" ? undefined : props.flex ?? (icon ? "x" : undefined),
         children: children
       })
     })]
@@ -59795,12 +60115,14 @@ const ButtonUI = props => {
 const ButtonContent = ({
   spacing,
   contentDisplay = "inherit",
+  flex,
   children
 }) => {
   const boxForwardedProps = useContext(BoxForwardedPropsContext);
   return jsxs(Text, {
     ...boxForwardedProps,
     display: contentDisplay,
+    flex: flex,
     spacing: spacing,
     className: "navi_button_content",
     children: [children, jsx(ButtonShadow, {})]
@@ -70091,7 +70413,10 @@ const engageGroup = (groupEl, group, {
   const focusWasInGroup = Boolean(focusedBefore) && focusedBefore !== groupEl && groupEl.contains(focusedBefore);
   // What the focus goes back to, when nothing holds it any more at the close.
   const focusOrigin = !focusWasInGroup && focusedBefore && focusedBefore !== document.body && focusedBefore !== groupEl ? focusedBefore : null;
-  const ringBefore = Boolean(focusedBefore?.matches?.(":focus-visible"));
+  // The ring navi drew, not the browser's flag: the flag outlives a press
+  // whose mousedown was prevented, and given back as `focusVisible: true` it
+  // would draw a ring nobody saw before (see isMatchingFocusVisible).
+  const ringBefore = Boolean(focusedBefore?.matches && isMatchingFocusVisible(focusedBefore));
   const {
     scrollTop,
     scrollLeft
@@ -70267,7 +70592,7 @@ const engageGroup = (groupEl, group, {
       // or the user, put it since. Unless nothing moved it, that element is
       // made no focus target for the call: inert — or, holding the focus
       // inside it, without its tabindex, inert taking the focus with it.
-      const ringBeforeClose = Boolean(focusedBeforeClose?.matches?.(":focus-visible"));
+      const ringBeforeClose = Boolean(focusedBeforeClose?.matches && isMatchingFocusVisible(focusedBeforeClose));
       const focusMovedInGroup = focusWasInGroup && focusedBeforeClose && focusedBeforeClose !== document.body && focusedBeforeClose !== groupEl && focusedBeforeClose !== focusedBefore && focusedBeforeClose.isConnected && focusedBefore.isConnected;
       const holdsFocusInside = focusMovedInGroup && focusedBefore.contains(focusedBeforeClose);
       const madeInert = focusMovedInGroup && !holdsFocusInside && !focusedBefore.inert;
@@ -72250,6 +72575,29 @@ const usePopupName = ({
 };
 const NO_TITLE = [];
 
+// The open controller's popupValueSignal (see open_controller.js), handed to
+// the content by whatever renders it: Dialog, Popover, a picker's callout.
+const PopupValueContext = createContext(null);
+
+/**
+ * What the popup this is rendered inside is open ON: the value its `signal`
+ * held while it read open (the id a single sheet bound to `?open=<id>` shows),
+ * else its `value`, else the value of whatever opened it
+ * (`<Button value={id} command="--navi-open">`).
+ *
+ * Held from the opening to the end of the exit, whoever asks the close: the
+ * signal and the address read closed as soon as the close starts, while an
+ * animated exit — and a lift flying back to the card it came from — still
+ * draws what the content renders. A refused close keeps it; a reopening on
+ * another value switches it at the reopening.
+ *
+ * @returns {any} `undefined` outside a popup.
+ */
+const usePopupValue = () => {
+  const popupValueSignal = useContext(PopupValueContext);
+  return popupValueSignal ? popupValueSignal.value : undefined;
+};
+
 installImportMetaCssBuild(import.meta);
 // Same need popover.jsx has for its own local renderer (see its
 // openLocalPopoverCount): a layer="local" dialog is a plain positioned element
@@ -73194,7 +73542,7 @@ const css$C = /* css */`
  *   whatever triggered the open (`e.detail.source`). A string is resolved via
  *   `document.getElementById` when the dialog opens — see popover.jsx's own
  *   `anchor` doc for why (mainly `defaultOpen`).
- * @param {Element|{current: Element}|string} [props.liftAnchor] - Under
+ * @param {Element|{current: Element}|string|((popupValue: any) => Element|{current: Element}|string)} [props.liftAnchor] - Under
  *   `animation="lifting"` or `animation={{ open, close: "lifting" }}`, where the closing
  *   brings the box back to, when that is not where it came from: a popup one
  *   walks through (a row of cards shown one at a time) has something else in
@@ -73202,8 +73550,10 @@ const css$C = /* css */`
  *   card the press opened on. Same grammar as `anchor` (element, ref or id),
  *   resolved once the close is made — after `onClose` — so whatever names the
  *   card currently in front, or the box the close itself renders, is read
- *   then and not at the opening. Left out, the box comes back to the anchor
- *   it came out of.
+ *   then and not at the opening. A function is called then with what the
+ *   dialog was open on (see `usePopupValue`): a close the holder asks for
+ *   (Back taking the id out of the address) has emptied its signal by then.
+ *   Left out, the box comes back to the anchor it came out of.
  * @param {boolean} [props.sizeFromAnchor=false] - Whether the dialog takes the
  *   anchor's width/height as a min-width/min-height floor
  *   (`--anchor-width`/`--anchor-height`). Off by default: unlike a popover,
@@ -73736,9 +74086,12 @@ const useDialogProps = props => {
     openerAriaLabel,
     openerAriaLabelledBy
   });
-  const children = contentMounted ? jsx(PopupTitleContext.Provider, {
-    value: registerTitle,
-    children: childrenProp
+  const children = contentMounted ? jsx(PopupValueContext.Provider, {
+    value: openController.popupValueSignal,
+    children: jsx(PopupTitleContext.Provider, {
+      value: registerTitle,
+      children: childrenProp
+    })
   }) : null;
   // Where it is placed, and whether there is a wall — the two questions that
   // pick the show call (see this file's top comment).
@@ -73939,12 +74292,18 @@ const useDialogProps = props => {
   // Silent when it names nothing: the close may be what renders it, and
   // popup_lift.js asks again until it is there (and warns past that).
   const resolveLiftAnchorElement = () => {
-    if (typeof liftAnchor === "string") {
-      return document.getElementById(liftAnchor);
+    // Asked with what the dialog was open on, which the signal holding it no
+    // longer says once the close has started (see usePopupValue).
+    const named = typeof liftAnchor === "function" ? liftAnchor(openController.popupValueSignal.peek()) : liftAnchor;
+    if (!named) {
+      return null;
+    }
+    if (typeof named === "string") {
+      return document.getElementById(named);
     }
     // A ref is unwrapped even when it holds nothing, the same way `anchor` is:
     // the ref object itself has no box to come back to.
-    return "current" in liftAnchor ? liftAnchor.current : liftAnchor;
+    return "current" in named ? named.current : named;
   };
 
   // The dialog and the anchor are the same box at two sizes, so the opening
@@ -74186,10 +74545,10 @@ const useDialogProps = props => {
       // resolveSpacingSize walks up from there to find that container.
       let marginWithContainerInPixels = resolveSpacingSize(marginWithContainer, dialogEl.parentElement);
       if (typeof marginWithContainerInPixels !== "number") {
-        // A value only CSS could evaluate (a spacing token resolving to a var(),
-        // a percentage…) — the placement below needs a real number, and letting
-        // it through would put the dialog at NaN.
-        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a viewport length ("3appw", "3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
+        // A value only CSS could evaluate (a percentage, a calc()…) — the
+        // placement below needs a real number, and letting it through would
+        // put the dialog at NaN.
+        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a spacing word ("s", "m"…), a viewport length ("3appw", "3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
         marginWithContainerInPixels = 0;
       }
       // The size caps read the same gap in CSS as the placement below applies
@@ -75226,9 +75585,11 @@ const css$B = /* css */`
  *   big to bother anchoring to (`isAnchorTooBig`, always checked — see
  *   `pickPositionRelativeTo`'s own doc in visible_rect.js).
  * @param {string|number} [props.marginWithContainer=0] - Extra spacing kept
- *   between the popover and the edges of its container.
+ *   between the popover and the edges of its container: a number of px, a
+ *   spacing word (`"s"`, read at the page's font size), a viewport length
+ *   (`"3appw"`) or a container length (`"3cqw"`).
  * @param {string|number} [props.marginWithAnchor=0] - Extra spacing kept
- *   between the popover and the edges of its anchor.
+ *   between the popover and the edges of its anchor, written the same way.
  * @param {boolean} [props.backdrop=true] - Whether anything is laid between
  *   the popover and the page at all — asked before what an outside press does
  *   and before how the backdrop is painted. `false` leaves the page
@@ -75692,9 +76053,12 @@ const usePopoverProps = props => {
     openerAriaLabel,
     openerAriaLabelledBy
   });
-  const children = contentMounted ? jsx(PopupTitleContext.Provider, {
-    value: registerTitle,
-    children: childrenProp
+  const children = contentMounted ? jsx(PopupValueContext.Provider, {
+    value: openController.popupValueSignal,
+    children: jsx(PopupTitleContext.Provider, {
+      value: registerTitle,
+      children: childrenProp
+    })
   }) : null;
   const isTopLayer = layer === "top";
   const ref = props.ref;
@@ -76009,8 +76373,8 @@ const usePopoverProps = props => {
           positionArea,
           positionAreaFixed,
           positionAreaWhenAnchorIsInvalid,
-          marginWithAnchor: resolveSpacingSize(marginWithAnchor),
-          marginWithContainer: resolveSpacingSize(marginWithContainer),
+          marginWithAnchor: resolveMarginInPixels(marginWithAnchor, "marginWithAnchor"),
+          marginWithContainer: resolveMarginInPixels(marginWithContainer, "marginWithContainer"),
           // Only meaningful for the custom renderer: popoverEl is always
           // position: absolute relative to its own positioned ancestor,
           // real anchor or not — this tells pickPositionRelativeTo to
@@ -76067,7 +76431,7 @@ const usePopoverProps = props => {
         const pickOptions = {
           positionArea,
           container: positionedAncestor,
-          marginWithContainer: resolveSpacingSize(marginWithContainer),
+          marginWithContainer: resolveMarginInPixels(marginWithContainer, "marginWithContainer"),
           event: positionEvent
         };
         position = pickPositionRelativeTo(popoverEl, null, pickOptions);
@@ -76643,6 +77007,17 @@ const resolvePositionAreaAndAnimationKind = ({
 Popover.Close = PopupClose;
 Popover.Title = PopupTitle;
 
+// The placement needs pixels: a value only CSS could evaluate (a percentage, a
+// calc()…) would put the popover at NaN, which is the top of the page.
+const resolveMarginInPixels = (margin, name) => {
+  const pixels = resolveSpacingSize(margin);
+  if (typeof pixels === "number") {
+    return pixels;
+  }
+  console.warn(`Popover: ${name}="${margin}" cannot be resolved to pixels. Use a number, a spacing word ("xs", "s", "m"…), a viewport length ("3appw", "3vvw") or a container length ("3cqw", "2cqh").`);
+  return 0;
+};
+
 installImportMetaCssBuild(import.meta);
 const css$A = /* css */`@layer navi {
   .navi_popup {
@@ -76702,7 +77077,7 @@ const css$A = /* css */`@layer navi {
  *   `maxWidth` below.
  * @param {boolean} [props.sizeFromAnchor] - **Dialog-only**, same guard.
  * @param {"box"|"scene"} [props.lift] - **Dialog-only**, same guard.
- * @param {Element|{current: Element}|string} [props.liftAnchor] -
+ * @param {Element|{current: Element}|string|((popupValue: any) => Element|{current: Element}|string)} [props.liftAnchor] -
  *   **Dialog-only**, same guard.
  * @param {string} [props.positionArea] - Forwarded as-is — `Dialog` and
  *   `Popover` have different own defaults (`"center"` vs. `"bottom"`),
@@ -76991,9 +77366,12 @@ const getPickerHostLabelId = (id, props) => {
  * right now: in the popup, what is being picked, before anything is sent; on
  * the façade, the answer the popup just closed on, before the server has said
  * anything, and put back if the action fails. `loading` is the run in flight;
- * `interactive` is false while the picker is disabled, read-only or busy.
+ * `interactive` is false while the picker is disabled, read-only or busy;
+ * `readOnly` says the picker is read-only or held by the network policy — a
+ * hold the controls a caller draws on the façade are not held by, so a face
+ * that wants to look held reads it here.
  *
- * @returns {{ value: any, loading: boolean, interactive: boolean } | null}
+ * @returns {{ value: any, loading: boolean, interactive: boolean, readOnly: boolean } | null}
  *   null outside a picker.
  */
 const usePickerState = () => {
@@ -77004,12 +77382,14 @@ const usePickerState = () => {
   const {
     value,
     loading,
-    interactive
+    interactive,
+    readOnly
   } = context;
   return {
     value,
     loading,
-    interactive
+    interactive,
+    readOnly
   };
 };
 
@@ -77347,6 +77727,9 @@ const PickerCustom = props => {
     onConfirm,
     onClose
   };
+  // The press the trigger's mousedown answered (see its reactions below): the
+  // click it ends with is that press, not a second question.
+  const pressAnsweredAtMouseDownRef = useRef(null);
   // aria-controls + id
   const popupId = `${props.id}_picker_popup`;
   {
@@ -77851,6 +78234,7 @@ const PickerCustom = props => {
               // Closing stays on the press even then: a gesture starting on an
               // open picker wants the popup out of the way, and there is no
               // choice being taken from anyone.
+              pressAnsweredAtMouseDownRef.current = readPressCount();
               return {
                 name: "mousedown to close picker",
                 intent: "read",
@@ -77869,6 +78253,7 @@ const PickerCustom = props => {
             if (!opensOnPress || interactionsDispute || isPressDisputedByDrag(e.target) || isPressDisputedByHold(ref.current)) {
               return null;
             }
+            pressAnsweredAtMouseDownRef.current = readPressCount();
             return {
               name: "mousedown to open picker",
               intent: "read",
@@ -77883,6 +78268,15 @@ const PickerCustom = props => {
             if (isWithinPickerContent(e.target)) {
               return null;
             }
+            // One press, one answer: the press its mousedown answered is only
+            // ending. Asked again, a refusal still on screen would read this
+            // click as "got it" and take its explanation down before a frame
+            // is drawn — under a finger the mousedown and the click arrive
+            // together, after touchend (see reportInteractivity).
+            if (e.detail !== 0 && pressAnsweredAtMouseDownRef.current === readPressCount()) {
+              e.preventDefault();
+              return null;
+            }
             // Still open at the click of a later press: that press brought no
             // mousedown to close on (a drag source cancelled its pointerdown),
             // so it closes here, as it opens here in that case. A mousedown
@@ -77988,17 +78382,35 @@ const getTriggerLabelIds = pickerEl => {
   return ids.length === 0 ? undefined : ids.join(" ");
 };
 // What the picker holds without the person having changed it: its `value` (or
-// signal) moving, a default moving under it — also when carried up from a
-// control in its popup — and what its popup's controls are placed on as they
-// mount.
+// signal) moving, a default moving under it, and what its popup's controls are
+// placed on as they mount. Read along the chain, never off the event alone: a
+// control in the popup carries its change up to the picker as an event of its
+// own (see the facade in ui_state_controller.js), chained to what caused it —
+// an app writing that control's bound signal included.
+const OUTSIDE_WRITE_TYPE_SET = new Set(["state_prop_change", "initial_state_push", "facade_child_mount_sync", "outside_value_follow"]);
 const isWrittenByTheOutside = e => {
   if (!e) {
     return false;
   }
-  if (e.type === "state_prop_change" || e.type === "initial_state_push" || e.type === "facade_child_mount_sync") {
+  return Boolean(findEvent(e, event => OUTSIDE_WRITE_TYPE_SET.has(event.type)));
+};
+// The popup echoes the trigger's corners (see the CSS above), right for a
+// length and wrong for a shape: a round trigger's 50% read on a sheet of
+// another size is an ellipse, and a pill's 999px a stadium. A shape leaves the
+// popup on the corners every popup has.
+const PILL_RADIUS_MIN_PX = 100;
+const isBorderRadiusAShape = borderRadius => {
+  if (typeof borderRadius === "number") {
+    return borderRadius >= PILL_RADIUS_MIN_PX;
+  }
+  if (typeof borderRadius !== "string") {
+    return false;
+  }
+  const radius = borderRadius.trim();
+  if (radius.endsWith("%")) {
     return true;
   }
-  return Boolean(findEvent(e, "outside_value_follow"));
+  return radius.endsWith("px") && parseFloat(radius) >= PILL_RADIUS_MIN_PX;
 };
 const getPickerInputUIState = pickerEl => {
   const pickerInput = getPickerInput(pickerEl);
@@ -78173,7 +78585,7 @@ const PickerContentInsidePopup = props => {
       ,
       "data-picker-popup": "",
       backgroundColor: popupBackgroundColor,
-      borderRadius: popupBorderRadius,
+      borderRadius: popupBorderRadius === undefined && isBorderRadiusAShape(props.borderRadius) ? "var(--navi-popup-border-radius)" : popupBorderRadius,
       boxShadow: popupBoxShadow,
       borderWidth: isPopover ? undefined : dialogBorderWidth,
       minWidth: isPopover ? popupWidthFitContent ? undefined : "var(--anchor-width, 0px)" : dialogMinWidth,
@@ -78273,7 +78685,10 @@ const PickerCalloutPopup = ({
     mount,
     anchor
   });
-  const children = contentMounted ? childrenProp : null;
+  const children = contentMounted ? jsx(PopupValueContext.Provider, {
+    value: openController.popupValueSignal,
+    children: childrenProp
+  }) : null;
   // Inside a <PopupGroup> the wall is the group's (see popup_group.jsx): it
   // decides what a press outside the callout does, and the callout spends and
   // closes on none of its own.
@@ -78432,6 +78847,13 @@ const findFileChooser = pickerEl => {
   return pickerEl.querySelector(".navi_picker_file_chooser");
 };
 const showNativePicker = (pickerInput, event) => {
+  if (pickerInput.type === "file") {
+    // WebKit presents nothing for a file input's showPicker() and throws
+    // nothing, so the catch below never learns of it; a click, within the
+    // press, opens the chooser in every engine.
+    pickerInput.click();
+    return;
+  }
   if (findEvent(event, isTouchDrivenEvent)) {
     moveFocusTo(pickerInput, {
       focusVisible: false
@@ -79063,7 +79485,8 @@ const css$x = /* css */`@layer navi {
  *   vertical one matches the line of text it sits on.
  * @param {string} [props.color] - The line's own colour — `--color`.
  * @param {string|number} [props.margin="0.5em"] - Room kept on both sides of
- *   the line — `--margin`.
+ *   the line — `--margin`. A spacing word (`"xs"`, `"s"`, `"m"`…), a length or
+ *   a number of px, like any margin prop.
  * @param {string|number} [props.marginStart] - Room on one side only —
  *   `--margin-start`, above a horizontal rule and left of a vertical one.
  * @param {string|number} [props.marginEnd] - …and the other, `--margin-end`.
@@ -79094,9 +79517,9 @@ const Separator = ({
       ...cssVars({
         "--size": lengthValue(size),
         "--color": color,
-        "--margin": lengthValue(margin),
-        "--margin-start": lengthValue(marginStart),
-        "--margin-end": lengthValue(marginEnd)
+        "--margin": spacingValue(margin),
+        "--margin-start": spacingValue(marginStart),
+        "--margin-end": spacingValue(marginEnd)
       }),
       ...style
     }
@@ -79117,6 +79540,10 @@ const cssVars = vars => {
   return declared;
 };
 const lengthValue = value => typeof value === "number" ? `${value}px` : value;
+// A margin reads the spacing scale like every other margin prop ("s" →
+// var(--navi-s)): written raw, a word is a valid custom property and an invalid
+// margin, which computes to 0 without falling back to anything.
+const spacingValue = value => value === undefined ? undefined : stringifySpacingStyle(value, "margin");
 
 const ListItemHeaderOrFooterResolver = props => {
   const Next = useNextResolver();
@@ -79617,7 +80044,9 @@ const createListItems = () => {
     dropItemLocator: (ownerId) => {
       locatorByOwner.delete(ownerId);
     },
-    // Where the item named by that id sits, asked of whoever holds it.
+    // Where the item named by that id sits, asked of whoever holds it: a run
+    // knows its items, drawn or not; an item declared one by one is its own
+    // holder, and says its place when it draws.
     locateItem: (id) => {
       for (const locator of locatorByOwner.values()) {
         const index = locator.indexOf(id);
@@ -79625,6 +80054,16 @@ const createListItems = () => {
           return index;
         }
       }
+      for (const [entryId, entry] of entryById) {
+        if (
+          entry.ownerId === entryId &&
+          entry.item &&
+          entry.place !== undefined &&
+          entry.data.itemId === id
+        ) {
+          return entry.place;
+        }
+      }
       return null;
     },
     // The room the item at that index takes: the room it took when it was
@@ -81015,6 +81454,11 @@ const css$v = /* css */`@property --list-group-label-height {
   overflow: clip;
 }
 
+.navi_list_container[data-horizontal]:not([data-scroller], [data-overflow-visible]) > .navi_list_scroll_container > .navi_list:not([navi-box-flow="grid"]) {
+  width: min-content;
+  min-width: 100%;
+}
+
 .navi_list_container[data-horizontal] {
   --list-max-height: none;
 
@@ -81162,6 +81606,7 @@ const css$v = /* css */`@property --list-group-label-height {
 
   & .navi_list_item_group_list {
     --list-group-label-height: inherit;
+    gap: var(--x-list-gap, 0px);
     flex-direction: column;
     width: 100%;
     margin: 0;
@@ -88777,6 +89222,16 @@ const PickerChip = ({
   children,
   ...rest
 }) => {
+  // Its picker's own state, not the zone's: on the façade the network policy's
+  // hold is not handed down (see faceReadOnly in picker.jsx), and the cross is
+  // what changes the picker.
+  const pickerContext = usePickerContext();
+  if (commandFor === undefined && pickerContext?.readOnly) {
+    return jsx(Badge, {
+      ...rest,
+      children: children
+    });
+  }
   return jsxs(Badge, {
     ...rest,
     children: [children, jsx(Badge.Button, {
@@ -89381,7 +89836,7 @@ const css$r = /* css */`@property --navi-picker-container-font-size {
     flex-grow: 1;
     display: inline-block;
 
-    &[data-picker-facade] {
+    &[data-picker-facade="drawing"] {
       line-height: var(--navi-line-height);
     }
 
@@ -89548,6 +90003,10 @@ const css$r = /* css */`@property --navi-picker-container-font-size {
     --x-picker-cursor: pointer;
   }
 
+  &[data-readonly]:has( > .navi_picker_box > .navi_picker_input[data-readonly-reason="network-policy"]) > .navi_picker_box > .navi_picker_value[data-picker-facade="drawing"] {
+    color: var(--picker-color);
+  }
+
   &[data-focus-within]:has( > .navi_picker_box > .navi_picker_input[data-focus-visible]), &[data-focus-visible] {
     --x-picker-border-color: transparent;
 
@@ -89773,6 +90232,12 @@ const PickerButton = props => {
   // with it: what the popup changes is what the picker would send.
   const readOnlyFromAbove = useContext(ReadOnlyContext);
   const [readOnlyResolved, readOnlyMessageResolved] = readOnlyHandedDown(uiStateController, readOnly || readOnlyFromAbove);
+  // What a caller draws on the face (its `ui`, its right slot) is read-only
+  // with the picker, and not held with it: the network policy holds what the
+  // picker would send, which its popup changes. A card used as the trigger
+  // keeps its links and buttons, each held for what it sends itself.
+  const faceReadOnly = readOnly || readOnlyFromAbove;
+  const faceReadOnlyMessage = faceReadOnly ? props.readOnlyMessage ?? uiStateController.readOnlyMessageFromAbove : undefined;
   // Read off the controller rather than worked out again: what makes a
   // read-only picker open is settled once, where the gate reads it (see
   // createControlInfo's readOnlyOpens). Needed here for the cursor.
@@ -89794,6 +90259,9 @@ const PickerButton = props => {
     maxLines,
     id: inputProps.id,
     interactive,
+    // Read-only, or held by the network policy — never busy: an action in
+    // flight is not a value nobody may change (see the ReadOnlyProvider below).
+    readOnly: Boolean(readOnlyResolved),
     loading,
     clearConfirm,
     requestValue
@@ -90004,7 +90472,7 @@ const PickerButton = props => {
               // the picker draws itself, so each is written on its own line
               // (see .navi_picker_value in the CSS above).
               ,
-              "data-picker-facade": ui === undefined ? undefined : ""
+              "data-picker-facade": ui === undefined ? undefined : typeof ui === "string" || typeof ui === "number" ? "text" : "drawing"
               // A placeholder is the picker saying "nothing here yet" about
               // the value navi draws — the default rendering, or the one a
               // typed picker installs for itself. A button's label is not
@@ -90016,6 +90484,8 @@ const PickerButton = props => {
               "navi-placeholder": (ui === undefined || pickerUIIsNaviOwn(ui)) && !drawnAsButton && variant !== "text" && uiStateHoldsNothing(value) ? "" : undefined,
               maxLines: maxLines,
               children: jsx(PickerOwnContent, {
+                readOnly: faceReadOnly,
+                readOnlyMessage: faceReadOnlyMessage,
                 children: jsx(MaxLinesContext.Provider, {
                   value: maxLines,
                   children: ui === undefined ? isIcon ?
@@ -90043,6 +90513,8 @@ const PickerButton = props => {
             }), hasRightSlot ? jsx("span", {
               className: "navi_picker_right_slot",
               children: jsx(PickerOwnContent, {
+                readOnly: faceReadOnly,
+                readOnlyMessage: faceReadOnlyMessage,
                 children: clearable && pickerHasSomethingToClear(pickerContext) ? jsx(PickerClear, {
                   size: rightSlotIconSize
                 }) : rightSlot === undefined ?
@@ -90203,12 +90675,18 @@ const warnOnClearOutsidePicker = () => {
 // is empty, a chip the moment its value is taken out — takes the picker's own
 // entry with it, leaving the picker looking for a controller that is gone.
 const PickerOwnContent = ({
+  readOnly,
+  readOnlyMessage,
   children
 }) => jsx(ControlIdContext.Provider, {
   value: undefined,
   children: jsx(ControlNameContext.Provider, {
     value: undefined,
-    children: children
+    children: jsx(ReadOnlyProvider, {
+      readOnly: readOnly,
+      readOnlyMessage: readOnlyMessage,
+      children: children
+    })
   })
 });
 
@@ -90580,7 +91058,7 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   openOn?: "press" | "longpress" | "contextmenu" | string | string[],
  *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "lifting" | `slide-from-${string}` | { open: boolean | "auto" | "fading" | "scaling" | "sliding" | `slide-from-${string}`, close: "lifting" },
  *   lift?: "box" | "scene",
- *   liftAnchor?: Element | { current: Element } | string,
+ *   liftAnchor?: Element | { current: Element } | string | ((popupValue: any) => Element | { current: Element } | string),
  *   animationDuration?: string,
  *   calloutStatus?: "info" | "warning" | "error" | "success" | "none",
  *   calloutIcon?: boolean,
@@ -90655,7 +91133,9 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   follows the theme) — the trigger's own `backgroundColor` is not it, so a
  *   variant that paints the trigger transparent leaves the popup a real sheet.
  * @param {number|string} [popupBorderRadius] The popup's corners. Left out they
- *   echo the trigger's `borderRadius`.
+ *   echo the trigger's `borderRadius` when it is a length of corners; a shape
+ *   (a percentage, a pill's 999px) leaves the popup on the corners every popup
+ *   has.
  * @param {string} [popupBoxShadow] The popup's shadow, popover or dialog. Left
  *   out it is the one every navi popup casts. `"none"` for a popup that is
  *   not a sheet — a card lifted out of a page draws its own edges, and the
@@ -91027,11 +91507,12 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   that opens precisely to get bigger. It brings an opaque, blurred backdrop
  *   with it (`--navi-backdrop-lift-*`); `backdropVariant="discrete"` asks for
  *   the light wash back.
- * @param {Element|{current: Element}|string} [liftAnchor] Dialog mode,
+ * @param {Element|{current: Element}|string|((popupValue: any) => Element|{current: Element}|string)} [liftAnchor] Dialog mode,
  *   Dialog's own: where a lifting close lands when that is not the trigger
  *   (`animation="lifting"`, or `animation={{ open, close: "lifting" }}` for a
  *   popup that opens the plain way and only lands on close),
- *   read once the close is made (after `onClose`).
+ *   read once the close is made (after `onClose`). A function is called with
+ *   what the popup was open on (see `usePopupValue`).
  * @param {"box"|"scene"} [lift="box"] Dialog's own, under `animation="lifting"`:
  *   `"box"` for a card that extends (its top stays, the box uncovers the rest),
  *   `"scene"` for a thumbnail that is a band cut from the middle of the bigger
@@ -101071,9 +101552,11 @@ const KeyboardShortcutAriaElement = ({
  * <Button action={copy}>{copied ? i18n("Copied") : i18n("Copy link")}</Button>
  * ```
  *
- * `copy` rejects when the browser refuses the write, so an `action` running it
- * says why on the control. A press while `copied` holds starts the moment
- * again.
+ * `copy` rejects when the browser refuses the write (permission blocked, page
+ * not in front, no clipboard outside a secure context), with navi's
+ * `"button.copy_refused"` sentence — the browser's own error as its `cause` —
+ * so an `action` running it says why on the control in the page's language. A
+ * press while `copied` holds starts the moment again.
  *
  * @param {string | (() => string | Promise<string>)} text What is copied. A
  *   function is called at the press: for a text only built then (a report, a
@@ -101113,6 +101596,14 @@ const useCopyToClipboard = (text, { duration = 1500 } = {}) => {
 
 const writeToClipboard = async (text) => {
   const value = typeof text === "function" ? text() : text;
+  try {
+    await writeValueToClipboard(value);
+  } catch (error) {
+    // The browser's words are in its own language, and name its API.
+    throw new Error(buttonI18n("button.copy_refused"), { cause: error });
+  }
+};
+const writeValueToClipboard = async (value) => {
   if (typeof value === "string") {
     await window.navigator.clipboard.writeText(value);
     return;
@@ -104117,5 +104608,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, PopupGroup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, activeRouteActionsSignal, activeRouteReadsSignal, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isPressOnControl, isRowSelected, isScrolling, isToday, keepPageOnScreen, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, todaySignal, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useCopyToClipboard, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useHoldScrollRestoration, useInputGroup, useKeyboardShortcuts, useListItemState, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NetworkPolicyError, NumberSpin, Paragraph, Picker, Popover, Popup, PopupGroup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, activeRouteActionsSignal, activeRouteReadsSignal, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, enableVirtualKeyboardOverlay, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isNetworkPolicyError, isPressOnControl, isRowSelected, isScrolling, isToday, keepPageOnScreen, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, routeFallback, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, todaySignal, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useCopyToClipboard, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useHoldScrollRestoration, useInputGroup, useKeyboardShortcuts, useListItemState, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, usePopupValue, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map