@jsenv/navi 0.29.486 → 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();
@@ -18324,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.
@@ -22015,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
@@ -48155,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;
 
@@ -48578,6 +48594,7 @@ const ControlgroupChildrenWrapper = ({
   required,
   disabled,
   readOnly,
+  readOnlyMessage,
   loading,
   boundAction,
   actionRequesterSignal
@@ -48591,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, {
@@ -48612,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.
@@ -49862,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,
@@ -49870,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,
@@ -50069,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
@@ -50108,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;
@@ -50124,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
@@ -50146,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.
@@ -50680,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);
@@ -59256,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);
@@ -61001,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"] {
@@ -61036,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));
   }
 }
 
@@ -61156,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] {
@@ -61211,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);
@@ -61270,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;
@@ -61325,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",
@@ -61799,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;
@@ -64023,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,
  * }>}
@@ -64038,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,
@@ -73366,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`);
@@ -73393,7 +73503,7 @@ const UncontrolledDialog = props => {
         requestCloseEvent.preventDefault();
       },
       onClose: closeEvent => {
-        props.onClose?.(closeEvent);
+        onCloseRef.current?.(closeEvent);
       }
     };
   });
@@ -75340,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.
@@ -75365,7 +75478,7 @@ const UncontrolledPopover = props => {
         requestCloseEvent.preventDefault();
       },
       onClose: closeEvent => {
-        props.onClose?.(closeEvent);
+        onCloseRef.current?.(closeEvent);
       }
     };
   });
@@ -77225,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`;
   {
@@ -77325,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;
             }
@@ -77397,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 —
@@ -77408,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
           });
@@ -77498,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
@@ -78322,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;
@@ -80289,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";
@@ -89086,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,
@@ -89385,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;
   }
 
@@ -89629,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.
@@ -89679,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.