@jsenv/navi 0.29.485 → 0.29.487

package/dist/dev/jsenv_navi.js

@@ -5689,7 +5689,13 @@ const MessagePropsRefContext = createContext();
 const ControlIdContext = createContext();
 const ControlNameContext = createContext();
 const DisabledContext = createContext();
+// Truthy when what is above is read-only, and "network-policy" when that is a
+// write held by the network policy: what it holds is held in turn, and says
+// so in the policy's words (see readOnlyHandedDown in control_hooks.jsx).
 const ReadOnlyContext = createContext();
+// The words that go with it, when what handed read-only down gave some (its
+// readOnlyMessage, or the ones it was handed in turn).
+const ReadOnlyMessageContext = createContext();
 const RequiredContext = createContext();
 const LoadingContext$1 = createContext();
 createContext();
@@ -12079,6 +12085,31 @@ const resolveEffectiveDocumentState = (
   return { ...state, ...sharedState };
 };
 
+/**
+ * What a press on a link handed to the navigation it starts (see the
+ * integrations' `carryByLinkNavigation`): each write is an `editState` applied
+ * to the entry that navigation writes, and an `otherwise` that makes the write
+ * where it would have been made, for a press that starts no navigation here.
+ */
+const applyPressWrites = (state, pressWrites) => {
+  if (!pressWrites) {
+    return state;
+  }
+  let stateWritten = state;
+  for (const { editState } of pressWrites) {
+    stateWritten = editState(stateWritten);
+  }
+  return stateWritten;
+};
+const writePressWritesHere = (pressWrites) => {
+  if (!pressWrites) {
+    return;
+  }
+  for (const { otherwise } of pressWrites) {
+    otherwise();
+  }
+};
+
 // Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where the
 // mask is derived from render order within the nearest root/async boundary:
 // stable across re-renders of the same mount, but not across two mounts on the
