@jsenv/navi 0.29.102 → 0.29.104

package/dist/jsenv_navi.js

@@ -4,7 +4,7 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, stringifyStyle as stringifyStyle$1, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, hasCSSSizeUnit, resolveOklchLightness, contrastColor, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, stringifyStyle as stringifyStyle$1, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, untracked, useSignal } from "@preact/signals";
 import { createContext, isValidElement, h, Fragment, render, toChildArray, options, cloneElement } from "preact";
@@ -38,7 +38,7 @@ installImportMetaCssBuild(import.meta);/**
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$15 = /* css */`
+const css$14 = /* css */`
   @layer navi {
     :root {
       /* A control that overlaps its neighbours (the members of a Group share
@@ -102,7 +102,7 @@ const css$15 = /* css */`
     }
   }
 `;
-import.meta.css = [css$15, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$14, "@jsenv/navi/src/navi_z_indexes.js"];
 
 const addIntoArray = (array, ...valuesToAdd) => {
   if (valuesToAdd.length === 1) {
@@ -371,7 +371,7 @@ installImportMetaCssBuild(import.meta);/**
  * the very first render and the browser does everything on its own.
  */
 const URL_TARGET_ATTRIBUTE = "data-url-target";
-const css$14 = /* css */`
+const css$13 = /* css */`
   @layer navi {
     [${URL_TARGET_ATTRIBUTE}] {
       animation: navi_url_target var(--navi-url-target-duration, 2000ms)
@@ -389,7 +389,7 @@ const css$14 = /* css */`
     }
   }
 `;
-import.meta.css = [css$14, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$13, "@jsenv/navi/src/nav/url_target/url_target.js"];
 let urlTargetOptions = {
   block: "start",
   behavior: "instant",
@@ -1339,6 +1339,10 @@ naviI18n.addAll({
     en: "More actions",
     fr: "Autres actions",
   },
+  "button.remove": {
+    en: "Remove",
+    fr: "Retirer",
+  },
 });
 
 // Default built-in translations — apps can override any key via add()
@@ -1638,6 +1642,14 @@ naviI18n.addAll({
     fr: "Cette option n'est pas disponible.",
     en: "This option is not available.",
   },
+  "constraint.readonly.selection": {
+    fr: "La sélection ne peut plus être modifiée.",
+    en: "This selection cannot be changed.",
+  },
+  "constraint.readonly.choice": {
+    fr: "Ce choix ne peut plus être changé.",
+    en: "This choice cannot be changed.",
+  },
   "constraint.readonly.item": {
     fr: "Cet élément n'est pas disponible.",
     en: "This item is not available.",
@@ -2114,6 +2126,302 @@ naviI18n.addAll({
 
 const FormContext = createContext();
 
+const CONSTRAINT_ATTRIBUTE_SET = new Set();
+
+const CONSTRAINT_NAME_TO_PROP = {
+  disabled: "disabledMessage",
+  required: "requiredMessage",
+  pattern: "patternMessage",
+  type_email: "typeMessage",
+  type_number: "typeMessage",
+  min_length: "minLengthMessage",
+  max_length: "maxLengthMessage",
+  min: "minMessage",
+  max: "maxMessage",
+  single_space: "singleSpaceMessage",
+  same_as: "sameAsMessage",
+  min_lower_letter: "minLowerLetterMessage",
+  min_upper_letter: "minUpperLetterMessage",
+  min_digit: "minDigitMessage",
+  min_special_char: "minSpecialCharMessage",
+  one_of: "oneOfMessage",
+  readonly: "readOnlyMessage",
+  available: "availableMessage",
+};
+
+const CONSTRAINT_MESSAGE_PROP_NAME_SET = new Set(
+  Object.values(CONSTRAINT_NAME_TO_PROP),
+);
+
+const extractMessageAndRemainingProps = (props) => {
+  const ownMessages = {};
+  const remaining = {};
+  const keyToVisit = new Set(Object.keys(props));
+  for (const key of keyToVisit) {
+    if (CONSTRAINT_MESSAGE_PROP_NAME_SET.has(key)) {
+      ownMessages[key] = props[key];
+    } else {
+      remaining[key] = props[key];
+    }
+  }
+  return [ownMessages, remaining];
+};
+
+const getConstraintMessage = (
+  controller,
+  constraint,
+  generatedMessage,
+  { requester },
+) => {
+  const { name: constraintName } = constraint;
+  const propName = CONSTRAINT_NAME_TO_PROP[constraintName];
+
+  // 1. Search first on the requester (e.g. the <li> that was clicked),
+  //  then fall back to element (e.g. the hidden <input>).
+  if (requester) {
+    const requesterController = requester.__uiStateController__;
+    if (requesterController && requesterController !== controller) {
+      const requesterControllerMessage = requesterController.props[propName];
+      if (requesterControllerMessage) {
+        return {
+          message: requesterControllerMessage,
+          origin: "requester controller",
+        };
+      }
+    }
+  }
+
+  const controllerMessage = controller.props[propName];
+  if (controllerMessage) {
+    return {
+      message: controllerMessage,
+      origin: "controller",
+    };
+  }
+
+  return {
+    message: generatedMessage,
+    origin: "generated message",
+  };
+};
+
+// prop that we'll set on the control
+const CONTROL_ATTRIBUTE_SET = new Set([
+  ...CONSTRAINT_ATTRIBUTE_SET,
+
+  "ref",
+  "children",
+  "id",
+  "name",
+  "type",
+  "value",
+  "checked",
+  "placeholder",
+  "inputMode",
+  "autoComplete",
+  "spellcheck",
+  "autoCorrect",
+  "aria-controls",
+  "tabIndex",
+  "command",
+  "commandFor",
+  "command-value", // not standard but make sense, allow to give param to the command in question
+  "list",
+
+  // "ui-action-target",
+  "navi-input-type",
+  "navi-value-pad",
+  "navi-control-proxy-for",
+  "navi-command-proxy-for",
+  "navi-command-target",
+  "onnavi_command",
+  "onnavi_request_open",
+  "onnavi_request_close",
+
+  "data-callout-arrow-x",
+  "data-callout-point-to-border-box",
+  "data-callout-point-to-content-box",
+  "data-callout-viewport-spacing",
+  "data-callout-position",
+  "data-callout-position-fixed",
+
+  "data-testid", // playwright, cypress
+  "data-separator", // used by InputGroup paste-to-fill
+]);
+// prop concerning control but that won't end up in the DOM if not inside CONTROL_ATTRIBUTE_SET
+const CONTROL_PROP_SET = new Set([
+  ...CONTROL_ATTRIBUTE_SET,
+  ...CONSTRAINT_MESSAGE_PROP_NAME_SET,
+
+  "action",
+  "confirm",
+  "confirmPopupContent",
+  "actionEvent",
+  "actionAfterChange",
+  "actionOnMouseDown",
+  "actionDebounce",
+  // A signal bound two-way to the control: its value seeds the control's state and
+  // is written back on every uiAction. Precludes value/checked (see createControlInfo).
+  "signal",
+  "defaultValue",
+  "defaultChecked",
+  "readOnly", // will depend wether readOnly is supported
+
+  "loading",
+  "basePseudoState",
+  "constraints",
+
+  // A real target inside a zone that belongs to another control — see
+  // own_target.js.
+  "ownTarget",
+
+  "autoFocus",
+  "autoFocusVisible",
+  "autoFocusSelect",
+
+  "onMouseDown",
+  "onClick",
+  "onKeyDown",
+  "onPaste",
+  "onInput",
+  "eventReactionDefinitions",
+
+  "onCancel",
+  "cancelOnBlurInvalid",
+  "cancelOnEscape",
+  "onActionPrevented",
+  "onActionStart",
+  "onActionAborted",
+  "onActionError",
+  "actionErrorEffect",
+  "errorMapping",
+  "onActionEnd",
+
+  "resetOnCancel",
+  "resetOnAbort",
+  "resetOnError",
+  "optimistic",
+
+  "charGuard",
+  "maxLengthGuard",
+]);
+
+const MessagePropsRefContext = createContext();
+
+const ControlIdContext = createContext();
+const ControlNameContext = createContext();
+const DisabledContext = createContext();
+const ReadOnlyContext = createContext();
+const RequiredContext = createContext();
+const LoadingContext$1 = createContext();
+createContext();
+
+const ActionContext = createContext();
+const ActionRequesterContext = createContext();
+
+/**
+ * A target of its own inside a zone that belongs to another control.
+ *
+ * A pressable row, a picker's façade, a slide that travels under the finger:
+ * each of them answers a press that lands anywhere in its box. An affordance an
+ * application draws in there — a chip's cross, an eye that opens a profile, a
+ * diskette that saves a guest — is aimed AT, not merely inside, and the press
+ * belongs to it alone.
+ *
+ * Saying that by hand takes three guards, one per moment of the same press: the
+ * pointerdown where gestures are arbitrated, the mousedown where a picker opens,
+ * the click where it opens too when a gesture disputed the press. All three are
+ * navi's own knowledge of navi's own event flow, and an application that gets
+ * one wrong finds out by opening a popup it meant to keep shut. `ownTarget` is
+ * that knowledge, said once.
+ *
+ * The other half is interactivity, and the question that settles it is: **does
+ * this affordance write to the control it sits in?**
+ *
+ * - it does, and once the value cannot be changed it has nothing left to offer:
+ *   it GOES. A remove cross that still removes is worse than no cross, and one
+ *   that refuses politely still says "there is something to remove here" on a
+ *   row that is only being read. That is the default.
+ * - it does, but its presence is information in itself: `"refuse"` keeps it and
+ *   refuses in its own words, like every other navi control.
+ * - it does NOT — a diskette saving a row into the reader's own address book, a
+ *   badge explaining why a placement is odd. The read-only around it is about a
+ *   value it never touches, so `"always"` ignores it: the affordance stays lit
+ *   and stays pressable. It is on the caller to use it only for a gesture that
+ *   genuinely writes nothing to the control around it.
+ *
+ * Whichever mode, the affordance's own handler runs from inside its own gate
+ * rather than from the DOM: a caller's `onClick` fires before any of this, and
+ * would go off from a button drawn greyed.
+ */
+
+
+/**
+ * The whole claim, in the DOM, on any element — a `<button>` an application
+ * draws itself as much as a navi control. It is read from the outside and
+ * nowhere else: by the controls above (below), and by the gesture readers
+ * (@jsenv/dom's DRAG_EXCLUDED_SELECTOR and DRAG_IGNORED_SELECTOR), which is why
+ * one attribute is enough and the `ownTarget` prop only writes it.
+ *
+ * Its value is the mode, when there is one to say: `data-own-target="always"`.
+ */
+const OWN_TARGET_ATTRIBUTE = "data-own-target";
+
+/**
+ * Whether `event` was aimed at an own target sitting below this control — in
+ * which case the control is not what the press was for and must not answer it.
+ *
+ * Read from the event's target rather than from a mark left by a handler: the
+ * question is "who is this press for", and the DOM between the pointer and the
+ * control is the whole answer. Nothing is asked of the own target itself, which
+ * is what lets it be anything — a button, a link, a field, a bare element.
+ */
+const isAimedAtOwnTargetBelow = (event, controlHost) => {
+  const target = event?.target;
+  if (!target || typeof target.closest !== "function") {
+    return false;
+  }
+  const ownTarget = target.closest(`[${OWN_TARGET_ATTRIBUTE}]`);
+  if (!ownTarget) {
+    return false;
+  }
+  // The claim is against what is ABOVE it: the control that IS the own target,
+  // and any control living inside it, are being aimed at like anything else.
+  if (ownTarget === controlHost || ownTarget.contains(controlHost)) {
+    return false;
+  }
+  // From the root rather than the host: a layered control (a picker holding an
+  // input) has its gate on the input, and what the application drew sits beside
+  // it, not in it.
+  const controlRoot = controlHost.closest("[navi-control]") || controlHost;
+  return controlRoot.contains(ownTarget);
+};
+
+/**
+ * Whether the read-only, disabled and busy of the zone around this own target
+ * are about it at all — see the modes at the top of this file.
+ */
+const ownTargetIgnoresZoneState = (ownTarget) => ownTarget === "always";
+
+/**
+ * Whether an own target has nothing to offer where it sits: it writes to the
+ * control around it, and that control cannot be changed, so the affordance goes.
+ */
+const useOwnTargetHidden = (props) => {
+  const disabled = useContext(DisabledContext);
+  const readOnly = useContext(ReadOnlyContext);
+  const loading = useContext(LoadingContext$1);
+  const { ownTarget } = props;
+  if (
+    !ownTarget ||
+    ownTarget === "refuse" ||
+    ownTargetIgnoresZoneState(ownTarget)
+  ) {
+    return false;
+  }
+  return Boolean(disabled || readOnly || loading);
+};
+
 /*
  * Deep structural equality for arbitrary JS values — what `===` can't do but this
  * codebase constantly needs: memoization cache keys ({ id: 1 } equal to { id: 1 }),
@@ -6490,83 +6798,6 @@ const isInertOnClick = (element) => {
   return true;
 };
 
-const CONSTRAINT_NAME_TO_PROP = {
-  disabled: "disabledMessage",
-  required: "requiredMessage",
-  pattern: "patternMessage",
-  type_email: "typeMessage",
-  type_number: "typeMessage",
-  min_length: "minLengthMessage",
-  max_length: "maxLengthMessage",
-  min: "minMessage",
-  max: "maxMessage",
-  single_space: "singleSpaceMessage",
-  same_as: "sameAsMessage",
-  min_lower_letter: "minLowerLetterMessage",
-  min_upper_letter: "minUpperLetterMessage",
-  min_digit: "minDigitMessage",
-  min_special_char: "minSpecialCharMessage",
-  one_of: "oneOfMessage",
-  readonly: "readOnlyMessage",
-  available: "availableMessage",
-};
-
-const CONSTRAINT_MESSAGE_PROP_NAME_SET = new Set(
-  Object.values(CONSTRAINT_NAME_TO_PROP),
-);
-
-const extractMessageAndRemainingProps = (props) => {
-  const ownMessages = {};
-  const remaining = {};
-  const keyToVisit = new Set(Object.keys(props));
-  for (const key of keyToVisit) {
-    if (CONSTRAINT_MESSAGE_PROP_NAME_SET.has(key)) {
-      ownMessages[key] = props[key];
-    } else {
-      remaining[key] = props[key];
-    }
-  }
-  return [ownMessages, remaining];
-};
-
-const getConstraintMessage = (
-  controller,
-  constraint,
-  generatedMessage,
-  { requester },
-) => {
-  const { name: constraintName } = constraint;
-  const propName = CONSTRAINT_NAME_TO_PROP[constraintName];
-
-  // 1. Search first on the requester (e.g. the <li> that was clicked),
-  //  then fall back to element (e.g. the hidden <input>).
-  if (requester) {
-    const requesterController = requester.__uiStateController__;
-    if (requesterController && requesterController !== controller) {
-      const requesterControllerMessage = requesterController.props[propName];
-      if (requesterControllerMessage) {
-        return {
-          message: requesterControllerMessage,
-          origin: "requester controller",
-        };
-      }
-    }
-  }
-
-  const controllerMessage = controller.props[propName];
-  if (controllerMessage) {
-    return {
-      message: controllerMessage,
-      origin: "controller",
-    };
-  }
-
-  return {
-    message: generatedMessage,
-    origin: "generated message",
-  };
-};
-
 /**
  * DOM utilities for the proxy control pattern.
  *
@@ -6656,6 +6887,10 @@ const findControlProxy = (el) => {
   return firstProxy;
 };
 
+let renderMessageText = text => text;
+const setCalloutMessageTextRenderer = renderer => {
+  renderMessageText = renderer;
+};
 const CalloutRequestCloseContext = createContext();
 const useCalloutRequestClose = () => {
   return useContext(CalloutRequestCloseContext);
@@ -6670,6 +6905,48 @@ const renderIntoCallout = (jsx$1, calloutMessageElement, {
   render(calloutJsx, calloutMessageElement);
 };
 
+// An HTML message is rendered through preact rather than innerHTML so that its
+// text can go through renderMessageText: an emoji in a validation message must
+// not make the first line taller than the icon and close button beside it.
+const renderHtmlIntoCallout = (html, calloutMessageElement, {
+  requestClose
+}) => {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  renderIntoCallout(domToVNodes(template.content), calloutMessageElement, {
+    requestClose
+  });
+};
+
+// Unmounts whatever preact rendered before the element is filled by hand
+// (a DOM node, an iframe); innerHTML alone would leave preact believing its
+// tree is still there.
+const clearCalloutMessage = calloutMessageElement => {
+  render(null, calloutMessageElement);
+  calloutMessageElement.innerHTML = "";
+};
+const domToVNodes = node => {
+  const vnodes = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      vnodes.push(renderMessageText(child.data));
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const props = {};
+    for (const {
+      name,
+      value
+    } of child.attributes) {
+      props[name] = value;
+    }
+    vnodes.push(h(child.localName, props, ...domToVNodes(child)));
+  }
+  return vnodes;
+};
+
 installImportMetaCssBuild(import.meta);/**
  * A callout component that mimics native browser validation messages.
  * Features:
@@ -6679,7 +6956,7 @@ installImportMetaCssBuild(import.meta);/**
  * - Arrow automatically shows when pointing at a valid anchor element
  * - Centers in viewport when no anchor element provided or anchor is too big
  */
-const css$13 = /* css */`
+const css$12 = /* css */`
   @layer navi {
     .navi_callout {
       /* A callout is parented to what it explains, so it inherits from it — and
@@ -6781,7 +7058,10 @@ const css$13 = /* css */`
       }
 
       .navi_callout_body {
-        --callout-icon-height: round(1.5em, 1px);
+        /* The first line of the message: the icon and the close button sit
+           in columns of that height, pinned to the top, so both stay level
+           with it however many lines the message takes. */
+        --callout-icon-height: round(1lh, 1px);
 
         position: relative;
         display: flex;
@@ -6837,10 +7117,15 @@ const css$13 = /* css */`
       align-self: flex-start;
 
       .navi_callout_close_button {
-        width: 1em;
-        height: 1em;
-        padding: 0;
-        align-self: center;
+        /* A square filling the column, so the whole first line is the target;
+           the padding keeps the cross itself at glyph size. */
+        display: inline-flex;
+        box-sizing: border-box;
+        aspect-ratio: 1 / 1;
+        height: 100%;
+        padding: 0.2em;
+        align-items: center;
+        justify-content: center;
         color: currentColor;
         font-size: inherit;
         background: none;
@@ -6922,7 +7207,7 @@ const openCallout = (message, {
   skipFocus = false,
   debug = () => {}
 } = {}) => {
-  import.meta.css = [css$13, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$12, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -7104,11 +7389,11 @@ const openCallout = (message, {
     } else if (newMessage instanceof Node) {
       // Handle DOM node (cloned from CSS selector)
       debug(`callout update message (node)`);
-      calloutMessageElement.innerHTML = "";
+      clearCalloutMessage(calloutMessageElement);
       calloutMessageElement.appendChild(newMessage);
     } else if (typeof newMessage === "function") {
       debug(`callout update message (function)`);
-      calloutMessageElement.innerHTML = "";
+      clearCalloutMessage(calloutMessageElement);
       newMessage({
         renderIntoCallout: jsx => renderIntoCallout(jsx, calloutMessageElement, {
           requestClose
@@ -7133,12 +7418,13 @@ const openCallout = (message, {
         iframe.style.backgroundColor = "white";
         iframe.srcdoc = newMessage;
         debug(`callout update message (html document iframe)`);
-        // Clear existing content and add iframe
-        calloutMessageElement.innerHTML = "";
+        clearCalloutMessage(calloutMessageElement);
         calloutMessageElement.appendChild(iframe);
       } else {
         debug(`callout update message: ${typeof newMessage === "string" ? newMessage.slice(0, 80) : String(newMessage)}`);
-        calloutMessageElement.innerHTML = newMessage;
+        renderHtmlIntoCallout(String(newMessage), calloutMessageElement, {
+          requestClose
+        });
       }
     }
     // After updating content the callout size likely changed — re-position immediately
@@ -8241,8 +8527,6 @@ const ABORTED = { id: "aborted" };
 const FAILED = { id: "failed" };
 const COMPLETED = { id: "completed" };
 
-const CONSTRAINT_ATTRIBUTE_SET = new Set();
-
 const BUSY_CONSTRAINT = {
   name: "busy",
   messageAttribute: "data-busy-message",
@@ -10295,6 +10579,20 @@ const onRequestInteraction = (
 
   const currentTarget = requestInteractionCustomEvent.currentTarget;
   const controlHost = findControlHost(currentTarget) || currentTarget;
+
+  // Aimed at something else that lives in this control's box: a chip's cross, an
+  // eye, a diskette. The press is that affordance's alone (see own_target.js),
+  // and stepping back here — rather than stopping the propagation over there —
+  // is what leaves the event whole for everything that is not a navi
+  // interaction. Stepping back, not refusing: the reaction never happened, so
+  // its `prevented`/`always` (an `e.preventDefault()`, for most of them) have
+  // nothing to undo and would take the press from the affordance itself.
+  if (isAimedAtOwnTargetBelow(event, controlHost)) {
+    debugInteraction(event, `"${name}" is for an own target below`);
+    requestInteractionCustomEvent.preventDefault();
+    return false;
+  }
+
   const controller = controlHost.__uiStateController__;
 
   if (controller && !bypassInteractivity) {
@@ -16085,6 +16383,26 @@ const POSITION_PROPS = {
     return { transform: `skew(${value})` };
   },
 };
+const singleLineEllipsisStyles = () => {
+  return {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    overflowWrap: "normal",
+  };
+};
+// The lines beyond the clamp are still laid out, so the clip edge decides
+// whether the top of the first hidden one is visible: "overflow: hidden" clips
+// at the padding box and lets it show inside the block-end padding. Clipping at
+// the content box instead ends the element right after its last visible line.
+const lineClampStyles = (value) => {
+  return {
+    "overflow": "clip",
+    "overflowClipMargin": "content-box",
+    "display": "-webkit-box",
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": value,
+  };
+};
 const TYPO_PROPS = {
   font: applyOnCSSProp("fontFamily"),
   fontFamily: PASS_THROUGH,
@@ -16122,39 +16440,21 @@ const TYPO_PROPS = {
       return null;
     }
     if (value === 1 || value === "1") {
-      return {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        overflowWrap: "normal",
-      };
+      return singleLineEllipsisStyles();
     }
-    return {
-      "overflow": "hidden",
-      "display": "-webkit-box",
-      "-webkit-box-orient": "vertical",
-      "-webkit-line-clamp": value,
-    };
+    return lineClampStyles(value);
   },
   overflowEllipsis: (value) => {
     if (!value) {
       return null;
     }
-    return {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      overflowWrap: "normal",
-    };
+    return singleLineEllipsisStyles();
   },
   lineClamp: (value) => {
     if (!value) {
       return null;
     }
-    return {
-      "overflow": "hidden",
-      "display": "-webkit-box",
-      "-webkit-box-orient": "vertical",
-      "-webkit-line-clamp": value,
-    };
+    return lineClampStyles(value);
   },
   textAlign: PASS_THROUGH,
   textBox: PASS_THROUGH,
@@ -16200,6 +16500,7 @@ const VISUAL_PROPS = {
   overflow: PASS_THROUGH,
   overflowX: PASS_THROUGH,
   overflowY: PASS_THROUGH,
+  overflowClipMargin: PASS_THROUGH,
   objectFit: PASS_THROUGH,
   accentColor: PASS_THROUGH,
   scrollbarWidth: PASS_THROUGH,
@@ -19199,7 +19500,7 @@ const setupNetworkMonitoring = () => {
 };
 setupNetworkMonitoring();
 
-installImportMetaCssBuild(import.meta);const css$12 = /* css */`
+installImportMetaCssBuild(import.meta);const css$11 = /* css */`
   .navi_loading_indicator_fluid_container {
     position: relative;
     display: flex;
@@ -19231,7 +19532,7 @@ const LoadingIndicatorFluid = ({
   visuallyHidden,
   ...rest
 }) => {
-  import.meta.css = [css$12, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
+  import.meta.css = [css$11, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
   const ref = useRef(null);
   // The container dimensions can be deduced from the ref itself as the indicator is absolute inset 0
   const [containerWidth, setContainerWidth] = useState(0);
@@ -19436,7 +19737,7 @@ const LoadingRectangleSvg = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$11 = /* css */`
+installImportMetaCssBuild(import.meta);const css$10 = /* css */`
   .navi_loading_outline_wrapper {
     position: absolute;
     /* Controls place the outline slightly outside their box, right on top of
@@ -19473,7 +19774,7 @@ installImportMetaCssBuild(import.meta);const css$11 = /* css */`
   }
 `;
 const LoadingOutline = props => {
-  import.meta.css = [css$11, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
+  import.meta.css = [css$10, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
   if (props.containerRef) {
     const container = props.containerRef.current;
     if (!container) {
@@ -19663,6 +19964,256 @@ const getHrefTargetInfo = (href) => {
   };
 };
 
+/**
+ * A variant of useLayoutEffect that accounts for ancestor <dialog>/<details>
+ * or popover visibility.
+ *
+ * Motivation: some effects (auto-scroll, measurement, focus) only make sense
+ * when the element is actually presented on screen. A plain useLayoutEffect
+ * fires on mount even when the component is inside a closed <dialog>, a
+ * collapsed <details>, or a hidden popover, where scroll and layout operations
+ * are no-ops.
+ *
+ * Behavior:
+ *   - No <dialog>/<details>/[popover] ancestor → runs like a normal
+ *     useLayoutEffect with the provided deps.
+ *   - Inside a closed/hidden ancestor → skips the initial run; instead runs
+ *     the callback once the ancestor opens — see @jsenv/dom's own
+ *     observeAncestorOpenState for exactly how that's detected, and why it
+ *     matters that it happens before the browser paints.
+ *   - Inside an open ancestor → runs on mount AND every subsequent open.
+ *
+ * The callback's second argument is always a `navi_displayed` CustomEvent,
+ * with `detail: { ancestor, ancestorType, becauseAncestorOpened }`:
+ *   - No <dialog>/<details>/[popover]/[aria-expanded] ancestor at all →
+ *     `{ ancestor: document, ancestorType: "document" }`.
+ *   - Otherwise → `{ ancestor: <the matched element>, ancestorType: "dialog"
+ *     | "popover" | "details" | "aria-expanded" }`.
+ * `becauseAncestorOpened` distinguishes the two ways of coming on screen:
+ *   - true — the element was already mounted and the ancestor just opened,
+ *     revealing it along with everything else it holds. The opening has an
+ *     owner (the ancestor's own transferFocus/openEffect), and what it reveals
+ *     should defer to it — see use_auto_focus.js.
+ *   - false — the element was mounted just now, into a surface already on
+ *     screen (or into the plain document). Nothing else owns this appearance:
+ *     what the element says about itself (an autofocus, a measurement) is the
+ *     only word there is.
+ *
+ * Usage:
+ *   useDisplayedLayoutEffect(ref, () => {
+ *     scrollToSelected();
+ *   }, []);
+ */
+const useDisplayedLayoutEffect = (ref, callback, deps) => {
+  if (typeof callback !== "function") {
+    throw new TypeError("useDisplayedLayoutEffect: callback is not a function");
+  }
+
+  // Keep a stable ref so the open listener always calls the latest callback
+  // without needing to be re-registered when deps change.
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  // Run on mount (or when deps change) — but only if the element is visible.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const ancestor = closestOpenableAncestor(el);
+    if (!ancestor) {
+      callbackRef.current(el, createDisplayedEvent(document, false));
+      return;
+    }
+    if (!isAncestorOpen(ancestor)) {
+      // Ancestor is closed — skip now; the observeAncestorOpenState call
+      // below will fire once it opens.
+      return;
+    }
+    callbackRef.current(el, createDisplayedEvent(ancestor, false));
+  }, deps);
+
+  // Re-run every time the ancestor opens.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return undefined;
+    }
+    const ancestor = closestOpenableAncestor(el);
+    if (!ancestor) {
+      return undefined;
+    }
+    return observeAncestorOpenState(ancestor, ({ isOpen }) => {
+      if (!isOpen) {
+        return;
+      }
+      const lastEl = ref.current;
+      callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
+    });
+  }, []);
+};
+
+const createDisplayedEvent = (ancestor, becauseAncestorOpened) => {
+  return new CustomEvent("navi_displayed", {
+    detail: {
+      ancestor,
+      ancestorType: getAncestorOpenType(ancestor),
+      becauseAncestorOpened,
+    },
+  });
+};
+
+installImportMetaCssBuild(import.meta);// # TextAnchor — how it works
+const css$$ = /* css */`
+  .navi_text_anchor {
+    vertical-align: baseline;
+    user-select: none;
+    overflow: hidden;
+  }
+`;
+
+/**
+ * Positions children vertically relative to the surrounding text, correcting for font-size differences.
+ *
+ * Place this component around any inline element whose font-size differs from the surrounding text.
+ * It renders an invisible anchor that inherits the surrounding text's font metrics, then shifts
+ * the child so that its visual position matches the requested `textAnchor` value — regardless of
+ * font-size, display type (inline, inline-block, inline-flex…), or the active `vertical-align`.
+ *
+ * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [textAnchor="char-bottom"]
+ *   - `"line-top"`    — child top aligns with the top of the surrounding line box
+ *   - `"char-top"`    — child top aligns with the top of visible characters (ink ascent)
+ *   - `"center"`      — child is vertically centered on the surrounding line box
+ *   - `"char-bottom"` — child bottom aligns to the text baseline (no correction, browser default)
+ *   - `"line-bottom"` — child bottom aligns with the bottom of the surrounding line box
+ * @param {{ size?: number, verticalAlign?: string }} [lineLayout]
+ *   Describes the surrounding line context. Used as layout-effect dependencies so the correction
+ *   reruns when the surrounding text's font-size or vertical-align changes.
+ * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
+ */
+const TextAnchor = ({
+  childRef,
+  children,
+  textAnchor = "char-bottom",
+  textKey,
+  textSize,
+  lineLayout
+}) => {
+  import.meta.css = [css$$, "@jsenv/navi/src/text/text_anchor.jsx"];
+  const anchorRef = useRef();
+
+  // Plain useLayoutEffect would also fire while an ancestor dialog/popover
+  // (e.g. a closed SidePanel) is still display:none — every rect involved
+  // reads 0×0 at that point, so the math trivially (and wrongly) resolves
+  // to topOffset 0: not a real "no correction needed" result, just a
+  // zero-by-zero coincidence that happens to look fine only because it
+  // leaves the browser's own default alignment untouched. The real
+  // correction then only gets applied later, on whatever unrelated
+  // re-render next happens to change one of this effect's own deps —
+  // which reads as the child "jumping" even though nothing about its own
+  // geometry changed. useDisplayedLayoutEffect skips the initial run in
+  // that case and reruns once the ancestor actually opens instead.
+  useDisplayedLayoutEffect(anchorRef, anchorEl => {
+    const childEl = childRef.current;
+    if (!anchorEl || !childEl) {
+      return;
+    }
+    // Only correct when the anchor lives in an inline formatting context.
+    // If the parent is a flex/grid container, inline layout rules don't apply
+    // and our font-metrics model is invalid.
+    const parentDisplay = getComputedStyle(anchorEl.parentElement).display;
+    if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
+      // we must hide the anchor otherwise it would affect layout without providing any benefit (would trigger flex gap for instance)
+      anchorEl.setAttribute("hidden", "");
+      setTopOffset(childEl, 0);
+      return;
+    }
+    anchorEl.removeAttribute("hidden");
+    const topOffset = computeTopOffset({
+      anchorEl,
+      childEl,
+      textAnchor
+    });
+    setTopOffset(childEl, topOffset);
+  }, [textAnchor, textKey, textSize, lineLayout?.size, lineLayout?.verticalAlign]);
+  return jsxs(Fragment$1, {
+    children: [children, jsx("span", {
+      ref: anchorRef,
+      className: "navi_text_anchor",
+      "aria-hidden": "true",
+      children: "\u200B"
+    })]
+  });
+};
+const setTopOffset = (childEl, topOffset) => {
+  // position:relative + top shifts the element visually.
+  // marginTop: -topOffset makes the layout box follow the visual position, so any container
+  // (button, link, box…) computes its own padding/border/height based on the real final position
+  // rather than the original unshifted one. This means a badge inside a button will symmetrically
+  // expand the button height instead of overflowing or being clipped.
+  // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
+  // the shift is purely a repositioning, not an inflation of the line.
+  if (!topOffset) {
+    childEl.style.position = "";
+    childEl.style.top = "";
+    childEl.style.marginTop = "";
+    childEl.style.marginBottom = "";
+    return;
+  }
+  childEl.style.position = "relative";
+  childEl.style.top = `${topOffset}px`;
+  childEl.style.marginTop = `${-topOffset}px`;
+  childEl.style.marginBottom = `${topOffset}px`;
+};
+const computeTopOffset = ({
+  anchorEl,
+  childEl,
+  textAnchor
+}) => {
+  if (textAnchor === "char-bottom") {
+    // Align child's bottom with the char's bottom = the baseline.
+    // The CSS spec says an inline-block with no text content has its baseline at its bottom margin edge.
+    // So the browser's default placement already puts the child's bottom at the line's baseline.
+    // No correction needed.
+    return 0;
+  }
+  // The anchor's rendered rect corresponds to the surrounding text's line box:
+  // top and bottom are the visual bounds of the line (including line-height).
+  const anchorRect = anchorEl.getBoundingClientRect();
+
+  // Measure the child's current rect, then subtract any previously applied top correction
+  // to recover its natural position — avoiding a style reset + reflow.
+  const childRect = childEl.getBoundingClientRect();
+  const childH = childRect.height;
+  const previousTop = parseFloat(childEl.style.top) || 0;
+  const childNaturalTop = childRect.top - previousTop;
+
+  // Compute desired child top Y based on textAnchor intention.
+  let desiredChildTopY = 0;
+  if (textAnchor === "line-top") {
+    desiredChildTopY = anchorRect.top;
+  } else if (textAnchor === "char-top") {
+    const anchorStyle = getComputedStyle(anchorEl);
+    const ctx = charTopCanvas.getContext("2d");
+    ctx.font = `${anchorStyle.fontWeight} ${anchorStyle.fontSize} ${anchorStyle.fontFamily}`;
+    const m = ctx.measureText("M");
+    const baselineY = anchorRect.bottom - m.fontBoundingBoxDescent;
+    desiredChildTopY = baselineY - m.actualBoundingBoxAscent;
+  } else if (textAnchor === "center") {
+    const anchorCenterY = (anchorRect.top + anchorRect.bottom) / 2;
+    desiredChildTopY = anchorCenterY - childH / 2;
+  } else if (textAnchor === "char-bottom") {
+    // Already handled above (early return 0), but guard here for completeness.
+    return 0;
+  } else if (textAnchor === "line-bottom") {
+    desiredChildTopY = anchorRect.bottom - childH;
+  } else {
+    return 0; // unknown textAnchor, no correction
+  }
+  return desiredChildTopY - childNaturalTop;
+};
+const charTopCanvas = document.createElement("canvas");
+
 const useInitialTextSelection = (ref, textSelection) => {
   const deps = [];
   if (Array.isArray(textSelection)) {
@@ -19763,7 +20314,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);// https://jsfiddle.net/v5xzJ/4/
-const css$10 = /* css */`
+const css$_ = /* css */`
   @layer navi {
     .navi_text {
       &[data-skeleton] {
@@ -19947,6 +20498,91 @@ const css$10 = /* css */`
       opacity: 1;
     }
   }
+
+  /* ── Icon ── */
+
+  @layer navi {
+    /* Ensure data attributes from box.jsx can win to update display */
+    .navi_icon {
+      display: inline-flex;
+      box-sizing: border-box;
+      max-width: 100%;
+      /* An icon never grows past the box it sits in, so a glyph can never make
+         a line of text taller than the text itself. lineOverflow="allow" opts
+         out, for an icon that is an affordance rather than a character — a
+         control's chevron or clear button, sized to be touched, not read. */
+      max-height: 100%;
+
+      &[data-line-overflow="allow"] {
+        max-height: none;
+      }
+    }
+  }
+
+  .navi_icon {
+    white-space: nowrap;
+    vertical-align: inherit;
+
+    &[data-icon-char] {
+      aspect-ratio: 1/1;
+      min-width: 0;
+      height: round(1em, 1px);
+      max-height: round(1em, 1px);
+      flex-grow: 0 !important;
+      align-items: center;
+      justify-content: center;
+
+      /* fillLine: measured on the line box (1lh) instead of the character box
+         (1em). The icon still stays inside the line — it just uses all of it,
+         which is what an icon standing on its own in a control's slot wants,
+         where a glyph sitting among letters wants to match their size. */
+      &[data-fill-line] {
+        height: round(1lh, 1px);
+        max-height: round(1lh, 1px);
+      }
+
+      svg,
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      svg {
+        overflow: visible;
+      }
+    }
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-interactive] {
+      cursor: pointer;
+    }
+    &[data-icon-text] {
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+  }
+
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+  }
+  .navi_icon[data-width-fixed] > svg,
+  .navi_icon[data-width-fixed] > img {
+    width: 100%;
+    height: auto;
+  }
+  .navi_icon[data-height-fixed] > svg,
+  .navi_icon[data-height-fixed] > img {
+    width: auto;
+    height: 100%;
+  }
+  .navi_icon[data-width-fixed][data-height-fixed] > svg,
+  .navi_icon[data-width-fixed][data-height-fixed] > img {
+    width: 100%;
+    height: 100%;
+  }
 `;
 const REGULAR_SPACE = jsx("span", {
   "data-navi-space": "",
@@ -20129,6 +20765,7 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   loading?: boolean,
  *   skeleton?: boolean,
  *   attachLastChild?: boolean,
+ *   emojiAsIcon?: boolean,
  *   preventSpaceUnderlines?: boolean,
  *   holdSpaceForStyle?: import("ignore:preact").JSX.CSSProperties,
  *   boldStable?: boolean,
@@ -20168,6 +20805,12 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   truncation belongs outside the `Text` instead (see `docs/typography.md`).
  *   `Link` sets it on its own whenever it renders an end icon.
  *
+ * @param {boolean} [emojiAsIcon]
+ *   Renders every emoji found in the string children as an `Icon`, so it sits
+ *   in the line like a character and never makes the line taller than the
+ *   text. For free text a user typed (a message, a description) — the only
+ *   place an emoji is expected; see `docs/typography.md`.
+ *
  * @param {boolean} [preventSpaceUnderlines]
  *   Replaces real space characters between children with padding-based spaces.
  *   Useful inside `<a>` elements where browsers draw an underline under spaces.
@@ -20284,12 +20927,13 @@ const TextShrinkWrap = props => {
   });
 };
 const TextUI = props => {
-  import.meta.css = [css$10, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
   let {
     ref,
     spacing,
     preventSpaceUnderlines = false,
     attachLastChild = false,
+    emojiAsIcon = false,
     boldStable,
     holdSpaceForStyle,
     capitalize,
@@ -20320,6 +20964,11 @@ const TextUI = props => {
   } else {
     children = applySpacingOnTextChildren(children, resolvedSpacing, defaultSpace);
   }
+  if (emojiAsIcon) {
+    // After the spacing pass: an emoji glued to a word ("hello👋") must not
+    // get a separator injected as if it were a child element.
+    children = renderEmojiAsIcon(children);
+  }
   if (boldStable) {
     const {
       bold
@@ -20434,6 +21083,244 @@ const TextWithSelectRange = ({
   });
 };
 
+/**
+ * Renders an icon — an inline SVG/emoji/text glyph that inherits the
+ * surrounding text's `currentColor` and (by default) its font size, so it sits
+ * on the text baseline like a character.
+ *
+ * Content comes from either `href` (references an external/sprite symbol via
+ * `<use>`) or `children` (an inline `<svg>` element, or a string for a
+ * text/emoji icon). All extra props are spread onto the underlying `Box`/`Text`
+ * (sizing, spacing, color, className, data-attributes, …).
+ *
+ * Render mode is chosen automatically:
+ * - `children` is a **string** → a text icon (`<Text data-icon-text>`).
+ * - **sized** (an explicit `width`/`height`, or `flex`/`grid`) → a block icon
+ *   (`<Box square>`), laid out as its own box rather than inline.
+ * - otherwise → an **inline char-like** icon that flows on the text baseline
+ *   (`data-icon-char`), aligned via `textAnchor`.
+ *
+ * Accessibility: an icon is treated as decorative (`aria-hidden`) by default
+ * whenever it has no explicit size and no `onClick`; give it an explicit
+ * `decorative={false}` (or make it interactive) when it conveys meaning.
+ *
+ * @param {object} props
+ * @param {string} [props.href] - URL/id of an external SVG symbol, rendered via
+ *   `<svg><use href></svg>`. Mutually exclusive with meaningful `children`.
+ * @param {import("ignore:preact").ComponentChildren} [props.children] - Inline icon
+ *   content: an `<svg>` element, or a string (renders as a text/emoji icon).
+ * @param {boolean} [props.decorative] - Marks the icon `aria-hidden`. Defaults
+ *   to `true` for an unsized, non-interactive icon; pass `false` for a
+ *   meaning-bearing icon that needs to be exposed to assistive tech.
+ * @param {(event: MouseEvent) => void} [props.onClick] - Makes the icon
+ *   interactive (`data-interactive`, pointer cursor) and non-decorative.
+ * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [props.textAnchor="center"]
+ *   - Vertical alignment within the surrounding text line for the inline
+ *   char-like mode, forwarded to `TextAnchor`: `"line-top"`/`"line-bottom"`
+ *   align to the line box edges, `"char-top"` to the ink ascent, `"center"`
+ *   centers on the line box, `"char-bottom"` sits on the baseline. See
+ *   `text_anchor.jsx`.
+ * @param {{ size?: number, verticalAlign?: string }} [props.lineLayout] -
+ *   Describes the surrounding line context (font size / vertical-align),
+ *   forwarded to `TextAnchor` so it recomputes the vertical correction when
+ *   that context changes.
+ * @param {string|number} [props.width] - Explicit width; `"auto"` clears it.
+ *   Any explicit size switches the icon to block (sized) mode.
+ * @param {string|number} [props.height] - Explicit height; `"auto"` clears it.
+ * @param {"allow"} [props.lineOverflow] - `"allow"` lets the icon be taller
+ *   than the box it sits in (a line of text, a control's slot) instead of being
+ *   capped by it. For an icon that is an affordance sized for the finger rather
+ *   than a character sized for reading.
+ * @param {boolean} [props.fillLine] - Sizes the icon on the line box (1lh)
+ *   rather than on the character box (1em), so it uses the full height of the
+ *   line without leaving it. Unlike `lineOverflow`, the icon still never
+ *   exceeds the line.
+ * @param {boolean} [props.square] - Keep a 1:1 box; combined with one explicit
+ *   dimension it fixes the other too.
+ * @param {boolean} [props.circle] - Like `square`, plus a circular shape.
+ * @param {string|number} [props.aspectRatio] - Fixes the second dimension from
+ *   the one explicit dimension.
+ * @param {"x"|"y"|boolean} [props.flex] - Forces block/flex layout; auto-set to
+ *   `"x"` when the icon is sized.
+ * @param {boolean} [props.grid] - Forces block/grid layout.
+ * @param {string} [props.className] - Merged with the base `"navi_icon"` class.
+ */
+const Icon = ({
+  href,
+  children,
+  decorative,
+  onClick,
+  textAnchor = "center",
+  lineLayout,
+  lineOverflow,
+  fillLine,
+  ...props
+}) => {
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    flex,
+    grid,
+    width,
+    height
+  } = props;
+  if (width === "auto") {
+    width = undefined;
+  }
+  if (height === "auto") {
+    height = undefined;
+  }
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
+  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
+  if (widthFixed || heightFixed) {
+    if (flex === undefined) {
+      flex = "x";
+    }
+  } else if (decorative === undefined && !onClick) {
+    decorative = true;
+  }
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  const textRef = useRef();
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      children: children
+    });
+  }
+  if (flex || grid) {
+    return jsx(Box, {
+      square: true,
+      ...props,
+      ...ariaProps,
+      flex: flex,
+      baseClassName: "navi_icon",
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      onClick: onClick,
+      children: innerChildren
+    });
+  }
+  return jsx(TextAnchor, {
+    childRef: textRef,
+    textAnchor: textAnchor,
+    textSize: props.size,
+    lineLayout: lineLayout,
+    children: jsxs(Text, {
+      ...props,
+      ...ariaProps,
+      className: withPropsClassName("navi_icon", props.className),
+      spacing: "pre",
+      "data-icon-char": "",
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      ref: textRef,
+      children: [jsx("span", {
+        style: "user-select:none",
+        children: "\u200B"
+      }), innerChildren]
+    })
+  });
+};
+
+// An emoji-presentation character (🌸), or a pictogram forced into emoji
+// presentation by VS16 (❤️), followed by its skin-tone modifiers and ZWJ
+// sequence. A flag is two regional indicators that must stay together.
+const EMOJI_REGEX = /\p{Regional_Indicator}{2}|(?:\p{Emoji_Presentation}|[\p{Extended_Pictographic}--\p{Emoji_Presentation}]\uFE0F)(?:[\p{Emoji_Modifier}\uFE0F]|\u200D\p{Extended_Pictographic}\uFE0F?)*/gv;
+
+/**
+ * What `emojiAsIcon` does, for something that renders text without going
+ * through `Text` (a callout's message): every emoji in the string children
+ * comes back wrapped in an `Icon`. The system emoji fonts have a taller
+ * ascent/descent than text fonts, so a raw emoji glyph makes its line taller
+ * than the lines around it; inside an Icon it is capped at 1em and centered on
+ * the line like any glyph icon.
+ *
+ * Children come back in the shape they arrived in: a string stays a string
+ * when it holds no emoji, and the array is only built once a child actually
+ * needs rewriting.
+ */
+const renderEmojiAsIcon = children => {
+  if (typeof children === "string") {
+    return renderEmojiInString(children);
+  }
+  const childArray = toChildArray(children);
+  let result = null;
+  let index = 0;
+  for (const child of childArray) {
+    if (typeof child === "string") {
+      const rendered = renderEmojiInString(child);
+      if (rendered !== child) {
+        if (result === null) {
+          result = childArray.slice(0, index);
+        }
+        for (const part of rendered) {
+          result.push(part);
+        }
+        index++;
+        continue;
+      }
+    }
+    if (result !== null) {
+      result.push(child);
+    }
+    index++;
+  }
+  if (result === null) {
+    return children;
+  }
+  return result;
+};
+const renderEmojiInString = string => {
+  let parts = null;
+  let lastIndex = 0;
+  for (const match of string.matchAll(EMOJI_REGEX)) {
+    if (parts === null) {
+      parts = [];
+    }
+    if (match.index > lastIndex) {
+      parts.push(string.slice(lastIndex, match.index));
+    }
+    parts.push(jsx(Icon, {
+      decorative: false,
+      children: jsx("span", {
+        children: match[0]
+      })
+    }));
+    lastIndex = match.index + match[0].length;
+  }
+  if (parts === null) {
+    return string;
+  }
+  if (lastIndex < string.length) {
+    parts.push(string.slice(lastIndex));
+  }
+  return parts;
+};
+// A callout message is free text like any other; see callout.jsx for why it
+// cannot import this itself.
+setCalloutMessageTextRenderer(renderEmojiAsIcon);
+
 const LIGHT_ACCENT_ATTRIBUTE = "data-accent-light";
 const VERY_LIGHT_ACCENT_ATTRIBUTE = "data-accent-very-light";
 const DARK_CONTRAST_ATTRIBUTE = "data-accent-needs-dark-fg";
@@ -20577,105 +21464,6 @@ const useActionStatus = (action) => {
   };
 };
 
-/**
- * A variant of useLayoutEffect that accounts for ancestor <dialog>/<details>
- * or popover visibility.
- *
- * Motivation: some effects (auto-scroll, measurement, focus) only make sense
- * when the element is actually presented on screen. A plain useLayoutEffect
- * fires on mount even when the component is inside a closed <dialog>, a
- * collapsed <details>, or a hidden popover, where scroll and layout operations
- * are no-ops.
- *
- * Behavior:
- *   - No <dialog>/<details>/[popover] ancestor → runs like a normal
- *     useLayoutEffect with the provided deps.
- *   - Inside a closed/hidden ancestor → skips the initial run; instead runs
- *     the callback once the ancestor opens — see @jsenv/dom's own
- *     observeAncestorOpenState for exactly how that's detected, and why it
- *     matters that it happens before the browser paints.
- *   - Inside an open ancestor → runs on mount AND every subsequent open.
- *
- * The callback's second argument is always a `navi_displayed` CustomEvent,
- * with `detail: { ancestor, ancestorType, becauseAncestorOpened }`:
- *   - No <dialog>/<details>/[popover]/[aria-expanded] ancestor at all →
- *     `{ ancestor: document, ancestorType: "document" }`.
- *   - Otherwise → `{ ancestor: <the matched element>, ancestorType: "dialog"
- *     | "popover" | "details" | "aria-expanded" }`.
- * `becauseAncestorOpened` distinguishes the two ways of coming on screen:
- *   - true — the element was already mounted and the ancestor just opened,
- *     revealing it along with everything else it holds. The opening has an
- *     owner (the ancestor's own transferFocus/openEffect), and what it reveals
- *     should defer to it — see use_auto_focus.js.
- *   - false — the element was mounted just now, into a surface already on
- *     screen (or into the plain document). Nothing else owns this appearance:
- *     what the element says about itself (an autofocus, a measurement) is the
- *     only word there is.
- *
- * Usage:
- *   useDisplayedLayoutEffect(ref, () => {
- *     scrollToSelected();
- *   }, []);
- */
-const useDisplayedLayoutEffect = (ref, callback, deps) => {
-  if (typeof callback !== "function") {
-    throw new TypeError("useDisplayedLayoutEffect: callback is not a function");
-  }
-
-  // Keep a stable ref so the open listener always calls the latest callback
-  // without needing to be re-registered when deps change.
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  // Run on mount (or when deps change) — but only if the element is visible.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return;
-    }
-    const ancestor = closestOpenableAncestor(el);
-    if (!ancestor) {
-      callbackRef.current(el, createDisplayedEvent(document, false));
-      return;
-    }
-    if (!isAncestorOpen(ancestor)) {
-      // Ancestor is closed — skip now; the observeAncestorOpenState call
-      // below will fire once it opens.
-      return;
-    }
-    callbackRef.current(el, createDisplayedEvent(ancestor, false));
-  }, deps);
-
-  // Re-run every time the ancestor opens.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return undefined;
-    }
-    const ancestor = closestOpenableAncestor(el);
-    if (!ancestor) {
-      return undefined;
-    }
-    return observeAncestorOpenState(ancestor, ({ isOpen }) => {
-      if (!isOpen) {
-        return;
-      }
-      const lastEl = ref.current;
-      callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
-    });
-  }, []);
-};
-
-const createDisplayedEvent = (ancestor, becauseAncestorOpened) => {
-  return new CustomEvent("navi_displayed", {
-    detail: {
-      ancestor,
-      ancestorType: getAncestorOpenType(ancestor),
-      becauseAncestorOpened,
-    },
-  });
-};
-
 /**
  * Decides which element receives focus when a container (popover, dialog, …)
  * opens, and gives it back to where it came from when the container closes.
@@ -23467,116 +24255,6 @@ registerNaviCommand("--navi-unselect", (source, event) => {
   };
 });
 
-// prop that we'll set on the control
-const CONTROL_ATTRIBUTE_SET = new Set([
-  ...CONSTRAINT_ATTRIBUTE_SET,
-
-  "ref",
-  "children",
-  "id",
-  "name",
-  "type",
-  "value",
-  "checked",
-  "placeholder",
-  "inputMode",
-  "autoComplete",
-  "spellcheck",
-  "autoCorrect",
-  "aria-controls",
-  "tabIndex",
-  "command",
-  "commandFor",
-  "command-value", // not standard but make sense, allow to give param to the command in question
-  "list",
-
-  // "ui-action-target",
-  "navi-input-type",
-  "navi-value-pad",
-  "navi-control-proxy-for",
-  "navi-command-proxy-for",
-  "navi-command-target",
-  "onnavi_command",
-  "onnavi_request_open",
-  "onnavi_request_close",
-
-  "data-callout-arrow-x",
-  "data-callout-point-to-border-box",
-  "data-callout-point-to-content-box",
-  "data-callout-viewport-spacing",
-  "data-callout-position",
-  "data-callout-position-fixed",
-
-  "data-testid", // playwright, cypress
-  "data-separator", // used by InputGroup paste-to-fill
-]);
-// prop concerning control but that won't end up in the DOM if not inside CONTROL_ATTRIBUTE_SET
-const CONTROL_PROP_SET = new Set([
-  ...CONTROL_ATTRIBUTE_SET,
-  ...CONSTRAINT_MESSAGE_PROP_NAME_SET,
-
-  "action",
-  "confirm",
-  "confirmPopupContent",
-  "actionEvent",
-  "actionAfterChange",
-  "actionOnMouseDown",
-  "actionDebounce",
-  // A signal bound two-way to the control: its value seeds the control's state and
-  // is written back on every uiAction. Precludes value/checked (see createControlInfo).
-  "signal",
-  "defaultValue",
-  "defaultChecked",
-  "readOnly", // will depend wether readOnly is supported
-
-  "loading",
-  "basePseudoState",
-  "constraints",
-
-  "autoFocus",
-  "autoFocusVisible",
-  "autoFocusSelect",
-
-  "onMouseDown",
-  "onClick",
-  "onKeyDown",
-  "onPaste",
-  "onInput",
-  "eventReactionDefinitions",
-
-  "onCancel",
-  "cancelOnBlurInvalid",
-  "cancelOnEscape",
-  "onActionPrevented",
-  "onActionStart",
-  "onActionAborted",
-  "onActionError",
-  "actionErrorEffect",
-  "errorMapping",
-  "onActionEnd",
-
-  "resetOnCancel",
-  "resetOnAbort",
-  "resetOnError",
-  "optimistic",
-
-  "charGuard",
-  "maxLengthGuard",
-]);
-
-const MessagePropsRefContext = createContext();
-
-const ControlIdContext = createContext();
-const ControlNameContext = createContext();
-const DisabledContext = createContext();
-const ReadOnlyContext = createContext();
-const RequiredContext = createContext();
-const LoadingContext$1 = createContext();
-createContext();
-
-const ActionContext = createContext();
-const ActionRequesterContext = createContext();
-
 /**
  * How a control tells the labels pointing at it what it is (disabled, readOnly,
  * required) and when it goes away.
@@ -25798,18 +26476,18 @@ const useUIFacadeStateController = (props, realUIStateController) => {
           if (child !== firstChildControllerRef.current) {
             return;
           }
-          if (
-            silent &&
-            uiStateHoldsNothing(child.uiState) &&
-            !uiStateHoldsNothing(s.realUIStateController.uiState)
-          ) {
+          if (silent && uiStateHoldsNothing(child.uiState)) {
             // A silent sync means the child's own structure changed (children
             // mounted/unmounted), not that the user acted. A child that ends up
             // with no value there is one that currently *cannot* express one —
             // a <List loading> holds no items yet, a popup whose items are gone
             // aggregates to the empty array its stateType falls back to — which
             // must not read as the user clearing the picker, nor fire its
-            // uiAction.
+            // uiAction. And when the picker holds nothing either, there is
+            // still nothing to adopt: the sync would only respell one nothing
+            // as another (an array picker's [] becoming undefined, say) and
+            // hand that to uiAction — an empty array picker opened its popup
+            // and told its owner the value changed.
             return;
           }
           updatingRef.current = true;
@@ -25822,7 +26500,18 @@ const useUIFacadeStateController = (props, realUIStateController) => {
             detail: {},
           });
           chainEvent(propagateUpEvent, e);
-          s.realUIStateController.setUIState(child.uiState, propagateUpEvent);
+          // What the popup aggregates arrives in the popup's terms, where an
+          // empty multiple list is `undefined`. The picker answers a question of
+          // its own shape (see resolveEmptyUIState): a <Picker type="array">
+          // whose last item was unselected holds [], the same thing clearing it
+          // leaves — not a value that changes type on its owner the moment it
+          // empties.
+          const { emptyUIState } = s.realUIStateController;
+          const uiStateToAdopt =
+            child.uiState === undefined && emptyUIState !== undefined
+              ? emptyUIState
+              : child.uiState;
+          s.realUIStateController.setUIState(uiStateToAdopt, propagateUpEvent);
           updatingRef.current = false;
         },
       };
@@ -26732,11 +27421,29 @@ const useControlProps = (props, {
       }
       return dispatched;
     };
-    const applyEventReaction = (eventName, e) => {
+
+    // What the caller wrote runs from inside the gate when this control is an
+    // own target: a plain `onClick` is DOM, and it would fire from a cross drawn
+    // greyed by the read-only control the affordance sits in (see own_target.js).
+    const callerHandlerIsGated = Boolean(props.ownTarget);
+    const gateCallerHandler = (handler, e) => {
+      if (!handler) {
+        return undefined;
+      }
+      if (callerHandlerIsGated) {
+        return handler;
+      }
+      handler(e);
+      return undefined;
+    };
+    const applyEventReaction = (eventName, e, callerHandler) => {
       const defaultEventReactionDefinition = defaultEventReactionDefinitions?.[eventName];
       const customEventReactionDefinition = eventReactionDefinitions?.[eventName];
       const reaction = customEventReactionDefinition?.(e) ?? defaultEventReactionDefinition?.(e);
       if (!reaction) {
+        // No reaction means no gate: there is nothing here that could refuse the
+        // caller's handler, so withholding it would only lose it.
+        callerHandler?.(e);
         return false;
       }
       const {
@@ -26761,19 +27468,18 @@ const useControlProps = (props, {
           prevented?.();
         },
         allowed: () => {
+          callerHandler?.(e);
           allowed?.();
         },
         always
       });
     };
     const onMouseDown = e => {
-      props.onMouseDown?.(e);
-      applyEventReaction("mouseDown", e);
+      applyEventReaction("mouseDown", e, gateCallerHandler(props.onMouseDown, e));
       transferFocusToTarget(e);
     };
     const onClick = e => {
-      props.onClick?.(e);
-      applyEventReaction("click", e);
+      applyEventReaction("click", e, gateCallerHandler(props.onClick, e));
       transferFocusToTarget(e);
     };
     const onKeyDown = e => {
@@ -27296,6 +28002,13 @@ const useInteractiveProps = (props, {
   } = props;
   const [controlRootProps, controlHostProps] = splitControlProps(props);
   controlRootProps["navi-control"] = controlInfo.controlType;
+  if (props.ownTarget) {
+    // One attribute, in the DOM, because that is where the claim is read from —
+    // by the controls above and by the gesture readers below (see
+    // own_target.js). The prop is the ergonomic form of it and nothing more: an
+    // element an application draws itself writes the same attribute by hand.
+    controlRootProps[OWN_TARGET_ATTRIBUTE] = typeof props.ownTarget === "string" ? props.ownTarget : "";
+  }
   const {
     "navi-control-proxy-for": naviProxyFor
   } = props;
@@ -27330,10 +28043,10 @@ const useInteractiveProps = (props, {
     });
   }
   {
-    const controlDisabled = useContext(DisabledContext);
-    const controlReadOnly = useContext(ReadOnlyContext);
+    const controlDisabledFromAbove = useContext(DisabledContext);
+    const controlReadOnlyFromAbove = useContext(ReadOnlyContext);
     const controlRequired = useContext(RequiredContext);
-    const controlLoading = useContext(LoadingContext$1);
+    const controlLoadingFromAbove = useContext(LoadingContext$1);
     const parentActionRequester = useContext(ActionRequesterContext);
     const actionStatus = useActionStatus(boundAction);
     const {
@@ -27343,6 +28056,16 @@ const useInteractiveProps = (props, {
       loading,
       optimistic
     } = props;
+
+    // `ownTarget="always"`: an affordance that writes nothing to the control it
+    // sits in has no business inheriting that control's state — a diskette
+    // saving a row into the reader's own address book stays pressable on a game
+    // nobody may edit. Its own props still hold; only what came from above is
+    // dropped (see own_target.js for the three modes).
+    const zoneStateApplies = !ownTargetIgnoresZoneState(props.ownTarget);
+    const controlDisabled = zoneStateApplies && controlDisabledFromAbove;
+    const controlReadOnly = zoneStateApplies && controlReadOnlyFromAbove;
+    const controlLoading = zoneStateApplies && controlLoadingFromAbove;
     const disabledResolved = disabled || controlDisabled;
     const requiredResolved = required || controlRequired;
     // Busy because the group above is running the action THIS control asked
@@ -27354,7 +28077,7 @@ const useInteractiveProps = (props, {
     // (`maxLengthGuard`) and this one would make it longer: it can be pointed
     // at, focused and pressed — and answers why (see readonly_constraint.js) —
     // but cannot be taken.
-    const readOnlyFromParentMaxLengthGuard = Boolean(uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
+    const readOnlyFromParentMaxLengthGuard = Boolean(zoneStateApplies && uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
     const readOnlyBase = readOnly || controlReadOnly || loadingBase || readOnlyFromParentMaxLengthGuard || controlInfo.readOnlyUncontrolled;
     // An optimistic control trusts its action to succeed: the state the user
     // just set stays visible and interactive while the action runs — no
@@ -27788,7 +28511,7 @@ const getAssociatedLabels = element => {
   return Array.from(element.labels);
 };
 
-installImportMetaCssBuild(import.meta);const css$$ = /* css */`
+installImportMetaCssBuild(import.meta);const css$Z = /* css */`
   @layer navi {
     .navi_button {
       --button-border-radius: var(--navi-control-border-radius);
@@ -28219,7 +28942,7 @@ installImportMetaCssBuild(import.meta);const css$$ = /* css */`
   }
 `;
 const ButtonUI = props => {
-  import.meta.css = [css$$, "@jsenv/navi/src/control/input/button_ui.jsx"];
+  import.meta.css = [css$Z, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -28232,6 +28955,7 @@ const ButtonUI = props => {
     icon,
     cta,
     spacing,
+    emojiAsIcon = true,
     // Whether the button draws the loading outline itself. A button that is
     // one half of a bigger control says no: what is busy is the control, and
     // the outline belongs around the whole of it (see split_button.jsx).
@@ -28289,6 +29013,7 @@ const ButtonUI = props => {
 
     type: "button",
     spacing: undefined,
+    emojiAsIcon: undefined,
     cta: undefined,
     pressEffect: undefined,
     loadingOutline: undefined,
@@ -28342,6 +29067,7 @@ const ButtonUI = props => {
       ...controlChildrenWrapperProps,
       children: jsx(ButtonContent, {
         spacing: spacing,
+        emojiAsIcon: emojiAsIcon,
         children: children
       })
     })]
@@ -28349,6 +29075,7 @@ const ButtonUI = props => {
 };
 const ButtonContent = ({
   spacing,
+  emojiAsIcon,
   children
 }) => {
   const boxForwardedProps = useContext(BoxForwardedPropsContext);
@@ -28356,6 +29083,7 @@ const ButtonContent = ({
     ...boxForwardedProps,
     display: "inherit",
     spacing: spacing,
+    emojiAsIcon: emojiAsIcon,
     className: "navi_button_content",
     children: [children, jsx(ButtonShadow, {})]
   });
@@ -28412,6 +29140,7 @@ const ButtonFirstResolver = props => {
   const Next = useNextResolver();
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
+  const ownTargetHidden = useOwnTargetHidden(props);
 
   // Attached to the element rather than kept as a prop: the action a button
   // requests is not always run by the button (a submit button hands the send to
@@ -28421,6 +29150,9 @@ const ButtonFirstResolver = props => {
     message: props.confirm,
     content: props.confirmPopupContent
   });
+  if (ownTargetHidden) {
+    return null;
+  }
   return jsx(Next, {
     ...props
   });
@@ -28511,6 +29243,26 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
     children: naviI18n("button.open")
   })
 };
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   ownTarget?: boolean | "refuse" | "always",
+ *   emojiAsIcon?: boolean,
+ *   [key: string]: any,
+ * }>}
+ * @param {boolean} [emojiAsIcon=true] Renders the emoji of the label as icons
+ *   so the button keeps the height of its text — `Text`'s prop, on by default
+ *   here. Pass `false` to let an emoji draw at its natural size.
+ * @param {boolean|"refuse"|"always"} [ownTarget] A real target inside a zone
+ *   that belongs to another control — a chip's cross on a picker's façade, an
+ *   eye on a pressable row, a diskette inside a slide that travels. The press is
+ *   this button's alone (no travel starts, no popup opens, no navi control above
+ *   answers) and its `onClick` waits for its own interaction gate instead of
+ *   firing from the DOM. What it does where the zone is read-only, disabled or
+ *   busy depends on whether it WRITES to the control it sits in: it goes by
+ *   default, `"refuse"` keeps it and refuses with a callout, `"always"` ignores
+ *   the zone's state entirely — for a gesture that never touched that control.
+ */
 const Button = createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonUI]);
 
 // How long a popup waits before handing the focus to a field, when giving it
@@ -29930,7 +30682,7 @@ installImportMetaCssBuild(import.meta);/**
  * reaches the real container.
  */
 let openLocalDialogCount = 0;
-const css$_ = /* css */`
+const css$Y = /* css */`
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -30071,6 +30823,10 @@ const css$_ = /* css */`
     padding: 0;
     flex-direction: column;
 
+    /* A new surface writes in its own ink, not in its container's — see
+       --navi-popup-color. Declared here rather than left to the UA's own
+       dialog { color: CanvasText } so the ink is themed along with the paper. */
+    color: var(--navi-popup-color);
     background-color: var(--dialog-background-color);
     border-width: var(--dialog-border-width);
     border-style: solid;
@@ -30514,7 +31270,7 @@ const css$_ = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
-  import.meta.css = [css$_, "@jsenv/navi/src/layout/dialog.jsx"];
+  import.meta.css = [css$Y, "@jsenv/navi/src/layout/dialog.jsx"];
   if (props.openController) {
     return jsx(ControlledDialog, {
       ...props
@@ -31506,7 +32262,7 @@ installImportMetaCssBuild(import.meta);/**
  * and applied.
  */
 let openLocalPopoverCount = 0;
-const css$Z = /* css */`
+const css$X = /* css */`
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*
@@ -31600,6 +32356,10 @@ const css$Z = /* css */`
       var(--x-popover-max-height)
     );
     max-height: var(--x-popover-max-height);
+    /* A new surface writes in its own ink, not in its container's — see
+       --navi-popup-color. The UA only resets color on a [popover] element,
+       and the local renderer is a plain div. */
+    color: var(--navi-popup-color);
     background-color: var(--popover-background-color);
     border-width: var(--popover-border-width);
     border-style: solid;
@@ -31962,7 +32722,7 @@ const css$Z = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/layout/popover.jsx"];
+  import.meta.css = [css$X, "@jsenv/navi/src/layout/popover.jsx"];
   if (props.openController) {
     return jsx(ControlledPopover, {
       ...props
@@ -32990,7 +33750,7 @@ installImportMetaCssBuild(import.meta);/**
  * event, and a caller replacing the body entirely then has one protocol to
  * follow — `--navi-confirm` for yes, anything that closes for no.
  */
-const css$Y = /* css */`
+const css$W = /* css */`
   /* The width lives on the body rather than on the popup, so that custom
      content (which replaces this body entirely) sizes itself instead of
      inheriting a ceiling meant for a sentence-long question. */
@@ -33127,7 +33887,7 @@ const ConfirmPopup = ({
   onAnswer,
   onClosed
 }) => {
-  import.meta.css = [css$Y, "@jsenv/navi/src/action/confirm_popup.jsx"];
+  import.meta.css = [css$W, "@jsenv/navi/src/action/confirm_popup.jsx"];
   const {
     mode,
     confirmLabel,
@@ -33211,7 +33971,7 @@ const defaultBody = (message, {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$X = /* css */`
+installImportMetaCssBuild(import.meta);const css$V = /* css */`
   .action_error {
     margin-top: 0;
     margin-bottom: 20px;
@@ -33236,7 +33996,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$X, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$V, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -38861,7 +39621,7 @@ const ROUTE_TRAVEL_ATTRIBUTE = "data-navi-route-travel";
 // the root pictures must NOT move (they carry the whole viewport, blank bands
 // included).
 
-const css$W = /* css */`
+const css$U = /* css */`
   /* The marked region is a picture of its own for the length of a transition of
      OURS, and only then — the name is what makes the pages a picture the
      movement below can carry.
@@ -39290,7 +40050,7 @@ const RouteTransitionArea = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const props = {
     ...rest,
     [TRANSITION_AREA_ATTRIBUTE]: ""
@@ -39347,7 +40107,7 @@ const RouteTransitionArea = ({
  * @returns {() => void} remove this relation.
  */
 const defineRouteTransition = (from, to, transition) => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const {
     type,
     duration
@@ -39383,7 +40143,7 @@ const defineRouteTransition = (from, to, transition) => {
  * @returns {() => void} remove this default.
  */
 const defineRouteDefaultTransition = transition => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const value = normalizeTransition(transition);
   defaultTransition = value;
   return () => {
@@ -39984,7 +40744,7 @@ const DRAGGED_ATTRIBUTE = "data-navi-route-travel-dragged";
 const TURNED_ATTRIBUTE = "data-navi-route-travel-turned";
 // The name the box wears while it travels, and only then (see nameForTravel).
 const TRAVEL_NAME = "navi-route-travel";
-const css$V = /* css */`
+const css$T = /* css */`
   /* The name that makes the page inside this box a picture of its own during a
      transition — rather than part of the one big picture the document takes, so
      the two pages can move past each other while everything else stays where it
@@ -40374,7 +41134,7 @@ const RouteTravel = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$V, "@jsenv/navi/src/nav/route_travel.jsx"];
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_travel.jsx"];
   const elementRef = useRef();
   const gestureRef = useRef(null);
   // The travel in hand: the transition keeping the picture of the page being
@@ -42935,402 +43695,6 @@ const PhoneSvg = () => {
   });
 };
 
-installImportMetaCssBuild(import.meta);// # TextAnchor — how it works
-const css$U = /* css */`
-  .navi_text_anchor {
-    vertical-align: baseline;
-    user-select: none;
-    overflow: hidden;
-  }
-`;
-
-/**
- * Positions children vertically relative to the surrounding text, correcting for font-size differences.
- *
- * Place this component around any inline element whose font-size differs from the surrounding text.
- * It renders an invisible anchor that inherits the surrounding text's font metrics, then shifts
- * the child so that its visual position matches the requested `textAnchor` value — regardless of
- * font-size, display type (inline, inline-block, inline-flex…), or the active `vertical-align`.
- *
- * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [textAnchor="char-bottom"]
- *   - `"line-top"`    — child top aligns with the top of the surrounding line box
- *   - `"char-top"`    — child top aligns with the top of visible characters (ink ascent)
- *   - `"center"`      — child is vertically centered on the surrounding line box
- *   - `"char-bottom"` — child bottom aligns to the text baseline (no correction, browser default)
- *   - `"line-bottom"` — child bottom aligns with the bottom of the surrounding line box
- * @param {{ size?: number, verticalAlign?: string }} [lineLayout]
- *   Describes the surrounding line context. Used as layout-effect dependencies so the correction
- *   reruns when the surrounding text's font-size or vertical-align changes.
- * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
- */
-const TextAnchor = ({
-  childRef,
-  children,
-  textAnchor = "char-bottom",
-  textKey,
-  textSize,
-  lineLayout
-}) => {
-  import.meta.css = [css$U, "@jsenv/navi/src/text/text_anchor.jsx"];
-  const anchorRef = useRef();
-
-  // Plain useLayoutEffect would also fire while an ancestor dialog/popover
-  // (e.g. a closed SidePanel) is still display:none — every rect involved
-  // reads 0×0 at that point, so the math trivially (and wrongly) resolves
-  // to topOffset 0: not a real "no correction needed" result, just a
-  // zero-by-zero coincidence that happens to look fine only because it
-  // leaves the browser's own default alignment untouched. The real
-  // correction then only gets applied later, on whatever unrelated
-  // re-render next happens to change one of this effect's own deps —
-  // which reads as the child "jumping" even though nothing about its own
-  // geometry changed. useDisplayedLayoutEffect skips the initial run in
-  // that case and reruns once the ancestor actually opens instead.
-  useDisplayedLayoutEffect(anchorRef, anchorEl => {
-    const childEl = childRef.current;
-    if (!anchorEl || !childEl) {
-      return;
-    }
-    // Only correct when the anchor lives in an inline formatting context.
-    // If the parent is a flex/grid container, inline layout rules don't apply
-    // and our font-metrics model is invalid.
-    const parentDisplay = getComputedStyle(anchorEl.parentElement).display;
-    if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
-      // we must hide the anchor otherwise it would affect layout without providing any benefit (would trigger flex gap for instance)
-      anchorEl.setAttribute("hidden", "");
-      setTopOffset(childEl, 0);
-      return;
-    }
-    anchorEl.removeAttribute("hidden");
-    const topOffset = computeTopOffset({
-      anchorEl,
-      childEl,
-      textAnchor
-    });
-    setTopOffset(childEl, topOffset);
-  }, [textAnchor, textKey, textSize, lineLayout?.size, lineLayout?.verticalAlign]);
-  return jsxs(Fragment$1, {
-    children: [children, jsx("span", {
-      ref: anchorRef,
-      className: "navi_text_anchor",
-      "aria-hidden": "true",
-      children: "\u200B"
-    })]
-  });
-};
-const setTopOffset = (childEl, topOffset) => {
-  // position:relative + top shifts the element visually.
-  // marginTop: -topOffset makes the layout box follow the visual position, so any container
-  // (button, link, box…) computes its own padding/border/height based on the real final position
-  // rather than the original unshifted one. This means a badge inside a button will symmetrically
-  // expand the button height instead of overflowing or being clipped.
-  // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
-  // the shift is purely a repositioning, not an inflation of the line.
-  if (!topOffset) {
-    childEl.style.position = "";
-    childEl.style.top = "";
-    childEl.style.marginTop = "";
-    childEl.style.marginBottom = "";
-    return;
-  }
-  childEl.style.position = "relative";
-  childEl.style.top = `${topOffset}px`;
-  childEl.style.marginTop = `${-topOffset}px`;
-  childEl.style.marginBottom = `${topOffset}px`;
-};
-const computeTopOffset = ({
-  anchorEl,
-  childEl,
-  textAnchor
-}) => {
-  if (textAnchor === "char-bottom") {
-    // Align child's bottom with the char's bottom = the baseline.
-    // The CSS spec says an inline-block with no text content has its baseline at its bottom margin edge.
-    // So the browser's default placement already puts the child's bottom at the line's baseline.
-    // No correction needed.
-    return 0;
-  }
-  // The anchor's rendered rect corresponds to the surrounding text's line box:
-  // top and bottom are the visual bounds of the line (including line-height).
-  const anchorRect = anchorEl.getBoundingClientRect();
-
-  // Measure the child's current rect, then subtract any previously applied top correction
-  // to recover its natural position — avoiding a style reset + reflow.
-  const childRect = childEl.getBoundingClientRect();
-  const childH = childRect.height;
-  const previousTop = parseFloat(childEl.style.top) || 0;
-  const childNaturalTop = childRect.top - previousTop;
-
-  // Compute desired child top Y based on textAnchor intention.
-  let desiredChildTopY = 0;
-  if (textAnchor === "line-top") {
-    desiredChildTopY = anchorRect.top;
-  } else if (textAnchor === "char-top") {
-    const anchorStyle = getComputedStyle(anchorEl);
-    const ctx = charTopCanvas.getContext("2d");
-    ctx.font = `${anchorStyle.fontWeight} ${anchorStyle.fontSize} ${anchorStyle.fontFamily}`;
-    const m = ctx.measureText("M");
-    const baselineY = anchorRect.bottom - m.fontBoundingBoxDescent;
-    desiredChildTopY = baselineY - m.actualBoundingBoxAscent;
-  } else if (textAnchor === "center") {
-    const anchorCenterY = (anchorRect.top + anchorRect.bottom) / 2;
-    desiredChildTopY = anchorCenterY - childH / 2;
-  } else if (textAnchor === "char-bottom") {
-    // Already handled above (early return 0), but guard here for completeness.
-    return 0;
-  } else if (textAnchor === "line-bottom") {
-    desiredChildTopY = anchorRect.bottom - childH;
-  } else {
-    return 0; // unknown textAnchor, no correction
-  }
-  return desiredChildTopY - childNaturalTop;
-};
-const charTopCanvas = document.createElement("canvas");
-
-installImportMetaCssBuild(import.meta);const css$T = /* css */`
-  @layer navi {
-    /* Ensure data attributes from box.jsx can win to update display */
-    .navi_icon {
-      display: inline-flex;
-      box-sizing: border-box;
-      max-width: 100%;
-      /* An icon never grows past the box it sits in, so a glyph can never make
-         a line of text taller than the text itself. lineOverflow="allow" opts
-         out, for an icon that is an affordance rather than a character — a
-         control's chevron or clear button, sized to be touched, not read. */
-      max-height: 100%;
-
-      &[data-line-overflow="allow"] {
-        max-height: none;
-      }
-    }
-  }
-
-  .navi_icon {
-    white-space: nowrap;
-    vertical-align: inherit;
-
-    &[data-icon-char] {
-      aspect-ratio: 1/1;
-      min-width: 0;
-      height: round(1em, 1px);
-      max-height: round(1em, 1px);
-      flex-grow: 0 !important;
-      align-items: center;
-      justify-content: center;
-
-      /* fillLine: measured on the line box (1lh) instead of the character box
-         (1em). The icon still stays inside the line — it just uses all of it,
-         which is what an icon standing on its own in a control's slot wants,
-         where a glyph sitting among letters wants to match their size. */
-      &[data-fill-line] {
-        height: round(1lh, 1px);
-        max-height: round(1lh, 1px);
-      }
-
-      svg,
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      svg {
-        overflow: visible;
-      }
-    }
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-interactive] {
-      cursor: pointer;
-    }
-    &[data-icon-text] {
-      -webkit-font-smoothing: antialiased;
-      text-rendering: optimizeLegibility;
-    }
-  }
-
-  .navi_icon > svg,
-  .navi_icon > img {
-    width: 100%;
-    height: 100%;
-  }
-  .navi_icon[data-width-fixed] > svg,
-  .navi_icon[data-width-fixed] > img {
-    width: 100%;
-    height: auto;
-  }
-  .navi_icon[data-height-fixed] > svg,
-  .navi_icon[data-height-fixed] > img {
-    width: auto;
-    height: 100%;
-  }
-  .navi_icon[data-width-fixed][data-height-fixed] > svg,
-  .navi_icon[data-width-fixed][data-height-fixed] > img {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-/**
- * Renders an icon — an inline SVG/emoji/text glyph that inherits the
- * surrounding text's `currentColor` and (by default) its font size, so it sits
- * on the text baseline like a character.
- *
- * Content comes from either `href` (references an external/sprite symbol via
- * `<use>`) or `children` (an inline `<svg>` element, or a string for a
- * text/emoji icon). All extra props are spread onto the underlying `Box`/`Text`
- * (sizing, spacing, color, className, data-attributes, …).
- *
- * Render mode is chosen automatically:
- * - `children` is a **string** → a text icon (`<Text data-icon-text>`).
- * - **sized** (an explicit `width`/`height`, or `flex`/`grid`) → a block icon
- *   (`<Box square>`), laid out as its own box rather than inline.
- * - otherwise → an **inline char-like** icon that flows on the text baseline
- *   (`data-icon-char`), aligned via `textAnchor`.
- *
- * Accessibility: an icon is treated as decorative (`aria-hidden`) by default
- * whenever it has no explicit size and no `onClick`; give it an explicit
- * `decorative={false}` (or make it interactive) when it conveys meaning.
- *
- * @param {object} props
- * @param {string} [props.href] - URL/id of an external SVG symbol, rendered via
- *   `<svg><use href></svg>`. Mutually exclusive with meaningful `children`.
- * @param {import("ignore:preact").ComponentChildren} [props.children] - Inline icon
- *   content: an `<svg>` element, or a string (renders as a text/emoji icon).
- * @param {boolean} [props.decorative] - Marks the icon `aria-hidden`. Defaults
- *   to `true` for an unsized, non-interactive icon; pass `false` for a
- *   meaning-bearing icon that needs to be exposed to assistive tech.
- * @param {(event: MouseEvent) => void} [props.onClick] - Makes the icon
- *   interactive (`data-interactive`, pointer cursor) and non-decorative.
- * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [props.textAnchor="center"]
- *   - Vertical alignment within the surrounding text line for the inline
- *   char-like mode, forwarded to `TextAnchor`: `"line-top"`/`"line-bottom"`
- *   align to the line box edges, `"char-top"` to the ink ascent, `"center"`
- *   centers on the line box, `"char-bottom"` sits on the baseline. See
- *   `text_anchor.jsx`.
- * @param {{ size?: number, verticalAlign?: string }} [props.lineLayout] -
- *   Describes the surrounding line context (font size / vertical-align),
- *   forwarded to `TextAnchor` so it recomputes the vertical correction when
- *   that context changes.
- * @param {string|number} [props.width] - Explicit width; `"auto"` clears it.
- *   Any explicit size switches the icon to block (sized) mode.
- * @param {string|number} [props.height] - Explicit height; `"auto"` clears it.
- * @param {"allow"} [props.lineOverflow] - `"allow"` lets the icon be taller
- *   than the box it sits in (a line of text, a control's slot) instead of being
- *   capped by it. For an icon that is an affordance sized for the finger rather
- *   than a character sized for reading.
- * @param {boolean} [props.fillLine] - Sizes the icon on the line box (1lh)
- *   rather than on the character box (1em), so it uses the full height of the
- *   line without leaving it. Unlike `lineOverflow`, the icon still never
- *   exceeds the line.
- * @param {boolean} [props.square] - Keep a 1:1 box; combined with one explicit
- *   dimension it fixes the other too.
- * @param {boolean} [props.circle] - Like `square`, plus a circular shape.
- * @param {string|number} [props.aspectRatio] - Fixes the second dimension from
- *   the one explicit dimension.
- * @param {"x"|"y"|boolean} [props.flex] - Forces block/flex layout; auto-set to
- *   `"x"` when the icon is sized.
- * @param {boolean} [props.grid] - Forces block/grid layout.
- * @param {string} [props.className] - Merged with the base `"navi_icon"` class.
- */
-const Icon = ({
-  href,
-  children,
-  decorative,
-  onClick,
-  textAnchor = "center",
-  lineLayout,
-  lineOverflow,
-  fillLine,
-  ...props
-}) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/text/icon.jsx"];
-  const innerChildren = href ? jsx("svg", {
-    width: "100%",
-    height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  let {
-    flex,
-    grid,
-    width,
-    height
-  } = props;
-  if (width === "auto") {
-    width = undefined;
-  }
-  if (height === "auto") {
-    height = undefined;
-  }
-  const hasExplicitWidth = width !== undefined;
-  const hasExplicitHeight = height !== undefined;
-  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
-  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
-  if (widthFixed || heightFixed) {
-    if (flex === undefined) {
-      flex = "x";
-    }
-  } else if (decorative === undefined && !onClick) {
-    decorative = true;
-  }
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {};
-  const textRef = useRef();
-  if (typeof children === "string") {
-    return jsx(Text, {
-      ...props,
-      ...ariaProps,
-      "data-icon-text": "",
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      children: children
-    });
-  }
-  if (flex || grid) {
-    return jsx(Box, {
-      square: true,
-      ...props,
-      ...ariaProps,
-      flex: flex,
-      baseClassName: "navi_icon",
-      "data-width-fixed": widthFixed ? "" : undefined,
-      "data-height-fixed": heightFixed ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      onClick: onClick,
-      children: innerChildren
-    });
-  }
-  return jsx(TextAnchor, {
-    childRef: textRef,
-    textAnchor: textAnchor,
-    textSize: props.size,
-    lineLayout: lineLayout,
-    children: jsxs(Text, {
-      ...props,
-      ...ariaProps,
-      className: withPropsClassName("navi_icon", props.className),
-      spacing: "pre",
-      "data-icon-char": "",
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      "data-width-fixed": widthFixed ? "" : undefined,
-      "data-height-fixed": heightFixed ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      onClick: onClick,
-      ref: textRef,
-      children: [jsx("span", {
-        style: "user-select:none",
-        children: "\u200B"
-      }), innerChildren]
-    })
-  });
-};
-
 /**
  * Hook that reactively checks if a URL is visited.
  * Re-renders when the visited URL set changes.
@@ -55463,6 +55827,16 @@ const isTextInputElement = (el) => {
   );
 };
 
+// How many lines the thing around a component gives it, when that thing caps
+// its own height and cannot cap what it holds.
+//
+// A <Picker> is the case it exists for: its value is clamped with maxLines,
+// which is CSS line-clamp — it counts line boxes of inline text and has no idea
+// what a wrapped flex row is. So a <BadgeList> rendered as a picker's ui reads
+// the number from here and caps its own rows to it, and the picker turns its
+// own clamp off (see .navi_picker_value:has(.navi_badge_list) in picker.jsx).
+const MaxLinesContext = createContext(undefined);
+
 // When a component render a prop that can be anything (js value of preact element)
 // make sure it cannot throw during render by converting it to a string if it's not a valid preact element or a primitive value
 const renderSafe = (value) => {
@@ -57861,12 +58235,24 @@ const ListItemSelectable = props => {
     ...rest
   } = props;
   const multiple = useContext(SelectableListMultipleContext);
+  // Whose reason it is that this row cannot be taken. Read-only reaching it
+  // from above is the LIST's, and what is settled is then the whole answer —
+  // said as the selection where several things are taken, as the choice where
+  // one thing is. Said of each row in turn, "this option is not available"
+  // describes something else entirely: a list where each row happens to be
+  // unavailable for its own reasons, which goes on being said that way. Busy
+  // is not settled either: a list waiting on something says nothing about what
+  // will be possible once it is done, so the row keeps its own words.
+  const readOnlyFromAbove = useContext(ReadOnlyContext);
+  const loadingFromAbove = useContext(LoadingContext$1);
+  const answerIsSettled = Boolean(readOnlyFromAbove) && !loadingFromAbove;
+  const readOnlyMessageKey = answerIsSettled ? multiple ? `constraint.readonly.selection` : `constraint.readonly.choice` : `constraint.readonly.option`;
   const inputRef = useRef();
   const inputType = multiple ? "checkbox" : "radio";
   const inputId = `${id}_input`;
   inputRef.nullCanHappen = true; // virtualization
   const [checkableRootProps, checkableProps, controlChildrenWrapperProps] = useCheckableProps({
-    readOnlyMessage: naviI18n(`constraint.readonly.option`, props),
+    readOnlyMessage: naviI18n(readOnlyMessageKey, props),
     ...rest,
     ref: inputRef,
     id: inputId,
@@ -62511,6 +62897,51 @@ const PickerPresetResolver = props => {
   });
 };
 
+// Put around its children by BadgeList so a Badge below knows it is inside one.
+// A badge then renders nothing at all: it hands its props to the list and the
+// list renders it. Badges register in tree order, so by the time the list gets
+// to its own content it holds them all, in source order, and knows how many
+// there are before deciding what to show — without ever walking children
+// vnodes, and without rendering a badge it then has to take back.
+const BadgeListContext = createContext(null);
+
+const createBadgeRegistry = () => {
+  let pass = 0;
+  let passCount = 0;
+  let entries = [];
+  let childrenAreNew = true;
+
+  return {
+    // Called by BadgeList at the top of every render. childrenAreNew says
+    // whether it was handed fresh children vnodes: when it re-renders on its
+    // own (its own state changed) Preact hands the untouched children straight
+    // back and skips them, so none of the badges registers again. That empty
+    // pass means "unchanged", not "no badge left" — see getEntries.
+    startPass: (areNew) => {
+      pass++;
+      passCount = 0;
+      childrenAreNew = areNew;
+    },
+    // entryState is the badge's own memory. A badge that re-renders on its own
+    // must update its entry, not append a second one.
+    register: (entryState, props) => {
+      if (entryState.pass !== pass) {
+        entryState.pass = pass;
+        entryState.index = passCount;
+        passCount++;
+      }
+      entries[entryState.index] = props;
+    },
+    getEntries: () => {
+      if (passCount === 0 && !childrenAreNew) {
+        return entries;
+      }
+      entries.length = passCount;
+      return entries;
+    },
+  };
+};
+
 installImportMetaCssBuild(import.meta);const css$x = /* css */`
   @layer navi {
   }
@@ -62569,6 +63000,11 @@ installImportMetaCssBuild(import.meta);const css$x = /* css */`
     align-items: stretch;
     color: var(--x-color);
     font-size: var(--font-size);
+    /* Cuts the font's half-leading above the first line and below the last one,
+       down to cap-height/baseline: the padding becomes the only vertical space
+       and the text is exactly centered. Space between wrapped lines is left
+       untouched, unlike a line-height tweak. */
+    text-box: trim-both cap alphabetic;
     background: var(--x-background);
     background-color: var(--x-background-color);
     border-radius: 1em;
@@ -62618,7 +63054,22 @@ installImportMetaCssBuild(import.meta);const css$x = /* css */`
     }
   }
 `;
-const Badge = ({
+const Badge = props => {
+  const badgeList = useContext(BadgeListContext);
+  const entryStateRef = useRef();
+  if (badgeList) {
+    // Inside a BadgeList the badge renders nothing: it hands itself over and
+    // the list renders it, which is how the list gets to see them all before
+    // deciding how many it shows. See badge_list_context.js.
+    const entryState = entryStateRef.current || (entryStateRef.current = {});
+    badgeList.register(entryState, props);
+    return null;
+  }
+  return jsx(BadgeUI, {
+    ...props
+  });
+};
+const BadgeUI = ({
   children,
   className,
   ...props
@@ -62633,7 +63084,14 @@ const Badge = ({
   return jsx(Text, {
     className: withPropsClassName("navi_badge", className),
     bold: true,
-    maxLines: 1,
+    maxLines: 1
+    // The text-box trim ends the content box at the baseline, and a clamped
+    // badge is clipped there: descenders of the last visible line would be
+    // cut. Halfway to the next line's cap top keeps them, still above any
+    // ink from the line the clamp hides.
+    ,
+
+    overflowClipMargin: "content-box calc((1lh - 1cap) / 2)",
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: jsx("span", {}),
@@ -62657,6 +63115,15 @@ const BadgeStyleCSSVars = {
   fontSize: "--font-size"
 };
 const BadgeButton = props => {
+  const ownTargetHidden = useOwnTargetHidden(props);
+  if (ownTargetHidden) {
+    return null;
+  }
+  return jsx(BadgeButtonUI, {
+    ...props
+  });
+};
+const BadgeButtonUI = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
   const [buttonRootProps, buttonHostProps] = useControlProps(props, {
@@ -62687,20 +63154,208 @@ installImportMetaCssBuild(import.meta);const css$w = /* css */`
       visibility: hidden;
       pointer-events: none;
     }
+
+    /* maxLines renders every badge for one layout, reads where the rows fell,
+       then renders again with only what fits. The in-between is hidden rather
+       than clipped: the badges that don't make it must leave the DOM, not sit
+       there cut in half. Both renders land in the same frame (the second one
+       is queued from a layout effect), so nothing shows up half measured. */
+    &[navi-badge-list-measuring] {
+      visibility: hidden;
+    }
   }
 
   .navi_badge.navi_badge_more {
     white-space: nowrap;
   }
 `;
-const BadgeList = ({
+
+// Groups badges by the row they wrapped onto.
+// The signal we look for is horizontal: inside a row each badge starts further
+// right than the previous one, at a wrap the next one starts back at the row
+// start. Vertical positions can't be used because "align-items: center" gives
+// badges of different heights different tops within a single row.
+const groupRectsByRow = elements => {
+  const rows = [];
+  let previousLeft = -Infinity;
+  for (const element of elements) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    if (rows.length === 0 || rect.left <= previousLeft) {
+      rows.push([]);
+    }
+    rows[rows.length - 1].push(rect);
+    previousLeft = rect.left;
+  }
+  return rows;
+};
+
+// Reads a list that currently holds every badge plus the "+N" badge and tells
+// how many badges fit in maxLines rows.
+const measureRowFit = (listEl, maxLines) => {
+  const elements = Array.from(listEl.children);
+  if (elements.length < 2) {
+    return elements.length;
+  }
+  // The "+N" badge is rendered last. It sits after every badge so it moves none
+  // of them, which is what lets it be measured in the same layout it is left
+  // out of.
+  const moreRect = elements[elements.length - 1].getBoundingClientRect();
+  const badgeElements = elements.slice(0, -1);
+  const rows = groupRectsByRow(badgeElements);
+  if (rows.length <= maxLines) {
+    return badgeElements.length;
+  }
+  const styles = getComputedStyle(listEl);
+  const gap = parseFloat(styles.columnGap) || 0;
+  const contentRight = listEl.getBoundingClientRect().right - (parseFloat(styles.paddingRight) || 0) - (parseFloat(styles.borderRightWidth) || 0);
+
+  // The "+N" badge lands right after the last kept badge, so it eats into the
+  // last visible row: drop badges from that row until it fits. Emptying that
+  // row entirely is a valid outcome — the badge then wraps onto it and takes it
+  // for itself, which is still within maxLines.
+  const rowsKept = rows.slice(0, maxLines);
+  const lastRow = rowsKept[rowsKept.length - 1];
+  let lastRowCount = lastRow.length;
+  while (lastRowCount > 0 && lastRow[lastRowCount - 1].right + gap + moreRect.width > contentRight + 0.5) {
+    lastRowCount--;
+  }
+  return rowsKept.slice(0, -1).reduce((count, row) => count + row.length, 0) + lastRowCount;
+};
+const BADGE_LIST_PROPS = {
+  inline: true,
+  flex: "x",
+  alignY: "center",
+  spacing: "xs"
+};
+
+// The badges hand themselves over as they render instead of being read upfront
+// from the children vnodes: see badge_list_context.js. Only worth it when the
+// list has something to decide — how many to show, or whether there is none at
+// all. Otherwise the badges render themselves and nothing has to be collected.
+const useBadgeRegistry = (children, enabled) => {
+  const registryRef = useRef();
+  const previousChildrenRef = useRef();
+  if (!enabled) {
+    return null;
+  }
+  const registry = registryRef.current || (registryRef.current = createBadgeRegistry());
+  // Whether Preact is about to render the badges again or hand back the ones it
+  // already has, which it does when the list re-renders on its own.
+  registry.startPass(previousChildrenRef.current !== children);
+  previousChildrenRef.current = children;
+  return registry;
+};
+
+/**
+ * A row of badges that wraps.
+ *
+ * Four shapes behind one name, because what the list has to do at runtime is
+ * not the same in each. Nothing is set up for a case that cannot happen: a
+ * plain list is one element holding its children as-is — no registry, no
+ * effect —, a capped one collects its badges but measures nothing, and only
+ * shrinkWrap ever builds the measurement ghost.
+ *
+ * @param {import("ignore:preact").ComponentChildren} [fallback]
+ *   Rendered in place of the badges when there is none. Without it an empty
+ *   list renders nothing at all. In a <Picker> this is the only placeholder
+ *   the user gets — a picker given a `ui` does not draw its own — so pass the
+ *   placeholder text: `fallback="Select skills…"`. Plain text is the right
+ *   choice there: it reads at the picker's size, in the placeholder color the
+ *   picker gives its empty value slot, and the box stays the same height. A
+ *   transparent <Badge> matches the slot to the pixel instead, at the price of
+ *   badge-sized text. See docs/badge_list.md.
+ * @param {boolean} [shrinkWrap]
+ *   Narrows the list down to its widest row so the last row isn't ragged.
+ *   Defaults to true inside a <Picker> — the trigger draws a border around the
+ *   list, so the ragged edge shows — and false elsewhere, where the work would
+ *   often go unseen: opt in where an edge is visible. Ignored when maxLines is
+ *   in play, which needs the full width to know where the rows fall.
+ * @param {number} [max]
+ *   Caps how many badges are rendered; the surplus becomes a "+N" badge, which
+ *   takes one of the max slots.
+ * @param {number} [maxLines]
+ *   Caps how many rows are shown, measured. Falls back to what the surrounding
+ *   component grants (a <Picker>, see max_lines_context.js).
+ */
+const BadgeList = props => {
+  import.meta.css = [css$w, "@jsenv/navi/src/text/badge_list.jsx"];
+  const {
+    maxLines,
+    max,
+    fallback
+  } = props;
+  const maxLinesFromAbove = useContext(MaxLinesContext);
+  const maxLinesResolved = maxLines === undefined ? maxLinesFromAbove : maxLines;
+  // Granted lines mean a clamping container — a <Picker> — whose border makes
+  // the ragged last row show; nothing of the sort around us, and shrink
+  // wrapping is work nobody sees unless asked for.
+  const {
+    shrinkWrap = maxLinesFromAbove !== undefined
+  } = props;
+  if (maxLinesResolved !== undefined) {
+    // shrinkWrap is dropped on purpose: it narrows the list down to its widest
+    // row, which would re-wrap the badges under the cap just measured.
+    return jsx(BadgeListMaxLines, {
+      ...props,
+      maxLines: maxLinesResolved
+    });
+  }
+  if (shrinkWrap) {
+    return jsx(BadgeListShrinkWrap, {
+      ...props
+    });
+  }
+  if (max !== undefined || fallback !== undefined) {
+    return jsx(BadgeListCounted, {
+      ...props
+    });
+  }
+  return jsx(BadgeListPlain, {
+    ...props
+  });
+};
+
+// Nothing to measure, cap, or count: the badges render themselves — no
+// registry, no context, no effect, one element.
+const BadgeListPlain = props => {
+  return jsx(Box, {
+    baseClassName: "navi_badge_list",
+    ...BADGE_LIST_PROPS,
+    ...props
+  });
+};
+
+// max/fallback need the badge count, so the badges are collected — but nothing
+// is measured and no DOM is watched.
+const BadgeListCounted = ({
   fallback,
   children,
-  shrinkWrap = true,
   max,
-  ...props
+  ...boxProps
 }) => {
-  import.meta.css = [css$w, "@jsenv/navi/src/text/badge_list.jsx"];
+  const registry = useBadgeRegistry(children, true);
+  return jsx(Box, {
+    baseClassName: "navi_badge_list",
+    ...BADGE_LIST_PROPS,
+    ...boxProps,
+    children: jsx(BadgeListChildren, {
+      registry: registry,
+      max: max,
+      fallback: fallback,
+      children: children
+    })
+  });
+};
+const BadgeListShrinkWrap = ({
+  fallback,
+  children,
+  max,
+  ...restProps
+}) => {
+  const registry = useBadgeRegistry(children, max !== undefined || fallback !== undefined);
   const measureRef = useRef();
   const visibleRef = useRef();
   useLayoutEffect(() => {
@@ -62713,18 +63368,25 @@ const BadgeList = ({
     let rafId;
     const measure = () => {
       visibleEl.style.width = "";
-      if (shrinkWrap) {
-        // Clone the already-rendered DOM nodes instead of letting React/Preact
-        // render the children a second time into the ghost: re-rendering would
-        // instantiate Badge/Badge.Button a second time, double-registering
-        // their controllers (and any other mount side effect) under the same id.
-        measureEl.replaceChildren(...Array.from(visibleEl.children, child => child.cloneNode(true)));
-        const optimalWidth = measureWidestChildRow(measureEl);
-        if (optimalWidth !== null) {
-          visibleEl.style.width = `${Math.ceil(optimalWidth)}px`;
-        }
+      // Clone the already-rendered DOM nodes instead of letting React/Preact
+      // render the children a second time into the ghost: re-rendering would
+      // instantiate Badge/Badge.Button a second time, double-registering their
+      // controllers (and any other mount side effect) under the same id.
+      measureEl.replaceChildren(...Array.from(visibleEl.children, child => child.cloneNode(true)));
+      const optimalWidth = measureWidestChildRow(measureEl);
+      if (optimalWidth !== null) {
+        visibleEl.style.width = `${Math.ceil(optimalWidth)}px`;
       }
     };
+
+    // A single badge is a single row, and a single row is already the widest
+    // one: there is nothing to narrow, and no width the list could be given
+    // that would change that.
+    if (visibleEl.children.length < 2) {
+      visibleEl.style.width = "";
+      measureEl.replaceChildren();
+      return undefined;
+    }
     measure();
     const onResize = () => {
       cancelAnimationFrame(rafId);
@@ -62741,36 +63403,201 @@ const BadgeList = ({
       observer?.disconnect();
       window.removeEventListener("resize", onResize);
     };
-  }, [shrinkWrap, children]);
-  const childArray = toChildArray(children);
-  const hasMax = max !== undefined && childArray.length > max;
-  const visibleChildren = hasMax ? childArray.slice(0, max - 1) : childArray;
-  const hiddenCount = hasMax ? childArray.length - (max - 1) : 0;
-  const sharedProps = {
-    inline: true,
-    flex: "x",
-    alignY: "center",
-    spacing: "xs",
-    ...props
+  }, [children]);
+  const boxProps = {
+    ...BADGE_LIST_PROPS,
+    ...restProps
   };
-  return jsxs(Box, {
-    relative: true,
-    children: [jsx(Box, {
-      baseClassName: "navi_badge_list",
-      ...sharedProps,
-      ref: measureRef,
-      "aria-hidden": "true",
-      "navi-badge-list-clone": ""
-    }), jsxs(Box, {
-      baseClassName: "navi_badge_list",
-      ...sharedProps,
-      ref: visibleRef,
-      children: [visibleChildren.length ? visibleChildren : fallback, hiddenCount > 0 && jsx(Badge, {
-        className: "navi_badge_more",
-        children: naviI18n("badge_list.more", {
-          count: hiddenCount
+  return (
+    // inline flex, not a plain block: the wrapper must sit on the line the way
+    // the list itself would, otherwise the list lands a pixel low in some
+    // containers.
+    jsxs(Box, {
+      relative: true,
+      inline: true,
+      flex: "x",
+      children: [jsx(Box, {
+        baseClassName: "navi_badge_list",
+        ...boxProps,
+        ref: measureRef,
+        "aria-hidden": "true",
+        "navi-badge-list-clone": ""
+      }), jsx(Box, {
+        baseClassName: "navi_badge_list",
+        ...boxProps,
+        ref: visibleRef,
+        children: jsx(BadgeListChildren, {
+          registry: registry,
+          max: max,
+          fallback: fallback,
+          children: children
         })
       })]
+    })
+  );
+};
+const BadgeListMaxLines = ({
+  fallback,
+  children,
+  max,
+  maxLines,
+  ...boxProps
+}) => {
+  const registry = useBadgeRegistry(children, true);
+  const visibleRef = useRef();
+
+  // What the measure found: how many badges there were and how many of them fit
+  // in maxLines rows. null means "not measured yet": the list then renders them
+  // all, hidden, for the layout effect to read.
+  const [fit, setFit] = useState(null);
+  // The two widths this list gives whatever is around it: the one it takes with
+  // every badge rendered, and the one it settles on once the surplus is gone.
+  // Neither is a reason to measure again — see the resize watch below.
+  const selfWidthsRef = useRef({
+    full: -1,
+    settled: -1
+  });
+  const measuring = fit === null;
+  // A single badge is a single row whatever the width, so nothing can move it
+  // out of the cap and nothing has to be watched.
+  const watchesResize = fit !== null && fit.count > 1;
+
+  // Runs after every render, which is when the badges have registered and the
+  // DOM holds whatever this render asked for.
+  useLayoutEffect(() => {
+    const visibleEl = visibleRef.current;
+    if (!visibleEl) {
+      return;
+    }
+    const count = registry.getEntries().length;
+    const width = visibleEl.parentElement?.getBoundingClientRect().width ?? -1;
+    if (fit === null) {
+      selfWidthsRef.current.full = width;
+      setFit({
+        count,
+        shown: count < 2 ? count : measureRowFit(visibleEl, maxLines)
+      });
+      return;
+    }
+    selfWidthsRef.current.settled = width;
+    if (fit.count !== count) {
+      // Badges came or went: what was measured no longer describes them.
+      setFit(null);
+    }
+  });
+  useLayoutEffect(() => {
+    const outerParent = visibleRef.current?.parentElement;
+    if (!watchesResize || !outerParent) {
+      return undefined;
+    }
+    let rafId;
+    const remeasure = () => {
+      // Only a width change can move the rows — a height change is this list
+      // growing or shrinking, never the room it was given.
+      //
+      // And not every width change either. Nothing guarantees an ancestor whose
+      // width does not follow its content (a column with align-items: start
+      // sizes every row to what is inside it), so rendering every badge widens
+      // what is being watched and dropping the surplus narrows it right back.
+      // Those two widths are this list talking to itself; measuring again on
+      // them never ends. Any other width is the room around it changing.
+      const width = outerParent.getBoundingClientRect().width;
+      const {
+        full,
+        settled
+      } = selfWidthsRef.current;
+      if (Math.abs(width - full) < 0.5 || Math.abs(width - settled) < 0.5) {
+        return;
+      }
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => setFit(null));
+    };
+    const observer = new ResizeObserver(remeasure);
+    observer.observe(outerParent);
+    window.addEventListener("resize", remeasure);
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+      window.removeEventListener("resize", remeasure);
+    };
+  }, [watchesResize, maxLines]);
+  return jsx(Box, {
+    baseClassName: "navi_badge_list",
+    ...BADGE_LIST_PROPS,
+    ...boxProps,
+    ref: visibleRef,
+    "navi-badge-list-measuring": measuring ? "" : undefined,
+    children: jsx(BadgeListChildren, {
+      registry: registry,
+      max: max,
+      fallback: fallback,
+      measuring: measuring,
+      rowFit: fit?.shown ?? null,
+      children: children
+    })
+  });
+};
+const BadgeListChildren = ({
+  registry,
+  children,
+  fallback,
+  max,
+  measuring,
+  rowFit
+}) => {
+  if (!registry) {
+    // The badges are on their own: nothing here decides which of them render.
+    return children;
+  }
+  return jsxs(Fragment$1, {
+    children: [jsx(BadgeListContext.Provider, {
+      value: registry,
+      children: children
+    }), jsx(BadgeListContent, {
+      registry: registry,
+      fallback: fallback,
+      max: max,
+      measuring: measuring,
+      rowFit: rowFit
+    })]
+  });
+};
+const BadgeListContent = ({
+  registry,
+  fallback,
+  max,
+  measuring,
+  rowFit
+}) => {
+  const entries = registry.getEntries();
+  const count = entries.length;
+  if (count === 0) {
+    return fallback;
+  }
+
+  // The "+N" badge stands among the badges, so it takes one of the max slots
+  // when there is a surplus to name. A list of exactly `max` badges has nothing
+  // to name and keeps all of them.
+  let shownCount = max !== undefined && count > max ? max - 1 : count;
+  if (!measuring && rowFit !== null && rowFit !== undefined && rowFit < shownCount) {
+    shownCount = rowFit;
+  }
+  // While measuring, everything above is on screen (hidden) along with the "+N"
+  // badge, so the layout effect can see where the rows fall and how much room
+  // that badge asks for. Its label then reads the worst case — every badge
+  // hidden — so the room reserved is never short.
+  const hasMore = measuring || shownCount < count;
+  return jsxs(Fragment$1, {
+    children: [entries.slice(0, shownCount).map((badgeProps, index) =>
+    // Keyed by position: a badge's own key went to the registering vnode
+    // above and doesn't reach here, and badges keep no state worth moving.
+    jsx(BadgeUI, {
+      ...badgeProps
+    }, index)), hasMore && jsx(BadgeUI, {
+      className: "navi_badge_more",
+      children: naviI18n("badge_list.more", {
+        count: measuring ? count : count - shownCount
+      })
     })]
   });
 };
@@ -63001,7 +63828,6 @@ const PickerObjectUI = () => {
 const PickerArray = props => {
   const Next = useNextResolver();
   return jsx(Next, {
-    maxLines: "3",
     ui: jsx(PickerArrayUI, {}),
     ...props,
     type: "navi_js",
@@ -63031,6 +63857,57 @@ const PickerArrayUI = () => {
     })
   });
 };
+
+/**
+ * One value the picker holds, drawn as a chip with a cross that takes it back
+ * out. Sits wherever the application draws what was picked — on the picker's
+ * façade (`ui`) or inside its popup — and both behave the same.
+ *
+ * The cross asks with `--navi-unselect` rather than writing a new list, and it
+ * asks the picker — which holds what was picked, and hands it down to whatever
+ * draws it in the popup. Nothing to name: the picker is the nearest control
+ * around the chip. `commandFor` is for a chip that stands outside the picker it
+ * speaks for.
+ *
+ * The cross is an own target (see own_target.js), so the press belongs to it
+ * and not to the picker underneath, and it goes when the picker turns read-only
+ * — a row being read still says what was picked, it just no longer offers to
+ * unpick it.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   value: any,
+ *   commandFor?: string,
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ * @param {any} value The value this chip stands for — one entry of what the
+ *   picker holds, and what `--navi-unselect` carries.
+ * @param {string} [commandFor] The id of the picker to take the value out of,
+ *   when the chip does not sit inside it.
+ */
+const PickerChip = ({
+  value,
+  commandFor,
+  children,
+  ...rest
+}) => {
+  return jsxs(Badge, {
+    inline: true,
+    flex: true,
+    ...rest,
+    children: [children, jsx(Badge.Button, {
+      ownTarget: true,
+      command: "--navi-unselect",
+      commandFor: commandFor,
+      value: value,
+      "aria-label": naviI18n("button.remove"),
+      children: jsx(Icon, {
+        lineOverflow: "allow",
+        children: jsx(CloseSvg, {})
+      })
+    })]
+  });
+};
 const PickerColor = props => {
   const Next = useNextResolver();
   return jsx(Next, {
@@ -63469,6 +64346,30 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
       &[navi-placeholder] {
         color: var(--picker-placeholder-color);
       }
+
+      /* A <BadgeList> caps its own rows: it renders the badges that fit and a
+         "+N" badge for the rest, reading the number from MaxLinesContext right
+         below. The picker must then not clamp on top of it — line-clamp turns
+         the value into a -webkit-box and single-line truncation into a
+         nowrap block, either of which takes the badge list out of the
+         inline-flex layout it needs. maxLines writes those as inline styles on
+         the element, hence !important. */
+      &:has(.navi_badge_list) {
+        display: inline-flex !important;
+        -webkit-line-clamp: none !important;
+        overflow: visible !important;
+        -webkit-box-orient: horizontal !important;
+        text-overflow: clip !important;
+        white-space: normal !important;
+      }
+
+      /* The façade is transparent to the pointer — a press on what it draws
+         means "open the picker". An own target is the exception, the same way
+         the clear cross is one in the slot below: it says the press is aimed at
+         IT, so it has to be reachable at all. */
+      [data-own-target] {
+        pointer-events: auto;
+      }
     }
     .navi_picker_right_slot {
       display: inline-flex;
@@ -63757,214 +64658,284 @@ const PickerButton = props => {
   // clearing being a modification like any other.
   const interactive = !basePseudoState[":disabled"] && !basePseudoState[":read-only"] && !loading;
   usePickerErrorCallout(uiStateController, error);
-  return jsxs(Box, {
-    as: "div",
-    ref: ref
-    // The flow this element really has (.navi_picker is display:inline-flex).
-    // Left unsaid, Box reads a <div> as block and resolves alignX into a
-    // text-align — which is a different intention entirely (that one is the
-    // textAlign prop, placing the text INSIDE the value slot).
-    ,
+  return (
+    /* Read-only crosses into everything the picker is made of: what it really
+       holds is drawn by controls of their own — in the popup, and on the façade
+       where an application puts its own affordances — and each of them refuses
+       in its own words once told. Said from the read-only state alone, never
+       from the busy one — an action running for a moment is not the same thing
+       as a value nobody may change. */
+    jsx(ReadOnlyContext.Provider, {
+      value: readOnlyResolved,
+      children: jsxs(Box, {
+        as: "div",
+        ref: ref
+        // The flow this element really has (.navi_picker is display:inline-flex).
+        // Left unsaid, Box reads a <div> as block and resolves alignX into a
+        // text-align — which is a different intention entirely (that one is the
+        // textAlign prop, placing the text INSIDE the value slot).
+        ,
 
-    inline: true,
-    flex: "x",
-    baseClassName: "navi_picker",
-    pseudoClasses: PICKER_BUTTON_PSEUDO_CLASSES,
-    "data-variant": variant,
-    "navi-picker": "",
-    "navi-single-line": isSingleLine ? "" : undefined,
-    "navi-ui-custom": ui === "default" ? undefined : "",
-    "data-readonly-opens": readOnlyOpens ? "" : undefined,
-    "data-popup-width-fit-content": popupWidthFitContent ? "" : undefined,
-    ...pickerRemainingProps,
-    basePseudoState: basePseudoState,
-    styleCSSVars: PickerStyleCSSVars,
-    variant: undefined,
-    rightSlotIcon: undefined,
-    rightSlotIconSize: undefined,
-    rightSlot: undefined,
-    clearConfirm: undefined,
-    clearConfirmPopupContent: undefined,
-    openWhileReadOnly: undefined,
-    ui: undefined,
-    maxLines: undefined,
-    popupWidthFitContent: undefined,
-    error: undefined,
-    dayLabel: undefined
-    // This wrapper will receive keyboard event bubbling from the picker popup content
-    // we re-dispatch on the input (to get escape to close for instance)
-    ,
+        inline: true,
+        flex: "x",
+        baseClassName: "navi_picker",
+        pseudoClasses: PICKER_BUTTON_PSEUDO_CLASSES,
+        "data-variant": variant,
+        "navi-picker": "",
+        "navi-single-line": isSingleLine ? "" : undefined,
+        "navi-ui-custom": ui === "default" ? undefined : "",
+        "data-readonly-opens": readOnlyOpens ? "" : undefined,
+        "data-popup-width-fit-content": popupWidthFitContent ? "" : undefined,
+        ...pickerRemainingProps,
+        basePseudoState: basePseudoState,
+        styleCSSVars: PickerStyleCSSVars,
+        variant: undefined,
+        rightSlotIcon: undefined,
+        rightSlotIconSize: undefined,
+        rightSlot: undefined,
+        clearConfirm: undefined,
+        clearConfirmPopupContent: undefined,
+        openWhileReadOnly: undefined,
+        ui: undefined,
+        maxLines: undefined,
+        popupWidthFitContent: undefined,
+        error: undefined,
+        dayLabel: undefined
+        // This wrapper will receive keyboard event bubbling from the picker popup content
+        // we re-dispatch on the input (to get escape to close for instance)
+        ,
 
-    onKeyDown: inputProps.onKeyDown
-    // in case request open/close are dispatched on the control root ->
-    // redispatch them to the host
-    ,
+        onKeyDown: inputProps.onKeyDown
+        // in case request open/close are dispatched on the control root ->
+        // redispatch them to the host
+        ,
 
-    onnavi_request_open: inputProps.onnavi_request_open,
-    onnavi_request_close: inputProps.onnavi_request_close,
-    children: [jsxs("span", {
-      className: "navi_picker_box",
-      children: [variant === "headless" ? null : jsx(LoadingOutline, {
-        loading: loading,
-        color: "var(--picker-loader-color)",
-        inset: -2
-      }), jsx(PickerInput, {
-        tabIndex: variant === "headless" ? -1 : undefined,
-        "aria-hidden": variant === "headless" ? "true" : undefined,
-        ...inputProps,
-        // eslint-disable-next-line react/no-children-prop
-        children: undefined // we will render children into the div
+        onnavi_request_open: inputProps.onnavi_request_open,
+        onnavi_request_close: inputProps.onnavi_request_close
+        // `--navi-select`/`--navi-unselect` about one entry of the list the
+        // picker holds — a chip on the façade, a suggestion beside the field.
+        // Answered here rather than by the control drawing that list in the
+        // popup, even though rows are what such a control owns: a picker given
+        // its own value builds its popup only on first open (see
+        // popup_content_mount.js), so before that there is no such control at
+        // all — and building the whole popup to have someone to talk to, for a
+        // cross, is the wrong price. The picker holds the value in the first
+        // place and hands it down whenever the popup is built.
         ,
 
-        ui: ui,
-        onFocus: e => {
-          inputProps.onFocus?.(e);
-          e.target.select();
+        onnavi_request_select: e => {
+          requestPickerListEntry(ref.current, inputRef.current, e, "select");
         },
-        onCopy: e => {
-          const pickerEl = ref.current;
-          if (isWithinPickerContent(e.target, pickerEl)) {
-            return;
-          }
-          const uiState = uiStateController.uiState;
-          if (uiState === undefined) {
-            return;
-          }
-          e.preventDefault();
-          const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
-          e.clipboardData.setData("text/plain", displayText);
-          e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
+        onnavi_request_unselect: e => {
+          requestPickerListEntry(ref.current, inputRef.current, e, "unselect");
         },
-        onCut: e => {
-          const pickerEl = ref.current;
-          if (isWithinPickerContent(e.target, pickerEl)) {
-            return;
-          }
-          const uiState = uiStateController.uiState;
-          if (uiState === undefined) {
-            return;
-          }
-          // the copy part don't need control to be interactable
-          const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
-          e.clipboardData.setData("text/plain", displayText);
-          e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
-          // the clear ui state part need control to be interactable
-          dispatchRequestInteraction(pickerEl, {
-            event: e,
-            name: "cut",
-            allowed: () => {
-              dispatchRequestClearUIState(inputRef.current, e);
-            }
-          });
-          e.preventDefault();
-        },
-        onPaste: e => {
-          const pickerEl = ref.current;
-          if (isWithinPickerContent(e.target, pickerEl)) {
-            // Don't intercept inside the picker popup content.
-            return;
-          }
-          const naviData = e.clipboardData.getData("application/x-navi");
-          let pasteValue;
-          if (naviData) {
-            try {
-              pasteValue = JSON.parse(naviData);
-            } catch {
-              pasteValue = naviData;
-            }
-          } else {
-            pasteValue = e.clipboardData.getData("text/plain");
-          }
-          dispatchRequestInteraction(pickerEl, {
-            event: e,
-            name: "paste",
-            allowed: () => {
-              dispatchRequestSetUIState(inputRef.current, pasteValue, {
-                event: e
+        children: [jsxs("span", {
+          className: "navi_picker_box",
+          children: [variant === "headless" ? null : jsx(LoadingOutline, {
+            loading: loading,
+            color: "var(--picker-loader-color)",
+            inset: -2
+          }), jsx(PickerInput, {
+            tabIndex: variant === "headless" ? -1 : undefined,
+            "aria-hidden": variant === "headless" ? "true" : undefined,
+            ...inputProps,
+            // eslint-disable-next-line react/no-children-prop
+            children: undefined // we will render children into the div
+            ,
+
+            ui: ui,
+            onFocus: e => {
+              inputProps.onFocus?.(e);
+              e.target.select();
+            },
+            onCopy: e => {
+              const pickerEl = ref.current;
+              if (isWithinPickerContent(e.target, pickerEl)) {
+                return;
+              }
+              const uiState = uiStateController.uiState;
+              if (uiState === undefined) {
+                return;
+              }
+              e.preventDefault();
+              const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
+              e.clipboardData.setData("text/plain", displayText);
+              e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
+            },
+            onCut: e => {
+              const pickerEl = ref.current;
+              if (isWithinPickerContent(e.target, pickerEl)) {
+                return;
+              }
+              const uiState = uiStateController.uiState;
+              if (uiState === undefined) {
+                return;
+              }
+              // the copy part don't need control to be interactable
+              const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
+              e.clipboardData.setData("text/plain", displayText);
+              e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
+              // the clear ui state part need control to be interactable
+              dispatchRequestInteraction(pickerEl, {
+                event: e,
+                name: "cut",
+                allowed: () => {
+                  dispatchRequestClearUIState(inputRef.current, e);
+                }
               });
+              e.preventDefault();
+            },
+            onPaste: e => {
+              const pickerEl = ref.current;
+              if (isWithinPickerContent(e.target, pickerEl)) {
+                // Don't intercept inside the picker popup content.
+                return;
+              }
+              const naviData = e.clipboardData.getData("application/x-navi");
+              let pasteValue;
+              if (naviData) {
+                try {
+                  pasteValue = JSON.parse(naviData);
+                } catch {
+                  pasteValue = naviData;
+                }
+              } else {
+                pasteValue = e.clipboardData.getData("text/plain");
+              }
+              dispatchRequestInteraction(pickerEl, {
+                event: e,
+                name: "paste",
+                allowed: () => {
+                  dispatchRequestSetUIState(inputRef.current, pasteValue, {
+                    event: e
+                  });
+                }
+              });
+              e.preventDefault();
             }
-          });
-          e.preventDefault();
-        }
-      }), variant === "icon" || variant === "headless" || ui === "default" ? null : jsx(Text, {
-        className: "navi_picker_value",
-        "navi-placeholder": value === undefined || value === "" ? "" : undefined,
-        maxLines: maxLines,
-        children: jsx(PickerContext.Provider, {
-          value: {
-            value,
-            placeholder,
-            maxLines
-          },
-          children: ui === undefined ? jsx(PickerDefaultUI, {}) : ui
-        })
-      }), variant === "headless" || ui === "default" ? null : jsx("span", {
-        className: "navi_picker_right_slot",
-        children: jsx(ControlIdContext.Provider, {
-          value: undefined,
-          children: jsx(ControlNameContext.Provider, {
-            value: undefined,
-            children: clearable && interactive && value !== undefined && value !== "" ? jsx(Button, {
-              command: "--navi-clear",
-              commandFor: inputProps.id
-              // The question, asked before the clear rather than by the
-              // action the clear sends — see the --navi-clear command.
-              ,
-
-              confirm: clearConfirm,
-              confirmPopupContent: clearConfirmPopupContent,
-              tabIndex: "-1"
-              // No navi-focus-delegate, unlike the identical button inside an
-              // input: handing focus back to the picker's own input is what
-              // opens the popup, and clearing is the opposite intention.
-              ,
-
-              icon: true,
-              variant: "discrete"
-              // What is busy once the clear is sent is the picker — the value
-              // being removed is the whole field's, and the picker already
-              // draws the wait around all of it. Two outlines for one wait is
-              // one too many.
-              ,
-
-              loadingOutline: false
-              // preventDefault, not just tabIndex="-1": a mousedown focuses
-              // its target before any click happens, and this button should
-              // never hold focus at all — the field keeps it.
-              ,
-
-              onMouseDown: e => {
-                e.preventDefault();
-              },
-              flex: true,
-              align: "center",
-              children: jsx(Icon, {
+          }), variant === "icon" || variant === "headless" || ui === "default" ? null : jsx(Text, {
+            className: "navi_picker_value",
+            "navi-placeholder": uiStateHoldsNothing(value) ? "" : undefined,
+            maxLines: maxLines,
+            children: jsx(PickerOwnContent, {
+              children: jsx(PickerContext.Provider, {
+                value: {
+                  value,
+                  placeholder,
+                  maxLines
+                },
+                children: jsx(MaxLinesContext.Provider, {
+                  value: maxLines,
+                  children: ui === undefined ? jsx(PickerDefaultUI, {}) : ui
+                })
+              })
+            })
+          }), variant === "headless" || ui === "default" ? null : jsx("span", {
+            className: "navi_picker_right_slot",
+            children: jsx(PickerOwnContent, {
+              children: clearable && interactive && value !== undefined && value !== "" ? jsx(Button, {
+                command: "--navi-clear",
+                commandFor: inputProps.id
+                // The question, asked before the clear rather than by the
+                // action the clear sends — see the --navi-clear command.
+                ,
+
+                confirm: clearConfirm,
+                confirmPopupContent: clearConfirmPopupContent,
+                tabIndex: "-1"
+                // No navi-focus-delegate, unlike the identical button inside an
+                // input: handing focus back to the picker's own input is what
+                // opens the popup, and clearing is the opposite intention.
+                ,
+
+                icon: true,
+                variant: "discrete"
+                // What is busy once the clear is sent is the picker — the value
+                // being removed is the whole field's, and the picker already
+                // draws the wait around all of it. Two outlines for one wait is
+                // one too many.
+                ,
+
+                loadingOutline: false
+                // preventDefault, not just tabIndex="-1": a mousedown focuses
+                // its target before any click happens, and this button should
+                // never hold focus at all — the field keeps it.
+                ,
+
+                onMouseDown: e => {
+                  e.preventDefault();
+                },
+                flex: true,
+                align: "center",
+                children: jsx(Icon, {
+                  size: rightSlotIconSize,
+                  lineOverflow: "allow",
+                  children: jsx(CloseSvg, {})
+                })
+              }) : rightSlot === undefined ?
+              // lineOverflow: what sits in the slot is an affordance, not a
+              // character — a caller asking for a bigger one wants it bigger,
+              // not capped at the height of the line it sits on
+              jsx(Icon, {
                 size: rightSlotIconSize,
                 lineOverflow: "allow",
-                children: jsx(CloseSvg, {})
-              })
-            }) : rightSlot === undefined ?
-            // lineOverflow: what sits in the slot is an affordance, not a
-            // character — a caller asking for a bigger one wants it bigger,
-            // not capped at the height of the line it sits on
-            jsx(Icon, {
-              size: rightSlotIconSize,
-              lineOverflow: "allow",
-              children: rightSlotIcon === undefined ? jsx(ChevronDownSvg$1, {}) : rightSlotIcon
-            }) : rightSlot
+                children: rightSlotIcon === undefined ? jsx(ChevronDownSvg$1, {}) : rightSlotIcon
+              }) : rightSlot
+            })
+          })]
+        }), jsx(ControlFacadeChildrenWrapper, {
+          ...facadeChildrenProps,
+          children: jsx("div", {
+            className: "navi_picker_content",
+            children: children
           })
-        })
-      })]
-    }), jsx(ControlFacadeChildrenWrapper, {
-      ...facadeChildrenProps,
-      children: jsx(ReadOnlyContext.Provider, {
-        value: readOnlyResolved,
-        children: jsx("div", {
-          className: "navi_picker_content",
-          children: children
-        })
+        })]
       })
-    })]
+    })
+  );
+};
+// What the picker draws itself — the value it shows, the furniture in its slot,
+// and whatever a caller puts in either — is not another control of the field
+// around it: none of it may take the id (nor the name) a <Field> hands down,
+// which is the picker's. Two controls under one id is one registry entry, and
+// the one that unmounts first — the clear cross the moment the field it emptied
+// is empty, a chip the moment its value is taken out — takes the picker's own
+// entry with it, leaving the picker looking for a controller that is gone.
+const PickerOwnContent = ({
+  children
+}) => jsx(ControlIdContext.Provider, {
+  value: undefined,
+  children: jsx(ControlNameContext.Provider, {
+    value: undefined,
+    children: children
+  })
+});
+
+// `id` is what --navi-select/--navi-unselect carry (a list addresses its rows by
+// id); asked of a picker, what they carry is one entry of the list the picker
+// holds — the same thing a `<Picker.Chip value>` stands for.
+const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
+  const uiState = getUIStateFromElement(pickerInputEl);
+  if (!Array.isArray(uiState)) {
+    return;
+  }
+  const {
+    id: entry
+  } = e.detail;
+  const isThere = uiState.some(item => compareTwoJsValues(item, entry));
+  if (goal === "select" ? isThere : !isThere) {
+    return;
+  }
+  const uiStateNext = goal === "select" ? [...uiState, entry] : uiState.filter(item => !compareTwoJsValues(item, entry));
+  dispatchRequestInteraction(pickerEl, {
+    event: e,
+    name: goal,
+    prevented: () => e.preventDefault(),
+    allowed: () => {
+      dispatchRequestSetUIState(pickerInputEl, uiStateNext, {
+        event: e
+      });
+    }
   });
 };
 const isWithinPickerContent = (el, pickerEl) => {
@@ -64109,6 +65080,7 @@ const PickerFirstResolver = props => {
   });
 };
 const Picker = createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
+Picker.Chip = PickerChip;
 Picker.UI = PickerDefaultUI;
 Picker.UI.Date = PickerDateUI;
 Picker.UI.Time = PickerTimeUI;
@@ -74904,6 +75876,9 @@ const MessageBox = ({
   padding = "sm",
   icon,
   leftStripe,
+  // A message is free text: an emoji is expected in it, and must not push
+  // the first line down next to the icon and the close button.
+  emojiAsIcon = true,
   children,
   onClose,
   ...rest
@@ -74941,26 +75916,39 @@ const MessageBox = ({
         value: setHasTitleChild,
         children: [icon && jsx(Icon, {
           color: "var(--x-message-color)",
-          height: "1.5em",
+          height: "1lh",
           maxHeight: "auto",
           selfAlignY: "start",
           aspectRatio: "auto",
           children: icon
         }), jsx(Text, {
+          emojiAsIcon: emojiAsIcon,
           children: children
-        }), onClose && jsx(Button, {
-          action: onClose,
-          icon: true,
-          border: "none",
-          alignX: "center",
+        }), 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",
-          style: {
-            ":hover": {
-              backgroundColor: "rgba(0, 0, 0, 0.1)"
-            }
-          },
-          children: jsx(Icon, {
-            children: jsx(CloseSvg, {})
+          height: "1lh",
+          selfAlignY: "start",
+          shrink: false,
+          children: jsx(Button, {
+            action: onClose,
+            icon: true,
+            border: "none",
+            alignX: "center",
+            alignY: "center",
+            style: {
+              ":hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            children: jsx(Icon, {
+              children: jsx(CloseSvg, {})
+            })
           })
         })]
       })
@@ -77048,5 +78036,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, renderEmojiAsIcon, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map