@jsenv/navi 0.29.469 → 0.29.471

package/dist/jsenv_navi.js

@@ -39055,8 +39055,29 @@ const resolveFirstChildControl = (el) => {
   }
   return startEl.querySelector("[navi-control-host]");
 };
+// The element a popup command is about: the closest one keeping an open state.
 const resolveClosestExpandable = (el) => {
-  return el.closest("[aria-expanded]");
+  const expandable = el.closest("[aria-expanded]");
+  if (!expandable) {
+    return null;
+  }
+  return expandableRepeatedBy(expandable) || expandable;
+};
+// A control's host repeats the aria-expanded of its root, beside its role, for
+// assistive tech to read (a picker's <input>, a combobox or a button). The root
+// is the expandable: the host is a leaf the walk lands on only when it is the
+// source itself, and it carries the control's own `command`/`commandfor`, which
+// a command resolved again from it (a close after a clear) would follow.
+const expandableRepeatedBy = (el) => {
+  const controlRoot = findControlRoot(el);
+  if (
+    controlRoot &&
+    controlRoot !== el &&
+    controlRoot.hasAttribute("aria-expanded")
+  ) {
+    return controlRoot;
+  }
+  return null;
 };
 // The surface a send is decided on: the expandable holding the CONTROL that
 // sends, never one that control is itself. A picker's own root carries