@@ -13734,6 +13765,7 @@ const setupBrowserIntegrationViaHistory = ({
         // Asked to go where we already are: an address that redirects is never
         // the one being displayed, so there is nothing to go to and nothing to
         // stack on the history.
+        writePressWritesHere(options.pressWrites);
         return undefined;
       }
       return handleRoutingTask(redirectionUrl, {
@@ -13745,10 +13777,13 @@ const setupBrowserIntegrationViaHistory = ({
     // Decided before anything is announced: an elided push IS the traversal it
     // becomes, and the traversal will make its own announcements when the
     // browser answers — a before/after cycle here would be about a navigation
-    // that never happens.
+    // that never happens. A push with something of its own for its entry — a
+    // state, what the press handed over (see carryByLinkNavigation) — is a
+    // new entry, never one standing there already.
     if (
       options.navigationType === "push" &&
       options.state === undefined &&
+      !options.pressWrites &&
       url !== readAddress()
     ) {
       const delta = adjacentEntryDelta(url);
@@ -13798,6 +13833,7 @@ const setupBrowserIntegrationViaHistory = ({
       redirected,
       landOn,
       debounce,
+      pressWrites,
     } = options;
     let { state } = options;
 
@@ -13808,15 +13844,18 @@ const setupBrowserIntegrationViaHistory = ({
 
     if (navigationType === "push" || navigationType === "replace") {
       markUrlAsVisited(url);
-      const effectiveState = resolveEffectiveDocumentState(state, {
-        navigationType,
-        isArrival: isArrival(url, { from: urlLeft }),
-        currentState: getDocumentState(),
-        sharedState: {
-          jsenv_visited_urls: Array.from(visitedUrlSet),
-          [NAV_DEPTH_STATE_KEY]: getNavDepth(),
-        },
-      });
+      const effectiveState = applyPressWrites(
+        resolveEffectiveDocumentState(state, {
+          navigationType,
+          isArrival: isArrival(url, { from: urlLeft }),
+          currentState: getDocumentState(),
+          sharedState: {
+            jsenv_visited_urls: Array.from(visitedUrlSet),
+            [NAV_DEPTH_STATE_KEY]: getNavDepth(),
+          },
+        }),
+        pressWrites,
+      );
       if (navigationType === "replace" && debounce && state === undefined) {
         // Nothing of its own for the entry: the address moves, the state is
         // carried over. The one kind of write allowed to lag, and only when
@@ -13916,6 +13955,36 @@ const setupBrowserIntegrationViaHistory = ({
     return requestedResult;
   };
 
+  // A press on a link is one navigation, and what the press asks of the
+  // history entry is part of it: a popup the link's own command closes is
+  // closed on the entry the link leads to, while the one it leaves keeps what
+  // the reader was looking at — a back finds the popup open. The link's
+  // listeners run before the routing is asked (below), so a write they make
+  // is handed over, keyed by the click, rather than written onto the entry
+  // being left. Once the link has been answered there is nothing to hand
+  // over to: the navigation, when there was one, has already written its
+  // entry, and a write lands there by itself.
+  const linkPressWritesMap = new WeakMap();
+  const answeredLinkClickSet = new WeakSet();
+  const carryByLinkNavigation = (event, pressWrite) => {
+    const clickEvent = findEvent(event, "click");
+    if (
+      !clickEvent ||
+      clickEvent.eventPhase === Event.NONE ||
+      answeredLinkClickSet.has(clickEvent) ||
+      !clickEvent.target.closest("a")
+    ) {
+      return false;
+    }
+    const pressWrites = linkPressWritesMap.get(clickEvent);
+    if (pressWrites) {
+      pressWrites.push(pressWrite);
+    } else {
+      linkPressWritesMap.set(clickEvent, [pressWrite]);
+    }
+    return true;
+  };
+
   // A click on a link is answered on the link itself, after the link's own
   // listeners: a navi control decides there whether the press is allowed — it
   // refuses with preventDefault from its click reaction — and runs its command
@@ -13923,34 +13992,42 @@ const setupBrowserIntegrationViaHistory = ({
   // is the order the Navigation API integration gets for free, where the
   // navigation starts once the click has been dispatched.
   const onLinkClick = (e) => {
+    answeredLinkClickSet.add(e);
+    const pressWrites = linkPressWritesMap.get(e);
+    linkPressWritesMap.delete(e);
+    if (!routeLinkClick(e, pressWrites)) {
+      writePressWritesHere(pressWrites);
+    }
+  };
+  const routeLinkClick = (e, pressWrites) => {
     if (e.button !== 0) {
       // Ignore non-left clicks
-      return;
+      return false;
     }
     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
       // A modifier asks the browser for something other than this tab: a new
       // tab (meta on macOS, ctrl elsewhere), a new window (shift), a download
       // (alt).
-      return;
+      return false;
     }
     if (e.defaultPrevented) {
       // Refused — by the link itself, or by whoever came before it.
-      return;
+      return false;
     }
     const linkElement = e.currentTarget;
     if (linkElement.hasAttribute("data-readonly")) {
-      return;
+      return false;
     }
     if (linkOpensElsewhere(linkElement)) {
       // Another tab or window, or a download (see link_elsewhere.js).
-      return;
+      return false;
     }
     const href = linkElement.href;
     const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
       getHrefTargetInfo(href);
     if (isEmpty || !isSameOrigin) {
       // Let link to other origins be handled by the browser
-      return;
+      return false;
     }
     if (isAnchor) {
       // Fragment navigation belongs to the browser: it owns the indicated
@@ -13962,13 +14039,13 @@ const setupBrowserIntegrationViaHistory = ({
         // change reaches whoever is waiting on the designated element.
         rearmUrlTarget();
       }
-      return;
+      return false;
     }
     if (linkAsksForDocument(linkElement)) {
       // The link says its address is another document of this origin (see
       // link_document.js). Routing to it would land on the fallback route
       // instead of loading the page.
-      return;
+      return false;
     }
     // Nothing here declared a route, so there is nothing to route to: the
     // page is a plain document and a link in it is a plain link. Taking it
@@ -13976,7 +14053,7 @@ const setupBrowserIntegrationViaHistory = ({
     // the address bar moves and the page does not (see applyRouting's own
     // "not called yet" branch, which is where that used to end up).
     if (!isRouting()) {
-      return;
+      return false;
     }
     e.preventDefault();
     handleRoutingTask(href, {
@@ -13990,7 +14067,9 @@ const setupBrowserIntegrationViaHistory = ({
       // whoever knows what to do with it, and it is the anchor itself —
       // resolved here, where it already is.
       element: linkElement,
+      pressWrites,
     });
+    return true;
   };
   // Wired from the capture phase on window, the first place a click is seen,
   // so that a link is answered whatever handler stops the click on its way up
@@ -14170,6 +14249,7 @@ const setupBrowserIntegrationViaHistory = ({
     navBack,
     navForward,
     getDocumentState,
+    carryByLinkNavigation,
     isVisited,
     visitedUrlsSignal,
   };
@@ -14707,8 +14787,32 @@ const useNavStateBasic = (
   // that param for gone. Only with nothing of this document behind (the state
   // was entered on a cold-loaded url, navBack has nowhere to go) does it
   // rewrite in place.
-  const leave = ({ isBack } = {}) => {
+  //
+  // event: what asked for it. A leave the press of a link asks for (its
+  //   --navi-close) is made by the navigation that link starts: the entry the
+  //   link leads to does not hold the key, and every entry behind is left as
+  //   the reader saw it — a back finds the state still entered.
+  const leave = ({ isBack, event } = {}) => {
     enteredRef.current = false;
+    if (!Object.hasOwn(browserIntegration.getDocumentState() || {}, id)) {
+      return;
+    }
+    if (
+      event &&
+      browserIntegration.carryByLinkNavigation(event, {
+        editState: (state) => {
+          const stateWithoutKey = { ...state };
+          delete stateWithoutKey[id];
+          return stateWithoutKey;
+        },
+        otherwise: () => leaveEntry({ isBack }),
+      })
+    ) {
+      return;
+    }
+    leaveEntry({ isBack });
+  };
+  const leaveEntry = ({ isBack }) => {
     const currentStateCopy = browserIntegration.getDocumentState() || {};
     if (!Object.hasOwn(currentStateCopy, id)) {
       return;
@@ -14766,6 +14870,9 @@ const useNavStateBasic = (
  *     the value allows associating extra data when needed.
  *   - `leave()`: navigate AWAY FROM this state (removes `id` from document state,
  *     or goes back in history when `type` is "push").
+ *     `leave({ event })` with the event that asked for it: asked by the press
+ *     of a link that navigates, the key is left out of the entry the link
+ *     leads to, and the entry it leaves keeps it.
  */
 const useNavState = useNavStateWithWarnings
   ;
@@ -17996,8 +18103,13 @@ const useOpenPropsEffectOnOpenController = (
             } else {
               // Under type "push" a cancel discards everything written while
               // the popup was open — it goes back with the entry; a confirmed
-              // close keeps those writes (see useNavState's own leave()).
-              leaveNavState({ isBack: Boolean(event?.detail?.isCancel) });
+              // close keeps those writes (see useNavState's own leave()). A
+              // close a link's press asked for is written by the navigation
+              // the link starts.
+              leaveNavState({
+                isBack: Boolean(event?.detail?.isCancel),
+                event,
+              });
             }
           }
           if (signal) {
@@ -18218,8 +18330,9 @@ const useOpenControllerByProps = (props, name) => {
  * opened it, so a section written in a display font gets its tooltips in that
  * font. `color`, `font-size` and `font-weight` are absent too — each surface
  * answers those its own way (a popup and a callout write in
- * --navi-popup-color; a popup follows the size of what opened it, a callout
- * resets to the document's size).
+ * --navi-popup-color; a popup follows the size of what opened it — for a
+ * picker's popup, what is around the picker, see .navi_picker_content — a
+ * callout resets to the document's size).
  *
  * In `@layer navi` so an app that wants one of these back says so on the
  * surface and wins, without having to out-specify anything.
@@ -21909,6 +22022,13 @@ CONSTRAINT_ATTRIBUTE_SET.add("data-readonly");
 CONSTRAINT_ATTRIBUTE_SET.add("data-readonly-reason");
 
 const readOnlyMessage = (field) => {
+  // Read-only from above, in the words of what made it so (a picker's or a
+  // group's readOnlyMessage): what it holds says what it says — over the
+  // network policy's words too, as that control's own words win over them on
+  // itself.
+  if (field.readOnlyMessageFromAbove) {
+    return field.readOnlyMessageFromAbove;
+  }
   // Read-only for a reason the control named itself, read off the reason
   // rather than off the surrounding state: a button read-only for its own
   // reasons, inside a form that happens to be unchanged, is not waiting for
@@ -48049,6 +48169,8 @@ const useUIFacadeStateController = (props, realUIStateController) => {
       s.controller.controlHostProps = realUIStateController.controlHostProps;
       s.controller.readOnlyWithoutRun =
         realUIStateController.readOnlyWithoutRun;
+      s.controller.readOnlyMessageFromAbove =
+        realUIStateController.readOnlyMessageFromAbove;
       realUIStateController.pushStateDownToFacadeChild =
         s.controller.pushStateDownToChild;
 
@@ -48472,6 +48594,7 @@ const ControlgroupChildrenWrapper = ({
   required,
   disabled,
   readOnly,
+  readOnlyMessage,
   loading,
   boundAction,
   actionRequesterSignal
@@ -48485,8 +48608,9 @@ const ControlgroupChildrenWrapper = ({
         value: name,
         children: jsx(DisabledContext.Provider, {
           value: disabled,
-          children: jsx(ReadOnlyContext.Provider, {
-            value: readOnly,
+          children: jsx(ReadOnlyProvider, {
+            readOnly: readOnly,
+            readOnlyMessage: readOnlyMessage,
             children: jsx(RequiredContext.Provider, {
               value: required,
               children: jsx(LoadingContext$1.Provider, {
@@ -48506,6 +48630,34 @@ const ControlgroupChildrenWrapper = ({
     })
   })
 });
+// What a control hands to what it holds about being read-only: the state, and
+// the words it is said in. What it holds writes into it, so it is held for the
+// same reason and says what the control says. Held by the network policy, it
+// hands down the hold itself — read-only alone, what it holds would refuse in
+// navi's generic words. Read-only, it hands down its readOnlyMessage, or the
+// one it was handed.
+const readOnlyHandedDown = (uiStateController, readOnly) => {
+  const {
+    controlHostProps,
+    props
+  } = uiStateController;
+  const readOnlyResolved = controlHostProps["data-readonly-reason"] === "network-policy" ? "network-policy" : readOnly;
+  if (!readOnlyResolved) {
+    return [readOnlyResolved, undefined];
+  }
+  return [readOnlyResolved, props.readOnlyMessage ?? uiStateController.readOnlyMessageFromAbove];
+};
+const ReadOnlyProvider = ({
+  readOnly,
+  readOnlyMessage,
+  children
+}) => jsx(ReadOnlyContext.Provider, {
+  value: readOnly,
+  children: jsx(ReadOnlyMessageContext.Provider, {
+    value: readOnlyMessage,
+    children: children
+  })
+});
 
 // What the caller writes for these is called from the control's own reactions
 // (see `reactions` below), so the split leaves them out of both sides.
@@ -49756,7 +49908,7 @@ const useControlgroupProps = (props, {
     basePseudoState
   } = controlgroupProps;
   const disabled = basePseudoState[":disabled"];
-  const readOnly = basePseudoState[":read-only"];
+  const [readOnly, readOnlyMessage] = readOnlyHandedDown(uiGroupStateController, basePseudoState[":read-only"]);
   const loading = basePseudoState[":-navi-loading"];
   const controlgroupChildrenWrapperProps = useMemo(() => ({
     uiGroupStateController,
@@ -49764,10 +49916,11 @@ const useControlgroupProps = (props, {
     required: controlgroupProps.required,
     disabled,
     readOnly,
+    readOnlyMessage,
     loading,
     boundAction,
     actionRequesterSignal
-  }), [uiGroupStateController, controlgroupProps.name, controlgroupProps.required, disabled, readOnly, loading, boundAction, actionRequesterSignal]);
+  }), [uiGroupStateController, controlgroupProps.name, controlgroupProps.required, disabled, readOnly, readOnlyMessage, loading, boundAction, actionRequesterSignal]);
   return [controlRootProps, {
     ...controlgroupProps,
     "name": undefined,
@@ -49963,6 +50116,7 @@ const useInteractiveProps = (props, {
   {
     const controlDisabledFromAbove = useContext(DisabledContext);
     const controlReadOnlyFromAbove = useContext(ReadOnlyContext);
+    const controlReadOnlyMessageFromAbove = useContext(ReadOnlyMessageContext);
     const controlRequired = useContext(RequiredContext);
     const controlLoadingFromAbove = useContext(LoadingContext$1);
     // A SIGNAL holding the element whose press the group's action is wearing
@@ -50002,8 +50156,15 @@ const useInteractiveProps = (props, {
     // pressable on a game nobody may edit. Its own props still hold; only what
     // came from above is dropped (see self_interactions.js for the three modes).
     const zoneStateApplies = !selfInteractionsIgnoreBlock(props);
+    // A press that only leaves the popup it sits in writes nothing to the zone
+    // around it either, so that zone being read-only — or holding a write the
+    // network policy keeps — does not hold it: the popup answers the close
+    // itself. A read-only picker's popup then closes from its own button as
+    // it does from a press outside, and refuses both alike when it holds a
+    // change it cannot send.
+    const zoneReadOnlyApplies = zoneStateApplies && !pressOnlyLeaves(props);
     const controlDisabled = zoneStateApplies && controlDisabledFromAbove;
-    const controlReadOnly = zoneStateApplies && controlReadOnlyFromAbove;
+    const controlReadOnly = zoneReadOnlyApplies && controlReadOnlyFromAbove;
     const controlLoading = zoneStateApplies && controlLoadingFromAbove;
     const disabledResolved = disabled || controlDisabled;
     const requiredResolved = required || controlRequired;
@@ -50018,10 +50179,11 @@ const useInteractiveProps = (props, {
     // but cannot be taken.
     const readOnlyFromParentMaxLengthGuard = Boolean(zoneStateApplies && uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
     // A write cannot leave under a network policy, so the control asking for
-    // one — or sitting in a form that does — refuses before the press and says
-    // why (see network_policy.js): a press that looks accepted and fails after
-    // is what the policy exists to avoid.
-    const heldByNetworkPolicy = networkPolicyReason !== null && (isWriteAction(boundAction) || Boolean(zoneStateApplies && parentAction && isWriteAction(parentAction)));
+    // one — sitting in a form that does, or in what a held control holds (a
+    // picker's popup) — refuses before the press and says why (see
+    // network_policy.js): a press that looks accepted and fails after is what
+    // the policy exists to avoid.
+    const heldByNetworkPolicy = networkPolicyReason !== null && (isWriteAction(boundAction) || Boolean(zoneReadOnlyApplies && parentAction && isWriteAction(parentAction)) || controlReadOnly === "network-policy");
     // Held back because the surface above already has as many runs in flight as
     // it allows (see parallel_guard.js). Only a control that would START one:
     // anything without an action of its own runs nothing and has nothing to
@@ -50040,6 +50202,10 @@ const useInteractiveProps = (props, {
     // still read-only in the tick the run settles — the tick a form's
     // after-send `--navi-reset` asks the form to empty itself.
     uiStateController.readOnlyWithoutRun = Boolean(readOnlyBase);
+    // The words of what made this control read-only from above, when it gave
+    // some: read by READONLY_CONSTRAINT, and handed further down with the
+    // read-only state (see readOnlyHandedDown).
+    uiStateController.readOnlyMessageFromAbove = controlReadOnly ? controlReadOnlyMessageFromAbove : undefined;
     // Read-only, and what this control opens still opens: reading what is in
     // there changes nothing. Read by READONLY_CONSTRAINT, which lets an
     // interaction that only reads through on it.
@@ -50574,6 +50740,12 @@ const splitControlProps = (props, {
   }
   return [controlRootProps, controlHostProps];
 };
+// What a press leaving a popup asks for: closing it, or cancelling it. Only on
+// a control running nothing of its own — one with an action writes, wherever
+// it then leads.
+const LEAVING_COMMAND_SET = new Set(["--navi-close", "--navi-cancel"]);
+const pressOnlyLeaves = props => LEAVING_COMMAND_SET.has(props.command) && !props.action;
+
 // `onPointerDown`, `onFocusOut`… but not navi's own events (`onnavi_command`),
 // which keep the element they are dispatched on.
 const isDomListenerProp = key => /^on[A-Z]/.test(key);
@@ -54584,7 +54756,9 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  *   fetching on a hover.
  * @param {string} [props.command] - What the press asks of a control around
  *   the link — `"--navi-close"` on a link that leaves the sheet it is in.
- *   Triggered on the press, before the navigation.
+ *   Triggered on the press, before the navigation. A popup it closes that
+ *   keeps its open state in the history entry (`navState`) is closed on the
+ *   entry the navigation leads to: Back finds it open.
  * @param {Function} [props.action] - Work the press runs, before the
  *   navigation. Nothing waits for it — not the navigation, not `command`: what
  *   the next page must find has to be written synchronously (a draft in a
@@ -59148,7 +59322,7 @@ const css$S = /* 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, inherit);
+    --button-font-family: var(--navi-button-font-family, var(--navi-control-font-family, inherit));
     --button-border-color-hover: color-mix(in srgb,
         var(--button-border-color) 70%,
         black);
@@ -60893,14 +61067,16 @@ const css$O = /* css */`@layer navi {
     --checkmark-color-disabled: #eee;
     --border-color-disabled-checked: #d3d3d3;
     --background-color-disabled-checked: #d3d3d3;
-    --button-border-color: light-dark(#767676, #8e8e93);
-    --button-background-color: light-dark(#f3f4f6, #2d3748);
+    --button-border-color: var(--navi-control-border-color);
+    --button-background-color: var(--navi-button-background-color);
     --button-border-color-hover: color-mix(in srgb,
         var(--button-border-color) 70%,
         black);
     --button-background-color-hover: color-mix(in srgb,
         var(--button-background-color) 95%,
         black);
+    --button-background-color-readonly: var(--button-background-color);
+    --button-background-color-disabled: var(--button-background-color-readonly);
   }
 
   .navi_checkbox[data-variant="switch"] {
@@ -60928,19 +61104,40 @@ const css$O = /* css */`@layer navi {
     --margin: 0;
     --width: auto;
     --height: auto;
+    --font-family: var(--navi-button-font-family, var(--navi-control-font-family, inherit));
     --border-color: var(--button-border-color);
     --border-color-hover: var(--button-border-color-hover);
     --background-color: var(--button-background-color);
     --background-color-hover: var(--button-background-color-hover);
     --background-color-readonly: var(--button-background-color-readonly);
     --background-color-disabled: var(--button-background-color-disabled);
+  }
+
+  .navi_checkbox[data-variant="button"]:not([data-label]) {
+    --button-padding-x-default: 0;
+    --button-padding-y-default: 0;
     --border-color-checked: var(--button-border-color);
+    --border-color-hover-checked: var(--button-border-color-hover);
     --background-color-checked: var(--button-background-color);
+    --background-color-hover-checked: var(--button-background-color-hover);
+    --checkmark-color: currentColor;
   }
 
   .navi_checkbox[data-variant="button"][data-label] {
-    --border-color-checked: var(--accent-color);
-    --background-color-checked: var(--accent-color);
+    --border-radius: var(--navi-control-border-radius);
+    --button-padding-x-default: var(--navi-button-padding-x-default);
+    --button-padding-y-default: var(--navi-button-padding-y-default);
+    line-height: var(--navi-control-line-height);
+  }
+
+  .navi_checkbox[data-variant="button"][data-button-variant="discrete"] {
+    --border-width: 0;
+    --button-border-color: transparent;
+    --button-border-color-hover: var(--button-border-color);
+    --button-background-color: transparent;
+    --button-background-color-hover: color-mix(in srgb,
+        currentColor 8%,
+        var(--button-background-color));
   }
 }
 
@@ -61048,23 +61245,24 @@ const css$O = /* css */`@layer navi {
     --color-mix: var(--color-mix-light);
   }
 
+  & .navi_checkbox_marker {
+    opacity: 0;
+    stroke: var(--x-checkmark-color);
+    transform: scale(.5);
+  }
+
+  &[data-checked] .navi_checkbox_marker {
+    opacity: 1;
+    transition-property: opacity, transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    transform: scale(1);
+  }
+
   &[data-variant="checkbox"] {
     & .navi_checkbox_marker {
-      opacity: 0;
       width: 100%;
       height: 100%;
-      stroke: var(--x-checkmark-color);
-      transform: scale(.5);
-    }
-
-    &[data-checked] {
-      & .navi_checkbox_marker {
-        opacity: 1;
-        transition-property: opacity, transform;
-        transition-duration: .15s;
-        transition-timing-function: ease;
-        transform: scale(1);
-      }
     }
 
     &[data-accent-very-light] {
@@ -61103,6 +61301,11 @@ const css$O = /* css */`@layer navi {
     justify-content: center;
     align-items: center;
 
+    & .navi_checkbox_marker {
+      width: 1em;
+      height: 1em;
+    }
+
     &[data-label] {
       &[data-checked] .navi_checkbox_label {
         color: var(--x-checkmark-color);
@@ -61162,7 +61365,8 @@ const InputCheckboxFieldInterface = props => {
   const {
     icon,
     switch: switchProp,
-    variant = icon ? "icon" : switchProp ? "switch" : "checkbox",
+    buttonVariant,
+    variant = buttonVariant ? "button" : icon ? "icon" : switchProp ? "switch" : "checkbox",
     // "checkbox", "switch", "icon", "button"
     accentColor
   } = props;
@@ -61217,7 +61421,9 @@ const InputCheckboxFieldInterface = props => {
     variant: undefined,
     switch: undefined,
     icon: undefined,
+    buttonVariant: undefined,
     "data-variant": variant,
+    "data-button-variant": variant === "button" ? buttonVariant : undefined,
     "data-label": hasLabel ? "" : undefined,
     baseClassName: "navi_checkbox",
     pseudoStateSelector: ".navi_control_input",
@@ -61691,6 +61897,9 @@ const css$M = /* css */`@layer navi {
     --radiomark-color-disabled: #d3d3d3;
     --border-color-checked-disabled: #d3d3d3;
     --background-color-disabled-checked: var(--background-color);
+    --button-padding-x-default: 0;
+    --button-padding-y-default: 0;
+    --button-border-radius: var(--navi-control-border-radius);
     --button-border-width: 1px;
     --button-border-color: transparent;
     --button-background-color: transparent;
@@ -63915,6 +64124,7 @@ const InputPseudoElements = ["::-navi-loader"];
  *   boolean?: boolean,
  *   selectOnPress?: boolean,
  *   variant?: "checkbox" | "switch" | "icon" | "button",
+ *   buttonVariant?: "discrete",
  *   actionVerb?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
  *   [key: string]: any,
  * }>}
@@ -63930,6 +64140,10 @@ const InputPseudoElements = ["::-navi-loader"];
  *   is a square around its checkmark (or its `icon`, which takes an
  *   `[off, on]` pair). Bound with `signal`, it follows whatever else writes
  *   that signal.
+ * @param {"discrete"} [buttonVariant] A checkbox drawn as a button, drawn as
+ *   that variant of `Button`: `"discrete"` has no box at rest and a wash on
+ *   hover (checked, its words still fill with the accent). Implies
+ *   `variant="button"`.
  * @param {"GET"|"POST"|"PUT"|"PATCH"|"DELETE"} [actionVerb] What a plain
  *   function `action` does to the server. A write verb puts the field under
  *   the network policy: held read-only up front, with the policy's message,
@@ -73258,6 +73472,10 @@ const UncontrolledDialog = props => {
   // needs the dialog element to look at what it contains.
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
+  // The close is built once per opening (see useOpenController below): read
+  // through a ref, an onClose given by a render while open is the one called.
+  const onCloseRef = useRef(null);
+  onCloseRef.current = props.onClose;
   const openController = useOpenController(openEvent => {
     const dialogEl = props.ref.current;
     debugPopup(openEvent, `dialog opened`);
@@ -73285,7 +73503,7 @@ const UncontrolledDialog = props => {
         requestCloseEvent.preventDefault();
       },
       onClose: closeEvent => {
-        props.onClose?.(closeEvent);
+        onCloseRef.current?.(closeEvent);
       }
     };
   });
@@ -75232,6 +75450,9 @@ const UncontrolledPopover = props => {
   // the popover element to read what it holds.
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
+  // Read at the close, not captured at the opening: see UncontrolledDialog.
+  const onCloseRef = useRef(null);
+  onCloseRef.current = props.onClose;
   // Same as Dialog's own UncontrolledDialog, for the same reasons — see it for
   // the full story: a popover is a surface, so the only thing it has to say
   // about closing is that what it contains must not be interrupted mid-action.
@@ -75257,7 +75478,7 @@ const UncontrolledPopover = props => {
         requestCloseEvent.preventDefault();
       },
       onClose: closeEvent => {
-        props.onClose?.(closeEvent);
+        onCloseRef.current?.(closeEvent);
       }
     };
   });
@@ -77117,6 +77338,15 @@ const PickerCustom = props => {
   // closed (see onClose below) — a press that ran before the close would make
   // the picker busy, and a busy picker refuses the very close that follows.
   const confirmEventRef = useRef(null);
+  // The close is built once per opening (see useOpenController below), but
+  // these props answer how it ends: read through a ref, a render while open
+  // (a sheet turned into the next question) is heard by the close.
+  const closePropsRef = useRef(null);
+  closePropsRef.current = {
+    canSendWhileUnchanged,
+    onConfirm,
+    onClose
+  };
   // aria-controls + id
   const popupId = `${props.id}_picker_popup`;
   {
@@ -77217,7 +77447,7 @@ const PickerCustom = props => {
             // and for that picker the same value said again means something.
             // A press outside, Escape, the cross say nothing and keep skipping.
             const said = requestCloseEvent.detail.isSend || confirmEventRef.current;
-            if (!(canSendWhileUnchanged && said)) {
+            if (!(closePropsRef.current.canSendWhileUnchanged && said)) {
               // No action to run, but still allow the close.
               return;
             }
@@ -77289,7 +77519,7 @@ const PickerCustom = props => {
           const confirmEvent = confirmEventRef.current;
           confirmEventRef.current = null;
           if (confirmEvent && !closeEvent.detail.isCancel) {
-            onConfirm?.(confirmEvent);
+            closePropsRef.current.onConfirm?.(confirmEvent);
           }
           // After the value bookkeeping above — whoever listens reads the
           // picker's value as it ends up, committed or restored on a cancel —
@@ -77300,7 +77530,7 @@ const PickerCustom = props => {
           // spells into the address — a route param naming what was being
           // edited, cleared now that nothing is — has to be written before,
           // or the landing puts it back.
-          onClose?.(closeEvent);
+          closePropsRef.current.onClose?.(closeEvent);
           leaveExpanded({
             isBack: closeEvent.detail.isCancel
           });
@@ -77390,6 +77620,11 @@ const PickerCustom = props => {
       // button) hangs its popup off the whole control instead.
       anchor: props.anchor || props.ref,
       openController,
+      // Before the content is built and shown, so it is laid out and placed
+      // at the size it is read at (see .navi_picker_content in picker.jsx).
+      onOpen: () => {
+        writeContainerFont(ref.current, popupRef.current);
+      },
       // A picker whose value was never given to it reads it off the control in
       // its popup (see useUIFacadeStateController), so that control is built as
       // soon as something reads the value: at mount when the picker sees the
@@ -78214,6 +78449,30 @@ const showNativePicker = (pickerInput, event) => {
   }
 };
 
+// The popup of a picker is opened where the picker stands, so it writes at the
+// size and weight of what is around it — the ones a Dialog rendered there
+// inherits — and never at the ones the trigger is drawn at. CSS cannot reach
+// past the picker's own: its root holds the popup and sets both. Written on the
+// holder only when they differ, so an opening that changes nothing invalidates
+// no style.
+const writeContainerFont = (pickerEl, popupEl) => {
+  const container = pickerEl?.parentElement;
+  const holder = popupEl?.closest("[data-picker-content]");
+  if (!container || !holder) {
+    return;
+  }
+  const {
+    fontSize,
+    fontWeight
+  } = getComputedStyle(container);
+  if (holder.style.fontSize !== fontSize) {
+    holder.style.fontSize = fontSize;
+  }
+  if (holder.style.fontWeight !== fontWeight) {
+    holder.style.fontWeight = fontWeight;
+  }
+};
+
 installImportMetaCssBuild(import.meta);
 const css$y = /* css */`.navi_picker_confirm_body {
   min-width: 180px;
@@ -80181,11 +80440,16 @@ const ListItemSelectable = props => {
   // A list waiting on something is not unavailable, it is not answering yet —
   // busy rather than read-only (see BUSY_CONSTRAINT, which is asked first),
   // and the wait is about the same thing the read-only would be about.
+  //
+  // Unless what made the list read-only says it better: in words of its own (a
+  // picker's or a list's readOnlyMessage), or because it is the network
+  // policy holding the write the selection would make.
   const readOnlyFromAbove = useContext(ReadOnlyContext);
+  const readOnlyMessageFromAbove = useContext(ReadOnlyMessageContext);
   const readOnlyMessageKey = readOnlyFromAbove ? multiple ? `constraint.readonly.selection` : `constraint.readonly.choice` : `constraint.readonly.option`;
   // Handed to the row as well as to the control: whichever of the two catches
   // the press answers it, and they must not answer it differently.
-  const readOnlyMessageResolved = props.readOnlyMessage ?? constraintI18n(readOnlyMessageKey, props);
+  const readOnlyMessageResolved = props.readOnlyMessage ?? (readOnlyFromAbove ? readOnlyMessageFromAbove : undefined) ?? (readOnlyFromAbove === "network-policy" ? getNetworkPolicyReadOnlyMessage() : constraintI18n(readOnlyMessageKey, props));
   const busyMessageResolved = props.busyMessage ?? (loading ? listItemBusyMessage(loading, props) : constraintI18n(multiple ? `constraint.busy.selection` : `constraint.busy.choice`, props));
   const inputRef = useRef();
   const inputType = multiple ? "checkbox" : "radio";
@@ -88978,6 +89242,7 @@ const css$r = /* css */`@layer navi {
   .navi_picker:is([data-variant="button"], [data-variant="border"], [data-variant="discrete-border"]) {
     --picker-padding-x-default: var(--navi-button-padding-x-default);
     --picker-padding-y-default: var(--navi-button-padding-y-default);
+    --picker-font-family: var(--navi-button-font-family, var(--navi-control-font-family, inherit));
     --picker-align-x-default: center;
     --picker-background-color: var(--navi-button-background-color);
     --picker-border-color-readonly: color-mix(in srgb,
@@ -89277,8 +89542,9 @@ const css$r = /* css */`@layer navi {
     --x-corner-top-right-radius: initial;
     --x-corner-bottom-right-radius: initial;
     --x-corner-bottom-left-radius: initial;
-    font-size: var(--navi-control-font-size);
+    font-weight: initial;
     text-align: initial;
+    font-size: 1rem;
     display: contents;
   }
 
@@ -89521,9 +89787,10 @@ const PickerButton = props => {
   // The same chain useControlProps resolves (own prop first, then what the
   // group above says), for the two things it does not carry: the popup content,
   // which is read-only along with the picker, and the cursor, which stays a
-  // pointer on a picker that still opens.
+  // pointer on a picker that still opens. A hold of the network policy goes
+  // with it: what the popup changes is what the picker would send.
   const readOnlyFromAbove = useContext(ReadOnlyContext);
-  const readOnlyResolved = readOnly || readOnlyFromAbove;
+  const [readOnlyResolved, readOnlyMessageResolved] = readOnlyHandedDown(uiStateController, readOnly || readOnlyFromAbove);
   // 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.
@@ -89571,11 +89838,13 @@ const PickerButton = props => {
     /* Read-only crosses into everything the picker is made of: what it really
        holds is drawn by controls of their own — in the popup, and on the façade
        where an application puts its own affordances — and each of them refuses
-       in its own words once told. Said from the read-only state alone, never
+       once told, in the picker's words when it gave some (readOnlyMessage),
+       in its own otherwise. Said from the read-only state alone, never
        from the busy one — an action running for a moment is not the same thing
        as a value nobody may change. */
-    jsx(ReadOnlyContext.Provider, {
-      value: readOnlyResolved,
+    jsx(ReadOnlyProvider, {
+      readOnly: readOnlyResolved,
+      readOnlyMessage: readOnlyMessageResolved,
       children: jsxs(Box
       // A word in a sentence (variant="text") sits in a <p>, where a <div> is
       // not allowed: phrasing content there, block content elsewhere.