@jsenv/navi 0.29.482 → 0.29.483

package/dist/jsenv_navi.js

@@ -953,6 +953,14 @@ const buttonI18n = /*#__PURE__*/ defineNaviMessages({
     en: "Remove",
     fr: "Retirer",
   },
+  "button.copy": {
+    en: "Copy",
+    fr: "Copier",
+  },
+  "button.copied": {
+    en: "Copied!",
+    fr: "Copié !",
+  },
 });
 
 // Spin messages — the ends of what one steps through when the control holding
@@ -3610,7 +3618,6 @@ const mergeActionParams = (currentParams, newParams) => {
   }
   return mergeTwoJsValues(currentParams, newParams);
 };
-
 const actionWeakMap = new WeakMap();
 /**
  * Wraps an async callback into an action: a question, its answer, and the
@@ -6959,6 +6966,32 @@ const notePageChange = () => {
 
 const isRenderingPageChange = () => renderingPageChange;
 
+// A browser refusing storage (blocked site data, some private windows) throws
+// on the first touch of window.localStorage, and a full one throws on setItem.
+// Either way what was to be kept lives in memory for the session, which is all
+// a persisted value can fall back to — so every access goes through here.
+
+const readLocalStorage = (key) => {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === null ? undefined : raw;
+  } catch {
+    return undefined;
+  }
+};
+
+const writeLocalStorage = (key, value) => {
+  try {
+    if (value === undefined) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, value);
+    }
+  } catch {
+    // Full, or refused: the value lives for the session only.
+  }
+};
+
 // Global signal registry for route template detection
 const globalSignalRegistry = new Map();
 
@@ -6993,7 +7026,6 @@ const generateSignalId = () => {
   const id = signalIdCounter++;
   return id;
 };
-
 /**
  * Creates an advanced signal with dynamic default value, local storage persistence, and validation.
  *
@@ -7189,27 +7221,19 @@ const stateSignal = (defaultValue, options = {}) => {
     fallback: () => getDefaultValue(false),
   });
   const readFromLocalStorage = persists
-    ? () => {
-        const raw = window.localStorage.getItem(localStorageKey);
-        if (raw === null) {
-          return undefined;
-        }
-        return raw;
-      }
+    ? () => readLocalStorage(localStorageKey)
     : () => undefined;
   const updateLocalStorage = persists
     ? () => {
-        const localStorageValue = validity.representations.localStorage.value;
-        if (localStorageValue === undefined) {
-          window.localStorage.removeItem(localStorageKey);
-        } else {
-          window.localStorage.setItem(localStorageKey, localStorageValue);
-        }
+        writeLocalStorage(
+          localStorageKey,
+          validity.representations.localStorage.value,
+        );
       }
     : () => {};
   const removeFromLocalStorage = persists
     ? () => {
-        window.localStorage.removeItem(localStorageKey);
+        writeLocalStorage(localStorageKey, undefined);
       }
     : () => {};
 
@@ -9960,16 +9984,14 @@ let isUpdatingRoutesFromUrl = false;
  *   route(`/games/:gameId=${gamePageIdSignal}`, { dropSearchParams: ["v"] });
  *   ```
  */
