@jsenv/navi 0.29.305 → 0.29.307

package/dist/dev/jsenv_navi.js

@@ -12,7 +12,7 @@ import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, use
 import { humanizeI18n, prefixFirstAndIndentRemainingLines, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, createValidity, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, CHAR_CLASS_PRESETS, parseDuration, durationToISOString } from "@jsenv/validity";
+import { TYPE_RULE, durationContainsNaN, compareTwoDurations, durationToSeconds, DISPLAYABLE_RULE, MAX_LINE_BREAKS_RULE, NO_EMOJI_RULE, SINGLE_SPACE_RULE, createValidity, resolveCharClass, getCharClassMessageKey, compileCharClassAnchored, compileCharClass, CHAR_CLASS_PRESETS, parseDuration, durationToISOString } from "@jsenv/validity";
 export { compareTwoDurations, durationContainsNaN, durationToHours, durationToISOString, durationToMinutes, durationToNumber, durationToSeconds, durationToString, parseDuration } from "@jsenv/validity";
 import { Suspense, createPortal, forwardRef } from "preact/compat";
 
@@ -4947,6 +4947,11 @@ const radioControllersByName = new Map();
 // The controller id is used as key — if the controller has no id, the value is not registered.
 const naviJsRegistry = new Map();
 
+// Controllers already reported for sharing their id with another one. An id is
+// stated on every render of its control, so without this the warning below
+// would repeat for as long as both controls are on screen.
+const controllersWarned = new WeakSet();
+
 const getUIStateControllerById = (id) => controllersById.get(id);
 const getRadioSiblings = (radioUIStateController) => {
   const siblings = radioControllersByName.get(radioUIStateController.name);
@@ -4984,10 +4989,15 @@ const onUIStateControllerCreated = (uiStateController) => {
   if (id) {
     {
       const existing = controllersById.get(id);
-      if (existing && existing !== uiStateController) {
+      if (
+        existing &&
+        existing !== uiStateController &&
+        !controllersWarned.has(uiStateController)
+      ) {
+        controllersWarned.add(uiStateController);
         console.warn(
           `[navi] Two controls share the same id "${id}" ("${existing.controlType}" and "${controlType}"). ` +
-            `Lookups by id resolve to an arbitrary one of them, and when either unmounts it deletes the registry entry, leaving the surviving control unreachable (undefined uiState, dead picker buttons). ` +
+            `The id resolves to whichever of them rendered last, so the other one is unreachable through it (undefined uiState, dead picker buttons). ` +
             `Common causes: several controls inside a single <Field> (the Field provides one id via context and every control consumes it — put each control in its own <Field>, or give one an explicit id), ` +
             `or the same content mounted twice (e.g. two popups sharing an id prefix while both hold their content).`,
         );
@@ -5020,8 +5030,15 @@ const onUIStateControllerCreated = (uiStateController) => {
 const onUIStateControllerDestroyed = (uiStateController) => {
   const { id, name, controlType } = uiStateController;
   if (id) {
-    controllersById.delete(id);
-    naviJsRegistry.delete(id);
+    // Only the controller the id currently points at may take the entry away:
+    // when two controls share an id, the one leaving would otherwise unregister
+    // the one staying (see the warning in onUIStateControllerCreated), and the
+    // same holds while a control is being replaced by its successor, which
+    // registers during its render, before this cleanup runs.
+    if (controllersById.get(id) === uiStateController) {
+      controllersById.delete(id);
+      naviJsRegistry.delete(id);
+    }
   }
   const proxyFor = uiStateController.props["navi-control-proxy-for"];
   if (proxyFor) {
@@ -8427,6 +8444,75 @@ const languagesSignal = computed(() => {
 // (nor the "languagechange" listener above).
 setRuntimeLangSource(() => languagesSignal.value);
 
+/**
+ * Where navi meets @jsenv/validity.
+ *
+ * validity names a refusal with a key and its parameters rather than a
+ * sentence, so that a field and a server can refuse in the same words in the
+ * language of the person reading. navi is one of those two callers: it says the
+ * sentence, in the browser, through `naviI18n`. The keys line up on purpose —
+ * validity's `"single_space.start"` is navi's `"constraint.single_space.start"`
+ * — so overriding a message is looking up one key, not going through a
+ * translation table.
+ *
+ * The other direction is `constraintFromValidityRule`: a rule an app wrote for
+ * its server, worn by a control as a constraint.
+ */
+
+
+/**
+ * Turns a @jsenv/validity rule into a constraint a control can wear, so an app
+ * rule written once — in the package its server reads too — is checked on both
+ * sides instead of being written twice.
+ *
+ * @param {object} rule
+ *   `{ name, applyOn(ruleValue, value, ruleConfig) }`, the same object passed
+ *   to `createValidity({ rules })`.
+ * @param {object} [ruleConfig]
+ *   What parameterizes the rule, under its own name — `{ maxWords: 40 }` for a
+ *   rule named `maxWords`. Pass `formatMessage` here to say the refusal through
+ *   the app's own i18n; without it the key is looked up in `naviI18n` under
+ *   `constraint.<key>`, and a rule answering with a finished sentence is shown
+ *   as-is.
+ *
+ * Call it once, at module level: a constraint rebuilt on every render is a new
+ * object on every check.
+ */
+const constraintFromValidityRule = (rule, ruleConfig = {}) => {
+  const { formatMessage, ...ruleParams } = ruleConfig;
+  return {
+    name: rule.name,
+    check: (field) => {
+      const result = rule.applyOn(
+        ruleParams[rule.name],
+        field.uiState,
+        ruleParams,
+      );
+      if (!result) {
+        return null;
+      }
+      if (typeof result === "string") {
+        return result;
+      }
+      if (formatMessage) {
+        return formatMessage(result.key, result.params);
+      }
+      return naviI18nFromValidityMessage(result);
+    },
+  };
+};
+
+const naviI18nFromValidityMessage = ({ key, params }) => {
+  if (params && typeof params.max === "number") {
+    // Lets a template pluralize on the bound it names: "[max] retour[s]".
+    return naviI18n(`constraint.${key}`, {
+      ...params,
+      s: params.max > 1 ? "s" : "",
+    });
+  }
+  return naviI18n(`constraint.${key}`, params);
+};
+
 /**
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
  */
@@ -8576,9 +8662,8 @@ const PATTERN_CONSTRAINT = {
 };
 CONSTRAINT_ATTRIBUTE_SET.add("pattern");
 
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
-const emailregex =
-  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+// What an address is, is @jsenv/validity's `type: "email"`: a server checking
+// the value again refuses it for the same reason and in the same words.
 const TYPE_EMAIL_CONSTRAINT = {
   name: "type_email",
   messageAttribute: "data-type-message",
@@ -8592,14 +8677,11 @@ const TYPE_EMAIL_CONSTRAINT = {
     if (!valueAsString) {
       return null;
     }
-    if (emailregex.test(valueAsString)) {
+    const result = TYPE_RULE.applyOn("email", valueAsString);
+    if (!result) {
       return null;
     }
-
-    if (!valueAsString.includes("@")) {
-      return naviI18n("constraint.type.email.at", { value: valueAsString });
-    }
-    return naviI18n("constraint.type.email.invalid");
+    return naviI18nFromValidityMessage(result);
   },
 };
 
@@ -11900,75 +11982,6 @@ const isFunctionButNotAnActionFunction = (action) => {
   return typeof action === "function" && !action.isAction;
 };
 
-/**
- * Where navi meets @jsenv/validity.
- *
- * validity names a refusal with a key and its parameters rather than a
- * sentence, so that a field and a server can refuse in the same words in the
- * language of the person reading. navi is one of those two callers: it says the
- * sentence, in the browser, through `naviI18n`. The keys line up on purpose —
- * validity's `"single_space.start"` is navi's `"constraint.single_space.start"`
- * — so overriding a message is looking up one key, not going through a
- * translation table.
- *
- * The other direction is `constraintFromValidityRule`: a rule an app wrote for
- * its server, worn by a control as a constraint.
- */
-
-
-/**
- * Turns a @jsenv/validity rule into a constraint a control can wear, so an app
- * rule written once — in the package its server reads too — is checked on both
- * sides instead of being written twice.
- *
- * @param {object} rule
- *   `{ name, applyOn(ruleValue, value, ruleConfig) }`, the same object passed
- *   to `createValidity({ rules })`.
- * @param {object} [ruleConfig]
- *   What parameterizes the rule, under its own name — `{ maxWords: 40 }` for a
- *   rule named `maxWords`. Pass `formatMessage` here to say the refusal through
- *   the app's own i18n; without it the key is looked up in `naviI18n` under
- *   `constraint.<key>`, and a rule answering with a finished sentence is shown
- *   as-is.
- *
- * Call it once, at module level: a constraint rebuilt on every render is a new
- * object on every check.
- */
-const constraintFromValidityRule = (rule, ruleConfig = {}) => {
-  const { formatMessage, ...ruleParams } = ruleConfig;
-  return {
-    name: rule.name,
-    check: (field) => {
-      const result = rule.applyOn(
-        ruleParams[rule.name],
-        field.uiState,
-        ruleParams,
-      );
-      if (!result) {
-        return null;
-      }
-      if (typeof result === "string") {
-        return result;
-      }
-      if (formatMessage) {
-        return formatMessage(result.key, result.params);
-      }
-      return naviI18nFromValidityMessage(result);
-    },
-  };
-};
-
-const naviI18nFromValidityMessage = ({ key, params }) => {
-  if (params && typeof params.max === "number") {
-    // Lets a template pluralize on the bound it names: "[max] retour[s]".
-    return naviI18n(`constraint.${key}`, {
-      ...params,
-      s: params.max > 1 ? "s" : "",
-    });
-  }
-  return naviI18n(`constraint.${key}`, params);
-};
-
 /**
  * `data-displayable` — the value must be something the layout can actually
  * draw. What it refuses and why lives in @jsenv/validity's DISPLAYABLE_RULE:
@@ -35277,17 +35290,21 @@ const useUIStateController = (
     if (el) {
       el.__uiStateController__ = controller;
     }
-    // Re-register so the radio registry stays in sync when props.ref changes
-    // identity (e.g. across a Suspense boundary). The render-phase call in
-    // control_hooks.jsx handles the initial mount; this call handles re-runs.
-    onUIStateControllerCreated(controller);
     return () => {
       if (el && el.__uiStateController__ === controller) {
         delete el.__uiStateController__;
       }
-      onUIStateControllerDestroyed(controller);
     };
   }, [controllerRef]);
+  // The registry entry lives as long as the component does. Registration is
+  // done by the render (see useInteractiveProps); this cleanup is the only
+  // thing that takes the entry away, so it must not follow the ref: a ref
+  // identity change would run it right after the render that registered.
+  useLayoutEffect(() => {
+    return () => {
+      onUIStateControllerDestroyed(controller);
+    };
+  }, []);
 
   const { parentUIStateController: parentController } = scope;
   useLayoutEffect(() => {
@@ -38916,11 +38933,13 @@ const useInteractiveProps = (props, {
   // an action's own completion side effect — has to read the signal to get an
   // answer that is not one frame late (see BUSY_CONSTRAINT).
   uiStateController.boundAction = boundAction;
+  // "This id is that controller", stated on every render: a Suspense boundary
+  // parking a subtree runs every hook cleanup below it — the unregistration
+  // included — while the controllers themselves survive, and readers look a
+  // controller up by id while rendering, before any effect can run again.
+  // Placed after controlHostProps is set, which the constraints read.
+  onUIStateControllerCreated(uiStateController);
   if (firstRender) {
-    // Deferred from the factory so these run after controlHostProps is set.
-    // Constraints like READONLY_CONSTRAINT and findControlProxyTargetController
-    // read controlHostProps — calling these earlier would throw or produce wrong results.
-    onUIStateControllerCreated(uiStateController);
     uiStateController.rules.validation.checkValidity();
   }
   return [controlRootProps, controlHostProps];
@@ -48839,10 +48858,11 @@ const ButtonUI = props => {
     cta,
     spacing,
     contentDisplay,
-    // Whether the button draws the loading outline itself. A button that is
-    // one half of a bigger control says no: what is busy is the control, and
-    // the outline belongs around the whole of it (see split_button.jsx).
-    loadingOutline = true
+    // Who draws the loading outline. Left unsaid, the button does; "custom"
+    // says someone else does — a button that is one half of a bigger control:
+    // what is busy is the control, and the outline belongs around the whole
+    // of it (see split_button.jsx).
+    loadingOutline
   } = props;
   const [buttonControlRootProps, buttonControlHostProps, controlChildrenWrapperProps] = useControlProps(props, {
     controlType: "button"
@@ -48968,7 +48988,7 @@ const ButtonUI = props => {
     visualSelector: visualSelector,
     hasChildUsingForwardedProps: true,
     children: [jsx(LoadingOutline, {
-      loading: loadingOutline && loading,
+      loading: loadingOutline === "custom" ? false : loading,
       inset: -1,
       color: "var(--button-loader-color)"
     }), jsx(ControlChildrenWrapper, {
@@ -59548,6 +59568,15 @@ const css$E = /* css */`
        to filter). An entrance animation moves the dialog through scale and
        transform instead, which compose under it: see popup_css.js. */
 
+    /* animation="growing" brings its own wall: the popup is the anchor
+       continued, not a surface shown over a page that goes on being read (see
+       navi_css_vars.js for the paint). Before the rules below, so everything
+       said out loud — an outside press that captures, a backdropVariant, the
+       two paint props — still wins over what the animation assumes. */
+    &[data-growing] {
+      --backdrop-background: var(--navi-backdrop-grow-background);
+      --backdrop-filter: var(--navi-backdrop-grow-backdrop-filter);
+    }
     &[data-pointer-interaction-outside="capture"] {
       --backdrop-background: var(--navi-backdrop-capture-background);
       --backdrop-filter: var(--navi-backdrop-capture-backdrop-filter);
@@ -59718,6 +59747,15 @@ const css$E = /* css */`
       --backdrop-background: var(--navi-backdrop-close-background);
       --backdrop-filter: var(--navi-backdrop-close-backdrop-filter);
     }
+    /* animation="growing" brings its own wall: the popup is the anchor
+       continued, not a surface shown over a page that goes on being read (see
+       navi_css_vars.js for the paint). Before the rules below, so everything
+       said out loud — an outside press that captures, a backdropVariant, the
+       two paint props — still wins over what the animation assumes. */
+    &[data-growing] {
+      --backdrop-background: var(--navi-backdrop-grow-background);
+      --backdrop-filter: var(--navi-backdrop-grow-backdrop-filter);
+    }
     &[data-pointer-interaction-outside="capture"] {
       --backdrop-background: var(--navi-backdrop-capture-background);
       --backdrop-filter: var(--navi-backdrop-capture-backdrop-filter);
@@ -59935,7 +59973,8 @@ const css$E = /* css */`
  * @param {"auto"|"discrete"|"invisible"} [props.backdropVariant="auto"] - How
  *   visible the backdrop is, independently of what it does. `"auto"`: the
  *   paint `pointerInteractionOutsideEffect` implies (dimmed for
- *   `"close"`/`"cancel"`, blurred glass for `"capture"`). `"discrete"`: a
+ *   `"close"`/`"cancel"`, blurred glass for `"capture"`), or the opaque wall
+ *   `animation="growing"` asks for. `"discrete"`: a
  *   barely-there dim. `"invisible"`: fully transparent — a wall that is not
  *   seen, still catching every press. This only changes how much the dialog
  *   insists visually, never what an outside click does; whether there is a
@@ -59968,7 +60007,11 @@ const css$E = /* css */`
  *   over it. It needs an anchor (whatever opened the dialog, or the `anchor`
  *   prop) and grows into whatever inside the dialog carries `data-grow`, the
  *   dialog itself when nothing does. `"auto"` never picks it: only the caller
- *   knows the two boxes are one object. See `popup_grow.js`.
+ *   knows the two boxes are one object. It also brings its own backdrop —
+ *   opaque and blurred (`--navi-backdrop-grow-*`), the page it came out of
+ *   being what the movement leaves rather than a context to keep readable;
+ *   `backdropVariant="discrete"` asks for the light wash back. See
+ *   `popup_grow.js`.
  * @param {"box"|"scene"} [props.grow="box"] - Under `animation="growing"`,
  *   what the anchor and what it grows into are to each other, which decides
  *   how their pictures sit in the box moving between them. `"box"`: one
@@ -60998,6 +61041,7 @@ const useDialogProps = props => {
     "animationDuration": rest.animationDuration,
     "data-pointer-interaction-outside": pointerInteractionOutsideEffect,
     "data-backdrop-variant": backdropVariant,
+    "data-growing": growing ? "" : undefined,
     backdropColor,
     backdropFilter
   });
@@ -61033,6 +61077,11 @@ const useDialogProps = props => {
     // (and harmless for a local dialog, whose real backdrop element gets it
     // via backdropProps).
     "data-backdrop-variant": backdropVariant,
+    // That this popup is the anchor continued rather than a surface shown
+    // over the page, which is what its backdrop is painted from (see this
+    // file's CSS). It cannot be read off navi-animation: growing arms no CSS
+    // animation of its own, so that attribute is deliberately absent here.
+    "data-growing": growing ? "" : undefined,
     // That this dialog has no wall, said in the DOM: the browser generates a
     // ::backdrop for the popover a wall-less top-layer dialog is shown as,
     // and the CSS above keys off this to leave it unpainted. Also the only
@@ -61186,6 +61235,9 @@ const DIALOG_STYLE_CSS_VARS = {
   animationDuration: "--popup-animation-duration",
   backdropColor: "--backdrop-background",
   backdropFilter: "--backdrop-filter",
+  backgroundColor: "--dialog-background-color",
+  boxShadow: "--dialog-box-shadow",
+  borderWidth: "--dialog-border-width",
   borderRadius: "--dialog-border-radius",
   minWidth: "--dialog-min-width",
   maxWidth: "--dialog-max-width",
@@ -62779,10 +62831,17 @@ const POPOVER_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible",
 // Lets consumers pass animationDuration="0.5s"/borderRadius="8px" as regular
 // props; Box maps them to the CSS vars for us (see box.jsx's styleCSSVars
 // handling).
+// The paint props go through the popover's own vars rather than the properties
+// themselves, so the stylesheet keeps the last word on them (the same reason
+// dialog.jsx gives for borderRadius).
 const POPUP_STYLE_CSS_VARS = {
   animationDuration: "--popup-animation-duration",
   backdropColor: "--backdrop-background",
   backdropFilter: "--backdrop-filter",
+  backgroundColor: "--popover-background-color",
+  boxShadow: "--popover-box-shadow",
+  borderWidth: "--popover-border-width",
+  borderRadius: "--popover-border-radius",
   minWidth: "--popover-min-width",
   maxWidth: "--popover-max-width",
   minHeight: "--popover-min-height",
@@ -63045,83 +63104,56 @@ const Popup = props => {
 Popup.Close = PopupClose;
 
 installImportMetaCssBuild(import.meta);
-const css$B = /* css */`.navi_picker {
-  &[aria-haspopup="listbox"] {
-    & .navi_popover {
-      --popover-border-radius: var(--picker-popup-border-radius, var(--picker-border-radius));
-      --popover-border-width: var(--picker-border-width);
-      --popover-border-color: var(--x-picker-border-color);
-      --popover-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
-      --popover-outline-width: var(--picker-outline-width);
-      --popover-outline-color: var(--picker-outline-color);
-      --popover-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
-      --popover-max-height: var(--picker-popover-max-height);
-      min-width: var(--picker-popover-min-width, var(--anchor-width, 0px));
-      cursor: default;
-
-      & .navi_list_container {
-        --list-border-radius: max(0px,
-            var(--popover-border-radius) - var(--popover-border-width));
-        overscroll-behavior: none;
-        width: 100%;
+const css$B = /* css */`.navi_popover[data-picker-popup] {
+  --popover-border-radius: var(--picker-border-radius);
+  --popover-border-width: var(--picker-border-width);
+  --popover-border-color: var(--x-picker-border-color);
+  --popover-outline-width: var(--picker-outline-width);
+  --popover-outline-color: var(--picker-outline-color);
+  cursor: default;
 
-        &:not([data-overflow-visible]) {
-          overflow: auto;
-        }
-      }
-    }
+  &:not([navi-hidden]) {
+    flex-direction: column;
+    display: flex;
+  }
 
-    &[aria-expanded="true"] {
-      &[navi-popover-mode="overlay"] {
-        border-color: #0000;
-      }
+  & .navi_list_container {
+    --list-border-radius: max(0px,
+        var(--popover-border-radius) - var(--popover-border-width));
+    overscroll-behavior: none;
+    width: 100%;
 
-      & .navi_popover {
-        flex-direction: column;
-        display: flex;
-      }
+    &:not([data-overflow-visible]) {
+      overflow: auto;
     }
   }
+}
 
-  &[aria-haspopup="dialog"] {
-    & .navi_dialog {
-      --dialog-border-radius: var(--picker-popup-border-radius, var(--picker-border-radius));
-      --dialog-border-width: var(--picker-dialog-border-width, 0px);
-      --dialog-border-color: var(--x-picker-border-color);
-      --dialog-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
-      --dialog-outline-width: var(--picker-outline-width);
-      --dialog-outline-color: var(--picker-outline-color);
-      --dialog-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
-      --dialog-min-width: var(--picker-dialog-min-width);
-      --dialog-min-height: var(--picker-dialog-min-height);
-      --dialog-max-width: var(--picker-dialog-max-width);
-      --dialog-max-height: var(--picker-dialog-max-height);
-      cursor: default;
+.navi_picker[aria-haspopup="listbox"][aria-expanded="true"][navi-popover-mode="overlay"] {
+  border-color: #0000;
+}
 
-      &[open] {
-        flex-direction: column;
-      }
+.navi_dialog[data-picker-popup] {
+  --dialog-border-radius: var(--picker-border-radius);
+  --dialog-border-color: var(--x-picker-border-color);
+  --dialog-outline-width: var(--picker-outline-width);
+  --dialog-outline-color: var(--picker-outline-color);
+  cursor: default;
 
-      & .navi_list_container {
-        --list-border-radius: max(0px,
-            var(--dialog-border-radius) - var(--dialog-border-width));
-        overscroll-behavior: none;
-        width: 100%;
+  &[open] {
+    flex-direction: column;
+  }
 
-        &:not([data-overflow-visible]) {
-          overflow: auto;
-        }
-      }
-    }
+  & .navi_list_container {
+    --list-border-radius: max(0px,
+        var(--dialog-border-radius) - var(--dialog-border-width));
+    overscroll-behavior: none;
+    width: 100%;
 
-    &[data-dialog-size-from-anchor] .navi_dialog {
-      --dialog-max-width: var(--picker-dialog-max-width, var(--anchor-width));
+    &:not([data-overflow-visible]) {
+      overflow: auto;
     }
   }
-
-  &[data-popup-width-fit-content] {
-    --picker-popover-min-width: 0px;
-  }
 }
 `;
 const PickerCustomResolver = props => {
@@ -63885,6 +63917,22 @@ const PickerContentInsidePopup = props => {
     // dialogMaxWidth="var(--anchor-width)", as a ceiling) — what keeps a card
     // its own width once lifted. Dialog's own `sizeFromAnchor`.
     dialogSizeFromAnchor,
+    // The caller's word on the popup's own box. Written on the popup element,
+    // where Popover/Dialog map them to their own vars, rather than as vars on
+    // the picker: a var on the picker inherits into everything the popup
+    // holds, and the pickers in there would read it as their own.
+    popupBackgroundColor,
+    popupBorderRadius,
+    popupBoxShadow,
+    popoverMaxHeight,
+    dialogBorderWidth,
+    dialogMinWidth,
+    dialogMinHeight,
+    dialogMaxWidth,
+    dialogMaxHeight,
+    // The popover is at least as wide as the trigger. True when the CONTENT
+    // should size it (a Wheel) instead of being stretched to the trigger.
+    popupWidthFitContent,
     animation,
     grow,
     animationDuration,
@@ -63903,7 +63951,6 @@ const PickerContentInsidePopup = props => {
   return jsx(Next, {
     "aria-haspopup": isPopover ? "listbox" : "dialog",
     "navi-popover-mode": isPopover ? popoverMode : undefined,
-    "data-dialog-size-from-anchor": !isPopover && dialogSizeFromAnchor ? "" : undefined,
     ...rest,
     // On popupProps already (see the picker's popup assembly); they mean
     // nothing to the picker element.
@@ -63945,7 +63992,23 @@ const PickerContentInsidePopup = props => {
       })
     }) : jsx(Popup, {
       ...popupProps,
-      "data-testid": popupTestId,
+      "data-testid": popupTestId
+      // What the CSS above keys on: this picker's own popup, and no other
+      // popup below the picker.
+      ,
+      "data-picker-popup": "",
+      backgroundColor: popupBackgroundColor,
+      borderRadius: popupBorderRadius,
+      boxShadow: popupBoxShadow,
+      borderWidth: isPopover ? undefined : dialogBorderWidth,
+      minWidth: isPopover ? popupWidthFitContent ? undefined : "var(--anchor-width, 0px)" : dialogMinWidth,
+      minHeight: isPopover ? undefined : dialogMinHeight
+      // As wide as the trigger under dialogSizeFromAnchor: Dialog's own
+      // sizeFromAnchor is a floor, this is the ceiling. A dialogMaxWidth of
+      // the caller's still wins.
+      ,
+      maxWidth: isPopover ? undefined : dialogMaxWidth === undefined && dialogSizeFromAnchor ? "var(--anchor-width)" : dialogMaxWidth,
+      maxHeight: isPopover ? popoverMaxHeight : dialogMaxHeight,
       mode: mode,
       layer: popupLayer,
       animation: animation,
@@ -72043,6 +72106,26 @@ const css$t = /* css */`@layer navi {
     }
   }
 
+  & [data-picker-content] {
+    --picker-padding: initial;
+    --picker-padding-x: initial;
+    --picker-padding-y: initial;
+    --picker-padding-top: initial;
+    --picker-padding-right: initial;
+    --picker-padding-bottom: initial;
+    --picker-padding-left: initial;
+    --picker-press-padding: initial;
+    --picker-press-padding-x: initial;
+    --picker-press-padding-y: initial;
+    --picker-press-padding-top: initial;
+    --picker-press-padding-right: initial;
+    --picker-press-padding-bottom: initial;
+    --picker-press-padding-left: initial;
+    --picker-slot-spacing: initial;
+    --picker-align-x: initial;
+    --picker-align-y: initial;
+  }
+
   & .navi_picker_content {
     --x-corner-top-left-radius: initial;
     --x-corner-top-right-radius: initial;
@@ -72246,11 +72329,6 @@ const PickerButton = props => {
     placeholder,
     ui,
     maxLines: maxLinesProp = 1,
-    // By default the popover is at least as wide as the trigger (min-width:
-    // --anchor-width). Set true when the CONTENT should dictate the popover width
-    // (e.g. a Wheel) instead of being stretched to the trigger — see
-    // picker_custom.jsx.
-    popupWidthFitContent,
     // Adds a clear button to the right slot, the same one type="search" puts at
     // the end of an input: a picker holds a value the user chose, and unsetting
     // it should not require reopening the popup to hunt for a "none" entry.
@@ -72275,7 +72353,13 @@ const PickerButton = props => {
     // (see PickerInput below).
     role,
     readOnly,
-    error
+    error,
+    // Who draws the loading outline. Left unsaid, the picker does, around its
+    // own box; "custom" says someone else does — a bigger surface this box is
+    // a piece of, waiting as a whole (see the `loadingOutline` doc).
+    loadingOutline,
+    // Where the outline runs, in px from the picker's box: negative is outside.
+    loadingOutlineInset = -2
   } = props;
   // A word in a sentence is never truncated — and the clamp's overflow: hidden
   // would cut its dotted underline, which sits on the edge of the line box
@@ -72395,7 +72479,6 @@ const PickerButton = props => {
         "navi-single-line": isSingleLine ? "" : undefined,
         "navi-ui-custom": ui === "default" ? undefined : "",
         "data-readonly-opens": readOnlyOpens ? "" : undefined,
-        "data-popup-width-fit-content": popupWidthFitContent ? "" : undefined,
         ...pickerRemainingProps,
         basePseudoState: basePseudoState,
         styleCSSVars: PickerStyleCSSVars,
@@ -72410,9 +72493,10 @@ const PickerButton = props => {
         openWhileReadOnly: undefined,
         ui: undefined,
         maxLines: undefined,
-        popupWidthFitContent: undefined,
         error: undefined,
-        dayLabel: undefined
+        dayLabel: undefined,
+        loadingOutline: undefined,
+        loadingOutlineInset: undefined
         // This wrapper will receive keyboard event bubbling from the picker popup content
         // we re-dispatch on the input (to get escape to close for instance)
         ,
@@ -72443,9 +72527,9 @@ const PickerButton = props => {
           children: jsxs(PickerContext.Provider, {
             value: pickerContext,
             children: [variant === "headless" ? null : jsx(LoadingOutline, {
-              loading: loading,
+              loading: loadingOutline === "custom" ? false : loading,
               color: "var(--picker-loader-color)",
-              inset: -2
+              inset: loadingOutlineInset
             }), jsx(PickerInput, {
               role: hostRole,
               "aria-labelledby": hostLabelId,
@@ -72680,7 +72764,7 @@ const PickerClear = ({
     // removed is the whole field's, and the picker already draws the wait
     // around all of it. Two outlines for one wait is one too many.
     ,
-    loadingOutline: false
+    loadingOutline: "custom"
     // preventDefault, not just tabIndex="-1": a mousedown focuses its target
     // before any click happens, and this button should never hold focus at
     // all — the field keeps it.
@@ -72854,21 +72938,16 @@ const PICKER_BUTTON_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":fo
 const PickerInputPseudoClasses = [":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value", ":-navi-expanded"];
 
 // A pair is [the css variable, the style whose values the prop is written in]:
-// popupBorderRadius takes what borderRadius takes, dialogMinWidth what minWidth
-// takes — see box.jsx's readCSSVarEntry.
+// slotSpacing takes what margin takes, pressPadding what padding takes — see
+// box.jsx's readCSSVarEntry.
+// What the props say about the picker's own box only. The popup props
+// (popupBackgroundColor, dialogMaxWidth…) are handed to the popup element by
+// picker_custom.jsx: a variable on the root inherits into everything the popup
+// holds, and the pickers in there would read it as their own.
 const PickerStyleCSSVars = {
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
   "borderRadius": "--picker-border-radius",
-  "popoverMaxHeight": ["--picker-popover-max-height", "maxHeight"],
-  "dialogMinWidth": ["--picker-dialog-min-width", "minWidth"],
-  "dialogMinHeight": ["--picker-dialog-min-height", "minHeight"],
-  "dialogMaxWidth": ["--picker-dialog-max-width", "maxWidth"],
-  "dialogMaxHeight": ["--picker-dialog-max-height", "maxHeight"],
-  "popupBackgroundColor": "--picker-popup-background-color",
-  "popupBorderRadius": ["--picker-popup-border-radius", "borderRadius"],
-  "popupBoxShadow": ["--picker-popup-box-shadow", "boxShadow"],
-  "dialogBorderWidth": ["--picker-dialog-border-width", "borderWidth"],
   "slotSpacing": ["--picker-slot-spacing", "margin"],
   "pressPadding": ["--picker-press-padding", "padding"],
   "pressPaddingX": ["--picker-press-padding-x", "padding"],
@@ -72975,6 +73054,8 @@ const PickerFirstResolver = props => {
  *   popoverMode?: "nearby" | "overlay",
  *   positionArea?: string,
  *   popupWidthFitContent?: boolean,
+ *   loadingOutline?: "custom",
+ *   loadingOutlineInset?: number,
  *   variant?: "icon" | "circle" | "headless" | "discrete" | "button" | "text" | "bare" | "picker",
  *   icon?: boolean,
  *   alignX?: "start" | "center" | "end",
@@ -73092,9 +73173,12 @@ const PickerFirstResolver = props => {
  *   its own as well. Either way a card shows the score the moment the sheet
  *   leaves and takes it back on a refusal, with nothing held by the caller.
  *   `loading` is the wait it wears meanwhile: navi draws its loading outline
- *   on every trigger, but on a card-sized `variant="bare"` a two-pixel run
- *   around the box says nothing — a big surface draws its own waiting state
- *   from that flag, or from `[data-loading]` on the picker root in css.
+ *   on every trigger, two pixels out of the box. On a card-sized
+ *   `variant="bare"` that run sits on the card's own border and reads as a
+ *   border blinking; `loadingOutlineInset` moves it clear of it. And when the
+ *   picker's box is not the shape of what waits, `loadingOutline="custom"`
+ *   lets the drawing draw the wait itself, from that flag or from
+ *   `[data-loading]` on the picker root in css.
  * @param {boolean} [readOnly] Nothing in this picker can be changed — and it
  *   still opens, so what is in the popup can be read: everything in there is
  *   held read-only in turn, each control greying out and saying why on its own.
@@ -73221,6 +73305,21 @@ const PickerFirstResolver = props => {
  *   nearest positioned ancestor it happens to find. `"picker"` (or an explicit
  *   `variant={undefined}`) asks a confirm or callout picker for the field-like
  *   drawing every other picker has.
+ * @param {"custom"} [loadingOutline] Who draws the loading outline while the
+ *   action runs. Left unsaid, the picker does, around its own box. `"custom"`
+ *   says someone else does — what it means on a `Button` too — for a picker
+ *   that carries a wait drawn elsewhere: two nested pickers sharing one run
+ *   (a score picker drawn inside the card an edit picker wraps, see
+ *   `12_picker_card_demo.html`) are one wait, and one outline; and a
+ *   `variant="bare"` whose box is not
+ *   the shape of what waits (a card with a note pinned under it) leaves the
+ *   outline to the card, which knows its own box. The wait itself is still
+ *   worn: `aria-busy`, the busy refusal, the error callout, `[data-loading]`.
+ * @param {number} [loadingOutlineInset=-2] Where the loading outline runs, in
+ *   px from the picker's box — negative is outside. A field wants it right on
+ *   its border; a card-sized trigger wants it a few pixels out, clear of the
+ *   card's own frame, so it reads as a run around the card rather than as its
+ *   border blinking.
  * @param {boolean} [icon] The trigger is one icon — the `ui`, or the chevron
  *   when there is none. Its box is that icon's box plus the padding asked for
  *   and nothing else: no right slot, and no control line to be as tall as, so
@@ -73306,7 +73405,9 @@ const PickerFirstResolver = props => {
  *   (the popup itself when nothing does), and back on close. The trigger IS
  *   the anchor, so nothing has to be named for it — `dialogSizeFromAnchor`
  *   for a card that must keep its width on the way, left out for a drawing
- *   that opens precisely to get bigger.
+ *   that opens precisely to get bigger. It brings an opaque, blurred backdrop
+ *   with it (`--navi-backdrop-grow-*`); `backdropVariant="discrete"` asks for
+ *   the light wash back.
  * @param {"box"|"scene"} [grow="box"] Dialog's own, under `animation="growing"`:
  *   `"box"` for a card that extends (its top stays, the box uncovers the rest),
  *   `"scene"` for a thumbnail and the bigger view it is cut from (each picture
@@ -73317,9 +73418,9 @@ const PickerFirstResolver = props => {
  *   as a ceiling, unless a `dialogMaxWidth` says otherwise. What keeps a card
  *   its own width once lifted out of the page (`animation="growing"`, with
  *   `data-grow` on the card inside the popup): it moves, and nothing else
- *   about it changes. The ceiling is set here rather than through
- *   `dialogMaxWidth="var(--anchor-width)"` because that variable lives on the
- *   dialog element, and a prop on the picker is resolved on the picker.
+ *   about it changes. `dialogMaxWidth="var(--anchor-width)"` says the same
+ *   ceiling by hand: the popup props are written on the dialog element, where
+ *   that variable lives.
  * @param {"cancel"|"close"} [escapeEffect="cancel"] What Escape does to an open
  *   picker. "cancel" puts back the value the picker had at open, and a dialog
  *   picker also goes back in history — so anything written to the url while it
@@ -75965,7 +76066,7 @@ const SplitButton = props => {
     readOnly,
     disabled,
     // The outline belongs around the pair, drawn below.
-    loadingOutline: false
+    loadingOutline: "custom"
   };
   return jsxs(Box, {
     ref: rootRef,