@@ -39067,7 +39088,7 @@ const resolveClosestExpandable = (el) => {
 const resolveExpandableAround = (source) => {
   const sender = findControlRoot(source) || source;
   const parent = sender.parentElement;
-  return parent ? parent.closest("[aria-expanded]") : null;
+  return parent ? resolveClosestExpandable(parent) : null;
 };
 // An element carrying navi-command-proxy-for="anchorId" stands in for that
 // other element as the command's source when the source is forwarded to
@@ -39368,8 +39389,12 @@ const sendCommand = (source, event, { requester }) => {
   // looking at, and a decision just taken there is a reason to leave it. The
   // NEAREST surface answers, and only that one — a form inside a slide inside a
   // dialog goes back a slide, it does not also close the dialog.
-  // send inside expandable
-  if (target.getAttribute("aria-expanded") === "true") {
+  // send inside expandable — the control itself when it sends from its host,
+  // whose aria-expanded is its root's (see expandableRepeatedBy)
+  if (
+    target.getAttribute("aria-expanded") === "true" &&
+    !expandableRepeatedBy(target)
+  ) {
     return {
       target,
       implementation: () => {
@@ -39804,7 +39829,7 @@ const requestCloseUpward = (target, detail) => {
       return false;
     }
     const parent = expandable.parentElement;
-    expandable = parent ? parent.closest("[aria-expanded]") : null;
+    expandable = parent ? resolveClosestExpandable(parent) : null;
   }
   return true;
 };
@@ -46639,8 +46664,10 @@ const createControlInfo = (props, {
   } else if (controlType === "details") {
     statePropName = "open";
     defaultStatePropName = "defaultOpen";
-    stateInitial = props.open || props.defaultOpen;
     value = props.value || "open";
+    // Held like a checkbox: the value while open, nothing while closed — the
+    // shape the toggle writes back (see details.jsx).
+    stateInitial = props.open || props.defaultOpen ? value : undefined;
   } else if (controlType === "picker" || controlType === "select") {
     statePropName = "value";
     defaultStatePropName = "defaultValue";
@@ -54674,6 +54701,9 @@ const DetailsField = props => {
     value,
     children
   } = detailsProps;
+  const {
+    uiStateController
+  } = controlChildrenWrapperProps;
   const open = Boolean(value);
   useFocusGroup(ref, {
     enabled: focusGroup,
@@ -54755,6 +54785,10 @@ const DetailsField = props => {
         return;
       }
       const details = ref.current;
+      // The browser has already toggled the element (a summary press, the
+      // arrow shortcuts): the state follows it whatever the gate says, or the
+      // marker and whoever reads the value keep the old one.
+      uiStateController.setUIState(details.open ? uiStateController.value : undefined, e);
       dispatchRequestInteraction(details, {
         event: e,
         wantAction: true,
@@ -58175,6 +58209,10 @@ const Label = props => {
     requiredIndicator
   } = props;
   const controlId = useContext(ControlIdContext);
+  // What a popup opened from the control is named by (see getTriggerLabelIds
+  // in picker_custom.jsx): aria-labelledby can only point at an id.
+  const idDefault = useId();
+  props.id = props.id || `label_${idDefault}`;
   const [disabled, setDisabled] = useState(false);
   const [readOnly, setReadOnly] = useState(false);
   const [required, setRequired] = useState(false);
@@ -67868,9 +67906,297 @@ const PopupClose = ({
   });
 };
 
+const SuccessSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    children: jsx("path", {
+      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
+    })
+  });
+};
+const ErrorSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    children: jsx("path", {
+      d: "M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+    })
+  });
+};
+const InfoSvg$1 = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    children: jsx("path", {
+      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+    })
+  });
+};
+const WarningSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    children: jsx("path", {
+      d: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+    })
+  });
+};
+
+installImportMetaCssBuild(import.meta);
+const css$E = /* css */`@layer navi {
+  .navi_message_box {
+    --background-color-info: var(--navi-info-color-light);
+    --color-info: var(--navi-info-color);
+    --background-color-success: var(--navi-success-color-light);
+    --color-success: var(--navi-success-color);
+    --background-color-warning: var(--navi-warning-color-light);
+    --color-warning: var(--navi-warning-color);
+    --background-color-error: var(--navi-error-color-light);
+    --color-error: var(--navi-error-color);
+  }
+}
+
+.navi_message_box {
+  --x-message-background-color: var(--background-color-info);
+  --x-message-color: var(--color-info);
+  background-color: var(--x-message-background-color);
+
+  & > .navi_icon {
+    flex-shrink: 0;
+  }
+}
+
+.navi_message_box[data-status-info] {
+  --x-message-background-color: var(--background-color-info);
+  --x-message-color: var(--color-info);
+}
+
+.navi_message_box[data-status-success] {
+  --x-message-background-color: var(--background-color-success);
+  --x-message-color: var(--color-success);
+}
+
+.navi_message_box[data-status-warning] {
+  --x-message-background-color: var(--background-color-warning);
+  --x-message-color: var(--color-warning);
+}
+
+.navi_message_box[data-status-error] {
+  --x-message-background-color: var(--background-color-error);
+  --x-message-color: var(--color-error);
+}
+
+.navi_message_box[data-left-stripe] {
+  border-left: 6px solid var(--x-message-color);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+`;
+const MessageBox = ({
+  status = "info",
+  padding = "sm",
+  icon,
+  leftStripe,
+  children,
+  onClose,
+  ...rest
+}) => {
+  import.meta.css = [css$E, "@jsenv/navi/src/text/message_box.jsx"];
+  const [hasTitleChild, setHasTitleChild] = useState(false);
+  const innerLeftStripe = leftStripe === undefined ? hasTitleChild : leftStripe;
+  if (icon === true) {
+    icon = status === "info" ? jsx(InfoSvg$1, {}) : status === "success" ? jsx(SuccessSvg, {}) : status === "warning" ? jsx(WarningSvg, {}) : status === "error" ? jsx(ErrorSvg, {}) : null;
+  } else if (typeof icon === "function") {
+    const Comp = icon;
+    icon = jsx(Comp, {});
+  }
+  return jsx(Box, {
+    as: "div",
+    role: status === "info" ? "status" : "alert",
+    "data-left-stripe": innerLeftStripe ? "" : undefined,
+    inline: true,
+    column: true,
+    alignY: "center",
+    spacing: "s",
+    ...rest,
+    className: withPropsClassName("navi_message_box", rest.className),
+    padding: padding,
+    pseudoClasses: MessageBoxPseudoClasses,
+    basePseudoState: {
+      ":-navi-status-info": status === "info",
+      ":-navi-status-success": status === "success",
+      ":-navi-status-warning": status === "warning",
+      ":-navi-status-error": status === "error"
+    },
+    children: jsx(MessageBoxStatusContext.Provider, {
+      value: status,
+      children: jsxs(MessageBoxReportTitleChildContext.Provider, {
+        value: setHasTitleChild,
+        children: [icon && jsx(Icon, {
+          color: "var(--x-message-color)",
+          height: "1lh",
+          maxHeight: "auto",
+          selfAlignY: "start",
+          aspectRatio: "auto",
+          children: icon
+        }), jsx(Text, {
+          children: children
+        }), onClose &&
+        // A column as tall as the first line of the message, pinned to the
+        // top, the button centered in it: the close button stays level
+        // with the first line however many lines the message takes (same
+        // layout as Callout).
+        jsx(Box, {
+          flex: true,
+          alignY: "center",
+          height: "1lh",
+          selfAlignY: "start",
+          shrink: false,
+          children: jsx(Button, {
+            action: onClose,
+            icon: true,
+            border: "none",
+            style: {
+              ":hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            children: jsx(Icon, {
+              children: jsx(CloseSvg, {})
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+const MessageBoxPseudoClasses = [":-navi-status-info", ":-navi-status-success", ":-navi-status-warning", ":-navi-status-error"];
+const MessageBoxStatusContext = createContext();
+const MessageBoxReportTitleChildContext = createContext();
+
+installImportMetaCssBuild(import.meta);
+const css$D = /* css */`.navi_message_box {
+  & .navi_title {
+    margin-top: 0;
+    margin-bottom: var(--navi-s);
+    color: var(--x-message-color);
+  }
+}
+`;
+const Title = props => {
+  import.meta.css = [css$D, "@jsenv/navi/src/text/title.jsx"];
+  const messageBoxStatus = useContext(MessageBoxStatusContext);
+  const innerAs = props.as || (messageBoxStatus ? "h4" : "h1");
+  const titleLevel = parseInt(innerAs.slice(1));
+  const reportTitleToMessageBox = useContext(MessageBoxReportTitleChildContext);
+  reportTitleToMessageBox?.(true);
+  return jsx(TitleLevelContext.Provider, {
+    value: titleLevel,
+    children: jsx(Text, {
+      bold: true,
+      className: withPropsClassName("navi_title"),
+      as: messageBoxStatus ? "h4" : "h1",
+      ...props,
+      pseudoClasses: TitlePseudoClasses,
+      children: props.children
+    })
+  });
+};
+const TitleLevelContext = createContext();
+const useTitleLevel = () => {
+  return useContext(TitleLevelContext);
+};
+const TitlePseudoClasses = [":hover"];
+
+/**
+ * What a popup is called, decided by Dialog and Popover alike: the name the
+ * caller writes on it (aria-label/aria-labelledby), else the title it holds
+ * (`<Popup.Title>`), else the name of what opened it (`openerAriaLabelledBy` /
+ * `openerAriaLabel`, which a Picker fills with its trigger's). A popup no one
+ * names is announced as "dialog" and nothing else.
+ *
+ * The title tells the popup it exists rather than the popup looking for it:
+ * the content is built after the popup and thrown away before it (see
+ * popup_content_mount.js), and a title may sit anywhere in it — a header, a
+ * step of a form — so only the title knows when it is there.
+ */
+
+const PopupTitleContext = createContext(null);
+
+/**
+ * The title of the popup it sits in — reached as `<Popup.Title>`,
+ * `<Dialog.Title>` or `<Popover.Title>`. A heading (`h2` unless `as` says
+ * otherwise) that is also the popup's accessible name: a screen reader
+ * announces the popup by it, and `getByRole("dialog", { name })` finds it.
+ * An `aria-label`/`aria-labelledby` written on the popup itself wins over it.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+ *   id?: string,
+ *   children?: import("ignore:preact").ComponentChildren,
+ * } & Record<string, any>>}
+ */
+const PopupTitle = props => {
+  const registerTitle = useContext(PopupTitleContext);
+  const idDefault = useId();
+  const id = props.id || `popup_title_${idDefault}`;
+  useLayoutEffect(() => {
+    if (!registerTitle) {
+      return undefined;
+    }
+    return registerTitle(id);
+  }, [registerTitle, id]);
+  return jsx(Title, {
+    as: "h2",
+    ...props,
+    id: id
+  });
+};
+
+/**
+ * The name props of a popup element, and what its titles register with —
+ * handed to its children through PopupTitleContext.
+ */
+const usePopupName = ({
+  ariaLabel,
+  ariaLabelledBy,
+  openerAriaLabel,
+  openerAriaLabelledBy
+}) => {
+  // Several titles is a content of the caller's own making (two steps both
+  // mounted): the first one registered names the popup.
+  const [titleIds, setTitleIds] = useState(NO_TITLE);
+  const registerTitle = useMemo(() => {
+    return id => {
+      setTitleIds(ids => [...ids, id]);
+      return () => {
+        setTitleIds(ids => ids.filter(each => each !== id));
+      };
+    };
+  }, []);
+  let labelledBy;
+  let label;
+  if (ariaLabelledBy !== undefined || ariaLabel !== undefined) {
+    labelledBy = ariaLabelledBy;
+    label = ariaLabel;
+  } else if (titleIds.length > 0) {
+    labelledBy = titleIds[0];
+  } else if (openerAriaLabelledBy !== undefined) {
+    labelledBy = openerAriaLabelledBy;
+  } else {
+    label = openerAriaLabel;
+  }
+  return [{
+    "aria-labelledby": labelledBy,
+    "aria-label": label
+  }, registerTitle];
+};
+const NO_TITLE = [];
+
 installImportMetaCssBuild(import.meta);
 let openLocalDialogCount = 0;
-const css$E = /* css */`
+const css$C = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
      order depending on which popup renders first. */
 
@@ -68939,10 +69265,14 @@ const css$E = /* css */`
  *   under `"while-opened"`, only a press on what opens the popup does (a
  *   `--navi-open` button, a picker's trigger), never with an `onOpen`, and a
  *   press that does not open the popup throws it away.
+ * @param {string} [props.openerAriaLabelledBy] - The id(s) naming what opened
+ *   the dialog: its accessible name when neither `aria-label`/`aria-labelledby`
+ *   nor a `<Dialog.Title>` names it. A Picker passes its trigger's.
+ * @param {string} [props.openerAriaLabel] - The same, as a string.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
-  import.meta.css = [css$E, "@jsenv/navi/src/layout/dialog.jsx"];
+  import.meta.css = [css$C, "@jsenv/navi/src/layout/dialog.jsx"];
   if (props.openController) {
     return jsx(ControlledDialog, {
       ...props
@@ -69316,6 +69646,9 @@ const useDialogProps = props => {
     onOpen,
     children: childrenProp,
     mount,
+    // Read by usePopupName below, never written on the element.
+    openerAriaLabel,
+    openerAriaLabelledBy,
     ...rest
   } = props;
   // Assigned on every render, like openEffect below, so it always closes over
@@ -69326,7 +69659,16 @@ const useDialogProps = props => {
     mount,
     anchor
   });
-  const children = contentMounted ? childrenProp : null;
+  const [nameProps, registerTitle] = usePopupName({
+    ariaLabel: rest["aria-label"],
+    ariaLabelledBy: rest["aria-labelledby"],
+    openerAriaLabel,
+    openerAriaLabelledBy
+  });
+  const children = contentMounted ? jsx(PopupTitleContext.Provider, {
+    value: registerTitle,
+    children: childrenProp
+  }) : null;
   // Where it is placed, and whether there is a wall — the two questions that
   // pick the show call (see this file's top comment).
   const isTopLayer = layer === "top";
@@ -70116,6 +70458,7 @@ const useDialogProps = props => {
     "backdropFilter": backdrop ? backdropFilter : undefined,
     "styleCSSVars": DIALOG_STYLE_CSS_VARS,
     ...rest,
+    ...nameProps,
     ...autoFocusProps,
     "as": "dialog",
     ref,
@@ -70289,10 +70632,11 @@ const DIALOG_STYLE_CSS_VARS = {
   maxHeight: "--dialog-max-height"
 };
 Dialog.Close = PopupClose;
+Dialog.Title = PopupTitle;
 
 installImportMetaCssBuild(import.meta);
 let openLocalPopoverCount = 0;
-const css$D = /* css */`
+const css$B = /* css */`
   /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
      order depending on which popup renders first. */
 
@@ -70891,10 +71235,17 @@ const css$D = /* css */`
  *   under `"while-opened"`, only a press on what opens the popup does (a
  *   `--navi-open` button, a picker's trigger), never with an `onOpen`, and a
  *   press that does not open the popup throws it away.
+ * @param {string} [props.openerAriaLabelledBy] - The id(s) naming what opened
+ *   the popover: its accessible name when neither `aria-label`/`aria-labelledby`
+ *   nor a `<Popover.Title>` names it. A Picker passes its trigger's.
+ * @param {string} [props.openerAriaLabel] - The same, as a string. A popover
+ *   something names — these, `aria-label`/`aria-labelledby`, a
+ *   `<Popover.Title>` — is a `dialog`, unless given another `role`: a name on
+ *   an element with no role is read by nobody.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
-  import.meta.css = [css$D, "@jsenv/navi/src/layout/popover.jsx"];
+  import.meta.css = [css$B, "@jsenv/navi/src/layout/popover.jsx"];
   if (props.openController) {
     return jsx(ControlledPopover, {
       ...props
@@ -71131,6 +71482,9 @@ const usePopoverProps = props => {
     onOpen,
     children: childrenProp,
     mount,
+    // Read by usePopupName below, never written on the element.
+    openerAriaLabel,
+    openerAriaLabelledBy,
     ...rest
   } = props;
   // Assigned on every render, like openEffect below, so it always closes over
@@ -71141,7 +71495,16 @@ const usePopoverProps = props => {
     mount,
     anchor
   });
-  const children = contentMounted ? childrenProp : null;
+  const [nameProps, registerTitle] = usePopupName({
+    ariaLabel: rest["aria-label"],
+    ariaLabelledBy: rest["aria-labelledby"],
+    openerAriaLabel,
+    openerAriaLabelledBy
+  });
+  const children = contentMounted ? jsx(PopupTitleContext.Provider, {
+    value: registerTitle,
+    children: childrenProp
+  }) : null;
   const isTopLayer = layer === "top";
   const ref = props.ref;
   const backdropRef = useRef();
@@ -71946,6 +72309,10 @@ const usePopoverProps = props => {
     "navi-hidden": openController.openedInDom ? undefined : "",
     "styleCSSVars": POPUP_STYLE_CSS_VARS,
     ...rest,
+    ...nameProps,
+    // A <div> has no role, and a name on an element without one is read by
+    // nobody: a popover something names is a dialog, unless told what else.
+    "role": rest.role ?? (nameProps["aria-labelledby"] === undefined && nameProps["aria-label"] === undefined ? undefined : "dialog"),
     ...autoFocusProps,
     ref,
     // Not a control, but still something the rest of navi has to be able to
@@ -72061,9 +72428,10 @@ const resolvePositionAreaAndAnimationKind = ({
   };
 };
 Popover.Close = PopupClose;
+Popover.Title = PopupTitle;
 
 installImportMetaCssBuild(import.meta);
-const css$C = /* css */`@layer navi {
+const css$A = /* css */`@layer navi {
   .navi_popup {
     --popup-border-radius: var(--navi-popup-border-radius);
     --popup-border-width: 1px;
@@ -72204,6 +72572,10 @@ const css$C = /* css */`@layer navi {
  * @param {string} [props.className] - Merged with the shared
  *   `"navi_popup"` class (see this file's own CSS) rather than replacing
  *   it.
+ * @param {string} [props.openerAriaLabelledBy] - Forwarded as-is: the name the
+ *   popup takes when neither `aria-label`/`aria-labelledby` nor a
+ *   `<Popup.Title>` in `children` names it (see `Dialog`/`Popover`).
+ * @param {string} [props.openerAriaLabel] - Forwarded as-is, same.
  * @param {"always"|"idle"|"from-first-open"|"while-opened"} [props.mount] - When
  *   `children` are built and thrown away (see popup_content_mount.js).
  *   `"from-first-open"` (the default) builds them on the first open and keeps
@@ -72219,7 +72591,7 @@ const css$C = /* css */`@layer navi {
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popup = props => {
-  import.meta.css = [css$C, "@jsenv/navi/src/layout/popup.jsx"];
+  import.meta.css = [css$A, "@jsenv/navi/src/layout/popup.jsx"];
   const {
     mode: modeProp,
     maxWidth,
@@ -72302,6 +72674,7 @@ const Popup = props => {
   });
 };
 Popup.Close = PopupClose;
+Popup.Title = PopupTitle;
 
 // What Dialog's own animation values mean to a popover, which has no lift
 // (see the `animation` doc above).
@@ -72350,6 +72723,54 @@ const pickerUIIsNaviOwn = ui => {
   return Boolean(ui) && typeof ui === "object" && Boolean(ui.type?.isPickerOwnUI);
 };
 
+/*
+ * What the picker really is, said on the element that holds the name and takes
+ * the focus (the host input in picker.jsx), which is both what a screen reader
+ * announces and what getByRole(role, { name }) finds:
+ * - a picker that picks nothing is a door — its popup is a question
+ *   (type="confirm") or something to read (mode="callout", which says it for
+ *   itself) — and a door is pressed: "button";
+ * - a picker holding a value and opening a popup of navi's is a select-only
+ *   combobox: it shows a value the user does not type, and opens what changes
+ *   it. A textbox could not say the rest — aria-expanded is not allowed on one,
+ *   so "open" and "closed" would never be announced;
+ * - a picker showing the browser's own picker (no popup of navi's) stays the
+ *   textbox its <input> is.
+ */
+const getPickerHostRole = props => {
+  if (props.role !== undefined) {
+    return props.role;
+  }
+  if (props.picksNothing) {
+    return "button";
+  }
+  if (props["aria-haspopup"] !== undefined) {
+    return "combobox";
+  }
+  return undefined;
+};
+
+/*
+ * And what that button is called, when the caller wrote it as a drawing rather
+ * than as a word: a door draws no value, so what sits in its value slot IS its
+ * label — the `ui` a caller gave it, or its placeholder. Undefined the moment
+ * the caller names it themselves (aria-label/aria-labelledby), which is the
+ * only way to name a door drawn as an icon. Read by the popup too: what the
+ * user pressed is a fair name for what it opened.
+ */
+const getPickerHostLabelId = (id, props) => {
+  if (getPickerHostRole(props) !== "button") {
+    return undefined;
+  }
+  if (props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined) {
+    return undefined;
+  }
+  if (props.variant === "headless" || props.ui === "default") {
+    return undefined;
+  }
+  return `${id}_picker_label`;
+};
+
 /**
  * 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
@@ -72379,7 +72800,7 @@ const usePickerState = () => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
+const css$z = /* css */`.navi_picker_callout_dock > [data-picker-content] {
   display: none;
 }
 
@@ -72408,7 +72829,7 @@ const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
   }
 }
 
-.navi_picker[aria-haspopup="listbox"][aria-expanded="true"][navi-popover-mode="overlay"] {
+.navi_picker[navi-popover-mode="overlay"][aria-expanded="true"] {
   border-color: #0000;
 }
 
@@ -72436,7 +72857,7 @@ const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
 }
 `;
 const PickerCustomResolver = props => {
-  import.meta.css = [css$B, "@jsenv/navi/src/control/picker/picker_custom.jsx"];
+  import.meta.css = [css$z, "@jsenv/navi/src/control/picker/picker_custom.jsx"];
   if (props.children === undefined) {
     return renderResolver(PickerNative, props);
   }
@@ -73245,6 +73666,24 @@ const isPressDisputedByHold = pickerEl => Boolean(pickerEl?.parentElement?.close
 const getPickerInput = pickerEl => {
   return pickerEl.querySelector(".navi_picker_input");
 };
+
+// The <label>s naming a picker's trigger, by id. Read off the document: it is
+// the one place a label[for] and its control meet (navi's own Label carries an
+// id for this). A label wrapping the picker is left out — it holds the trigger
+// and the popup with it, and the popup would be named after its own content.
+const getTriggerLabelIds = pickerEl => {
+  const labels = pickerEl && getPickerInput(pickerEl)?.labels;
+  if (!labels) {
+    return undefined;
+  }
+  const ids = [];
+  for (const label of labels) {
+    if (label.id && !label.contains(pickerEl)) {
+      ids.push(label.id);
+    }
+  }
+  return ids.length === 0 ? undefined : ids.join(" ");
+};
 const getPickerInputUIState = pickerEl => {
   const pickerInput = getPickerInput(pickerEl);
   return getUIStateFromElement(pickerInput);
@@ -73267,6 +73706,11 @@ const PickerContentInsidePopup = props => {
     // Same reason: a `data-testid` on the picker names the trigger (see
     // docs/testid.md) — this one names the popup.
     popupTestId,
+    // Same again for the accessible name: aria-label/aria-labelledby on the
+    // picker name the trigger (see control_context.js), these the popup.
+    popupAriaLabel,
+    popupAriaLabelledBy,
+    popupAriaDescribedBy,
     positionArea,
     popoverMode = "nearby",
     popoverSpacing = popoverMode === "nearby" ? 5 : 0,
@@ -73328,8 +73772,25 @@ const PickerContentInsidePopup = props => {
   } = props;
   const isPopover = mode === "popover";
   const isCallout = mode === "callout";
-  return jsx(Next, {
-    "aria-haspopup": isPopover ? "listbox" : "dialog",
+  // The trigger's name, in the order the browser reads it, for the popup to
+  // take when neither the caller nor a <Popup.Title> names it: "Report this
+  // book" is a fair name for the sheet it opens, "Start date" for a calendar.
+  let openerAriaLabelledBy = rest["aria-labelledby"] ?? getPickerHostLabelId(props.id, props);
+  let openerAriaLabel;
+  if (openerAriaLabelledBy === undefined) {
+    openerAriaLabel = rest["aria-label"];
+    // Read only while open: the labels are a question for the document, and
+    // a closed popup has nobody to announce it.
+    if (openerAriaLabel === undefined && rest["aria-expanded"]) {
+      openerAriaLabelledBy = getTriggerLabelIds(props.ref.current);
+    }
+  }
+  return jsx(Next
+  // A dialog in either mode: what a picker opens is content of the
+  // caller's, never a listbox (a selectable List is a group of radios or
+  // checkboxes). The popover says so with its role, below.
+  , {
+    "aria-haspopup": "dialog",
     "navi-popover-mode": isPopover ? popoverMode : undefined,
     ...rest,
     // On popupProps already (see the picker's popup assembly); they mean
@@ -73374,11 +73835,23 @@ const PickerContentInsidePopup = props => {
       pressOutside: pressOutside,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
-        children: children
+        children: jsx(PopupTitleContext.Provider, {
+          value: null,
+          children: children
+        })
       })
     }) : jsx(Popup, {
       ...popupProps,
       "data-testid": popupTestId
+      // What the trigger's aria-haspopup announces; a <dialog> says it
+      // for itself.
+      ,
+      role: isPopover ? "dialog" : undefined,
+      "aria-label": popupAriaLabel,
+      "aria-labelledby": popupAriaLabelledBy,
+      "aria-describedby": popupAriaDescribedBy,
+      openerAriaLabel: openerAriaLabel,
+      openerAriaLabelledBy: openerAriaLabelledBy
       // What the CSS above keys on: this picker's own popup, and no other
       // popup below the picker.
       ,
@@ -73648,7 +74121,7 @@ const showNativePicker = (pickerInput, event) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$A = /* css */`.navi_picker_confirm_body {
+const css$y = /* css */`.navi_picker_confirm_body {
   min-width: 180px;
   max-width: 320px;
   padding: var(--navi-m);
@@ -73664,7 +74137,7 @@ const css$A = /* css */`.navi_picker_confirm_body {
 }
 `;
 const PickerConfirmResolver = props => {
-  import.meta.css = [css$A, "@jsenv/navi/src/control/picker/picker_confirm.jsx"];
+  import.meta.css = [css$y, "@jsenv/navi/src/control/picker/picker_confirm.jsx"];
   const Next = useNextResolver();
   if (props.type !== "confirm") {
     return jsx(Next, {
@@ -74190,7 +74663,7 @@ const LoadingIndicator = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$z = /* css */`@layer navi {
+const css$x = /* css */`@layer navi {
   .navi_separator {
     --size: 1px;
     --color: var(--navi-separator-color-default);
@@ -74264,7 +74737,7 @@ const Separator = ({
   style,
   ...props
 }) => {
-  import.meta.css = [css$z, "@jsenv/navi/src/layout/separator.jsx"];
+  import.meta.css = [css$x, "@jsenv/navi/src/layout/separator.jsx"];
   return jsx(Box, {
     as: vertical ? "span" : "hr",
     ...props,
@@ -75058,7 +75531,7 @@ const listItemBlockedMessage = (loading, props) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$y = /* css */`@layer navi {
+const css$w = /* css */`@layer navi {
   .navi_list_container[navi-selectable] {
     --list-item-outline-width: var(--navi-focus-outline-width);
     --list-item-outline-offset: calc(-1 * var(--list-item-outline-width));
@@ -75231,7 +75704,7 @@ const ListSelectableResolver = props => {
 };
 const ListSelectable = props => {
   const Next = useNextResolver();
-  import.meta.css = [css$y, "@jsenv/navi/src/control/list/list_selectable.jsx"];
+  import.meta.css = [css$w, "@jsenv/navi/src/control/list/list_selectable.jsx"];
   // we allow ourselves to auto-generate a name
   const defaultName = useId();
   props.name = props.name || `listbox_${defaultName}`;
@@ -75900,7 +76373,7 @@ const ListRunItemContext = createContext(null);
 // item takes its place in the collection by slot: the place is then the list's
 // to move, and the item's to follow — see list_items.js.
 const ListSlotContext = createContext(null);
-const css$x = /* css */`@property --list-group-label-height {
+const css$v = /* css */`@property --list-group-label-height {
   syntax: "<length>";
   inherits: false;
   initial-value: 0;
@@ -76428,7 +76901,7 @@ const resolveRenderBudget = renderBudget => {
   };
 };
 const ListUI = props => {
-  import.meta.css = [css$x, "@jsenv/navi/src/control/list/list.jsx"];
+  import.meta.css = [css$v, "@jsenv/navi/src/control/list/list.jsx"];
   const {
     ref,
     renderBudget: renderBudgetProp,
@@ -82543,7 +83016,7 @@ const createBadgeRegistry = () => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$w = /* css */`@layer navi;
+const css$u = /* css */`@layer navi;
 
 .navi_badge {
   --font-size: .7em;
@@ -82646,7 +83119,7 @@ const BadgeUI = ({
   className,
   ...props
 }) => {
-  import.meta.css = [css$w, "@jsenv/navi/src/text/badge.jsx"];
+  import.meta.css = [css$u, "@jsenv/navi/src/text/badge.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const {
@@ -82754,7 +83227,7 @@ const wrapLabels = childArray => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$v = /* css */`@layer navi;
+const css$t = /* css */`@layer navi;
 
 .navi_badge_list {
   flex-wrap: wrap;
@@ -82889,7 +83362,7 @@ const useBadgeRegistry = (children, enabled) => {
  *   component grants (a <Picker>, see max_lines_context.js).
  */
 const BadgeList = props => {
-  import.meta.css = [css$v, "@jsenv/navi/src/text/badge_list.jsx"];
+  import.meta.css = [css$t, "@jsenv/navi/src/text/badge_list.jsx"];
   const {
     maxLines,
     max,
@@ -83233,7 +83706,7 @@ const BadgeListContent = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$u = /* css */`.navi_color {
+const css$s = /* css */`.navi_color {
   aspect-ratio: 1;
   background-color: currentColor;
   border: 1px solid #0003;
@@ -83253,7 +83726,7 @@ const Color = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$u, "@jsenv/navi/src/text/color.jsx"];
+  import.meta.css = [css$s, "@jsenv/navi/src/text/color.jsx"];
   const color = children || undefined;
   return jsx(Box, {
     as: "span",
@@ -83740,7 +84213,7 @@ const PickerFileUI = /*#__PURE__*/asPickerOwnUI(() => {
 });
 
 installImportMetaCssBuild(import.meta);
-const css$t = /* css */`@layer navi {
+const css$r = /* css */`@layer navi {
   .navi_picker {
     --picker-border-radius: var(--navi-control-border-radius);
     --picker-border-width: var(--navi-control-border-width);
@@ -84209,7 +84682,7 @@ const css$t = /* css */`@layer navi {
 }
 `;
 const PickerButton = props => {
-  import.meta.css = [css$t, "@jsenv/navi/src/control/picker/picker.jsx"];
+  import.meta.css = [css$r, "@jsenv/navi/src/control/picker/picker.jsx"];
   if (typeof props.maxLines === "string") {
     props.maxLines = parseInt(props.maxLines);
   }
@@ -84250,11 +84723,6 @@ const PickerButton = props => {
     // confirm resolver (see picker_confirm.jsx), which is the picker that is
     // one — a caller whose popup is a menu of actions says it for themselves.
     picksNothing,
-    // Where 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 name
-    // nothing at all. Left unsaid, a picker that picks nothing takes "button"
-    // (see PickerInput below).
-    role,
     readOnly,
     error,
     // Who draws the loading outline. Left unsaid, the picker does, around its
@@ -84335,21 +84803,8 @@ const PickerButton = props => {
   // clearing being a modification like any other.
   const interactive = !basePseudoState[":disabled"] && !basePseudoState[":read-only"] && !loading;
   usePickerErrorCallout(uiStateController, error);
-  // What the picker really is, said on the element that holds the name and
-  // takes the focus (the host input below): a picker that picks nothing is a
-  // door — its popup is a question (type="confirm") or something to read
-  // (mode="callout", which says it for itself) — and a door is pressed. So it
-  // answers to "button" rather than to the "textbox" its <input> would
-  // otherwise be, which is both what a screen reader announces and what
-  // getByRole("button", { name }) finds. A picker holding a value stays a
-  // textbox: it does hold text.
-  const hostRole = role ?? (picksNothing ? "button" : undefined);
-  // And what that button is called, when the caller wrote it as a drawing
-  // rather than as a word: a door draws no value, so what sits in its value
-  // slot IS its label — the `ui` a caller gave it, or its placeholder. Skipped
-  // the moment the caller names it themselves (aria-label/aria-labelledby),
-  // which is the only way to name a door drawn as an icon.
-  const hostLabelId = hostRole === "button" && inputProps["aria-label"] === undefined && inputProps["aria-labelledby"] === undefined && variant !== "headless" && ui !== "default" ? `${inputProps.id}_picker_label` : undefined;
+  const hostRole = getPickerHostRole(props);
+  const hostLabelId = getPickerHostLabelId(inputProps.id, 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.
@@ -84418,8 +84873,16 @@ const PickerButton = props => {
         basePseudoState: basePseudoState,
         styleCSSVars: PickerStyleCSSVars,
         variant: undefined,
-        icon: 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
+        // name nothing at all. What the trigger opens is said there too, and
+        // aria-haspopup with it. aria-expanded stays here as well: commands.js
+        // and the CSS read the open state off the root (see
+        // expandableRepeatedBy in commands.js).
+        ,
         role: undefined,
+        "aria-haspopup": undefined,
         rightSlotIcon: undefined,
         rightSlotIconSize: undefined,
         rightSlot: undefined,
@@ -84459,6 +84922,8 @@ const PickerButton = props => {
               inset: loadingOutlineInset
             }), jsx(PickerInput, {
               role: hostRole,
+              "aria-haspopup": props["aria-haspopup"],
+              "aria-expanded": props["aria-expanded"],
               "aria-labelledby": hostLabelId,
               tabIndex: variant === "headless" ? -1 : undefined,
               "aria-hidden": variant === "headless" ? "true" : undefined,
@@ -84984,7 +85449,7 @@ const Picker = /*#__PURE__*/Object.assign(PickerResolved, {
 });
 
 installImportMetaCssBuild(import.meta);
-const css$s = /* css */`@layer navi {
+const css$q = /* css */`@layer navi {
   .navi_picker_spin {
     --picker-spin-padding-x-default: var(--navi-picker-padding-x-default);
     --picker-spin-padding-y-default: var(--navi-picker-padding-y-default);
@@ -85334,7 +85799,7 @@ const Spin = ({
   nextLabel,
   ...rest
 }) => {
-  import.meta.css = [css$s, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
+  import.meta.css = [css$q, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
   const id = useId();
   // What the group around it says, when there is one: how big the whole thing
   // is written is said once, on the group, and every spin in it follows.
@@ -85708,7 +86173,42 @@ const Spin = ({
         variant: "discrete",
         outlineWidth: group ? undefined : "0",
         textAlign: "center",
-        expandX: true,
+        expandX: true
+        // The arrow keys are the chevrons at the keyboard: one step the way
+        // the spin steps (`valueAtStep`, round at the ends when it loops),
+        // refused at a bound in the chevron's words. The field's own
+        // stepping (input_resolver_mode) stands down on a prevented keydown.
+        ,
+        onKeyDown: e => {
+          controlProps?.onKeyDown?.(e);
+          if (e.defaultPrevented) {
+            return;
+          }
+          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") {
+            return;
+          }
+          // Up is towards the bigger values however the spin lies: what a
+          // field means by it, and what ▲ means on a NumberSpin.
+          const isNext = e.key === "ArrowUp";
+          if (!(isNext ? nextAllowed : previousAllowed)) {
+            e.preventDefault();
+            openCallout(boundMessage(isNext), {
+              anchorElement: middleRef.current,
+              status: "info",
+              openingEvent: e
+            });
+            return;
+          }
+          dispatchRequestInteraction(e.currentTarget, {
+            event: e,
+            name: "--navi-arrow-up-down",
+            prevented: () => e.preventDefault(),
+            allowed: () => {
+              setValue(isNext ? valueNext : valuePrevious, e);
+              e.preventDefault();
+            }
+          });
+        },
         uiAction: (valueNext, event) => {
           uiAction?.(valueNext, stepEventRef.current ?? event);
         }
@@ -86010,7 +86510,7 @@ const renderValueDefault = value => String(value ?? "");
  * are passed on to the spins sitting in them.
  */
 const SpinGroup = props => {
-  import.meta.css = [css$s, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
+  import.meta.css = [css$q, "@jsenv/navi/src/control/picker/picker_spin.jsx"];
   const {
     size
   } = props;
@@ -86519,7 +87019,7 @@ const TimeRangeSpin = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$r = /* css */`.navi_checkbox_group {
+const css$p = /* css */`.navi_checkbox_group {
   border-style: solid;
 
   &[data-callout] {
@@ -86579,7 +87079,7 @@ const CheckboxGroup = props => {
   return checkboxGroup;
 };
 const CheckboxGroupInterface = props => {
-  import.meta.css = [css$r, "@jsenv/navi/src/control/input/checkbox_group.jsx"];
+  import.meta.css = [css$p, "@jsenv/navi/src/control/input/checkbox_group.jsx"];
   const {
     ref
   } = props;
@@ -86697,7 +87197,7 @@ const formatIntlUnit = (unit, {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$q = /* css */`.navi_input_duration {
+const css$o = /* css */`.navi_input_duration {
   --duration-separator-spacing: 4px;
   --loader-color: var(--navi-loader-color);
   position: relative;
@@ -86762,7 +87262,7 @@ const css$q = /* css */`.navi_input_duration {
  *   "auto" aligns each field toward its neighbouring separator (first→right, last→left, middle/solo→center).
  */
 const InputDuration = props => {
-  import.meta.css = [css$q, "@jsenv/navi/src/control/input/input_duration.jsx"];
+  import.meta.css = [css$o, "@jsenv/navi/src/control/input/input_duration.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   props.max = props.max || "23h59";
@@ -87263,7 +87763,7 @@ const InputDurationPart = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$p = /* css */`.navi_radio_group {
+const css$n = /* css */`.navi_radio_group {
   border-style: solid;
 
   &[data-callout] {
@@ -87303,7 +87803,7 @@ const RadioGroup = props => {
   return radioGroup;
 };
 const RadioGroupInterface = props => {
-  import.meta.css = [css$p, "@jsenv/navi/src/control/input/radio_group.jsx"];
+  import.meta.css = [css$n, "@jsenv/navi/src/control/input/radio_group.jsx"];
   const {
     ref
   } = props;
@@ -87333,7 +87833,7 @@ const RadioGroupInterface = props => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$o = /* css */`.navi_input.navi_select {
+const css$m = /* css */`.navi_input.navi_select {
   & .navi_control_input {
     padding-right: calc(var(--x-padding-right) + 1em);
     line-height: var(--navi-control-line-height);
@@ -87380,7 +87880,7 @@ const Select = ({
   ...props
 }) => {
   installInputCss();
-  import.meta.css = [css$o, "@jsenv/navi/src/control/input/select.jsx"];
+  import.meta.css = [css$m, "@jsenv/navi/src/control/input/select.jsx"];
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
   seedDefaultValueFromSignal(props);
@@ -87430,7 +87930,7 @@ const Select = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$n = /* css */`.navi_split_button {
+const css$l = /* css */`.navi_split_button {
   border-radius: var(--navi-control-border-radius);
   display: inline-flex;
   position: relative;
@@ -87552,7 +88052,7 @@ const css$n = /* css */`.navi_split_button {
  * on the split button's own box.
  */
 const SplitButton = props => {
-  import.meta.css = [css$n, "@jsenv/navi/src/control/input/split_button.jsx"];
+  import.meta.css = [css$l, "@jsenv/navi/src/control/input/split_button.jsx"];
   const {
     options = [],
     value,
@@ -88571,7 +89071,7 @@ const createItemTracker = (onChange) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$m = /* css */`.navi_wheel_container {
+const css$k = /* css */`.navi_wheel_container {
   --wheel-item-height: round(1.8em, 1px);
   --wheel-emphasis-size: round(1.5em, 1px);
   --wheel-item-width: 3.5ch;
@@ -89519,7 +90019,7 @@ const useWheelKeyboard = ({
   }, [isHorizontal, interactive, isLoop]);
 };
 function WheelUI(props) {
-  import.meta.css = [css$m, "@jsenv/navi/src/control/wheel/wheel.jsx"];
+  import.meta.css = [css$k, "@jsenv/navi/src/control/wheel/wheel.jsx"];
   const {
     ref,
     visibleCount = 3,
@@ -90509,7 +91009,7 @@ Wheel.Item = WheelItem;
  * @param {boolean|number} [props.zoom] - Enlarge the centered value of every wheel (see Wheel's zoom prop) with one prop for the whole group.
  */
 const WheelGroup = props => {
-  import.meta.css = [css$m, "@jsenv/navi/src/control/wheel/wheel.jsx"];
+  import.meta.css = [css$k, "@jsenv/navi/src/control/wheel/wheel.jsx"];
   // WheelGroup IS a control group: it aggregates its named wheels ("hours",
   // "minutes"…) into one object value, so it can sit directly inside a Form or a
   // Picker with no extra <ControlGroup> wrapper. The wheel-specific presentation
@@ -90682,7 +91182,7 @@ const WheelColon = props => {
 Wheel.Colon = WheelColon;
 
 installImportMetaCssBuild(import.meta);
-const css$l = /* css */`.navi_time_range_label {
+const css$j = /* css */`.navi_time_range_label {
   --wheel-item-height: round(1.8em, 1px);
   color: var(--wheel-color, light-dark(#111, #eee));
   line-height: var(--wheel-item-height);
@@ -90906,7 +91406,7 @@ const TimeRangeWheel = ({
   endTimeProps,
   ...rest
 }) => {
-  import.meta.css = [css$l, "@jsenv/navi/src/control/wheel/wheel_time.jsx"];
+  import.meta.css = [css$j, "@jsenv/navi/src/control/wheel/wheel_time.jsx"];
   const startId = useId();
   const startRef = useRef(null);
   const endRef = useRef(null);
@@ -91494,7 +91994,7 @@ const Z_INDEX_DROP_PREVIEW = Z_INDEX_STICKY_CORNER + 1;
 const Z_INDEX_TABLE_UI = Z_INDEX_STICKY_CORNER + 1;
 
 installImportMetaCssBuild(import.meta);
-const css$k = /* css */`.navi_table_drag_clone_container {
+const css$i = /* css */`.navi_table_drag_clone_container {
   top: var(--table-visual-top);
   left: var(--table-visual-left);
   width: var(--table-visual-width);
@@ -91649,7 +92149,7 @@ const useTableDragContextValue = ({
   }, [grabTarget, canChangeColumnOrder]);
 };
 const TableDragCloneContainer = /*#__PURE__*/forwardRef((props, ref) => {
-  import.meta.css = [css$k, "@jsenv/navi/src/control/table/drag/table_drag.jsx"];
+  import.meta.css = [css$i, "@jsenv/navi/src/control/table/drag/table_drag.jsx"];
   const {
     tableId
   } = props;
@@ -91948,7 +92448,7 @@ const ROW_MIN_HEIGHT = 30;
 const ROW_MAX_HEIGHT = 100;
 const COLUMN_MIN_WIDTH = 50;
 const COLUMN_MAX_WIDTH = 500;
-const css$j = /* css */`@layer navi {
+const css$h = /* css */`@layer navi {
   .navi_table {
     --table-resizer-handle-color: #063b7c;
     --table-resizer-color: #387ec9;
@@ -92117,7 +92617,7 @@ const css$j = /* css */`@layer navi {
 
 // Column resize components
 const TableColumnResizer = props => {
-  import.meta.css = [css$j, "@jsenv/navi/src/control/table/resize/table_resize.jsx"];
+  import.meta.css = [css$h, "@jsenv/navi/src/control/table/resize/table_resize.jsx"];
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   return jsxs("div", {
@@ -92589,7 +93089,7 @@ const findPreviousTableRow = currentRow => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$i = /* css */`@layer navi {
+const css$g = /* css */`@layer navi {
   .navi_table {
     --selection-border-color: var(--navi-selection-border-color, #0078d4);
     --selection-background-color: var(--navi-selection-background-color, #eaf1fd);
@@ -92683,7 +93183,7 @@ const useTableSelectionController = ({
   onSelectionChange,
   selectionColor
 }) => {
-  import.meta.css = [css$i, "@jsenv/navi/src/control/table/selection/table_selection.jsx"];
+  import.meta.css = [css$g, "@jsenv/navi/src/control/table/selection/table_selection.jsx"];
   const selectionController = useSelectionController({
     elementRef: tableRef,
     layout: "grid",
@@ -93154,7 +93654,7 @@ const useTableStickyContextValue = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$h = /* css */`@layer navi {
+const css$f = /* css */`@layer navi {
   .navi_table {
     --sticky-frontier-color: silver;
     --sticky-frontier-size: 12px;
@@ -93327,7 +93827,7 @@ const css$h = /* css */`@layer navi {
 const TableStickyFrontier = ({
   tableRef
 }) => {
-  import.meta.css = [css$h, "@jsenv/navi/src/control/table/sticky/table_sticky.jsx"];
+  import.meta.css = [css$f, "@jsenv/navi/src/control/table/sticky/table_sticky.jsx"];
   const stickyLeftFrontierGhostRef = useRef();
   const stickyLeftFrontierPreviewRef = useRef();
   const stickyTopFrontierGhostRef = useRef();
@@ -93558,7 +94058,7 @@ installImportMetaCssBuild(import.meta);
  *   inset 0 -1px 0 0 color;   // Bottom border
  */
 
-const css$g = /* css */ `.navi_table_root {
+const css$e = /* css */ `.navi_table_root {
   max-width: var(--table-max-width, none);
   max-height: var(--table-max-height, none);
   position: relative;
@@ -93743,11 +94243,11 @@ const css$g = /* css */ `.navi_table_root {
 // table must not carry this sheet, and a build that sees no caller drops the
 // css with the function.
 const installTableCss = () => {
-  import.meta.css = [css$g, "@jsenv/navi/src/control/table/table_css.js"];
+  import.meta.css = [css$e, "@jsenv/navi/src/control/table/table_css.js"];
 };
 
 installImportMetaCssBuild(import.meta);
-const css$f = /* css */`.navi_table_ui {
+const css$d = /* css */`.navi_table_ui {
   z-index: ${Z_INDEX_TABLE_UI};
   pointer-events: none;
   position: fixed;
@@ -93756,7 +94256,7 @@ const css$f = /* css */`.navi_table_ui {
 }
 `;
 const TableUI = /*#__PURE__*/forwardRef((props, ref) => {
-  import.meta.css = [css$f, "@jsenv/navi/src/control/table/table_ui.jsx"];
+  import.meta.css = [css$d, "@jsenv/navi/src/control/table/table_ui.jsx"];
   const {
     tableRef,
     tableId,
@@ -94678,7 +95178,7 @@ const normalizeKey = (key) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$e = /* css */`.navi_shortcut_container[data-visually-hidden], .navi_shortcut_button[data-visually-hidden] {
+const css$c = /* css */`.navi_shortcut_container[data-visually-hidden], .navi_shortcut_button[data-visually-hidden] {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   opacity: 0;
@@ -94695,7 +95195,7 @@ const css$e = /* css */`.navi_shortcut_container[data-visually-hidden], .navi_sh
 const ActiveKeyboardShortcuts = ({
   visible
 }) => {
-  import.meta.css = [css$e, "@jsenv/navi/src/keyboard/active_keyboard_shortcuts.jsx"];
+  import.meta.css = [css$c, "@jsenv/navi/src/keyboard/active_keyboard_shortcuts.jsx"];
   const activeShortcuts = activeShortcutsSignal.value;
   return jsx("div", {
     className: "navi_shortcut_container",
@@ -94735,7 +95235,7 @@ const KeyboardShortcutAriaElement = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$d = /* css */`@layer navi {
+const css$b = /* css */`@layer navi {
   .navi_clipboard_container {
     --height: 1.5em;
     --notif-spacing: .5em;
@@ -94766,7 +95266,7 @@ const ButtonCopyToClipboard = ({
   children,
   ...props
 }) => {
-  import.meta.css = [css$d, "@jsenv/navi/src/control/input/button_copy_to_clipboard.jsx"];
+  import.meta.css = [css$b, "@jsenv/navi/src/control/input/button_copy_to_clipboard.jsx"];
   const [copied, setCopied] = useState(false);
   const renderedRef = useRef();
   useEffect(() => {
@@ -94846,7 +95346,7 @@ const Address = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$c = /* css */`@layer navi;
+const css$a = /* css */`@layer navi;
 
 .navi_text.navi_badge_count {
   white-space: nowrap;
@@ -94975,7 +95475,7 @@ const BadgeCount = ({
   lineLayout,
   ...props
 }) => {
-  import.meta.css = [css$c, "@jsenv/navi/src/text/badge_count.jsx"];
+  import.meta.css = [css$a, "@jsenv/navi/src/text/badge_count.jsx"];
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const {
@@ -95118,7 +95618,7 @@ const BadgeCountCircle = ({
 };
 
 installImportMetaCssBuild(import.meta);
-const css$b = /* css */`@layer navi {
+const css$9 = /* css */`@layer navi {
   .navi_caption {
     --color: #6b7280;
   }
@@ -95138,7 +95638,7 @@ const Caption = ({
   className,
   ...rest
 }) => {
-  import.meta.css = [css$b, "@jsenv/navi/src/text/caption.jsx"];
+  import.meta.css = [css$9, "@jsenv/navi/src/text/caption.jsx"];
   return jsx(Text, {
     as: "small",
     size: "0.8em" // We use em to be relative to the parent (we want to be smaller than the surrounding text)
@@ -95534,177 +96034,8 @@ const Interpolate = ({
   });
 };
 
-const SuccessSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    children: jsx("path", {
-      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
-    })
-  });
-};
-const ErrorSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    children: jsx("path", {
-      d: "M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-    })
-  });
-};
-const InfoSvg$1 = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    children: jsx("path", {
-      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-    })
-  });
-};
-const WarningSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    children: jsx("path", {
-      d: "M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-    })
-  });
-};
-
 installImportMetaCssBuild(import.meta);
-const css$a = /* css */`@layer navi {
-  .navi_message_box {
-    --background-color-info: var(--navi-info-color-light);
-    --color-info: var(--navi-info-color);
-    --background-color-success: var(--navi-success-color-light);
-    --color-success: var(--navi-success-color);
-    --background-color-warning: var(--navi-warning-color-light);
-    --color-warning: var(--navi-warning-color);
-    --background-color-error: var(--navi-error-color-light);
-    --color-error: var(--navi-error-color);
-  }
-}
-
-.navi_message_box {
-  --x-message-background-color: var(--background-color-info);
-  --x-message-color: var(--color-info);
-  background-color: var(--x-message-background-color);
-
-  & > .navi_icon {
-    flex-shrink: 0;
-  }
-}
-
-.navi_message_box[data-status-info] {
-  --x-message-background-color: var(--background-color-info);
-  --x-message-color: var(--color-info);
-}
-
-.navi_message_box[data-status-success] {
-  --x-message-background-color: var(--background-color-success);
-  --x-message-color: var(--color-success);
-}
-
-.navi_message_box[data-status-warning] {
-  --x-message-background-color: var(--background-color-warning);
-  --x-message-color: var(--color-warning);
-}
-
-.navi_message_box[data-status-error] {
-  --x-message-background-color: var(--background-color-error);
-  --x-message-color: var(--color-error);
-}
-
-.navi_message_box[data-left-stripe] {
-  border-left: 6px solid var(--x-message-color);
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-`;
-const MessageBox = ({
-  status = "info",
-  padding = "sm",
-  icon,
-  leftStripe,
-  children,
-  onClose,
-  ...rest
-}) => {
-  import.meta.css = [css$a, "@jsenv/navi/src/text/message_box.jsx"];
-  const [hasTitleChild, setHasTitleChild] = useState(false);
-  const innerLeftStripe = leftStripe === undefined ? hasTitleChild : leftStripe;
-  if (icon === true) {
-    icon = status === "info" ? jsx(InfoSvg$1, {}) : status === "success" ? jsx(SuccessSvg, {}) : status === "warning" ? jsx(WarningSvg, {}) : status === "error" ? jsx(ErrorSvg, {}) : null;
-  } else if (typeof icon === "function") {
-    const Comp = icon;
-    icon = jsx(Comp, {});
-  }
-  return jsx(Box, {
-    as: "div",
-    role: status === "info" ? "status" : "alert",
-    "data-left-stripe": innerLeftStripe ? "" : undefined,
-    inline: true,
-    column: true,
-    alignY: "center",
-    spacing: "s",
-    ...rest,
-    className: withPropsClassName("navi_message_box", rest.className),
-    padding: padding,
-    pseudoClasses: MessageBoxPseudoClasses,
-    basePseudoState: {
-      ":-navi-status-info": status === "info",
-      ":-navi-status-success": status === "success",
-      ":-navi-status-warning": status === "warning",
-      ":-navi-status-error": status === "error"
-    },
-    children: jsx(MessageBoxStatusContext.Provider, {
-      value: status,
-      children: jsxs(MessageBoxReportTitleChildContext.Provider, {
-        value: setHasTitleChild,
-        children: [icon && jsx(Icon, {
-          color: "var(--x-message-color)",
-          height: "1lh",
-          maxHeight: "auto",
-          selfAlignY: "start",
-          aspectRatio: "auto",
-          children: icon
-        }), jsx(Text, {
-          children: children
-        }), onClose &&
-        // A column as tall as the first line of the message, pinned to the
-        // top, the button centered in it: the close button stays level
-        // with the first line however many lines the message takes (same
-        // layout as Callout).
-        jsx(Box, {
-          flex: true,
-          alignY: "center",
-          height: "1lh",
-          selfAlignY: "start",
-          shrink: false,
-          children: jsx(Button, {
-            action: onClose,
-            icon: true,
-            border: "none",
-            style: {
-              ":hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.1)"
-              }
-            },
-            children: jsx(Icon, {
-              children: jsx(CloseSvg, {})
-            })
-          })
-        })]
-      })
-    })
-  });
-};
-const MessageBoxPseudoClasses = [":-navi-status-info", ":-navi-status-success", ":-navi-status-warning", ":-navi-status-error"];
-const MessageBoxStatusContext = createContext();
-const MessageBoxReportTitleChildContext = createContext();
-
-installImportMetaCssBuild(import.meta);
-const css$9 = /* css */`@layer navi;
+const css$8 = /* css */`@layer navi;
 
 .navi_quantity {
   flex-direction: column;
@@ -95805,7 +96136,7 @@ const Quantity = ({
   bold = true,
   ...props
 }) => {
-  import.meta.css = [css$9, "@jsenv/navi/src/text/quantity.jsx"];
+  import.meta.css = [css$8, "@jsenv/navi/src/text/quantity.jsx"];
   const value = parseQuantityValue(children);
   const valueRounded = integer && typeof value === "number" ? Math.round(value) : value;
   const valueFormatted = typeof valueRounded === "number" ? formatNumber(valueRounded, {
@@ -95864,7 +96195,7 @@ const parseQuantityValue = children => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$8 = /* css */`@layer navi {
+const css$7 = /* css */`@layer navi {
   .navi_meter {
     --loader-color: var(--navi-loader-color);
     --track-color: #efefef;
@@ -96003,7 +96334,7 @@ const Meter = ({
   style,
   ...rest
 }) => {
-  import.meta.css = [css$8, "@jsenv/navi/src/text/meter.jsx"];
+  import.meta.css = [css$7, "@jsenv/navi/src/text/meter.jsx"];
   const defaultRef = useRef();
   const ref = rest.ref || defaultRef;
   value = Number(value);
@@ -96118,7 +96449,7 @@ const Paragraph = props => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$7 = /* css */`.navi_text_box {
+const css$6 = /* css */`.navi_text_box {
   align-items: flex-start;
   min-width: 0;
 }
@@ -96160,7 +96491,7 @@ const TextBox = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$7, "@jsenv/navi/src/text/text_box.jsx"];
+  import.meta.css = [css$6, "@jsenv/navi/src/text/text_box.jsx"];
   const boxRef = useRef(null);
   const contentRef = useRef(null);
   useLayoutEffect(() => {
@@ -96206,40 +96537,6 @@ const adjustWidth = (boxEl, contentEl) => {
   contentEl.style.width = `${Math.ceil(optimalWidth)}px`;
 };
 
-installImportMetaCssBuild(import.meta);
-const css$6 = /* css */`.navi_message_box {
-  & .navi_title {
-    margin-top: 0;
-    margin-bottom: var(--navi-s);
-    color: var(--x-message-color);
-  }
-}
-`;
-const Title = props => {
-  import.meta.css = [css$6, "@jsenv/navi/src/text/title.jsx"];
-  const messageBoxStatus = useContext(MessageBoxStatusContext);
-  const innerAs = props.as || (messageBoxStatus ? "h4" : "h1");
-  const titleLevel = parseInt(innerAs.slice(1));
-  const reportTitleToMessageBox = useContext(MessageBoxReportTitleChildContext);
-  reportTitleToMessageBox?.(true);
-  return jsx(TitleLevelContext.Provider, {
-    value: titleLevel,
-    children: jsx(Text, {
-      bold: true,
-      className: withPropsClassName("navi_title"),
-      as: messageBoxStatus ? "h4" : "h1",
-      ...props,
-      pseudoClasses: TitlePseudoClasses,
-      children: props.children
-    })
-  });
-};
-const TitleLevelContext = createContext();
-const useTitleLevel = () => {
-  return useContext(TitleLevelContext);
-};
-const TitlePseudoClasses = [":hover"];
-
 installImportMetaCssBuild(import.meta);
 const css$5 = /* css */`@keyframes navi_image_shimmer {
   0% {