@jsenv/navi 0.29.299 → 0.29.301

package/dist/dev/jsenv_navi.js

@@ -10587,6 +10587,8 @@ defineInteractionDetector({
       }
       let swipe = null;
       let press = null;
+      // Set below, with the hold; a no-op until then so the swipe can call it.
+      let forgetInnerLongPress = () => {};
 
       if (axes) {
         swipe = startSwipe(pointerDownEvent, {
@@ -10606,14 +10608,35 @@ defineInteractionDetector({
           onSwipeStart: () => {
             press?.cancel();
             press = null;
+            forgetInnerLongPress();
           },
         });
       }
       if (hasLongPress) {
+        // A hold declared INSIDE this element, on this same press: the nearer
+        // one answers, the way a click is the innermost target's, and this
+        // wait is given up — two sheets opening from one hold is nobody's
+        // intention. Delays being equal, the inner timer was set first (the
+        // press reached it first) and fires first; the inner hold arrives here
+        // as its own event, bubbling, before this timer runs.
+        const onInnerLongPress = (longPressEvent) => {
+          if (longPressEvent.target === element || !press) {
+            return;
+          }
+          press.cancel();
+          press = null;
+          forgetInnerLongPress();
+        };
+        forgetInnerLongPress = () => {
+          element.removeEventListener("longpress", onInnerLongPress);
+        };
+        element.addEventListener("longpress", onInnerLongPress);
         press = waitForPressHeld(pointerDownEvent, {
           delay: readConfig(LONGPRESS_DELAY_ATTRIBUTE, LONGPRESS_DELAY_DEFAULT),
           slop: readConfig(LONGPRESS_SLOP_ATTRIBUTE, LONGPRESS_SLOP_DEFAULT),
+          onPressCancel: forgetInnerLongPress,
           onPressHeld: (pressEvent, { endPress }) => {
+            forgetInnerLongPress();
             // The hold won the arbitration: the swipe never got the distance it
             // needed, and must not get it from whatever the finger does next.
             swipe?.stop();
@@ -34631,6 +34654,12 @@ const useUIStateController = (
         },
         resetUIState: (e) => {
           controller.setUIState(controller.state, e);
+          // What the control holds moved back, and a bound signal mirrors what
+          // it holds (see PROPAGATE_DOWN_EVENT_SET). Left on the value the
+          // reset just undid — written there by the control itself at the
+          // pick — the signal would hand it straight back on the next render,
+          // and the refused value would win over the rollback.
+          writeBoundSignal(controller.state);
         },
         // Read by the callout manager when it has nowhere else to point.
         getCalloutAnchorElement: (event) =>
@@ -34734,9 +34763,27 @@ const useUIStateController = (
         controller.hasStateProp = true;
         const currentState = controller.state;
         if (!compareTwoJsValues(state, currentState)) {
-          controller.state = state;
-          if (!optimisticWorkInFlight) {
-            controller.setUIState(state, new CustomEvent("state_prop_change"));
+          // A bound signal controls the state the way a `value` prop does —
+          // and, unlike a `value`, it is written by the control itself at
+          // every ui action. Read back here on a control that runs an action,
+          // a signal matching the ui state is that echo (see the signal branch
+          // below for the same rule on an uncontrolled control): `state` is
+          // the rollback target, and taking the echo would make resetOnError
+          // put back the very value the action is about to send, or has just
+          // been refused. The action settles it — success acknowledges,
+          // failure resets to what is kept here.
+          const signalEchoesOwnWrite =
+            Boolean(controlInfo.signal) &&
+            Boolean(props.action) &&
+            compareTwoJsValues(state, controller.uiState);
+          if (!signalEchoesOwnWrite) {
+            controller.state = state;
+            if (!optimisticWorkInFlight) {
+              controller.setUIState(
+                state,
+                new CustomEvent("state_prop_change"),
+              );
+            }
           }
         }
       } else {
@@ -45536,9 +45583,15 @@ const createOpenController = (
     change();
   };
   const runChange = (change, { opened, event }) => {
+    const applyChange = () => {
+      // Recorded with the change itself: what the DOM shows is what a render
+      // landing between the ask and the picture must draw (see `openedInDom`).
+      controller.openedInDom = opened;
+      change();
+    };
     const { transitionChange } = controller;
     if (!transitionChange) {
-      change();
+      applyChange();
       return;
     }
     // What the controller answers about itself does not wait for the picture:
@@ -45547,10 +45600,10 @@ const createOpenController = (
     // caller's own signal), and a request arriving before the change lands
     // runs it first rather than reading a DOM that disagrees.
     controller.opened = opened;
-    changeAwaitingTransition = change;
+    changeAwaitingTransition = applyChange;
     transitionChange(
       () => {
-        if (changeAwaitingTransition === change) {
+        if (changeAwaitingTransition === applyChange) {
           flushChangeAwaitingTransition();
         }
       },
@@ -45668,6 +45721,13 @@ const createOpenController = (
   };
   const controller = {
     opened: false,
+    // What the DOM currently shows, as opposed to what the controller has
+    // decided: the two differ for the frame a change spends waiting for the
+    // browser to photograph the state being left (see runChange). A render
+    // landing in that frame — a picker re-rendering because its action just
+    // started — must draw THIS, or it paints the closed state before the
+    // picture is taken and the movement has nothing to leave from.
+    openedInDom: false,
     // Which press the popup opened during, written at every open (see
     // openedDuringThisPress). Never any press before there has been one.
     pressCountAtOpen: null,
@@ -60290,14 +60350,14 @@ const useDialogProps = props => {
     // and matching what a descendant relying on
     // use_displayed_layout_effect.js's own aria-expanded-presence check
     // needs — see popover.jsx's own identical prop for the full reasoning.
-    "aria-expanded": openController.opened ? "true" : "false",
+    "aria-expanded": openController.openedInDom ? "true" : "false",
     // Present from this very first render (recomputed fresh on every one
     // from openController.opened, not a frozen mount-time constant) so
     // there's no gap for the browser to ever paint this plain-div backdrop
     // visible before anything has actually opened it — see popover.jsx's
     // own identical prop for the full reasoning, and this file's own CSS
     // for the rule it drives.
-    "navi-hidden": openController.opened ? undefined : "",
+    "navi-hidden": openController.openedInDom ? undefined : "",
     "styleCSSVars": DIALOG_STYLE_CSS_VARS,
     "animationDuration": rest.animationDuration,
     "data-pointer-interaction-outside": pointerInteractionOutsideEffect,
@@ -60309,7 +60369,7 @@ const useDialogProps = props => {
     tabIndex,
     // See backdropProps' own identical prop above for the full reasoning
     // (kept once, not repeated here).
-    "aria-expanded": openController.opened ? "true" : "false",
+    "aria-expanded": openController.openedInDom ? "true" : "false",
     // Present from the very first render (recomputed fresh from
     // openController.opened every time, not a frozen mount-time constant —
     // see popover.jsx's own identical prop for the full reasoning) so a
@@ -60317,7 +60377,7 @@ const useDialogProps = props => {
     // can't silently defeat showModal()/close()'s native open/close — see
     // this file's own CSS rule for dialogEl and the open/close steps below
     // for how it's toggled.
-    "navi-hidden": openController.opened ? undefined : "",
+    "navi-hidden": openController.openedInDom ? undefined : "",
     // Unlike Popover (which genuinely can't resolve "auto" until it
     // measures against a real anchor), resolvedAnimation is already fully
     // known synchronously here — a dialog never needs to flip anything
@@ -61940,12 +62000,12 @@ const usePopoverProps = props => {
     // commit (a plain prop is, no effect needed) — see
     // use_displayed_layout_effect.js's own comments for why a descendant
     // relying on aria-expanded's mere presence needs that.
-    "aria-expanded": openController.opened ? "true" : "false",
+    "aria-expanded": openController.openedInDom ? "true" : "false",
     // Read fresh on every render (not frozen at mount), so it stays
     // correct even across a re-render that happens to occur while open —
     // see contentProps' own identical prop just below for the full
     // reasoning (kept once, not repeated here).
-    "navi-hidden": openController.opened ? undefined : "",
+    "navi-hidden": openController.openedInDom ? undefined : "",
     "styleCSSVars": POPUP_STYLE_CSS_VARS,
     "animationDuration": rest.animationDuration,
     "data-pointer-interaction-outside": pointerInteractionOutsideEffect,
@@ -61994,7 +62054,7 @@ const usePopoverProps = props => {
     "navi-animation": isAutoAnimation ? undefined : animation,
     // See backdropProps' own identical prop above for the full reasoning
     // (kept once, not repeated here).
-    "aria-expanded": openController.opened ? "true" : "false",
+    "aria-expanded": openController.openedInDom ? "true" : "false",
     // Only load-bearing for the custom renderer (a plain div has no native
     // starting-hidden default) — present from this very first render so
     // there's no gap for the browser to ever paint it visible before
@@ -62004,7 +62064,7 @@ const usePopoverProps = props => {
     // the last render, so as long as this always reflects the *current*
     // truth, it never fights the imperative
     // removeAttribute/setAttribute openEffect/close do directly.
-    "navi-hidden": openController.opened ? undefined : "",
+    "navi-hidden": openController.openedInDom ? undefined : "",
     "styleCSSVars": POPUP_STYLE_CSS_VARS,
     ...rest,
     ...autoFocusProps,
@@ -62349,6 +62409,7 @@ const css$B = /* css */`.navi_picker {
       --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;
@@ -62385,6 +62446,7 @@ const css$B = /* css */`.navi_picker {
       --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);
@@ -62406,6 +62468,10 @@ const css$B = /* css */`.navi_picker {
         }
       }
     }
+
+    &[data-dialog-size-from-anchor] .navi_dialog {
+      --dialog-max-width: var(--picker-dialog-max-width, var(--anchor-width));
+    }
   }
 
   &[data-popup-width-fit-content] {
@@ -62569,7 +62635,10 @@ const PickerCustom = props => {
     // hands the popup that controller, and a controlled Dialog/Popover reads
     // no onOpen/onClose of its own.
     onOpen,
-    onClose
+    onClose,
+    // What opens the popup — the press, or an interaction navi detects
+    // ("longpress", "contextmenu"…, or a list of them). See the JSDoc.
+    openOn = "press"
   } = props;
   // Resolve the id the same way useControlProps does (own id > Field's id > generated id)
   // before computing popupId below, so two Pickers without an explicit id never collide.
@@ -62605,6 +62674,7 @@ const PickerCustom = props => {
   delete pickerProps.onConfirm;
   delete pickerProps.onOpen;
   delete pickerProps.onClose;
+  delete pickerProps.openOn;
   // Read below for the popup alone; on the trigger it would land on the DOM as
   // an unknown attribute holding a ref object.
   delete pickerProps.anchor;
@@ -63002,7 +63072,29 @@ const PickerCustom = props => {
       // could then never form. So the picker steps back and opens on the click,
       // which the browser only delivers if the press stayed a press (a gesture
       // swallows the click it leaves behind).
-      const interactionsDispute = interactionsDisputeThePress(props.interactions);
+      // Opening on something else than the press: the hold, the right click.
+      // Declared on the picker itself, as the caller would declare their own,
+      // so it is read and arbitrated like any other gesture — a swipe on the
+      // same card takes the press a hold would have taken — and gated like one:
+      // a read-only picker refuses it where the finger is. The press is then
+      // nobody's: a tap on the card opens nothing (see the two reactions
+      // below), and the keyboard keeps its own ways in (the shortcuts above).
+      const openOnList = Array.isArray(openOn) ? openOn : [openOn];
+      const opensOnPress = openOnList.includes("press");
+      let interactions = props.interactions;
+      if (!opensOnPress) {
+        interactions = {
+          ...interactions
+        };
+        for (const type of openOnList) {
+          interactions[type] = e => {
+            requestOpen(e);
+          };
+        }
+        pickerProps.interactions = interactions;
+        pickerProps["data-open-on"] = openOnList.join(" ");
+      }
+      const interactionsDispute = interactionsDisputeThePress(interactions);
       Object.assign(pickerProps, {
         eventReactionDefinitions: {
           mouseDown: e => {
@@ -63028,7 +63120,7 @@ const PickerCustom = props => {
             // because that is where such a box says what it travels by — and
             // asked at every press, since what the picker sits in is not the
             // picker's to know at mount.
-            if (interactionsDispute || isPressDisputedByDrag(e.target)) {
+            if (!opensOnPress || interactionsDispute || isPressDisputedByDrag(e.target) || isPressDisputedByHold(ref.current)) {
               return null;
             }
             return {
@@ -63045,6 +63137,11 @@ const PickerCustom = props => {
             if (isWithinPickerContent(e.target)) {
               return null;
             }
+            if (!opensOnPress) {
+              // Neither the tap, nor the click a hold leaves behind: the press
+              // is not what opens this picker.
+              return null;
+            }
             // When a label is clicked it transfers focus to the select
             // in that case we want to open it (otherwise we have already opened on mousedown interaction)
             // And when a gesture disputes the press (see the two disputes
@@ -63073,6 +63170,13 @@ const PickerCustom = props => {
     mode: mode
   });
 };
+
+// A hold declared on something AROUND the picker (a card opened by
+// `openOn="longpress"`, holding this one in its drawing): the finger going
+// down may be the start of that hold, so this picker opens on the click — which
+// the hold, if it completes, swallows — rather than on the press. The picker's
+// own hold (its `openOn`) is not "around" it, and has already stepped back.
+const isPressDisputedByHold = pickerEl => Boolean(pickerEl?.parentElement?.closest(`[${LONGPRESS_ATTRIBUTE}]`));
 const getPickerInput = pickerEl => {
   return pickerEl.querySelector(".navi_picker_input");
 };
@@ -63125,7 +63229,12 @@ const PickerContentInsidePopup = props => {
     // itself, and this one does not. Popover ignores it, same as Dialog ignores
     // marginWithAnchor.
     dockedOnSmallTouchScreen,
+    // Same again: the dialog takes the trigger's box as a floor (and, with
+    // dialogMaxWidth="var(--anchor-width)", as a ceiling) — what keeps a card
+    // its own width once lifted. Dialog's own `sizeFromAnchor`.
+    dialogSizeFromAnchor,
     animation,
+    animationDuration,
     // mode="callout": what the callout says about what it holds, and paints
     // in its border and icon — "none" for a plain tooltip (see the callout
     // defaults in PickerCustomResolver). And whether it wears a cross: without
@@ -63141,6 +63250,7 @@ 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.
@@ -63186,6 +63296,7 @@ const PickerContentInsidePopup = props => {
       mode: mode,
       layer: popupLayer,
       animation: animation,
+      animationDuration: animationDuration,
       positionArea: isPopover ? positionArea ?? (popoverMode === "nearby" ? "bottom-start" : "inset(top-left)") : positionArea,
       marginWithAnchor: isPopover ? popoverSpacing : undefined,
       marginWithContainer: marginWithContainer === undefined && isPopover ? popoverSpacing : marginWithContainer,
@@ -63200,6 +63311,7 @@ const PickerContentInsidePopup = props => {
       expandX: isPopover ? undefined : dialogExpandX,
       expandY: isPopover ? undefined : dialogExpandY,
       dockedOnSmallTouchScreen: isPopover ? undefined : dockedOnSmallTouchScreen,
+      sizeFromAnchor: isPopover ? undefined : dialogSizeFromAnchor,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -63480,6 +63592,34 @@ const pickerUIIsNaviOwn = ui => {
   return Boolean(ui) && typeof ui === "object" && Boolean(ui.type?.isPickerOwnUI);
 };
 
+/**
+ * What the picker holds, read from inside its `ui` — for a drawing given as
+ * an element (`ui={<MyCard game={game} />}`), which the picker cannot hand
+ * props to. `value` is the state the picker holds right now: the answer the
+ * popup just closed on, before the server has said anything, and put back if
+ * the action fails. `loading` is the run in flight; `interactive` is false
+ * while the picker is disabled, read-only or busy.
+ *
+ * @returns {{ value: any, loading: boolean, interactive: boolean } | null}
+ *   null outside a picker.
+ */
+const usePickerState = () => {
+  const context = useContext(PickerContext);
+  if (!context) {
+    return null;
+  }
+  const {
+    value,
+    loading,
+    interactive
+  } = context;
+  return {
+    value,
+    loading,
+    interactive
+  };
+};
+
 const PickerNaviMinute = props => {
   const Next = useNextResolver();
   const {
@@ -71217,6 +71357,21 @@ const css$t = /* css */`@layer navi {
     }
   }
 
+  &[data-open-on~="longpress"] {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+
+  &[data-open-on] {
+    & > .navi_picker_box > .navi_picker_input {
+      pointer-events: none;
+    }
+
+    & > .navi_picker_box > .navi_picker_value {
+      pointer-events: auto;
+    }
+  }
+
   &[navi-ui-custom] {
     & .navi_picker_input {
       top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
@@ -71545,12 +71700,15 @@ const PickerButton = props => {
   // What the picker knows about itself, for the pieces it does not place: the
   // drawings of its value (Picker.UI.*), and the affordances a caller may put
   // in their own `ui` (Picker.Clear) as much as the ones it puts in its slot.
+  // `ui={MyCard}`: a component the picker renders itself, told what it holds.
+  const UIComponent = typeof ui === "function" ? ui : null;
   const pickerContext = {
     value,
     placeholder,
     maxLines,
     id: inputProps.id,
     interactive,
+    loading,
     clearConfirm
   };
   return (
@@ -71741,7 +71899,17 @@ const PickerButton = props => {
                     size: rightSlotIconSize,
                     lineOverflow: "allow",
                     children: rightSlotIcon === undefined ? jsx(ChevronDownSvg$1, {}) : rightSlotIcon
-                  }) : jsx(PickerDefaultUI, {}) : ui
+                  }) : jsx(PickerDefaultUI, {}) : UIComponent ?
+                  // Told what the picker HOLDS — the value it just closed
+                  // on, before the server has said anything — so a façade
+                  // shows the answer at once, and the wait with it. The
+                  // same state usePickerState() hands an element (see the
+                  // `ui` doc).
+                  jsx(UIComponent, {
+                    value: value,
+                    loading: loading,
+                    interactive: interactive
+                  }) : ui
                 })
               })
             }), hasRightSlot ? jsx("span", {
@@ -72045,6 +72213,7 @@ const PickerStyleCSSVars = {
   "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"],
@@ -72129,7 +72298,7 @@ const PickerFirstResolver = props => {
  *   defaultValue?: any,
  *   name?: string,
  *   placeholder?: import("ignore:preact").ComponentChildren,
- *   ui?: import("ignore:preact").ComponentChildren | "default",
+ *   ui?: import("ignore:preact").ComponentChildren | "default" | import("ignore:preact").ComponentType<{ value: any, loading: boolean, interactive: boolean }>,
  *   required?: boolean,
  *   min?: Date | string | number,
  *   max?: Date | string | number,
@@ -72142,6 +72311,9 @@ const PickerFirstResolver = props => {
  *   action?: (value: any, event: Event) => void,
  *   children?: import("ignore:preact").ComponentChildren,
  *   mode?: "popover" | "dialog" | "callout",
+ *   openOn?: "press" | "longpress" | "contextmenu" | string | string[],
+ *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "growing" | `slide-from-${string}`,
+ *   animationDuration?: string,
  *   calloutStatus?: "info" | "warning" | "error" | "success" | "none",
  *   calloutIcon?: boolean,
  *   calloutCloseButton?: boolean,
@@ -72172,6 +72344,7 @@ const PickerFirstResolver = props => {
  *   dialogMaxHeight?: number | string,
  *   popupBackgroundColor?: string,
  *   popupBorderRadius?: number | string,
+ *   popupBoxShadow?: string,
  *   dialogBorderWidth?: number | string,
  *   clearable?: boolean,
  *   picksNothing?: boolean,
@@ -72184,6 +72357,7 @@ const PickerFirstResolver = props => {
  *   dialogExpand?: boolean,
  *   dialogExpandX?: boolean,
  *   dialogExpandY?: boolean,
+ *   dialogSizeFromAnchor?: boolean,
  *   marginWithContainer?: number | string,
  *   anchor?: import("ignore:preact").RefObject<HTMLElement> | HTMLElement,
  *   escapeEffect?: "cancel" | "close",
@@ -72201,7 +72375,29 @@ const PickerFirstResolver = props => {
  *   variant that paints the trigger transparent leaves the popup a real sheet.
  * @param {number|string} [popupBorderRadius] The popup's corners. Left out they
  *   echo the trigger's `borderRadius`.
- * @param {import("ignore:preact").ComponentChildren | "default"} [ui] What the
+ * @param {string} [popupBoxShadow] The popup's shadow, popover or dialog. Left
+ *   out it is the one every navi popup casts. `"none"` for a popup that is
+ *   not a sheet — a card lifted out of a page draws its own edges, and the
+ *   popup only carries it (see `dialogSizeFromAnchor`).
+ * @param {"press"|"longpress"|"contextmenu"|string|string[]} [openOn="press"]
+ *   What opens the popup. The press, by default — the way a native select
+ *   opens. Any other name is an interaction navi detects (see
+ *   docs/interactions.md: `"longpress"`, `"contextmenu"`, `"dblclick"`…), or
+ *   a list of them — `["longpress", "contextmenu"]` is the hold on a phone and
+ *   the right click at a desk. The picker declares it on itself, so it is
+ *   arbitrated like any other gesture: a swipe on the same card takes the
+ *   press a hold would have taken. A tap then opens nothing — the press stays
+ *   free for what the `ui` holds: a link in the card navigates, a button in it
+ *   presses, a picker in it opens on its own click, with nothing to declare
+ *   (`selfInteractions` is for a drawing that DOES open on the press). That
+ *   is what lets a whole card be a picker without every touch on it opening
+ *   the sheet — and the keyboard keeps its ways in (Enter, Space, the
+ *   arrows). A hold declared INSIDE the card (`interactions={{ longpress }}`
+ *   on something it holds) answers before this one: the nearer hold takes the
+ *   press, the way a click is the innermost target's. Being a gesture, the open goes through
+ *   the interaction gate as one: a `readOnly` picker refuses it and says so
+ *   where the finger is, whatever `openWhileReadOnly` says.
+ * @param {import("ignore:preact").ComponentChildren | "default" | import("ignore:preact").ComponentType} [ui] What the
  *   trigger draws in place of the value's default rendering (a date, a list
  *   joined by commas…) — and then all it draws: `placeholder` is not shown
  *   next to it, and an empty value is not greyed as a placeholder either: what
@@ -72230,6 +72426,20 @@ const PickerFirstResolver = props => {
  *   beside it, out of the flow so the rest keeps its width — is drawn and
  *   opens nothing; `pressPadding` is how far the press area follows it out
  *   there.
+ *
+ *   A drawing that follows what the picker HOLDS — the value the popup just
+ *   closed on, before the server has answered, the same state navi's own
+ *   default `ui` reads, rolled back if the action fails (`resetOnError`) —
+ *   reads it one of two ways. As a component, `ui={MyCard}`: the picker
+ *   renders it and hands it `value`, `loading` and `interactive` as props.
+ *   As an element, `ui={<MyCard game={game} />}`, with `usePickerState()`
+ *   inside it returning the same three — for a drawing that needs props of
+ *   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.
  * @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.
@@ -72245,7 +72455,10 @@ const PickerFirstResolver = props => {
  *   refuse the open as well, for a popup with nothing to read: a form of
  *   controls to fill in, a menu of gestures. Opening then only shows what is
  *   refused, so the picker says why on the trigger instead — where the
- *   interaction happened.
+ *   interaction happened. A busy picker follows the same rule: it still
+ *   opens to be read while its action runs, and with `false` the press is
+ *   refused with the wait as its reason — what a card that is syncing wants
+ *   for the sheet that would write it again.
  * @param {boolean|string} [error] Something went wrong around this picker (its
  *   content failed to load, its value could not be resolved…). Shown as a
  *   callout on the trigger, open or closed — the caller has nothing to place.
@@ -72312,7 +72525,14 @@ const PickerFirstResolver = props => {
  * @param {boolean} [picksNothing] The popup asks something rather than holding
  *   an answer, so the trigger draws a label and never a value: no chevron, no
  *   clear cross, in any variant. `type="confirm"` says it for itself; say it
- *   for a popup of your own that is a menu of actions rather than a choice.
+ *   for a popup of your own that is a menu of actions rather than a choice —
+ *   or a DOOR: a drawing that grows to be looked at (a weather scene, a plan),
+ *   with no `action` at all. The picker is then a trigger and a popup, and
+ *   nothing more: its close does nothing, and what it keeps from being a
+ *   control is what a door still needs — the role of a button, the keyboard
+ *   opening it, the anchor being itself, and one popup per instance without
+ *   an id to wire. See "The trigger wears the wait" in docs/popup_open.md for
+ *   when that beats a `Button` opening a shared `Dialog`.
  * @param {string|import("ignore:preact").ComponentChildren} [clearConfirm] The
  *   question asked before the clear cross clears anything — the `message` of
  *   the `<Picker type="confirm">` the cross then is, plain text or JSX. Asked
@@ -72333,7 +72553,10 @@ const PickerFirstResolver = props => {
  *   placed anywhere else. No right slot comes with it: a cross belongs inside
  *   that drawing, at the place and the size the drawing decides, so it is
  *   `<Picker.Clear />` the `ui` holds rather than `clearable` the picker
- *   takes. `"headless"` draws nothing either, and is not the `ui`'s box but
+ *   takes. What navi still draws on that box — the focus ring, the loading
+ *   outline — follows the picker's `borderRadius`, which stays the control's
+ *   unless told: a drawing with corners of its own states them on the picker
+ *   as well. `"headless"` draws nothing either, and is not the `ui`'s box but
  *   its parent's: it stretches to whatever positioned element holds it, for a
  *   picker put inside the thing that opens it (a button, a row) so that the
  *   popup hangs off that whole element. A picker opened from something it does
@@ -72419,6 +72642,23 @@ const PickerFirstResolver = props => {
  *   a dialog docked by `dockedOnSmallTouchScreen` withdraws it and stays
  *   container-wide, so both can be stated at once.
  * @param {number|string} [dialogMaxHeight] Same, on the height.
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"growing"|`slide-from-${string}`} [animation]
+ *   The popup's own (see Popover/Dialog). `"growing"` is the one a picker
+ *   whose `ui` is a whole piece of the page wants: the popup is the browser
+ *   morphing the trigger's box into what carries `data-grow` inside the popup
+ *   (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.
+ * @param {string} [animationDuration] The popup's own (`--popup-animation-duration`).
+ * @param {boolean} [dialogSizeFromAnchor] Dialog mode: the dialog is as wide
+ *   as the trigger — its box as a floor (Dialog's own `sizeFromAnchor`) and
+ *   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.
  * @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
@@ -84518,5 +84758,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map