-const route = (
-  pattern,
-  {
+const route = (pattern, options = {}) => {
+  const {
     searchParams,
     params,
     redirectRoute,
     redirectRouteParams,
     dropSearchParams,
-  } = {},
-) => {
+  } = options;
   const routePattern = createRoutePattern(pattern, { searchParams, params });
   const { cleanPattern } = routePattern;
   const [publishStatus, subscribeStatus] = createPubSub();
@@ -11642,7 +11664,6 @@ const activeRouteReadsSignal = computed(() => {
   activeRouteReadsPrevious = reads;
   return reads;
 });
-
 /**
  * Binds an action to a route: it runs when the route matches, with the params
  * the effect reads off the address, runs again on a `reload()`, and is aborted
@@ -13481,6 +13502,12 @@ const stopLoad = (reason = "stopLoad() called") => {
  * actions of the routes matching the url run again (see routeAction), one that
  * failed included — what a "Retry" under a page that could not load calls.
  * The address, the history and the scroll stay as they are.
+ *
+ * Route actions only: a component's `useAsyncData(fn)`, or an action no route
+ * reads, is not asked again. Nor does it bring back code whose `import()`
+ * failed — the document refuses that address again without a request — so
+ * the way out of a failed import is a fresh document,
+ * `window.location.reload()` (docs/dynamic_import.md).
  */
 const reload = browserIntegration.reload;
 /**
@@ -24338,16 +24365,11 @@ const arraySignalMembership = (...args) => {
 };
 
 const localStorageSignal = (key) => {
-  const initialValue = localStorage.getItem(key);
-
-  const valueSignal = signal(initialValue === null ? undefined : initialValue);
+  const valueSignal = signal(readLocalStorage(key));
   effect(() => {
     const value = valueSignal.value;
-    if (value === undefined) {
-      localStorage.removeItem(key);
-    } else {
-      localStorage.setItem(key, value);
-    }
+    // Storage keeps strings: a null written as is would come back as "null".
+    writeLocalStorage(key, value === null ? undefined : value);
   });
 
   return valueSignal;
@@ -25193,12 +25215,51 @@ const resolveRerunOn = (rerunOn, inheritedRerunOn = defaultRerunOn) => {
   if (!rerunOn) {
     return inheritedRerunOn;
   }
+  assertRerunOnCanFire(rerunOn);
   return {
     GET: rerunOn.GET ?? inheritedRerunOn.GET,
     GET_MANY: rerunOn.GET_MANY ?? inheritedRerunOn.GET_MANY,
     GET_RANGE: rerunOn.GET_RANGE ?? inheritedRerunOn.GET_RANGE,
   };
 };
+// What can never fire throws, as a dependency name does (see
+// resolveDependency): a rerun that never happens leaves a read on its old
+// value with nothing to say so.
+const RERUN_READS = ["GET", "GET_MANY", "GET_RANGE"];
+const RERUN_VERBS = ["POST", "PUT", "PATCH", "DELETE", "*"];
+const assertRerunOnCanFire = (rerunOn) => {
+  for (const read of Object.keys(rerunOn)) {
+    if (!RERUN_READS.includes(read)) {
+      throw new Error(
+        `rerunOn: "${read}" is not a read that reruns — rerunOn takes GET, GET_MANY and GET_RANGE`,
+      );
+    }
+    const verbs = rerunOn[read];
+    if (
+      verbs === undefined ||
+      verbs === null ||
+      verbs === false ||
+      verbs === "*"
+    ) {
+      continue;
+    }
+    if (!Array.isArray(verbs)) {
+      throw new Error(
+        `rerunOn.${read}: ${JSON.stringify(verbs)} never fires — it takes false, "*" or a list of verbs`,
+      );
+    }
+    for (const verb of verbs) {
+      if (
+        typeof verb !== "string" ||
+        !RERUN_VERBS.includes(verb.toUpperCase())
+      ) {
+        throw new Error(
+          `rerunOn.${read}: ${JSON.stringify(verb)} never fires — rerunOn names verbs (POST, PUT, PATCH, DELETE or "*"): POST covers POST_MANY`,
+        );
+      }
+    }
+  }
+};
 
 // What a `dependencies` entry names are callbacks, not verbs (`rerunOn` names
 // verbs, where `PATCH` covers `PATCH_MANY`): one callback of a resource can be
@@ -26226,7 +26287,6 @@ const debug$2 = (...args) => {
     return;
   }
 };
-
 /**
  * Creates a reactive REST resource backed by a shared signal store.
  * Returns a `stateFacade` exposing one action per REST callback provided
@@ -26285,9 +26345,8 @@ const debug$2 = (...args) => {
  *   DELETE: ({ id }) => fetchJson(`/users/${id}`, { method: "DELETE" }),
  * });
  */
-const resource = (
-  name,
-  {
+const resource = (name, restCallbacks = {}) => {
+  const {
     // configuration options
     idKey = "id",
     uniqueKeys = [],
@@ -26306,8 +26365,7 @@ const resource = (
     PATCH_MANY,
     DELETE,
     DELETE_MANY,
-  } = {},
-) => {
+  } = restCallbacks;
   const declarationSite = getDeclarationSite();
   const setupCallbackSet = new Set();
   const addItemSetup = (callback) => {
@@ -28199,8 +28257,8 @@ const valueInLocalStorage = (key, { type = "any" } = {}) => {
   const converter = TYPE_CONVERTERS[type];
 
   const get = () => {
-    let valueInLocalStorage = window.localStorage.getItem(key);
-    if (valueInLocalStorage === null) {
+    const valueInLocalStorage = readLocalStorage(key);
+    if (valueInLocalStorage === undefined) {
       return undefined;
     }
     let valueToReturn = valueInLocalStorage;
@@ -28224,7 +28282,7 @@ const valueInLocalStorage = (key, { type = "any" } = {}) => {
 
   const set = (value) => {
     if (value === undefined) {
-      window.localStorage.removeItem(key);
+      writeLocalStorage(key, undefined);
       return;
     }
     let valueToStore = value;
@@ -28232,10 +28290,10 @@ const valueInLocalStorage = (key, { type = "any" } = {}) => {
       const valueEncoded = converter.encode(valueToStore);
       valueToStore = valueEncoded;
     }
-    window.localStorage.setItem(key, valueToStore);
+    writeLocalStorage(key, valueToStore);
   };
   const remove = () => {
-    window.localStorage.removeItem(key);
+    writeLocalStorage(key, undefined);
   };
 
   return [get, set, remove];
@@ -28455,7 +28513,8 @@ const useForceRender = () => {
  *
  * @example <caption>Handle error inline</caption>
  * const [user, , error] = useAsyncData(userAction, { error: true });
- * if (error) return <ErrorCard message={error.message} />;
+ * // A failed refresh keeps `user`: only a first load has nothing else to show.
+ * if (error && user === undefined) return <ErrorCard message={error.message} />;
  *
  * @example <caption>Say the failure over the rows already on screen</caption>
  * const [items, , error, dismissError] = useAsyncData(listAction, { error: true });
@@ -40264,9 +40323,12 @@ const confirmCommand = (source, event) => {
         event,
         source: commandSource,
       });
+      // Carried by the close too: a Dialog or a Popover answers the yes in
+      // its onClose (detail.isConfirm), the twin of isCancel.
       return dispatchCustomEvent(target, "navi_request_close", {
         event,
         source: commandSource,
+        isConfirm: true,
       });
     },
   };
@@ -47488,26 +47550,33 @@ const useControlUIState = (ref, uiStateInitial) => {
     if (!element) {
       return undefined;
     }
-    // The host, not the box around it: a control is a whole little tree (a
-    // picker is a box holding an input) and the state is announced on the one
-    // element that holds it. Same resolution every request goes through, see
-    // ui_state_dom.js.
-    const host = findControlHost(element) || element;
-    // Asked once here rather than trusted from the props above: between the
-    // first render and this effect the control has read its own value prop, its
-    // defaultValue and any signal it was bound to, and settled which of them
-    // wins — the answer to that is on the element, not in what we were handed.
-    setUIState(getUIStateFromElement(host));
-    const onUIStateChange = e => {
-      setUIState(e.detail.value);
-    };
-    host.addEventListener("navi_ui_state_change", onUIStateChange);
-    return () => {
-      host.removeEventListener("navi_ui_state_change", onUIStateChange);
-    };
+    return subscribeToControlUIState(element, setUIState);
   }, [ref]);
   return uiState;
 };
+/**
+ * Calls `callback` with what the control `element` holds, right away and on
+ * every change. Returns the teardown.
+ */
+const subscribeToControlUIState = (element, callback) => {
+  // The host, not the box around it: a control is a whole little tree (a
+  // picker is a box holding an input) and the state is announced on the one
+  // element that holds it. Same resolution every request goes through, see
+  // ui_state_dom.js.
+  const host = findControlHost(element) || element;
+  // Asked once here rather than trusted from props: by the time this runs the
+  // control has read its own value prop, its defaultValue and any signal it
+  // was bound to, and settled which of them wins — the answer to that is on
+  // the element.
+  callback(getUIStateFromElement(host));
+  const onUIStateChange = e => {
+    callback(e.detail.value);
+  };
+  host.addEventListener("navi_ui_state_change", onUIStateChange);
+  return () => {
+    host.removeEventListener("navi_ui_state_change", onUIStateChange);
+  };
+};
 
 /**
  * Like `useControlProps` but also establishes a 1:1 facade sync between the
@@ -52151,8 +52220,8 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  *   those instead.
  * @param {string} [props.value] - Value emitted by the control facade
  *   (`navi_value`); defaults to `href`.
- * @param {boolean} [props.current] - Forces the "current" state on (otherwise
- *   derived from the href/route).
+ * @param {boolean} [props.current] - Forces the "current" state: `true` on,
+ *   `false` off. Left out, it is derived from the href/route.
  * @param {object|object[]} [props.currentExcept] -
  *   Route(s) inside this link's own that are NOT it: while one of them matches,
  *   the link is not current even though its route still is. A bar entry
@@ -52294,7 +52363,10 @@ const LinkWithRoute = ({
     except: currentExcept,
     also: currentAlso
   });
-  const innerCurrent = current || linkMatching;
+  // Always a boolean from here: LinkPlain takes a given `current` as the
+  // answer, so an href matching the address cannot relight what
+  // currentExcept turned off.
+  const innerCurrent = current ?? linkMatching;
 
   // What a childless link shows is LinkPlain's call (hrefFallback); a route
   // only says it the way its pattern writes it, not as the resolved href.
@@ -52378,7 +52450,7 @@ const LinkPlain = props => {
   } = getHrefTargetInfo(href, documentUrlSignal.peek());
   // A tab that is a SLIDE is current when the container is on it — which the
   // <Nav> around reads off that container, so nothing here has to be told.
-  const innerCurrent = current || (slide ? nav?.currentSlideArea === slide : isCurrent);
+  const innerCurrent = current ?? (slide ? nav?.currentSlideArea === slide : isCurrent);
   useReportCurrentToBinderItem(innerCurrent);
   controlHostProps.basePseudoState = {
     ...basePseudoState,
@@ -57109,6 +57181,8 @@ const ButtonUI = props => {
   // Where the href leads next to the page one is on (the target, the rel, the
   // current state) is resolved above, by ButtonHrefResolver.
   const as = href === undefined ? "button" : "a";
+  // What `data-href-current` paints, said to assistive tech as a link says it.
+  const ariaCurrent = as === "a" && props.pseudoState?.[":-navi-href-current"] ? "page" : undefined;
 
   // Worn as an attribute, like a link's (see link_replace.js): read off the
   // anchor by the click handler, off the source by --navi-nav-to.
@@ -57145,6 +57219,7 @@ const ButtonUI = props => {
     // caller's props, so their own flex direction wins.
     ,
     flex: icon ? "x" : undefined,
+    "aria-current": ariaCurrent,
     ...buttonControlRootProps,
     ...buttonControlHostProps,
     // eslint-disable-next-line react/no-children-prop
@@ -57497,7 +57572,10 @@ const ButtonHrefResolver = props => {
 // Whether the href is the page one is on depends on the address, and re-renders
 // the button only when it flips (see useHrefTargetFlag). Whether it leaves the
 // site does not depend on the address.
-const ButtonWithHref = props => {
+const ButtonWithHref = ({
+  current,
+  ...props
+}) => {
   const Next = useNextResolver();
   const {
     href,
@@ -57518,7 +57596,7 @@ const ButtonWithHref = props => {
     // the state.
     ,
     pseudoState: {
-      ":-navi-href-current": isCurrent,
+      ":-navi-href-current": current ?? isCurrent,
       ...pseudoState
     }
   });
@@ -57540,13 +57618,20 @@ const ButtonWithRoute = props => {
   const {
     route,
     routeParams,
+    current,
+    currentExcept,
+    currentAlso,
     children,
     pseudoState,
     href,
     ...rest
   } = props;
   const url = route.buildUrl(routeParams);
-  const linkMatching = useRouteCurrent(route, routeParams);
+  // What a route Link reads, with the same amendments (see link.jsx).
+  const linkMatching = useRouteCurrent(route, routeParams, {
+    except: currentExcept,
+    also: currentAlso
+  });
 
   // Merged into whatever the caller already holds: a button can be forced into
   // a state for a demo and still learn its own current-ness from its route.
@@ -57554,7 +57639,7 @@ const ButtonWithRoute = props => {
     href: url,
     pseudoState: {
       ...pseudoState,
-      ":-navi-href-current": linkMatching
+      ":-navi-href-current": current ?? linkMatching
     },
     ...rest,
     children: children || route.buildRelativeUrl(routeParams)
@@ -57673,8 +57758,23 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   actionStandalone?: boolean,
  *   actionAbortable?: boolean,
  *   optimistic?: boolean,
+ *   route?: object,
+ *   routeParams?: object,
+ *   current?: boolean,
+ *   currentExcept?: object | object[],
+ *   currentAlso?: object | object[],
  *   [key: string]: any,
  * }>}
+ * @param {object} [route] Where the press leads, as a `<Link route>` says it:
+ *   the button is drawn as an `<a>` to the route's url (with `routeParams`),
+ *   and says whether it is the page one is on — `[data-href-current]` for the
+ *   eye, `aria-current="page"` for assistive tech. A bar entry drawn as a
+ *   button for its press feedback.
+ * @param {boolean} [current] Forces that "current" state: `true` on, `false`
+ *   off. Left out, it is read from the route (or the `href`).
+ * @param {object|object[]} [currentExcept] Route(s) inside the button's own
+ *   that are NOT it, and `currentAlso` route(s) beside it that are: what they
+ *   mean on a `<Link>`.
  * @param {boolean} [replace] Go where the press leads — an `href`, a
  *   `--navi-nav-to` command — by TAKING THE PLACE of the current history entry
  *   rather than stacking on it: what `<Link replace>` says, for a press drawn
@@ -61645,36 +61745,61 @@ const Textarea = ({
  * typed over how many the limit allows, the way Material writes it (just the
  * count when there is no `maxLength`). Where it goes is the caller's call,
  * which is why it is a separate component rather than something the textarea
- * draws: put it under the box, in a form footer, next to a label, and feed it
- * the same value or signal as the textarea.
+ * draws: put it under the box, in a form footer, next to a label, and point
+ * it at the textarea with `for`.
  *
  * @type {import("preact").FunctionComponent<{
+ *   for?: string,
  *   value?: string,
  *   signal?: import("@preact/signals").Signal<string>,
  *   maxLength?: number,
  *   [key: string]: any,
  * }>}
- * @param {string} [value] The text being counted. Say `signal` instead for a
- *   two-way bound textarea: reading it here subscribes the count to it.
+ * @param {string} [for] The `id` of the Textarea counted: the count reads
+ *   what it holds, so the field stays a plain one (`defaultValue={record.bio}`)
+ *   with no signal bound only for the counter's sake. The limit defaults to
+ *   that Textarea's `maxLength` (or `maxLengthGuard`).
+ * @param {string} [value] The text being counted, when it is not read from a
+ *   Textarea. Say `signal` instead to subscribe the count to it.
  * @param {number} [maxLength] The limit, shown after the count ("50/200").
  *   Without it the count stands alone.
  */
 const TextareaCharCount = ({
+  for: controlId,
   value,
   signal,
   maxLength,
   ...rest
 }) => {
   import.meta.css = [css$J, "@jsenv/navi/src/control/input/textarea.jsx"];
-  const resolvedValue = signal ? signal.value : value;
+  const [controlText, controlMaxLength] = useTextOfControl(controlId);
+  const resolvedValue = controlId ? controlText : signal ? signal.value : value;
   const length = typeof resolvedValue === "string" ? resolvedValue.length : 0;
+  const limit = maxLength ?? controlMaxLength;
   return jsx(Box, {
     as: "span",
     baseClassName: "navi_textarea_char_count",
     ...rest,
-    children: maxLength === undefined ? length : `${length}/${maxLength}`
+    children: limit === undefined ? length : `${length}/${limit}`
   });
 };
+const useTextOfControl = controlId => {
+  const [text, setText] = useState();
+  const [maxLength, setMaxLength] = useState();
+  useLayoutEffect(() => {
+    if (!controlId) {
+      return undefined;
+    }
+    const element = document.getElementById(controlId);
+    if (!element) {
+      return undefined;
+    }
+    const controlProps = getUIStateControllerById(controlId)?.props;
+    setMaxLength(controlProps?.maxLength ?? controlProps?.maxLengthGuard);
+    return subscribeToControlUIState(element, setText);
+  }, [controlId]);
+  return [text, maxLength];
+};
 
 // `field-sizing: content` sizes the box from the value, and an empty field has
 // none — the placeholder is text the browser refuses to make room for. So the
@@ -70426,6 +70551,8 @@ const css$C = /* css */`
  *   actually closes — not preventable: it is the close happening, not a
  *   request. What refuses a close is navi's: a control inside still
  *   running its action (see popup_busy.js for the runs that let it through).
+ *   `event.detail.isCancel` says the close meant "revert", and
+ *   `event.detail.isConfirm` that a `--navi-confirm` said yes.
  * @param {boolean|string|{id?: string, type?: "push"|"replace"}} [props.navState] -
  *   Keeps the open state in the history entry, so a screen left and come back
  *   to finds this popup as it was — open, and without an entrance playing: it
@@ -70662,6 +70789,7 @@ const UncontrolledDialog = props => {
     onnavi_request_close: e => {
       const closing = openController.requestClose(e, {
         isCancel: e.detail?.isCancel,
+        isConfirm: e.detail?.isConfirm,
         requester: e.detail?.source
       });
       if (!closing) {
@@ -72423,6 +72551,8 @@ const css$B = /* css */`
  *   actually closes — not preventable: it is the close happening, not a
  *   request. What refuses a close is navi's: a control inside still
  *   running its action (see popup_busy.js for the runs that let it through).
+ *   `event.detail.isCancel` says the close meant "revert", and
+ *   `event.detail.isConfirm` that a `--navi-confirm` said yes.
  * @param {boolean|string|{id?: string, type?: "push"|"replace"}} [props.navState] -
  *   Keeps the open state in the history entry, so a screen left and come back
  *   to finds this popup as it was — open, and without an entrance playing: it
@@ -72542,7 +72672,8 @@ const UncontrolledPopover = props => {
     },
     onnavi_request_close: e => {
       const closing = openController.requestClose(e, {
-        isCancel: e.detail?.isCancel
+        isCancel: e.detail?.isCancel,
+        isConfirm: e.detail?.isConfirm
       });
       if (!closing) {
         // Said back to whoever asked: --navi-close:all stops climbing here.
@@ -74614,6 +74745,7 @@ const PickerCustom = props => {
           allowed: () => {
             const closing = requestClose(e, {
               isCancel: e.detail.isCancel,
+              isConfirm: e.detail.isConfirm,
               isSend: e.detail.isSend
             });
             if (!closing) {
@@ -77667,6 +77799,11 @@ const css$v = /* css */`@property --list-group-label-height {
     --list-item-background-color-highlight: #ffe066;
     display: inline-block;
   }
+
+  .navi_list_item_group[data-label-in-flow] > .navi_list_item_group_label {
+    background-color: #0000;
+    display: block;
+  }
 }
 
 .navi_list_item_group_label {
@@ -78014,16 +78151,7 @@ const css$v = /* css */`@property --list-group-label-height {
   min-width: 100%;
 
   & .navi_list_item_group_label {
-    top: var(--list-group-label-top, var(--x-list-group-label-top, 0px));
-    z-index: var(--list-group-label-z-index);
-    background-color: var(--list-group-label-background-color);
     user-select: none;
-    display: block;
-    position: sticky;
-
-    &[navi-stuck] {
-      z-index: var(--list-group-label-z-index-stuck);
-    }
 
     &[navi-default] {
       color: light-dark(#888, #aaa);
@@ -78039,6 +78167,18 @@ const css$v = /* css */`@property --list-group-label-height {
     }
   }
 
+  &:not([data-label-in-flow]) > .navi_list_item_group_label {
+    top: var(--list-group-label-top, var(--x-list-group-label-top, 0px));
+    z-index: var(--list-group-label-z-index);
+    background-color: var(--list-group-label-background-color);
+    display: block;
+    position: sticky;
+
+    &[navi-stuck] {
+      z-index: var(--list-group-label-z-index-stuck);
+    }
+  }
+
   & .navi_list_item_group_list {
     --list-group-label-height: inherit;
     flex-direction: column;
@@ -78057,6 +78197,20 @@ const css$v = /* css */`@property --list-group-label-height {
     }
   }
 
+  &[data-label-in-flow] {
+    & .navi_list_item_group_list .navi_list_item {
+      scroll-margin-top: var(--x-list-scroll-spacing-top);
+    }
+
+    & .navi_list_item_group_list > .navi_list_item:first-child {
+      scroll-margin-top: calc(var(--x-list-scroll-spacing-top) + var(--list-group-label-height));
+    }
+
+    &[data-continued] > .navi_list_item_group_label {
+      visibility: hidden;
+    }
+  }
+
   &[data-hidden-while-empty]:not(:has([navi-list-item-real])) {
     display: none;
   }
@@ -78829,6 +78983,15 @@ const useListScrollSync = ({
   // partly in view. After it, the quarter a window keeps behind the screen
   // (see evaluateWindow), until the screen sizes it around that item.
   const itemsAboveOpening = (openAt, windowSize) => {
+    // An item placed in the middle of the view, or at its end, has the items
+    // before it on screen from the first paint.
+    const align = openAt && typeof openAt === "object" ? openAt.align : undefined;
+    if (align === "center") {
+      return Math.floor(windowSize / 2);
+    }
+    if (align === "end") {
+      return windowSize - 1;
+    }
     if (stageRef.current !== "steady") {
       return openAt && typeof openAt === "object" && openAt.offset > 0 ? 1 : 0;
     }
@@ -79369,22 +79532,30 @@ const useListScrollSync = ({
       return;
     }
     if (typeof openAt === "object" && openAt.id !== undefined) {
-      placeItem(findItemElement(getListEl(), openAt.id), openAt.offset || 0);
+      placeItem(findItemElement(getListEl(), openAt.id), openAt.offset || 0, openAt.align);
     }
   };
   // An item is placed by measuring it where it is drawn — named, or at the
   // place a number says — so it lands where it should whatever the items
   // above it weigh, and wherever the list starts in the box that scrolls it.
   // The window frames it from the first commit on (see holdWindow).
-  const placeItem = (itemEl, offset) => {
+  const placeItem = (itemEl, offset, align = "start") => {
     if (!itemEl) {
       return;
     }
     const scrollerEl = getScroller();
+    // Measured in the scroller's own pixels, the ones a scroll is written in.
+    const scale = readScrollerScale(scrollerEl, horizontal);
     const viewportRect = getScrollerViewportRect(scrollerEl);
     const itemRect = itemEl.getBoundingClientRect();
-    const offsetWanted = resolveOpenOffset(getItemScrollInset(scrollerEl, itemEl, horizontal) + offset, horizontal ? viewportRect.width : viewportRect.height, horizontal ? itemRect.width : itemRect.height);
-    const offsetNow = horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top;
+    const viewportSize = (horizontal ? viewportRect.width : viewportRect.height) / scale;
+    const itemSize = (horizontal ? itemRect.width : itemRect.height) / scale;
+    const scrollInset = getItemScrollInset(scrollerEl, itemEl, horizontal);
+    // Centred in what the room at the start leaves of the view (a fixed bar,
+    // a sticky header), not in the whole of it.
+    const alignedOffset = align === "center" ? scrollInset + (viewportSize - scrollInset - itemSize) / 2 : align === "end" ? viewportSize - itemSize : scrollInset;
+    const offsetWanted = resolveOpenOffset(alignedOffset + offset, viewportSize, itemSize);
+    const offsetNow = (horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top) / scale;
     const scrollNow = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
     const delta = offsetNow - offsetWanted;
     if (delta > -0.5 && delta < 0.5) {
@@ -80237,6 +80408,25 @@ const useListScrollSync = ({
 // The band of the scroller the user actually sees. A page-level scroller is
 // the viewport itself — its own box is the whole document, which says nothing
 // about what is on screen.
+// A scroller drawn under a transform (a popup scaling in from its trigger)
+// shows a rect of another size than the box it scrolls: the ratio of the two
+// turns what the screen measures into the scroller's own pixels. A rounding
+// of the box's size is not a scale.
+const readScrollerScale = (scrollerEl, horizontal) => {
+  if (scrollerEl === document.scrollingElement) {
+    return 1;
+  }
+  const size = horizontal ? scrollerEl.offsetWidth : scrollerEl.offsetHeight;
+  if (!size) {
+    return 1;
+  }
+  const rect = scrollerEl.getBoundingClientRect();
+  const scale = (horizontal ? rect.width : rect.height) / size;
+  if (!scale || scale > 0.99 && scale < 1.01) {
+    return 1;
+  }
+  return scale;
+};
 const getScrollerViewportRect = scrollerEl => {
   if (scrollerEl === document.scrollingElement) {
     const width = document.documentElement.clientWidth;
@@ -80311,7 +80501,7 @@ const canScrollerScroll = (scrollerEl, axis) => {
 // horizontally on mobile, where `overflow-x: clip` keeps that guarantee without
 // making a scroll container, or to let a wide table scroll sideways, where the
 // header cannot stick to both boxes.
-const STICKY_LIST_PART_SELECTOR = `.navi_list_item_header, .navi_list_item_footer, .navi_list_item_group_label`;
+const STICKY_LIST_PART_SELECTOR = `.navi_list_item_header, .navi_list_item_footer, .navi_list_item_group:not([data-label-in-flow]) > .navi_list_item_group_label`;
 const useStickyScrollportWarning = (ref, scroller, getScroller, horizontal) => {
   useRef(false);
   useLayoutEffect(() => {
@@ -82341,6 +82531,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   groupBy?: (item: any, index: number) => any,
  *   renderGroupLabel?: (item: any, index: number) => import("preact").ComponentChildren,
  *   groupLabelProps?: (item: any, index: number) => object,
+ *   groupLabelSticky?: boolean,
  *   pageSize?: number,
  *   memoryBudget?: number,
  *   renderSkeleton?: false | ((index: number) => import("preact").ComponentChildren),
@@ -82405,6 +82596,12 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   its group (a day behind us, today, one ahead) rather than just naming it:
  *   the state then sits on the element the CSS styles, instead of being read
  *   back from a child.
+ * @param {boolean} [props.groupLabelSticky=true]
+ *   `false`: the label stays in the flow, a boundary scrolled past with its
+ *   group instead of riding the top of the screen — a thread of days whose
+ *   cards must not slide under a band, a "past" line in a list the page
+ *   scrolls. It paints nothing of its own then: its display and background
+ *   are defaults a `groupLabelProps` class takes back.
  * @param {number} [props.pageSize=100]
  *   How many items to ask for at a time. A turn of the wheel opens a hole three
  *   items wide; asking for exactly that would ask again at the next turn.
@@ -82589,6 +82786,7 @@ const useRunItems = (store, {
   groupBy,
   renderGroupLabel,
   groupLabelProps,
+  groupLabelSticky = true,
   renderSkeleton,
   renderError
 }) => {
@@ -82848,6 +83046,7 @@ const useRunItems = (store, {
     nodes.push(jsx(ListItemGroup, {
       label: group.label,
       labelProps: group.labelProps,
+      labelSticky: groupLabelSticky,
       continued: group.continued,
       children: group.children
     }, groupCount === 1 ? `${ownerId}_group_${group.key}` : `${ownerId}_group_${group.key}_${groupCount}`));
@@ -83843,6 +84042,7 @@ const useItemStore = ({
 const ListItemGroup = ({
   label,
   labelProps,
+  labelSticky = true,
   hiddenWhileEmpty,
   continued,
   children,
@@ -83888,6 +84088,7 @@ const ListItemGroup = ({
     role: "presentation",
     "data-hidden-while-empty": hiddenWhileEmpty ? "" : undefined,
     "data-continued": continued,
+    "data-label-in-flow": labelSticky ? undefined : "",
     children: [jsx("span", {
       ...labelRest,
       ref: labelRef,
@@ -83955,8 +84156,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   renderBudget?: number | string | {initial?: number | string, after?: number | string},
  *   virtualItemSize?: number,
  *   onListVisibleItemsChange?: (visibleItems: any[]) => void,
- *   scrolled?: "start" | "end" | number | {id: string, offset?: number},
- *   defaultScrolled?: "start" | "end" | number | {id: string, offset?: number},
+ *   scrolled?: "start" | "end" | number | {id: string, offset?: number, align?: "start" | "center" | "end"},
+ *   defaultScrolled?: "start" | "end" | number | {id: string, offset?: number, align?: "start" | "center" | "end"},
  *   onScrolledChange?: (scrolled: {id: string, index: number, offset: number}) => void,
  *   scroller?: "self" | "parent" | "document" | Element | {current: Element},
  *   hoverWhileScrolling?: boolean,
@@ -84060,7 +84261,7 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   are skeletons, the others hold their room. `0` says the list is already
  *   known to be empty: the empty `fallback` shows right away rather than an
  *   empty frame.
- * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, visibleCount?: number}} [props.defaultScrolled="start"]
+ * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, align?: "start"|"center"|"end", visibleCount?: number}} [props.defaultScrolled="start"]
  *   Where the list opens, after which the user owns the scroll — unless it is
  *   being come back to (see `scrollResetOnNavigation`). `"end"` is a
  *   thread read backwards — the last items are the ones to show, and the ones
@@ -84075,10 +84276,13 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   room has to be restated as a number by whoever asks. The `index` and
  *   `visibleCount` it also hands out say where to aim before the item is found,
  *   and how many items to draw before the first paint (see `renderBudget`).
+ *   `align: "center"` puts the item in the middle of the view instead (`"end"`:
+ *   at its far edge) — the chosen level of a horizontal scale opening on it —
+ *   and keeps it there while the box around it grows, until the user scrolls.
  *   A value that changes before anyone has moved the list is followed (a place
  *   read from a count that answered again): it is compared by value, so it can
  *   be computed at every render.
- * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, visibleCount?: number}} [props.scrolled]
+ * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, align?: "start"|"center"|"end", visibleCount?: number}} [props.scrolled]
  *   The same, but held: the list goes back there every time this changes, even
  *   after the user has scrolled — the caller owns where the list is (see
  *   `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
@@ -85580,6 +85784,7 @@ const css$r = /* css */`@layer navi {
     --picker-font-size: var(--navi-control-font-size);
     --picker-font-family: var(--navi-control-font-family, inherit);
     --picker-loader-color: var(--navi-loader-color);
+    --picker-cta-background-color: var(--navi-accent-color);
     --picker-border-color: var(--navi-control-border-color);
     --picker-background-color: white;
     --picker-color: currentColor;
@@ -85678,7 +85883,7 @@ const css$r = /* css */`@layer navi {
     line-height: inherit;
   }
 
-  .navi_picker[data-variant="button"] {
+  .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-align-x-default: center;
@@ -85696,6 +85901,49 @@ const css$r = /* css */`@layer navi {
     --picker-text-align-default: center;
   }
 
+  .navi_picker[data-variant="border"] {
+    --picker-background-color: transparent;
+    --picker-background-color-hover: color-mix(in srgb,
+        currentColor 8%,
+        var(--picker-background-color));
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+  }
+
+  .navi_picker[data-variant="discrete-border"] {
+    --picker-background-color: transparent;
+    --picker-background-color-hover: var(--picker-background-color);
+    --picker-background-color-readonly: var(--picker-background-color);
+    --picker-background-color-disabled: var(--picker-background-color);
+  }
+
+  .navi_picker[data-cta] {
+    --picker-background-color: var(--picker-cta-background-color);
+    --picker-border-color: var(--picker-cta-background-color);
+    --picker-color: white;
+    --picker-background-color-hover: color-mix(in srgb,
+        var(--picker-background-color) 85%,
+        white);
+    --picker-border-color-hover: color-mix(in srgb,
+        var(--picker-border-color) 85%,
+        white);
+    --picker-background-color-readonly: color-mix(in srgb,
+        var(--picker-background-color) 50%,
+        white);
+    --picker-border-color-readonly: color-mix(in srgb,
+        var(--picker-border-color) 50%,
+        white);
+    --picker-background-color-disabled: color-mix(in srgb,
+        var(--picker-background-color) 40%,
+        white);
+    --picker-border-color-disabled: color-mix(in srgb,
+        var(--picker-border-color) 40%,
+        white);
+    --picker-color-disabled: color-mix(in srgb,
+        var(--picker-color) 60%,
+        transparent);
+  }
+
   .navi_picker[data-variant="text"] {
     --picker-padding-x-default: 0;
     --picker-padding-y-default: 0;
@@ -85976,6 +86224,18 @@ const css$r = /* css */`@layer navi {
     --x-picker-cursor: default;
   }
 
+  &[data-variant="discrete-border"] {
+    --x-picker-border-color: transparent;
+
+    &[data-hover] {
+      --x-picker-border-color: var(--picker-border-color-hover);
+    }
+
+    &[data-readonly], &[data-disabled] {
+      --x-picker-border-color: transparent;
+    }
+  }
+
   &[data-callout] {
     --x-picker-border-color: var(--callout-color);
   }
@@ -86056,6 +86316,8 @@ const PickerButton = props => {
     // The trigger is one icon — its box is that icon's, the way <Button icon>
     // means it. A shape, so it composes with the variant painting around it.
     icon,
+    // A call to action, filled with the accent: what `cta` is on a Button.
+    cta,
     rightSlotIcon,
     rightSlotIconSize = "inherit",
     // What goes in the right slot as-is — no <Icon> around it, so a caller can
@@ -86133,7 +86395,9 @@ const PickerButton = props => {
   // after it, before it, or out of the flow altogether.
   const isBare = variant === "bare";
   const bareChevron = isBare && chevron !== undefined ? chevron : undefined;
-  const hasRightSlot = !picksNothing && rightSlot !== null && !isIcon && variant !== "headless" && variant !== "button" && variant !== "text" && (!isBare || bareChevron !== undefined) && ui !== "default";
+  // The Button's own looks: a label, no slot after it.
+  const drawnAsButton = variant === "button" || variant === "border" || variant === "discrete-border";
+  const hasRightSlot = !picksNothing && rightSlot !== null && !isIcon && variant !== "headless" && !drawnAsButton && variant !== "text" && (!isBare || bareChevron !== undefined) && ui !== "default";
   // How far the press must follow a hanging chevron: its size, as a length the
   // input's inset can add up. "inherit" is 1em of the picker's own font, which
   // the input shares (font: inherit), so the em the icon is drawn in and the
@@ -86231,6 +86495,7 @@ const PickerButton = props => {
         baseClassName: "navi_picker",
         pseudoClasses: PICKER_BUTTON_PSEUDO_CLASSES,
         "data-variant": variant,
+        "data-cta": cta ? "" : undefined,
         "data-icon": isIcon ? "" : undefined,
         "data-chevron": hasRightSlot ? bareChevron : undefined,
         "navi-picker": "",
@@ -86241,6 +86506,7 @@ const PickerButton = props => {
         basePseudoState: basePseudoState,
         styleCSSVars: PickerStyleCSSVars,
         variant: undefined,
+        cta: undefined,
         icon: undefined
         // The caller's own role goes onto the host, beside the name (see
         // control_context.js): a role and a name on two different elements
@@ -86399,7 +86665,7 @@ const PickerButton = props => {
               // caller is drawing there ("no filter", "anywhere"), so how it
               // looks empty stays theirs (documented on the ui prop below).
               ,
-              "navi-placeholder": (ui === undefined || pickerUIIsNaviOwn(ui)) && variant !== "button" && variant !== "text" && uiStateHoldsNothing(value) ? "" : undefined,
+              "navi-placeholder": (ui === undefined || pickerUIIsNaviOwn(ui)) && !drawnAsButton && variant !== "text" && uiStateHoldsNothing(value) ? "" : undefined,
               maxLines: maxLines,
               children: jsx(PickerOwnContent, {
                 children: jsx(MaxLinesContext.Provider, {
@@ -86855,7 +87121,8 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   popupWidthFitContent?: boolean,
  *   loadingOutline?: "custom",
  *   loadingOutlineInset?: number,
- *   variant?: "icon" | "circle" | "headless" | "discrete" | "button" | "text" | "bare" | "picker",
+ *   variant?: "icon" | "circle" | "headless" | "discrete" | "button" | "border" | "discrete-border" | "text" | "bare" | "picker",
+ *   cta?: boolean,
  *   icon?: boolean,
  *   alignX?: "start" | "center" | "end",
  *   alignY?: "start" | "center" | "end" | "stretch",
@@ -87120,10 +87387,13 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   receives the cleared value like any other choice. A cut (Ctrl+X) on such a
  *   picker copies the value and leaves it in place: no clear without the
  *   question.
- * @param {"icon"|"headless"|"discrete"|"button"|"text"|"bare"|"picker"} [variant]
+ * @param {"icon"|"headless"|"discrete"|"button"|"border"|"discrete-border"|"text"|"bare"|"picker"} [variant]
  *   How the trigger is drawn. `"button"` is a Button's drawing — surface,
  *   padding, a centered label, no chevron — and what a `type="confirm"` picker
  *   draws unless told otherwise: nothing is picked, the popup is a question.
+ *   `"border"` and `"discrete-border"` are the Button's two other looks, from
+ *   its own formulas: a picker swapped in for a Button that opened a popup
+ *   looks the same at rest, on hover and read-only.
  *   `"text"` is a word in a sentence, underlined with dots, no box and no
  *   slot: what `mode="callout"` uses for a callout on a term rather than on an
  *   icon (`"icon"` being its default, with an info icon in place of the
@@ -87147,6 +87417,9 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   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 {boolean} [cta] A call to action: filled with the accent, its border
+ *   matching, as `cta` draws a Button — for a confirm picker that is a row's
+ *   main action.
  * @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
@@ -87656,8 +87929,13 @@ const TRAVELS_NONE = [];
  *   vertical?: boolean,
  *   previousLabel?: string,
  *   nextLabel?: string,
+ *   previousTestId?: string,
+ *   nextTestId?: string,
  *   [key: string]: any,
  * }>}
+ * @param {string} [previousTestId] The `data-testid` of the way out to the
+ *   previous value, which navi builds and the caller has no other way to name.
+ *   `nextTestId` is its twin.
  * @param {any} [value] The value shown. Held from above: `uiAction` says when
  *   it should move. Say `signal` for a two-way binding instead, or
  *   `defaultValue` to let the spin hold the value itself.
@@ -87739,6 +88017,8 @@ const Spin = ({
   maxLines,
   previousLabel,
   nextLabel,
+  previousTestId,
+  nextTestId,
   ...rest
 }) => {
   import.meta.css = [css$q, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
@@ -88050,6 +88330,7 @@ const Spin = ({
       unavailable: !allowed || loadingResolved || readOnlyResolved,
       unavailableMessage: () => wayOutMessage(allowed, isNext),
       label: isNext ? nextLabel ?? spinI18n("spin.next") : previousLabel ?? spinI18n("spin.previous"),
+      testId: isNext ? nextTestId : previousTestId,
       onPress: e => {
         focusMiddle();
         if (editable) {
@@ -88280,6 +88561,7 @@ const WayOut = ({
   unavailable,
   unavailableMessage,
   label,
+  testId,
   onPress,
   onPointerDown,
   children
@@ -88318,6 +88600,7 @@ const WayOut = ({
     ,
     role: "button",
     "aria-label": label,
+    "data-testid": testId,
     "aria-disabled": unavailable ? "true" : undefined,
     "data-unavailable": unavailable ? "" : undefined
     // At the chevron, not beside it: a callout aims its arrow at where the
@@ -97267,6 +97550,7 @@ const css$b = /* css */`@layer navi {
 `;
 const ButtonCopyToClipboard = ({
   children,
+  "aria-label": ariaLabel = buttonI18n("button.copy"),
   ...props
 }) => {
   import.meta.css = [css$b, "@jsenv/navi/src/control/input/button_copy_to_clipboard.jsx"];
@@ -97283,11 +97567,15 @@ const ButtonCopyToClipboard = ({
     ...props,
     children: [jsx(Box, {
       className: "navi_copied_notif",
-      "aria-hidden": copied ? "false" : "true",
+      role: "status",
       opacity: copied ? 1 : 0,
-      children: "Copié !"
+      children: copied ? buttonI18n("button.copied") : null
     }), jsx(Button, {
-      className: "navi_copy_button",
+      className: "navi_copy_button"
+      // The props land on the container; the name belongs to the button,
+      // which shows only an icon.
+      ,
+      "aria-label": ariaLabel,
       icon: true,
       revealOnInteraction: true,
       square: true,