@jsenv/navi 0.29.149 → 0.29.151

package/dist/jsenv_navi.js

@@ -5596,8 +5596,19 @@ const CLICK_SELECTOR = selfInteractionSelector("click");
  * The closest element CLAIMING THE PRESS wins, not the closest one claiming
  * anything: an affordance that took only the drag is transparent here, exactly
  * as it is to the drag readers when it took only the click.
+ *
+ * @param {Event} event The gesture being arbitrated.
+ * @param {Element} controlHost The control asking whether the press is its own.
+ * @param {Element} [requester] Who asked this control to act, when someone did
+ *   — the source of a command, typically. The claim answers "was this press
+ *   yours or the affordance's"; it says nothing about a request that affordance
+ *   is making, and the answer there is always yes.
  */
-const isAimedAtSelfInteractionsBelow = (event, controlHost) => {
+const isAimedAtSelfInteractionsBelow = (
+  event,
+  controlHost,
+  requester,
+) => {
   const target = event?.target;
   if (!target || typeof target.closest !== "function") {
     return false;
@@ -5611,6 +5622,13 @@ const isAimedAtSelfInteractionsBelow = (event, controlHost) => {
   if (claimer === controlHost || claimer.contains(controlHost)) {
     return false;
   }
+  // The claimer is the one asking. Its claim took the press so IT would decide
+  // what the press means, and this is that decision arriving — a clear cross
+  // sending "--navi-clear" to the field it sits in. Stepping back here would be
+  // the control refusing the very request the claim exists to let through.
+  if (requester && (claimer === requester || claimer.contains(requester))) {
+    return false;
+  }
   // From the root rather than the host: a layered control (a picker holding an
   // input) has its gate on the input, and what the application drew sits beside
   // it, not in it.
@@ -9802,12 +9820,21 @@ const createControlInteraction = (
 
 const dispatchRequestInteraction = (
   element,
-  { event, name = "", prevented, allowed, always, ...detailRest } = {},
+  {
+    event,
+    name = "",
+    requester,
+    prevented,
+    allowed,
+    always,
+    ...detailRest
+  } = {},
 ) => {
   const controlHost = findControlHost(element) || element;
   return dispatchInternalCustomEvent(controlHost, "navi_request_interaction", {
     event,
     name,
+    requester,
     prevented,
     allowed,
     always,
@@ -9829,6 +9856,9 @@ const onRequestInteraction = (
     // through (see READONLY_CONSTRAINT).
     intent = "write",
     bypassInteractivity = false,
+    // Who asked, when the control is not answering the gesture on its own —
+    // the source of a command (see the self-interactions step-back below).
+    requester,
     prevented,
     allowed,
     always,
@@ -9862,7 +9892,9 @@ const onRequestInteraction = (
   // reaction never happened, so its `prevented`/`always` (an
   // `e.preventDefault()`, for most of them) have nothing to undo and would take
   // the press from the affordance itself.
-  if (isAimedAtSelfInteractionsBelow(event, controlHost)) {
+  // Unless that element is the one asking: what it took the press to decide is
+  // arriving here, and it is this control's to answer.
+  if (isAimedAtSelfInteractionsBelow(event, controlHost, requester)) {
     debugInteraction(
       event,
       `"${name}" is for a self-interactions element below`,
@@ -9947,6 +9979,11 @@ const dispatchRequestAction = (
   return dispatchRequestInteraction(element, {
     event,
     name,
+    // The gate needs it as much as the action does: the requester may be an
+    // affordance that claimed the press to ask for this very action, and the
+    // control must not read that claim as "this press was not for me" — see
+    // isAimedAtSelfInteractionsBelow.
+    requester: actionOptions.requester,
     prevented,
     allowed: () => {
       allowed?.();
@@ -30404,6 +30441,9 @@ registerNaviCommand("--navi-update", (source, event, { argument }) => {
       dispatchRequestInteraction(target, {
         event,
         name: "--navi-update",
+        // The source may have claimed the press to send this very command — see
+        // the requester in onRequestInteraction.
+        requester: source,
         prevented: () => event.preventDefault(),
         allowed: () => {
           const commandValue = resolveCommandValue(source, event);
@@ -30442,6 +30482,9 @@ registerNaviCommand("--navi-clear", (source, event) => {
     dispatchRequestInteraction(target, {
       event: clearEvent,
       name: "--navi-clear",
+      // The source may have claimed the press to send this very command — see
+      // the requester in onRequestInteraction.
+      requester: source,
       prevented: () => clearEvent.preventDefault(),
       allowed: () => {
         // What the control holds, before it holds nothing: the clear is
@@ -30529,6 +30572,9 @@ registerNaviCommand("--navi-reset", (source, event) => {
       dispatchRequestInteraction(target, {
         event,
         name: "--navi-reset",
+        // The source may have claimed the press to send this very command — see
+        // the requester in onRequestInteraction.
+        requester: source,
         prevented: () => event.preventDefault(),
         allowed: () => dispatchRequestResetUIState(target, event),
       });
@@ -42834,6 +42880,34 @@ const DetailsFieldContent = ({
   });
 };
 
+/**
+ * Runs `fn` and commits whatever it re-renders before returning, instead of
+ * letting Preact batch it into the next microtask. Layout effects of what gets
+ * mounted run inside the call too, exactly as they would on any other commit.
+ *
+ * For the caller that has to read the DOM it just asked for — measuring an
+ * element whose content it mounts in the same breath — and cannot wait a tick
+ * to do it, because what comes after is a browser event still in flight
+ * (preventDefault, focus placement) that no longer accepts being answered late.
+ *
+ * `options.debounceRendering` is Preact's own hook for deciding *when* the
+ * render queue drains; swapping it for "right now" for the duration of the call
+ * is exactly how preact/compat implements React's flushSync. Reserve it for the
+ * case above: rendering synchronously in the middle of an event gives up the
+ * batching that makes several state changes one commit.
+ */
+const flushSyncRendering = (fn) => {
+  const debounceRenderingPrevious = options.debounceRendering;
+  options.debounceRendering = (drainRenderQueue) => {
+    drainRenderQueue();
+  };
+  try {
+    fn();
+  } finally {
+    options.debounceRendering = debounceRenderingPrevious;
+  }
+};
+
 /**
  * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
  * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
@@ -43047,6 +43121,96 @@ const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
   return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
 };
 
+/**
+ * When a popup builds what it holds, and when it throws it away.
+ *
+ * A closed popup shows nothing, focuses nothing, and answers nothing: what it
+ * holds is out of reach until it opens. Building that content at mount time
+ * means a page carrying a handful of closed popups pays, on the very render
+ * that decides how fast it appears, for content nobody has asked for — and
+ * pays again on every subsequent measurement, since each of those nodes makes
+ * the document the rest of the page queries bigger.
+ *
+ * So the content is built when the popup first opens, and stays built from
+ * then on: closing is not throwing away, and a reopened popup finds its scroll
+ * position, its half-typed form and its list state where it left them.
+ *
+ * It is built synchronously, from inside `openController.open()` and before
+ * `openEffect` runs (see open_controller.js), so the popup still measures real
+ * content when it positions and animates itself, and so anything inside it
+ * still observes the opening the way it always did — mounted while the popup
+ * reads as closed, told it opened right after (see
+ * use_displayed_layout_effect.js).
+ *
+ * The `mount` prop moves that line. "closed" is two states, not one — never
+ * opened yet, and closed again after an opening — and the three values answer
+ * both at once:
+ *
+ * | mount             | before the first open | after a close |
+ * | ----------------- | --------------------- | ------------- |
+ * | "always"          | mounted               | mounted       |
+ * | "from-first-open" | not mounted           | mounted       |
+ * | "while-opened"    | not mounted           | not mounted   |
+ *
+ * "always" is for content something else depends on before any opening: a
+ * value the popup's owner reads off its own children, fields a form around it
+ * collects on submit, a size measured from outside.
+ *
+ * "while-opened" is the opposite end: content that must be rebuilt from
+ * scratch every time, because what it shows is read once at build time and can
+ * change while the popup is closed — an uncontrolled field seeded from a
+ * `defaultValue`, a form whose fresh state is its initial state.
+ */
+
+
+const MOUNT_DEFAULT = "from-first-open";
+
+const usePopupContentMount = (
+  openController,
+  ref,
+  { children, mount = MOUNT_DEFAULT },
+) => {
+  const mountedAlways = mount === "always";
+  const [contentMounted, setContentMounted] = useState(
+    () => mountedAlways || openController.opened,
+  );
+  openController.mountContent = contentMounted
+    ? null
+    : () => {
+        flushSyncRendering(() => {
+          setContentMounted(true);
+        });
+      };
+  openController.unmountContent =
+    mount === "while-opened"
+      ? () => {
+          const element = ref?.current;
+          if (!element) {
+            setContentMounted(false);
+            return;
+          }
+          // The popup is still on screen while it plays its exit transition;
+          // emptying it right away would show that transition running on a
+          // blank surface.
+          whenTransitionSettles(element, () => {
+            if (openController.opened) {
+              // reopened while it was leaving — the content it holds is the
+              // one that open just asked for
+              return;
+            }
+            setContentMounted(false);
+          });
+        }
+      : null;
+  useLayoutEffect(() => {
+    if (mountedAlways) {
+      setContentMounted(true);
+    }
+  }, [mountedAlways]);
+
+  return contentMounted ? children : null;
+};
+
 installImportMetaCssBuild(import.meta);/**
  * Expandable: an in-flow disclosure — a UI part that reveals a content part.
  * It covers the same ground as <Details> with structural differences:
@@ -43087,10 +43251,9 @@ installImportMetaCssBuild(import.meta);/**
  *   events.
  *
  * Content is not built until the first expansion and stays built afterwards —
- * same policy, same prop names as popups (see popup_content_mount.js):
- * `mountWhenClosed` builds it right away, `unmountWhenClosed` throws it away
- * once the collapse settles (so a closing animation still plays on real
- * content).
+ * same policy, same `mount` prop as popups (see popup_content_mount.js):
+ * `"always"` builds it right away, `"while-opened"` throws it away once the
+ * collapse settles (so a closing animation still plays on real content).
  *
  * The animation is a REVEAL, not a resize: the expandable's own footprint
  * grows/shrinks progressively (the content's grid track interpolates
@@ -43252,8 +43415,7 @@ const useExpandableContext = partName => {
  *   layout?: "row" | "column",
  *   autoFocus?: boolean,
  *   maxContentHeight?: string | number,
- *   mountWhenClosed?: boolean,
- *   unmountWhenClosed?: boolean,
+ *   mount?: "always" | "from-first-open" | "while-opened",
  *   arrowKeyShortcuts?: boolean,
  *   openKeyShortcut?: string,
  *   closeKeyShortcut?: string,
@@ -43290,13 +43452,15 @@ const useExpandableContext = partName => {
  *   the UI part (it would otherwise be lost to the closed, inert content).
  * @param maxContentHeight - Caps the content height; taller content scrolls
  *   inside the expandable instead of growing it.
- * @param mountWhenClosed - Builds the content right away instead of on first
- *   expansion. In layout="column" it also gives the closed expandable its
- *   content's height (the content is kept laid out at its open width), so
- *   opening only reveals the width instead of changing the height too.
- * @param unmountWhenClosed - Throws the content away once the collapse
- *   settles — after the closing animation, so it still plays on real content —
- *   and rebuilds it from scratch on every expansion.
+ * @param mount - When the content is built and thrown away, same three values
+ *   as a popup's (see popup_content_mount.js). `"from-first-open"` (the
+ *   default) builds it on the first expansion and keeps it afterwards.
+ *   `"always"` builds it right away; in layout="column" it also gives the
+ *   closed expandable its content's height (the content is kept laid out at
+ *   its open width), so opening only reveals the width instead of changing the
+ *   height too. `"while-opened"` throws the content away once the collapse
+ *   settles — after the closing animation, so it still plays on real
+ *   content — and rebuilds it from scratch on every expansion.
  */
 const Expandable = props => {
   import.meta.css = [css$Q, "@jsenv/navi/src/control/expandable/expandable.jsx"];
@@ -43312,8 +43476,7 @@ const Expandable = props => {
     layout,
     autoFocus,
     maxContentHeight,
-    mountWhenClosed,
-    unmountWhenClosed,
+    mount = MOUNT_DEFAULT,
     arrowKeyShortcuts = true,
     openKeyShortcut = "ArrowRight",
     closeKeyShortcut = "ArrowLeft",
@@ -43326,7 +43489,9 @@ const Expandable = props => {
   const contentContainerRef = useRef();
   const contentId = useId();
   const isColumn = layout === "column";
-  const closedContentSized = Boolean(isColumn && mountWhenClosed);
+  const mountedAlways = mount === "always";
+  const mountedWhileOpened = mount === "while-opened";
+  const closedContentSized = isColumn && mountedAlways;
   // Reading .value during render is what subscribes the expandable to it.
   const openRequested = signal ? signal.value : open;
   const [opened, setOpened] = useState(() => Boolean(openRequested === undefined ? defaultOpen : openRequested));
@@ -43337,13 +43502,10 @@ const Expandable = props => {
   const {
     loading: actionLoading
   } = useActionStatus(effectiveAction);
-  const [contentMounted, setContentMounted] = useState(() => Boolean(mountWhenClosed) || opened);
-  // Same exclusion as popup_content_mount.js: content that must exist while
-  // closed cannot also be thrown away on close.
-  const effectiveUnmountWhenClosed = unmountWhenClosed && !mountWhenClosed;
+  const [contentMounted, setContentMounted] = useState(() => mountedAlways || opened);
 
   // Fully open and no longer moving — what allows overflow to become visible
-  // (see the CSS) and what unmountWhenClosed waits for before emptying.
+  // (see the CSS) and what mount="while-opened" waits for before emptying.
   const [settled, setSettled] = useState(true);
 
   // Read before the close touches the DOM: flipping the content to inert can
@@ -43410,7 +43572,7 @@ const Expandable = props => {
     focusedAtPointerDownRef.current = null;
     setOpened(nextOpen);
     // Flipped here, before the closing/opening commit, so effects of that very
-    // commit already see the movement as started — unmountWhenClosed must not
+    // commit already see the movement as started — mount="while-opened" must not
     // read a stale "settled" and empty the content under a closing animation.
     setSettled(!animation);
     if (signal) {
@@ -43532,17 +43694,17 @@ const Expandable = props => {
     return cancel;
   }, [opened]);
   useLayoutEffect(() => {
-    if (settled && !opened && effectiveUnmountWhenClosed) {
+    if (settled && !opened && mountedWhileOpened) {
       setContentMounted(false);
     }
-  }, [settled, opened, effectiveUnmountWhenClosed]);
+  }, [settled, opened, mountedWhileOpened]);
   useLayoutEffect(() => {
-    if (mountWhenClosed) {
+    if (mountedAlways) {
       setContentMounted(true);
     }
-  }, [mountWhenClosed]);
+  }, [mountedAlways]);
 
-  // closedContentSized (column + mountWhenClosed): the closed content sizes
+  // closedContentSized (column + mount="always"): the closed content sizes
   // the height (see the CSS), which is only right if it lies at its OPEN
   // width — at its natural closed width (a 0-wide track) it would wrap
   // against nothing and stack word by word. So while closed, its width is
@@ -44090,7 +44252,7 @@ installImportMetaCssBuild(import.meta);const css$P = /* css */`@layer navi {
     --button-color: currentColor;
     --button-cursor: pointer;
     --button-font-size: var(--navi-control-font-size);
-    --button-font-family: var(--navi-control-font-family);
+    --button-font-family: var(--navi-control-font-family, inherit);
     --button-border-color-hover: color-mix(in srgb,
         var(--button-border-color) 70%,
         black);
@@ -44337,37 +44499,30 @@ a.navi_button {
   }
 
   &[data-cta] {
-    --x-button-background-color: var(--button-cta-background-color);
-    --x-button-border-color: var(--button-cta-background-color);
-    --x-button-color: white;
-
-    &[data-hover] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 85%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 85%,
-          white);
-    }
-
-    &[data-readonly] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 50%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 50%,
-          white);
-    }
-
-    &[data-disabled] {
-      --x-button-background-color: color-mix(in srgb,
-          var(--button-cta-background-color) 40%,
-          white);
-      --x-button-border-color: color-mix(in srgb,
-          var(--button-cta-background-color) 40%,
-          white);
-      --x-button-color: #fff9;
-    }
+    --button-background-color: var(--button-background, var(--button-cta-background-color));
+    --button-border-color: var(--button-cta-background-color);
+    --button-color: white;
+    --button-background-color-hover: color-mix(in srgb,
+        var(--button-background-color) 85%,
+        white);
+    --button-border-color-hover: color-mix(in srgb,
+        var(--button-border-color) 85%,
+        white);
+    --button-background-color-readonly: color-mix(in srgb,
+        var(--button-background-color) 50%,
+        white);
+    --button-border-color-readonly: color-mix(in srgb,
+        var(--button-border-color) 50%,
+        white);
+    --button-background-color-disabled: color-mix(in srgb,
+        var(--button-background-color) 40%,
+        white);
+    --button-border-color-disabled: color-mix(in srgb,
+        var(--button-border-color) 40%,
+        white);
+    --button-color-disabled: color-mix(in srgb,
+        var(--button-color) 60%,
+        transparent);
   }
 }
 `;
@@ -45310,7 +45465,7 @@ installImportMetaCssBuild(import.meta);const css$M = /* css */`@layer navi {
     --outline-color: var(--navi-focus-outline-color);
     --margin: 3px 3px 3px 4px;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --width: round(1em, 1px);
     --height: round(1em, 1px);
     --loader-color: var(--navi-loader-color);
@@ -46016,7 +46171,7 @@ installImportMetaCssBuild(import.meta);const css$K = /* css */`@layer navi {
     --border-color-checked: var(--accent-color);
     --cursor: pointer;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --border-color-hover: color-mix(in srgb, var(--border-color) 60%, black);
     --border-color-hover-checked: color-mix(in srgb,
         var(--border-color-checked) 80%,
@@ -46463,7 +46618,7 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`@layer navi {
     --thumb-border-radius: 100%;
     --thumb-cursor: pointer;
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --loader-color: var(--navi-loader-color);
     --accent-color: var(--navi-control-accent-color);
     --color-mix-light: black;
@@ -46811,7 +46966,7 @@ const inputCss = /* css */`@layer navi {
     --outline-offset: calc(-.5 * var(--outline-width));
     --outline-color: var(--navi-focus-outline-color);
     --font-size: var(--navi-control-font-size);
-    --font-family: var(--navi-control-font-family);
+    --font-family: var(--navi-control-font-family, inherit);
     --loader-color: var(--navi-loader-color);
     --border-color: var(--navi-control-border-color);
     --background-color: var(--navi-surface-color);
@@ -47026,13 +47181,24 @@ const inputCss = /* css */`@layer navi {
   }
 
   &[data-variant="text"] {
-    --x-background-color: transparent;
-    --x-border-color: transparent;
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
+    --border-color: transparent;
+    --border-color-hover: var(--border-color);
+    --border-color-readonly: var(--border-color);
+    --border-color-disabled: var(--border-color);
     cursor: inherit;
   }
 
   &[data-variant="underline"] {
-    --x-background-color: transparent;
+    --background-color: transparent;
+    --background-color-hover: var(--background-color);
+    --background-color-focus: var(--background-color);
+    --background-color-readonly: var(--background-color);
+    --background-color-disabled: var(--background-color);
     border: none;
     border-radius: 0;
     padding-left: 0;
@@ -47054,12 +47220,7 @@ const inputCss = /* css */`@layer navi {
       position: absolute;
     }
 
-    &[data-hover] {
-      --x-background-color: transparent;
-    }
-
     &[data-focus-visible] {
-      --x-background-color: transparent;
       outline-style: none;
 
       & .navi_input_underline {
@@ -47067,10 +47228,6 @@ const inputCss = /* css */`@layer navi {
         height: 2px;
       }
     }
-
-    &[data-readonly], &[data-disabled] {
-      --x-background-color: transparent;
-    }
   }
 }
 `;
@@ -53902,7 +54059,7 @@ const createOpenController = (
     // previous subject first.
     onOpen: null,
     // The counterpart, set only when the popup was told to throw its content
-    // away on close (`unmountWhenClosed`). Called from performClose above.
+    // away on close (`mount="while-opened"`). Called from performClose above.
     unmountContent: null,
     // Told whenever `opened` actually changes, whatever asked for it — an
     // interaction, a command, a prop — with the event that asked. What lets a
@@ -54374,111 +54531,6 @@ const getAvailableWidth = (layer, element) => {
   return visualViewportWidthSignal.peek();
 };
 
-/**
- * Runs `fn` and commits whatever it re-renders before returning, instead of
- * letting Preact batch it into the next microtask. Layout effects of what gets
- * mounted run inside the call too, exactly as they would on any other commit.
- *
- * For the caller that has to read the DOM it just asked for — measuring an
- * element whose content it mounts in the same breath — and cannot wait a tick
- * to do it, because what comes after is a browser event still in flight
- * (preventDefault, focus placement) that no longer accepts being answered late.
- *
- * `options.debounceRendering` is Preact's own hook for deciding *when* the
- * render queue drains; swapping it for "right now" for the duration of the call
- * is exactly how preact/compat implements React's flushSync. Reserve it for the
- * case above: rendering synchronously in the middle of an event gives up the
- * batching that makes several state changes one commit.
- */
-const flushSyncRendering = (fn) => {
-  const debounceRenderingPrevious = options.debounceRendering;
-  options.debounceRendering = (drainRenderQueue) => {
-    drainRenderQueue();
-  };
-  try {
-    fn();
-  } finally {
-    options.debounceRendering = debounceRenderingPrevious;
-  }
-};
-
-/**
- * When a popup builds what it holds, and when it throws it away.
- *
- * A closed popup shows nothing, focuses nothing, and answers nothing: what it
- * holds is out of reach until it opens. Building that content at mount time
- * means a page carrying a handful of closed popups pays, on the very render
- * that decides how fast it appears, for content nobody has asked for — and
- * pays again on every subsequent measurement, since each of those nodes makes
- * the document the rest of the page queries bigger.
- *
- * So the content is built when the popup first opens, and stays built from
- * then on: closing is not throwing away, and a reopened popup finds its scroll
- * position, its half-typed form and its list state where it left them.
- *
- * It is built synchronously, from inside `openController.open()` and before
- * `openEffect` runs (see open_controller.js), so the popup still measures real
- * content when it positions and animates itself, and so anything inside it
- * still observes the opening the way it always did — mounted while the popup
- * reads as closed, told it opened right after (see
- * use_displayed_layout_effect.js).
- *
- * `mountWhenClosed` is for content something else depends on before any of
- * this: a value the popup's owner reads off its own children, fields a form
- * around it collects on submit, a size measured from outside.
- *
- * `unmountWhenClosed` is the opposite end: content that must be rebuilt from
- * scratch every time, because what it shows is read once at build time and can
- * change while the popup is closed — an uncontrolled field seeded from a
- * `defaultValue`, a form whose fresh state is its initial state.
- */
-
-
-const usePopupContentMount = (
-  openController,
-  ref,
-  { children, mountWhenClosed, unmountWhenClosed },
-) => {
-  const [contentMounted, setContentMounted] = useState(
-    () => Boolean(mountWhenClosed) || openController.opened,
-  );
-  openController.mountContent = contentMounted
-    ? null
-    : () => {
-        flushSyncRendering(() => {
-          setContentMounted(true);
-        });
-      };
-  openController.unmountContent =
-    unmountWhenClosed && !mountWhenClosed
-      ? () => {
-          const element = ref?.current;
-          if (!element) {
-            setContentMounted(false);
-            return;
-          }
-          // The popup is still on screen while it plays its exit transition;
-          // emptying it right away would show that transition running on a
-          // blank surface.
-          whenTransitionSettles(element, () => {
-            if (openController.opened) {
-              // reopened while it was leaving — the content it holds is the
-              // one that open just asked for
-              return;
-            }
-            setContentMounted(false);
-          });
-        }
-      : null;
-  useLayoutEffect(() => {
-    if (mountWhenClosed) {
-      setContentMounted(true);
-    }
-  }, [mountWhenClosed]);
-
-  return contentMounted ? children : null;
-};
-
 /**
  * Entry/exit animation CSS shared by Popover and Dialog.
  *
@@ -55669,16 +55721,15 @@ const css$E = /* css */`
  *   open controller (see `open_controller.js`) for a caller that wants to
  *   drive open/close itself instead of `open`/`defaultOpen`/`onClose` (used
  *   by `picker_custom.jsx`).
- * @param {boolean} [props.mountWhenClosed] - Builds `children` right away
- *   instead of waiting for the first open (see popup_content_mount.js). For
- *   content something depends on while the popup is still closed: a value read
- *   off it, fields a surrounding form collects on submit, a size measured from
- *   outside.
- * @param {boolean} [props.unmountWhenClosed] - Throws `children` away once the
- *   popup has finished closing (see popup_content_mount.js). For content whose
- *   fresh state is its initial state: an uncontrolled field seeded from a
- *   `defaultValue` that changed while the popup was closed. Ignored when
- *   `mountWhenClosed` is set.
+ * @param {"always"|"from-first-open"|"while-opened"} [props.mount] - When
+ *   `children` are built and thrown away (see popup_content_mount.js).
+ *   `"from-first-open"` (the default) builds them on the first open and keeps
+ *   them afterwards. `"always"` builds them right away, for content something
+ *   depends on while the popup is still closed: a value read off it, fields a
+ *   surrounding form collects on submit, a size measured from outside.
+ *   `"while-opened"` throws them away once the popup has finished closing, for
+ *   content whose fresh state is its initial state: an uncontrolled field
+ *   seeded from a `defaultValue` that changed while the popup was closed.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
@@ -55915,8 +55966,7 @@ const useDialogProps = props => {
     // openController.onOpen below).
     onOpen,
     children: childrenProp,
-    mountWhenClosed,
-    unmountWhenClosed,
+    mount,
     ...rest
   } = props;
   // Assigned on every render, like openEffect below, so it always closes over
@@ -55925,8 +55975,7 @@ const useDialogProps = props => {
   openController.onOpen = onOpen || null;
   const children = usePopupContentMount(openController, props.ref, {
     children: childrenProp,
-    mountWhenClosed,
-    unmountWhenClosed
+    mount
   });
   const isModal = layer === "top";
   const ref = props.ref;
@@ -57139,16 +57188,15 @@ const css$D = /* css */`
  *   open controller (see `open_controller.js`) for a caller that wants to
  *   drive open/close itself instead of `open`/`defaultOpen`/`onClose` (used
  *   by `picker_custom.jsx`/`side_panel.jsx`).
- * @param {boolean} [props.mountWhenClosed] - Builds `children` right away
- *   instead of waiting for the first open (see popup_content_mount.js). For
- *   content something depends on while the popup is still closed: a value read
- *   off it, fields a surrounding form collects on submit, a size measured from
- *   outside.
- * @param {boolean} [props.unmountWhenClosed] - Throws `children` away once the
- *   popup has finished closing (see popup_content_mount.js). For content whose
- *   fresh state is its initial state: an uncontrolled field seeded from a
- *   `defaultValue` that changed while the popup was closed. Ignored when
- *   `mountWhenClosed` is set.
+ * @param {"always"|"from-first-open"|"while-opened"} [props.mount] - When
+ *   `children` are built and thrown away (see popup_content_mount.js).
+ *   `"from-first-open"` (the default) builds them on the first open and keeps
+ *   them afterwards. `"always"` builds them right away, for content something
+ *   depends on while the popup is still closed: a value read off it, fields a
+ *   surrounding form collects on submit, a size measured from outside.
+ *   `"while-opened"` throws them away once the popup has finished closing, for
+ *   content whose fresh state is its initial state: an uncontrolled field
+ *   seeded from a `defaultValue` that changed while the popup was closed.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
@@ -57363,8 +57411,7 @@ const usePopoverProps = props => {
     // openController.onOpen below).
     onOpen,
     children: childrenProp,
-    mountWhenClosed,
-    unmountWhenClosed,
+    mount,
     ...rest
   } = props;
   // Assigned on every render, like openEffect below, so it always closes over
@@ -57373,8 +57420,7 @@ const usePopoverProps = props => {
   openController.onOpen = onOpen || null;
   const children = usePopupContentMount(openController, props.ref, {
     children: childrenProp,
-    mountWhenClosed,
-    unmountWhenClosed
+    mount
   });
   const isTopLayer = layer === "top";
   const ref = props.ref;
@@ -58313,16 +58359,15 @@ const css$C = /* css */`@layer navi {
  * @param {string} [props.className] - Merged with the shared
  *   `"navi_popup"` class (see this file's own CSS) rather than replacing
  *   it.
- * @param {boolean} [props.mountWhenClosed] - Builds `children` right away
- *   instead of waiting for the first open (see popup_content_mount.js). For
- *   content something depends on while the popup is still closed: a value read
- *   off it, fields a surrounding form collects on submit, a size measured from
- *   outside.
- * @param {boolean} [props.unmountWhenClosed] - Throws `children` away once the
- *   popup has finished closing (see popup_content_mount.js). For content whose
- *   fresh state is its initial state: an uncontrolled field seeded from a
- *   `defaultValue` that changed while the popup was closed. Ignored when
- *   `mountWhenClosed` is set.
+ * @param {"always"|"from-first-open"|"while-opened"} [props.mount] - When
+ *   `children` are built and thrown away (see popup_content_mount.js).
+ *   `"from-first-open"` (the default) builds them on the first open and keeps
+ *   them afterwards. `"always"` builds them right away, for content something
+ *   depends on while the popup is still closed: a value read off it, fields a
+ *   surrounding form collects on submit, a size measured from outside.
+ *   `"while-opened"` throws them away once the popup has finished closing, for
+ *   content whose fresh state is its initial state: an uncontrolled field
+ *   seeded from a `defaultValue` that changed while the popup was closed.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popup = props => {
@@ -58852,8 +58897,7 @@ const PickerCustom = props => {
       // and pushes it down instead, leaving the popup free to build its
       // content only when it is first opened (see popup_content_mount.js).
       // A caller who knows better says so with the popup's own props.
-      mountWhenClosed: props.mountWhenClosed ?? !isControlValueGivenByProps(props),
-      unmountWhenClosed: props.unmountWhenClosed,
+      mount: props.mount ?? (isControlValueGivenByProps(props) ? MOUNT_DEFAULT : "always"),
       // Not on pickerProps (the trigger): commands.js's own
       // resolveClosestExpandable() does `el.closest("[aria-expanded]")` to
       // find where to dispatch navi_request_open/navi_request_close — and
@@ -59139,8 +59183,7 @@ const PickerContentInsidePopup = props => {
     ...rest,
     // On popupProps already (see the picker's popup assembly); they mean
     // nothing to the picker element.
-    mountWhenClosed: undefined,
-    unmountWhenClosed: undefined,
+    mount: undefined,
     onFocusOut: e => {
       if (!isPopover || !closeOnFocusOut) {
         return;
@@ -59222,7 +59265,7 @@ const PICKER_CALLOUT_CONTENT_TOKEN = createOpenToken();
  * The content is rendered through a portal into an element this component
  * owns, handed to the callout as its message (a Node, appended as-is). It is
  * rendered whether the callout is open or not, so what the content holds
- * survives a close, the way a popup's `mountWhenClosed` keeps it. The element
+ * survives a close, the way a popup's `mount="always"` keeps it. The element
  * carries data-picker-content: the callout is appended inside the picker root,
  * and a press in there must read as inside the popup, not on the trigger.
  */
@@ -59393,7 +59436,12 @@ const PickerConfirmResolver = props => {
   return jsx(Next, {
     ...props,
     type: "navi_js",
-    allowNameless: true,
+    allowNameless: true
+    // No chevron, no clear cross, whatever variant the trigger is drawn in:
+    // both announce a value, and a question holds none.
+    ,
+
+    picksNothing: true,
     variant: variant,
     mode: mode,
     focusCapture: focusCapture,
@@ -59401,10 +59449,10 @@ const PickerConfirmResolver = props => {
     onConfirm: onConfirm
     // A question holds no value to read before it is asked: the popup is
     // built on the first open, like that of a picker told its value (see
-    // mountWhenClosed in picker_custom.jsx).
+    // the `mount` resolution in picker_custom.jsx).
     ,
 
-    mountWhenClosed: false,
+    mount: MOUNT_DEFAULT,
     message: undefined,
     confirmLabel: undefined,
     cancelLabel: undefined,
@@ -60262,7 +60310,7 @@ installImportMetaCssBuild(import.meta);const css$y = /* css */`@layer navi {
     --x-list-item-cursor: default;
     --x-list-item-border-color: var(--list-item-border-color);
     font-size: var(--navi-control-font-size);
-    font-family: var(--navi-control-font-family);
+    font-family: var(--navi-control-font-family, inherit);
     line-height: var(--navi-control-line-height);
     position: relative;
   }
@@ -66705,7 +66753,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-padding-x-default: var(--navi-picker-padding-x-default);
     --picker-padding-y-default: var(--navi-picker-padding-y-default);
     --picker-font-size: var(--navi-control-font-size);
-    --picker-font-family: var(--navi-control-font-family);
+    --picker-font-family: var(--navi-control-font-family, inherit);
     --picker-loader-color: var(--navi-loader-color);
     --picker-border-color: var(--navi-control-border-color);
     --picker-background-color: white;
@@ -66805,6 +66853,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     padding-bottom: var(--x-picker-padding-bottom);
     padding-left: var(--x-picker-padding-left);
     justify-content: inherit;
+    text-align: var(--picker-align-x, var(--picker-text-align-default));
     pointer-events: none;
     user-select: none;
     flex-grow: 1;
@@ -66963,7 +67012,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
 
     & .navi_picker_value {
       flex-grow: 0;
@@ -66996,7 +67045,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
 
     & .navi_picker_box {
       z-index: -1;
@@ -67018,7 +67067,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-background-color-hover: var(--picker-background-color);
     --picker-background-color-readonly: var(--picker-background-color);
     --picker-background-color-disabled: var(--picker-background-color);
-    --x-picker-icon-color: currentColor;
+    --picker-icon-color: currentColor;
     font-size: inherit;
     font-family: inherit;
     line-height: inherit;
@@ -67043,7 +67092,7 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
     --picker-border-color-disabled: var(--picker-border-color-readonly);
     --picker-background-color-disabled: var(--picker-background-color-readonly);
     --picker-color-disabled: var(--picker-color-readonly);
-    text-align: center;
+    --picker-text-align-default: center;
   }
 
   &[data-variant="text"] {
@@ -67109,6 +67158,11 @@ const PickerButton = props => {
     // not come back. The cross is then a confirm picker (see
     // picker_confirm.jsx), and the clear only goes out on yes.
     clearConfirm,
+    // Nothing is picked here: the popup asks a question rather than holding an
+    // answer, so the trigger draws a label and never a value. Set by the
+    // 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,
     readOnly,
     error
   } = props;
@@ -67122,17 +67176,19 @@ const PickerButton = props => {
   const isSingleLine = maxLines === 1;
   // Same rule as the root: phrasing content inside a sentence.
   const ContentTag = variant === "text" ? "span" : "div";
-  // Which variants get the right slot — the chevron saying "this opens", and
-  // the cross replacing it once there is something to clear.
-  // Not the ones that draw no value beside it: an icon picker IS its icon, a
-  // headless one draws nothing, a button says what it opens with its label, a
+  // Who gets the right slot — the chevron saying "this opens", and the cross
+  // replacing it once there is something to clear. Both are about a value, so
+  // the slot follows the value and not the drawing: `picksNothing` has none to
+  // announce and none to take back, whatever variant it is drawn in.
+  // Then the variants that draw no value beside it: an icon picker IS its icon,
+  // a headless one draws nothing, a button says what it opens with its label, a
   // word in a sentence has no room for furniture. Nor a picker rendering the
   // browser's own control ("default").
   // Nor a bare one: the picker is that drawing's box to the pixel, so anything
   // navi adds beside it either grows the box or covers what the caller drew.
   // The pieces are the caller's to place there instead — a <Picker.Clear /> in
   // their own layout (see warnOnClearableWithoutSlot).
-  const hasRightSlot = variant !== "icon" && variant !== "headless" && variant !== "button" && variant !== "text" && variant !== "bare" && ui !== "default";
+  const hasRightSlot = !picksNothing && variant !== "icon" && variant !== "headless" && variant !== "button" && variant !== "text" && variant !== "bare" && ui !== "default";
   const inputRef = useRef(null);
   const [pickerRemainingProps, inputProps, facadeChildrenProps] = useControlFacadeProps({
     ...props,
@@ -67211,6 +67267,7 @@ const PickerButton = props => {
         rightSlotIconSize: undefined,
         rightSlot: undefined,
         clearConfirm: undefined,
+        picksNothing: undefined,
         openWhileReadOnly: undefined,
         ui: undefined,
         maxLines: undefined,
@@ -67763,7 +67820,7 @@ const css$s = /* css */`@layer navi {
   --x-picker-spin-padding-bottom: var(--picker-spin-padding-bottom, var(--picker-spin-padding-y, var(--picker-spin-padding, var(--picker-spin-padding-y-default))));
   --x-picker-spin-padding-left: var(--picker-spin-padding-left, var(--picker-spin-padding-x, var(--picker-spin-padding, var(--picker-spin-padding-x-default))));
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--navi-control-border-radius));
@@ -67913,7 +67970,7 @@ const css$s = /* css */`@layer navi {
 
 .navi_spin_group {
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--navi-control-border-radius));
@@ -70811,7 +70868,7 @@ const css$m = /* css */`.navi_wheel_container {
       transparent);
   color: var(--wheel-color);
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
   border-radius: var(--navi-control-border-radius);
@@ -71101,7 +71158,7 @@ const css$m = /* css */`.navi_wheel_container {
   color: var(--wheel-color, light-dark(#111, #eee));
   font-weight: 600;
   font-size: var(--navi-control-font-size);
-  font-family: var(--navi-control-font-family);
+  font-family: var(--navi-control-font-family, inherit);
   white-space: nowrap;
   user-select: none;
   justify-content: center;
@@ -75862,7 +75919,6 @@ const css$g = /* css */`.navi_table_root {
 
 .navi_table {
   --editing-border-color: #a8c7fa;
-  font-family: Arial;
   font-size: 16px;
 }