@jsenv/navi 0.23.9 → 0.24.1

package/dist/jsenv_navi.js

@@ -1,5 +1,5 @@
 import { installImportMetaCssBuild } from "./jsenv_navi_side_effects.js";
-import { isValidElement, h, createContext, toChildArray, render, createRef, cloneElement } from "preact";
+import { isValidElement, h, createContext, options, toChildArray, render, createRef, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useEffect, useMemo, useRef, useState, useCallback, useContext, useImperativeHandle, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { signal, effect, computed, batch, useSignal } from "@preact/signals";
@@ -7226,6 +7226,12 @@ const PSEUDO_CLASSES = {
     attribute: "data-invalid",
     test: (el) => el.matches(":invalid"),
   },
+  ":-navi-highlighted": {
+    attribute: "data-highlighted",
+  },
+  ":-navi-selected": {
+    attribute: "data-selected",
+  },
   ":-navi-loading": {
     attribute: "data-loading",
   },
@@ -7515,6 +7521,111 @@ const updateStyle = (element, style, preventInitialTransition) => {
   styleKeySetWeakMap.set(element, styleKeySet);
 };
 
+// Implementation notes:
+//
+// options.__r fires before each component render — we capture the current
+// component instance (vnode.__c) so useEarlyDOMEffect can register itself.
+//
+// options.__c (commitRoot) fires after refs are assigned and before any
+// useLayoutEffect runs. We flush all pending effects there.
+// The DOM node is read from component.__v.__e (vnode → root DOM node),
+// which Preact sets during diffing, before options.__c fires.
+//
+// stateMap (WeakMap) stores { cleanup, deps } per component instance.
+// It's auto-GC'd when a component is destroyed; options.unmount also
+// deletes entries eagerly to release cleanup functions sooner.
+//
+// pendingMap (Map) holds effects registered during the current render pass.
+// It is always fully cleared in options.__c — bounded to one commit, no leak.
+
+/**
+ * Like useLayoutEffect, but runs before any layout effect in the commit —
+ * including those of descendant components.
+ *
+ * Use this when a parent needs to mutate the DOM (e.g. apply styles) so that
+ * children can read those mutations in their own useLayoutEffect.
+ *
+ * The DOM node of the component is passed as the first argument to fn.
+ * The effect is skipped if no DOM node is found (e.g. on a fragment root).
+ *
+ * Supports deps and cleanup return, same as useLayoutEffect.
+ */
+const useEarlyDOMEffect = (fn, deps) => {
+  const component = _currentComponent;
+  if (component) {
+    pendingMap.set(component, { fn, deps });
+  }
+};
+
+// Populated during render, consumed + cleared in options.__c each commit.
+const pendingMap = new Map(); // component → { fn, deps, ref }
+
+// Persists across commits. WeakMap → no leak when component is destroyed.
+const stateMap = new WeakMap(); // component → { cleanup, deps }
+
+let _currentComponent = null;
+const _prevBeforeRender = options.__r;
+options.__r = (vnode) => {
+  _currentComponent = vnode.__c;
+  if (_prevBeforeRender) {
+    _prevBeforeRender(vnode);
+  }
+};
+
+const _prevCommit = options.__c;
+options.__c = (root, commitQueue) => {
+  for (const [component, { fn, deps }] of pendingMap) {
+    // component.__v is the component's vnode; __e is its root DOM node.
+    // Both are set during diff, before options.__c fires.
+    const element = component.__v && component.__v.__e;
+    if (!element) {
+      continue;
+    }
+    const prev = stateMap.get(component);
+    const prevDeps = prev ? prev.deps : undefined;
+    let depsChanged;
+    if (!prevDeps || !deps || prevDeps.length !== deps.length) {
+      depsChanged = true;
+    } else {
+      for (let i = 0; i < deps.length; i++) {
+        if (!Object.is(deps[i], prevDeps[i])) {
+          depsChanged = true;
+          break;
+        }
+      }
+    }
+    if (depsChanged) {
+      if (prev && prev.cleanup) {
+        prev.cleanup();
+      }
+      const result = fn(element);
+      const cleanup = typeof result === "function" ? result : undefined;
+      stateMap.set(component, { cleanup, deps });
+    }
+  }
+  pendingMap.clear();
+  if (_prevCommit) {
+    _prevCommit(root, commitQueue);
+  }
+};
+
+const _prevUnmount = options.unmount;
+options.unmount = (vnode) => {
+  const component = vnode.__c;
+  if (component) {
+    const state = stateMap.get(component);
+    if (state && state.cleanup) {
+      state.cleanup();
+    }
+    // stateMap is a WeakMap so the entry is GC'd automatically,
+    // but deleting explicitly releases the cleanup fn sooner.
+    stateMap.delete(component);
+  }
+  if (_prevUnmount) {
+    _prevUnmount(vnode);
+  }
+};
+
 installImportMetaCssBuild(import.meta);/**
  * Box - A Swiss Army Knife for Layout
  *
@@ -7539,6 +7650,33 @@ installImportMetaCssBuild(import.meta);/**
  * ## Spacing & Sizing
  *
  * Props for margin, padding, gap, width, height, expand, shrink, and more.
+ *
+ * ## Pseudo-class Styles
+ *
+ * The `style` prop supports pseudo-class keys alongside regular CSS properties.
+ * This lets you express hover, focus, and custom interaction states in one object,
+ * without writing CSS or adding class names:
+ *
+ * ```jsx
+ * <Box
+ *   style={{
+ *     backgroundColor: "blue",
+ *     ":-navi:pressed": {
+ *       backgroundColor: "darkblue",
+ *     },
+ *     ":hover": {
+ *       backgroundColor: "lightblue",
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * Styles are applied directly to the DOM (not via Preact's style prop) for two reasons:
+ * 1. **Pseudo-class support**: reacting to `:hover`, `:focus`, or custom states like
+ *    `:-navi:pressed` without re-rendering the component on every pseudo state change.
+ * 2. **Correct initial render**: pseudo-class state must be read from the DOM node at
+ *    mount time. Preact's style prop runs before the DOM exists, so the right initial
+ *    style can only be determined once the node is available.
  */
 import.meta.css = [/* css */`
   [navi-box-flow="inline"] {
@@ -7930,42 +8068,36 @@ const Box = props => {
         visitProp(styleValue, styleName, styleContext, boxStyles, "style");
       }
     }
-    const updateStyle = useCallback(state => {
-      const boxEl = ref.current;
-      applyStyle(boxEl, boxStyles, state, boxPseudoNamedStyles, preventInitialTransition);
-    }, styleDeps);
-    const finalStyleDeps = [pseudoStateSelector, innerPseudoState, updateStyle];
+    styleDeps.push(pseudoStateSelector, innerPseudoState);
     let innerPseudoClasses;
     if (pseudoClassesFromStyleSet.size) {
       innerPseudoClasses = [...pseudoClasses];
       if (pseudoClasses !== PSEUDO_CLASSES_DEFAULT) {
-        finalStyleDeps.push(...pseudoClasses);
+        styleDeps.push(...pseudoClasses);
       }
       for (const key of pseudoClassesFromStyleSet) {
         innerPseudoClasses.push(key);
-        finalStyleDeps.push(key);
+        styleDeps.push(key);
       }
     } else {
       innerPseudoClasses = pseudoClasses;
       if (pseudoClasses !== PSEUDO_CLASSES_DEFAULT) {
-        finalStyleDeps.push(...pseudoClasses);
+        styleDeps.push(...pseudoClasses);
       }
     }
-    useLayoutEffect(() => {
-      const boxEl = ref.current;
-      if (!boxEl) {
-        return null;
-      }
+    useEarlyDOMEffect(boxEl => {
       const pseudoStateEl = pseudoStateSelector ? boxEl.querySelector(pseudoStateSelector) : boxEl;
       const visualEl = visualSelector ? boxEl.querySelector(visualSelector) : null;
       return initPseudoStyles(pseudoStateEl, {
         pseudoClasses: innerPseudoClasses,
         pseudoState: innerPseudoState,
-        effect: updateStyle,
+        effect: state => {
+          applyStyle(boxEl, boxStyles, state, boxPseudoNamedStyles, preventInitialTransition);
+        },
         elementToImpact: boxEl,
         elementListeningPseudoState: visualEl === pseudoStateEl ? null : visualEl
       });
-    }, finalStyleDeps);
+    }, styleDeps);
   }
 
   // When hasChildFunction is used it means
@@ -13884,7 +14016,7 @@ const RouteActive = ({
 const routeAction = (
   route,
   action,
-  paramsEffect = () => route.paramsSignal.value,
+  paramsEffect = () => true,
   options = {},
 ) => {
   const actionBoundToRoute = actionRunEffect(
@@ -15656,7 +15788,7 @@ installImportMetaCssBuild(import.meta);
  * - Centers in viewport when no anchor element provided or anchor is too big
  */
 
-import.meta.css = [/* css */`
+const css$w = /* css */`
   @layer navi {
     .navi_callout {
       --callout-success-color: #4caf50;
@@ -15798,7 +15930,7 @@ import.meta.css = [/* css */`
       }
     }
   }
-`, "@jsenv/navi/src/field/validation/callout/callout.js"];
+`;
 
 /**
  * Shows a callout attached to the specified element
@@ -15830,6 +15962,7 @@ const openCallout = (message, {
   showErrorStack,
   debug = false
 } = {}) => {
+  import.meta.css = [css$w, "@jsenv/navi/src/field/validation/callout/callout.js"];
   const callout = {
     opened: true,
     close: null,
@@ -15989,8 +16122,14 @@ const openCallout = (message, {
     }
     allowWheelThrough(calloutElement, anchorElement);
     anchorElement.setAttribute("data-callout", calloutId);
+    dispatchCalloutCustomElement(anchorElement, new CustomEvent("navi_callout_open", {
+      bubbles: true
+    }));
     addTeardown(() => {
       anchorElement.removeAttribute("data-callout");
+      dispatchCalloutCustomElement(anchorElement, new CustomEvent("navi_callout_close", {
+        bubbles: true
+      }));
     });
     addStatusEffect(status => {
       if (!status) {
@@ -16621,6 +16760,20 @@ const generateSvgWithoutArrow = (width, height) => {
       />
     </svg>`;
 };
+const dispatchCalloutCustomElement = (anchorElement, customEvent) => {
+  let targetElement;
+  const visualSelector = anchorElement.getAttribute("data-visual-selector");
+  if (visualSelector) {
+    const visualElement = anchorElement.querySelector(visualSelector);
+    if (visualElement) {
+      targetElement = visualElement;
+    }
+  } else {
+    targetElement = anchorElement;
+  }
+  console.log("dispatch on", targetElement, "event", customEvent);
+  targetElement.dispatchEvent(customEvent);
+};
 
 /**
  * Creates a live mirror of a source DOM element that automatically stays in sync.
@@ -16996,6 +17149,56 @@ CONSTRAINT_ATTRIBUTE_SET.add("data-special-charset");
 CONSTRAINT_ATTRIBUTE_SET.add("data-min-special-char");
 CONSTRAINT_ATTRIBUTE_SET.add("data-min-special-char-message");
 
+const ONE_OF_CONSTRAINT = {
+  name: "one_of",
+  messageAttribute: "data-one-of-message",
+  check: (field) => {
+    const oneOf = field.getAttribute("data-one-of");
+    if (!oneOf) {
+      return null;
+    }
+    const fieldValue = field.value;
+    if (!fieldValue) {
+      return null;
+    }
+    const listEl = document.querySelector(oneOf);
+    if (!listEl) {
+      console.warn(
+        `One of constraint: could not find element for selector "${oneOf}"`,
+      );
+      return null;
+    }
+    const allowedValues = collectAllowedValues(listEl);
+    if (allowedValues.size === 0) {
+      return null;
+    }
+    if (allowedValues.has(fieldValue)) {
+      return null;
+    }
+    const message = field.getAttribute("data-one-of-message");
+    if (message) {
+      return message;
+    }
+    return `Veuillez choisir une valeur parmi les suggestions.`;
+  },
+};
+CONSTRAINT_ATTRIBUTE_SET.add("data-one-of");
+CONSTRAINT_ATTRIBUTE_SET.add("data-one-of-message");
+
+const collectAllowedValues = (listEl) => {
+  const values = new Set();
+  for (const optionEl of listEl.querySelectorAll("[role='option']")) {
+    const value =
+      optionEl.dataset.value ??
+      optionEl.getAttribute("value") ??
+      optionEl.textContent.trim();
+    if (value) {
+      values.add(value);
+    }
+  }
+  return values;
+};
+
 const READONLY_CONSTRAINT = {
   name: "readonly",
   messageAttribute: "data-readonly-message",
@@ -17748,6 +17951,7 @@ const NAVI_CONSTRAINT_SET = new Set([
   MIN_UPPER_LETTER_CONSTRAINT,
   MIN_LOWER_LETTER_CONSTRAINT,
   SAME_AS_CONSTRAINT,
+  ONE_OF_CONSTRAINT,
   READONLY_CONSTRAINT,
 ]);
 const DEFAULT_CONSTRAINT_SET = new Set([
@@ -20166,7 +20370,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-const css$u = /* css */`
+const css$v = /* css */`
   @layer navi {
     .navi_text {
       &[data-skeleton] {
@@ -20475,7 +20679,7 @@ const shouldInjectSpacingBetween = (left, right) => {
 };
 const OverflowPinnedElementContext = createContext(null);
 const Text = props => {
-  import.meta.css = [css$u, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$v, "@jsenv/navi/src/text/text.jsx"];
   if (props.loading || props.skeleton) {
     return jsx(TextSkeleton, {
       ...props
@@ -20671,7 +20875,7 @@ const TextBasic = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$t = /* css */`
+installImportMetaCssBuild(import.meta);const css$u = /* css */`
   .navi_text_anchor {
     vertical-align: baseline;
     user-select: none;
@@ -20706,7 +20910,7 @@ const TextAnchor = ({
   textSize,
   lineLayout
 }) => {
-  import.meta.css = [css$t, "@jsenv/navi/src/text/text_anchor.jsx"];
+  import.meta.css = [css$u, "@jsenv/navi/src/text/text_anchor.jsx"];
   const anchorRef = useRef();
   useLayoutEffect(() => {
     const anchorEl = anchorRef.current;
@@ -20801,7 +21005,7 @@ const computeTopOffset = ({
 };
 const charTopCanvas = document.createElement("canvas");
 
-installImportMetaCssBuild(import.meta);const css$s = /* css */`
+installImportMetaCssBuild(import.meta);const css$t = /* css */`
   @layer navi {
     /* Ensure data attributes from box.jsx can win to update display */
     .navi_icon {
@@ -20874,7 +21078,7 @@ const Icon = ({
   lineLayout,
   ...props
 }) => {
-  import.meta.css = [css$s, "@jsenv/navi/src/text/icon.jsx"];
+  import.meta.css = [css$t, "@jsenv/navi/src/text/icon.jsx"];
   const innerChildren = href ? jsx("svg", {
     width: "100%",
     height: "100%",
@@ -20955,6 +21159,109 @@ const Icon = ({
   });
 };
 
+/**
+ * Toggles a `data-dark-background` attribute on the referenced element based on its
+ * computed background color. Pair it with a CSS variable to get automatic
+ * light/dark text without hard-coding colors:
+ *
+ * ```css
+ * .my-element {
+ *   --color-contrasting: black;
+ *   &[data-dark-background] {
+ *     --color-contrasting: white;
+ *   }
+ *   color: var(--color-contrasting);
+ * }
+ * ```
+ *
+ * - `data-dark-background` is **set** when the background is dark enough that white text
+ *   provides better (or equal) contrast.
+ * - `data-dark-background` is **absent** when black text is the better choice.
+ *
+ * @param {import("preact").RefObject} ref - Ref to the element that receives
+ *   the `data-dark-background` attribute and is also passed to `contrastColor` for
+ *   resolving CSS variables.
+ * @param {object} [options]
+ * @param {string} [options.backgroundElementSelector] - CSS selector relative
+ *   to `ref.current` pointing to a child element whose `background-color`
+ *   should be tested instead of the element itself. Useful when the element
+ *   has a transparent background but contains a coloured child (e.g. a fill
+ *   bar inside a track).
+ */
+
+const useDarkBackgroundAttribute = (
+  ref,
+  deps = [],
+  {
+    backgroundElementSelector,
+    attributeName = "data-dark-background",
+    hardcoded = {},
+  } = {},
+) => {
+  const innerDeps = [
+    ...deps,
+    // ref can change is the component pass a different ref on different render based on some logic
+    // (can be used to control which element backgroundColor is being checked by switching the ref to another element)
+    ref,
+    // backgroundElementSelector can change if the component pass a different selector on different render based on some logic
+    // (can be used to control which element backgroundColor is being checked by switching the selector to point to another element)
+    backgroundElementSelector,
+  ];
+
+  const hardcodedMap = new Map();
+  for (const key of Object.keys(hardcoded)) {
+    const value = hardcoded[key];
+    innerDeps.push(key, value);
+    const colorString = normalizeColorString(key);
+    hardcodedMap.set(colorString, value);
+  }
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return undefined;
+    }
+    let elementToCheck = el;
+    if (backgroundElementSelector) {
+      elementToCheck = el.querySelector(backgroundElementSelector);
+      if (!elementToCheck) {
+        return undefined;
+      }
+    }
+    const updateAttribute = () => {
+      const computedStyle = getComputedStyle(elementToCheck);
+      const backgroundColor = computedStyle.backgroundColor;
+      if (!backgroundColor) {
+        el.removeAttribute(attributeName);
+        return;
+      }
+      const backgroundColorString = normalizeColorString(backgroundColor, el);
+      const hardcodedContrast = hardcodedMap.get(backgroundColorString);
+      const contrastingColor =
+        hardcodedContrast || contrastColor(backgroundColor, el);
+      if (contrastingColor === "white") {
+        el.setAttribute(attributeName, "");
+      } else {
+        el.removeAttribute(attributeName);
+      }
+    };
+    updateAttribute();
+    el.addEventListener(NAVI_PSEUDO_STATE_CUSTOM_EVENT, updateAttribute);
+    return () => {
+      el.removeEventListener(NAVI_PSEUDO_STATE_CUSTOM_EVENT, updateAttribute);
+      el.removeAttribute(attributeName);
+    };
+  }, innerDeps);
+};
+
+const normalizeColorString = (color, el) => {
+  const colorRgba = resolveCSSColor(color, el);
+  if (!colorRgba) {
+    return "";
+  }
+  return String(colorRgba);
+};
+
 const useFormEvents = (
   elementRef,
   {
@@ -21477,7 +21784,7 @@ const useUIState = (uiStateController) => {
 };
 
 installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-const css$r = /* css */`
+const css$s = /* css */`
   @layer navi {
     .navi_button {
       --button-outline-width: 1px;
@@ -21559,8 +21866,6 @@ const css$r = /* css */`
     --x-button-background-color: var(--button-background-color);
     --x-button-color: var(--button-color);
     --x-button-cursor: var(--button-cursor);
-
-    position: relative;
     box-sizing: border-box;
     aspect-ratio: inherit;
     padding: 0;
@@ -21573,6 +21878,10 @@ const css$r = /* css */`
     touch-action: manipulation;
     user-select: none;
 
+    &[data-dark-background] {
+      --button-color: white;
+    }
+
     &[data-icon] {
       --button-padding: 0;
     }
@@ -21741,7 +22050,7 @@ const css$r = /* css */`
   }
 `;
 const Button = props => {
-  import.meta.css = [css$r, "@jsenv/navi/src/field/button.jsx"];
+  import.meta.css = [css$s, "@jsenv/navi/src/field/button.jsx"];
   return renderActionableComponent(props, {
     Basic: ButtonBasicDispatch,
     WithAction: ButtonWithAction,
@@ -21855,6 +22164,7 @@ const ButtonBasic = props => {
     innerTarget = target === undefined ? isSameSite ? undefined : "_blank" : target;
     innerRel = rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel;
   }
+  useDarkBackgroundAttribute(ref, [innerLoading, innerDisabled, innerReadOnly]);
   const renderButtonContent = buttonProps => {
     return jsxs(Text, {
       ...buttonProps,
@@ -22217,104 +22527,6 @@ const Title = props => {
   });
 };
 
-/**
- * Toggles a `data-dark-background` attribute on the referenced element based on its
- * computed background color. Pair it with a CSS variable to get automatic
- * light/dark text without hard-coding colors:
- *
- * ```css
- * .my-element {
- *   --color-contrasting: black;
- *   &[data-dark-background] {
- *     --color-contrasting: white;
- *   }
- *   color: var(--color-contrasting);
- * }
- * ```
- *
- * - `data-dark-background` is **set** when the background is dark enough that white text
- *   provides better (or equal) contrast.
- * - `data-dark-background` is **absent** when black text is the better choice.
- *
- * @param {import("preact").RefObject} ref - Ref to the element that receives
- *   the `data-dark-background` attribute and is also passed to `contrastColor` for
- *   resolving CSS variables.
- * @param {object} [options]
- * @param {string} [options.backgroundElementSelector] - CSS selector relative
- *   to `ref.current` pointing to a child element whose `background-color`
- *   should be tested instead of the element itself. Useful when the element
- *   has a transparent background but contains a coloured child (e.g. a fill
- *   bar inside a track).
- */
-
-const useDarkBackgroundAttribute = (
-  ref,
-  deps = [],
-  {
-    backgroundElementSelector,
-    attributeName = "data-dark-background",
-    hardcoded = {},
-  } = {},
-) => {
-  const innerDeps = [
-    ...deps,
-    // ref can change is the component pass a different ref on different render based on some logic
-    // (can be used to control which element backgroundColor is being checked by switching the ref to another element)
-    ref,
-    // backgroundElementSelector can change if the component pass a different selector on different render based on some logic
-    // (can be used to control which element backgroundColor is being checked by switching the selector to point to another element)
-    backgroundElementSelector,
-  ];
-
-  const hardcodedMap = new Map();
-  for (const key of Object.keys(hardcoded)) {
-    const value = hardcoded[key];
-    innerDeps.push(key, value);
-    const colorString = normalizeColorString(key);
-    hardcodedMap.set(colorString, value);
-  }
-
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return null;
-    }
-    let elementToCheck = el;
-    if (backgroundElementSelector) {
-      elementToCheck = el.querySelector(backgroundElementSelector);
-      if (!elementToCheck) {
-        return null;
-      }
-    }
-    const computedStyle = getComputedStyle(elementToCheck);
-    const backgroundColor = computedStyle.backgroundColor;
-    if (!backgroundColor) {
-      el.removeAttribute(attributeName);
-      return null;
-    }
-    const backgroundColorString = normalizeColorString(backgroundColor, el);
-    const hardcodedContrast = hardcodedMap.get(backgroundColorString);
-    const contrastingColor =
-      hardcodedContrast || contrastColor(backgroundColor, el);
-    if (contrastingColor === "white") {
-      el.setAttribute(attributeName, "");
-      return () => {
-        el.removeAttribute(attributeName);
-      };
-    }
-    el.removeAttribute(attributeName);
-    return null;
-  }, innerDeps);
-};
-
-const normalizeColorString = (color, el) => {
-  const colorRgba = resolveCSSColor(color, el);
-  if (!colorRgba) {
-    return "";
-  }
-  return String(colorRgba);
-};
-
 /**
  * Hook that reactively checks if a URL is visited.
  * Re-renders when the visited URL set changes.
@@ -22370,7 +22582,7 @@ const useDimColorWhen = (elementRef, shouldDim) => {
 };
 
 installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-const css$q = /* css */`
+const css$r = /* css */`
   @layer navi {
     .navi_link {
       --link-border-radius: unset;
@@ -22442,10 +22654,22 @@ const css$q = /* css */`
 
     position: relative;
     aspect-ratio: inherit;
-    padding-top: max(var(--x-link-padding-top), var(--link-loading-outline-size));
-    padding-right: max(var(--x-link-padding-right), var(--link-loading-outline-size));
-    padding-bottom: max(var(--x-link-padding-bottom), var(--link-loading-outline-size));
-    padding-left: max(var(--x-link-padding-left), var(--link-loading-outline-size));
+    padding-top: max(
+      var(--x-link-padding-top),
+      var(--link-loading-outline-size)
+    );
+    padding-right: max(
+      var(--x-link-padding-right),
+      var(--link-loading-outline-size)
+    );
+    padding-bottom: max(
+      var(--x-link-padding-bottom),
+      var(--link-loading-outline-size)
+    );
+    padding-left: max(
+      var(--x-link-padding-left),
+      var(--link-loading-outline-size)
+    );
     color: var(--x-link-color);
     text-decoration: var(--x-link-text-decoration);
     background: var(--x-link-background);
@@ -22712,13 +22936,10 @@ Object.assign(PSEUDO_CLASSES, {
   },
   ":-navi-href-current": {
     attribute: "data-href-current"
-  },
-  ":-navi-selected": {
-    attribute: "data-selected"
   }
 });
 const Link = props => {
-  import.meta.css = [css$q, "@jsenv/navi/src/nav/link/link.jsx"];
+  import.meta.css = [css$r, "@jsenv/navi/src/nav/link/link.jsx"];
   return renderActionableComponent(props, {
     Basic: LinkBasic,
     WithAction: LinkWithAction
@@ -22980,7 +23201,7 @@ installImportMetaCssBuild(import.meta);/**
  * TabList component with support for horizontal and vertical layouts
  * https://dribbble.com/search/tabs
  */
-const css$p = /* css */`
+const css$q = /* css */`
   @layer navi {
     .navi_nav {
       --nav-border: none;
@@ -23116,7 +23337,7 @@ const Nav = ({
   panelBorderConnection,
   ...props
 }) => {
-  import.meta.css = [css$p, "@jsenv/navi/src/nav/link/nav.jsx"];
+  import.meta.css = [css$q, "@jsenv/navi/src/nav/link/nav.jsx"];
   children = toChildArray(children);
   return jsx(Box, {
     as: "nav",
@@ -23164,7 +23385,7 @@ const useFocusGroup = (
 
 installImportMetaCssBuild(import.meta);const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
 const downArrowPath = "M480-280L160-600l80-80 240 240 240-240 80 80-320 320z";
-const css$o = /* css */`
+const css$p = /* css */`
   .navi_summary_marker {
     width: 1em;
     height: 1em;
@@ -23249,7 +23470,7 @@ const SummaryMarker = ({
   open,
   loading
 }) => {
-  import.meta.css = [css$o, "@jsenv/navi/src/field/details/summary_marker.jsx"];
+  import.meta.css = [css$p, "@jsenv/navi/src/field/details/summary_marker.jsx"];
   const showLoading = useDebounceTrue(loading, 300);
   const mountedRef = useRef(false);
   const prevOpenRef = useRef(open);
@@ -23303,7 +23524,7 @@ const SummaryMarker = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$n = /* css */`
+installImportMetaCssBuild(import.meta);const css$o = /* css */`
   .navi_details {
     position: relative;
     z-index: 1;
@@ -23340,7 +23561,7 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
   }
 `;
 const Details = props => {
-  import.meta.css = [css$n, "@jsenv/navi/src/field/details/details.jsx"];
+  import.meta.css = [css$o, "@jsenv/navi/src/field/details/details.jsx"];
   const {
     value = "on",
     persists
@@ -23655,7 +23876,7 @@ const fieldPropSet = new Set([
   "data-testid",
 ]);
 
-installImportMetaCssBuild(import.meta);const css$m = /* css */`
+installImportMetaCssBuild(import.meta);const css$n = /* css */`
   @layer navi {
     label {
       &[data-interactive] {
@@ -23687,7 +23908,7 @@ const reportDisabledToLabel = value => {
 };
 const LabelPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
 const Label = props => {
-  import.meta.css = [css$m, "@jsenv/navi/src/field/label.jsx"];
+  import.meta.css = [css$n, "@jsenv/navi/src/field/label.jsx"];
   const {
     readOnly,
     disabled,
@@ -23721,7 +23942,7 @@ const Label = props => {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$l = /* css */`
+installImportMetaCssBuild(import.meta);const css$m = /* css */`
   @layer navi {
     .navi_checkbox {
       --margin: 3px 3px 3px 4px;
@@ -24048,7 +24269,7 @@ installImportMetaCssBuild(import.meta);const css$l = /* css */`
   }
 `;
 const InputCheckbox = props => {
-  import.meta.css = [css$l, "@jsenv/navi/src/field/input_checkbox.jsx"];
+  import.meta.css = [css$m, "@jsenv/navi/src/field/input_checkbox.jsx"];
   const {
     value = "on"
   } = props;
@@ -24462,7 +24683,7 @@ forwardRef((props, ref) => {
   });
 });
 
-installImportMetaCssBuild(import.meta);const css$k = /* css */`
+installImportMetaCssBuild(import.meta);const css$l = /* css */`
   @layer navi {
     .navi_radio {
       --margin: 3px 3px 0 5px;
@@ -24755,7 +24976,7 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
   }
 `;
 const InputRadio = props => {
-  import.meta.css = [css$k, "@jsenv/navi/src/field/input_radio.jsx"];
+  import.meta.css = [css$l, "@jsenv/navi/src/field/input_radio.jsx"];
   const {
     value = "on"
   } = props;
@@ -25001,7 +25222,7 @@ const InputRadioWithAction = () => {
   throw new Error(`<Input type="radio" /> with an action make no sense. Use <RadioList action={something} /> instead`);
 };
 
-installImportMetaCssBuild(import.meta);const css$j = /* css */`
+installImportMetaCssBuild(import.meta);const css$k = /* css */`
   @layer navi {
     .navi_input_range {
       --border-radius: 6px;
@@ -25210,7 +25431,7 @@ installImportMetaCssBuild(import.meta);const css$j = /* css */`
   }
 `;
 const InputRange = props => {
-  import.meta.css = [css$j, "@jsenv/navi/src/field/input_range.jsx"];
+  import.meta.css = [css$k, "@jsenv/navi/src/field/input_range.jsx"];
   const uiStateController = useUIStateController(props, "input");
   const uiState = useUIState(uiStateController);
   const input = renderActionableComponent(props, {
@@ -25480,24 +25701,8 @@ const SearchSvg = () => jsx("svg", {
   })
 });
 
-installImportMetaCssBuild(import.meta);/**
- * Input component for all textual input types.
- *
- * Supports:
- * - text (default)
- * - password
- * - hidden
- * - email
- * - url
- * - search
- * - tel
- * - etc.
- *
- * For non-textual inputs, specialized components will be used:
- * - <InputCheckbox /> for type="checkbox"
- * - <InputRadio /> for type="radio"
- */
-const css$i = /* css */`
+installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
+const css$j = /* css */`
   @layer navi {
     .navi_input {
       --border-radius: 2px;
@@ -25709,7 +25914,7 @@ const css$i = /* css */`
   }
 `;
 const InputTextual = props => {
-  import.meta.css = [css$i, "@jsenv/navi/src/field/input_textual.jsx"];
+  import.meta.css = [css$j, "@jsenv/navi/src/field/input_textual.jsx"];
   const uiStateController = useUIStateController(props, "input");
   const uiState = useUIState(uiStateController);
   const input = renderActionableComponent(props, {
@@ -25782,6 +25987,197 @@ Object.assign(PSEUDO_CLASSES, {
 const InputPseudoElements = ["::-navi-loader"];
 const InputChildPropSet = new Set([...fieldPropSet]);
 const InputTextualBasic = props => {
+  if (props.combobox) {
+    return jsx(InputTextualCombobox, {
+      ...props
+    });
+  }
+  return jsx(InputTextualPlain, {
+    ...props
+  });
+};
+const InputTextualCombobox = ({
+  combobox,
+  onInput,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const defaultRef = useRef();
+  const ref = rest.ref || defaultRef;
+  const [comboboxOpen, setComboboxOpen] = useState(false);
+  const comboboxOpenRef = useRef(false);
+  comboboxOpenRef.current = comboboxOpen;
+  const showPopover = e => {
+    if (comboboxOpenRef.current) {
+      return;
+    }
+    console.debug(`showPopover (e.type:${e.type})`);
+    const popoverEl = document.getElementById(combobox);
+    positionPopover();
+    popoverEl.showPopover();
+    comboboxOpenRef.current = true;
+    setComboboxOpen(true);
+    window.addEventListener("scroll", positionPopover, {
+      capture: true,
+      passive: true
+    });
+  };
+  const hidePopover = e => {
+    if (!comboboxOpenRef.current) {
+      return;
+    }
+    console.debug(`hidePopover (e.type:${e.type})`);
+    comboboxOpenRef.current = false;
+    setComboboxOpen(false);
+    window.removeEventListener("scroll", positionPopover, {
+      capture: true
+    });
+    const popoverEl = document.getElementById(combobox);
+    if (popoverEl) {
+      popoverEl.dispatchEvent(new CustomEvent("combobox-clear"));
+      popoverEl.hidePopover();
+    }
+    setComboboxOpen(false);
+  };
+  const positionPopover = () => {
+    const input = ref.current;
+    const rect = input.getBoundingClientRect();
+    const popoverEl = document.getElementById(combobox);
+    if (popoverEl) {
+      popoverEl.style.top = `${rect.bottom + 2}px`;
+      popoverEl.style.left = `${rect.left}px`;
+      popoverEl.style.width = `${rect.width}px`;
+    }
+  };
+  const dispatchToOptionList = customEvent => {
+    const popoverEl = document.getElementById(combobox);
+    if (!popoverEl) {
+      return false;
+    }
+    popoverEl.dispatchEvent(customEvent);
+    return customEvent.defaultPrevented;
+  };
+  useKeyboardShortcuts(ref, [{
+    key: "arrowdown",
+    description: "Open popover and highlight next option",
+    handler: e => {
+      showPopover(e);
+      const popoverEl = document.getElementById(combobox);
+      if (!popoverEl) {
+        return false;
+      }
+      popoverEl.dispatchEvent(new CustomEvent("combobox-navigate", {
+        detail: {
+          direction: "down"
+        }
+      }));
+      return true;
+    }
+  }, {
+    key: "arrowup",
+    description: "Open popover and highlight previous option",
+    handler: e => {
+      showPopover(e);
+      return dispatchToOptionList(new CustomEvent("combobox-navigate", {
+        detail: {
+          direction: "up"
+        }
+      }));
+    }
+  }, {
+    key: "home",
+    description: "Highlight first option",
+    handler: () => {
+      if (!comboboxOpenRef.current) {
+        return false;
+      }
+      return dispatchToOptionList(new CustomEvent("combobox-navigate", {
+        detail: {
+          direction: "first"
+        }
+      }));
+    }
+  }, {
+    key: "end",
+    description: "Highlight last option",
+    handler: () => {
+      if (!comboboxOpenRef.current) {
+        return false;
+      }
+      return dispatchToOptionList(new CustomEvent("combobox-navigate", {
+        detail: {
+          direction: "last"
+        }
+      }));
+    }
+  }, {
+    key: "enter",
+    description: "Confirm highlighted option",
+    handler: () => {
+      if (!comboboxOpenRef.current) {
+        return false;
+      }
+      return dispatchToOptionList(new CustomEvent("combobox-confirm", {
+        cancelable: true
+      }));
+    }
+  }, {
+    key: "escape",
+    description: "Close popover",
+    handler: e => {
+      if (!comboboxOpenRef.current) {
+        return false;
+      }
+      hidePopover(e);
+      return true;
+    }
+  }]);
+  useEffect(() => {
+    const inputEl = ref.current;
+    const popoverEl = document.getElementById(combobox);
+    if (!popoverEl) {
+      return undefined;
+    }
+    const onSelected = e => {
+      inputEl.value = e.detail.value;
+      inputEl.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
+      hidePopover(e);
+    };
+    popoverEl.addEventListener("combobox-selected", onSelected);
+    return () => {
+      popoverEl.removeEventListener("combobox-selected", onSelected);
+    };
+  }, [combobox]);
+  return jsx(InputTextualPlain, {
+    ref: ref,
+    role: "combobox",
+    autoComplete: "off",
+    "aria-controls": combobox,
+    "aria-haspopup": "listbox",
+    "aria-expanded": comboboxOpen,
+    "aria-autocomplete": "list",
+    onnavi_callout_open: e => {
+      hidePopover(e);
+    },
+    onFocus: e => {
+      onFocus?.(e);
+      showPopover(e);
+    },
+    onBlur: e => {
+      onBlur?.(e);
+      hidePopover(e);
+    },
+    onInput: e => {
+      onInput?.(e);
+      showPopover(e);
+    },
+    ...rest
+  });
+};
+const InputTextualPlain = props => {
   const contextReadOnly = useContext(ReadOnlyContext);
   const contextDisabled = useContext(DisabledContext);
   const contextLoading = useContext(LoadingContext);
@@ -25819,6 +26215,9 @@ const InputTextualBasic = props => {
   const innerOnInput = useStableCallback(onInput);
   const autoId = useId();
   const innerId = rest.id || autoId;
+  const {
+    ...remainingRest
+  } = remainingProps;
   const renderInput = inputProps => {
     return jsx(Box, {
       ...inputProps,
@@ -25887,7 +26286,7 @@ const InputTextualBasic = props => {
     baseChildPropSet: InputChildPropSet,
     "data-start-icon": innerIcon ? "" : undefined,
     "data-end-icon": cancelButton ? "" : undefined,
-    ...remainingProps,
+    ...remainingRest,
     ref: undefined,
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
@@ -26079,7 +26478,7 @@ installImportMetaCssBuild(import.meta);/**
  * This means an editable thing MUST have a parent with position relative that wraps the content and the eventual editable input
  *
  */
-const css$h = /* css */`
+const css$i = /* css */`
   .navi_editable_wrapper {
     --inset-top: 0px;
     --inset-right: 0px;
@@ -26128,7 +26527,7 @@ const useEditionController = () => {
   };
 };
 const Editable = props => {
-  import.meta.css = [css$h, "@jsenv/navi/src/field/edition/editable.jsx"];
+  import.meta.css = [css$i, "@jsenv/navi/src/field/edition/editable.jsx"];
   let {
     children,
     action,
@@ -26539,7 +26938,7 @@ const FormWithAction = props => {
 //   form.dispatchEvent(customEvent);
 // };
 
-installImportMetaCssBuild(import.meta);const css$g = /* css */`
+installImportMetaCssBuild(import.meta);const css$h = /* css */`
   .navi_group {
     --border-width: 1px;
 
@@ -26636,7 +27035,7 @@ const Group = ({
   vertical = row,
   ...props
 }) => {
-  import.meta.css = [css$g, "@jsenv/navi/src/field/group.jsx"];
+  import.meta.css = [css$h, "@jsenv/navi/src/field/group.jsx"];
   if (typeof borderWidth === "string") {
     borderWidth = parseFloat(borderWidth);
   }
@@ -26654,6 +27053,386 @@ const Group = ({
   });
 };
 
+const createItemTracker = () => {
+  const ItemTrackerContext = createContext();
+  const useItemTrackerProvider = () => {
+    const itemsRef = useRef([]);
+    const items = itemsRef.current;
+    const itemCountRef = useRef(0);
+    const tracker = useMemo(() => {
+      const ItemTrackerProvider = ({
+        children
+      }) => {
+        // Reset on each render to start fresh
+        tracker.reset();
+        return jsx(ItemTrackerContext.Provider, {
+          value: tracker,
+          children: children
+        });
+      };
+      ItemTrackerProvider.items = items;
+      return {
+        ItemTrackerProvider,
+        items,
+        registerItem: data => {
+          const index = itemCountRef.current++;
+          items[index] = data;
+          return index;
+        },
+        getItem: index => {
+          return items[index];
+        },
+        getAllItems: () => {
+          return items;
+        },
+        reset: () => {
+          items.length = 0;
+          itemCountRef.current = 0;
+        }
+      };
+    }, []);
+    return tracker.ItemTrackerProvider;
+  };
+  const useTrackItem = data => {
+    const tracker = useContext(ItemTrackerContext);
+    if (!tracker) {
+      throw new Error("useTrackItem must be used within SimpleItemTrackerProvider");
+    }
+    return tracker.registerItem(data);
+  };
+  const useTrackedItem = index => {
+    const trackedItems = useTrackedItems();
+    const item = trackedItems[index];
+    return item;
+  };
+  const useTrackedItems = () => {
+    const tracker = useContext(ItemTrackerContext);
+    if (!tracker) {
+      throw new Error("useTrackedItems must be used within SimpleItemTrackerProvider");
+    }
+    return tracker.items;
+  };
+  return [useItemTrackerProvider, useTrackItem, useTrackedItem, useTrackedItems];
+};
+
+installImportMetaCssBuild(import.meta);const [useOptionItemTrackerProvider, useTrackOption] = createItemTracker();
+
+/**
+ * OptionList + Option: a composable accessible listbox.
+ *
+ * Usage:
+ *   <OptionList id="my-list" value={selected} onChange={setSelected}>
+ *     <Option value="a">Option A</Option>
+ *     <Option value="b">Option B</Option>
+ *   </OptionList>
+ *
+ * CSS vars on .navi_option_list:
+ *   --border-radius, --border-width, --border-color, --background-color, --max-height
+ *
+ * CSS vars on .navi_option:
+ *   --padding, --color, --background-color, --font-weight
+ *   --color-hover, --background-color-hover
+ *   --color-highlighted, --background-color-highlighted
+ *   --color-selected, --background-color-selected, --font-weight-selected
+ *   --color-highlighted-selected, --background-color-highlighted-selected
+ */
+
+const css$g = /* css */`
+  @layer navi {
+    .navi_option_list {
+      --border-radius: 4px;
+      --border-width: 1px;
+      --border-color: light-dark(#ccc, #555);
+      --background-color: light-dark(#fff, #1e1e1e);
+      --max-height: 220px;
+    }
+    .navi_option {
+      --padding: 8px 12px;
+      --color: inherit;
+      --background-color: transparent;
+      --font-weight: inherit;
+
+      /* Hover (mouse) */
+      --color-hover: var(--color);
+      --background-color-hover: light-dark(#f5f5f5, #2a2a2a);
+
+      /* Highlighted (keyboard navigation cursor) */
+      --color-highlighted: var(--color);
+      --background-color-highlighted: light-dark(#e8f0fe, #1c3a6e);
+
+      /* Selected */
+      --color-selected: light-dark(#1a73e8, #7baaf7);
+      --background-color-selected: light-dark(#e8f0fe, #1c3a6e);
+      --font-weight-selected: 500;
+
+      /* Highlighted + selected */
+      --color-highlighted-selected: var(--color-selected);
+      --background-color-highlighted-selected: light-dark(#d2e3fc, #174ea6);
+    }
+  }
+
+  .navi_option_list {
+    --x-border-radius: var(--border-radius);
+    --x-border-width: var(--border-width);
+    --x-border-color: var(--border-color);
+    --x-background-color: var(--background-color);
+    box-sizing: border-box;
+    max-height: var(--max-height);
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    background-color: var(--x-background-color);
+    border: var(--x-border-width) solid var(--x-border-color);
+    border-radius: var(--x-border-radius);
+    outline: none;
+    overflow-y: auto;
+
+    /* Popover reset — browser adds border, background, padding, margin by default */
+    &[popover] {
+      position: fixed;
+      inset: unset;
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+  }
+  .navi_option {
+    --x-color: var(--color);
+    --x-background-color: var(--background-color);
+    --x-font-weight: var(--font-weight);
+
+    padding: var(--padding);
+    color: var(--x-color);
+    font-weight: var(--x-font-weight);
+    background-color: var(--x-background-color);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      --x-color: var(--color-hover);
+      --x-background-color: var(--background-color-hover);
+    }
+
+    &[data-highlighted] {
+      --x-color: var(--color-highlighted);
+      --x-background-color: var(--background-color-highlighted);
+    }
+
+    &[data-selected] {
+      --x-color: var(--color-selected);
+      --x-background-color: var(--background-color-selected);
+      --x-font-weight: var(--font-weight-selected);
+    }
+
+    &[data-highlighted][data-selected] {
+      --x-color: var(--color-highlighted-selected);
+      --x-background-color: var(--background-color-highlighted-selected);
+    }
+  }
+`;
+
+/**
+ * Context OptionList provides downward to its Option children.
+ */
+const OptionListContext = createContext(null);
+const OptionList = ({
+  popover,
+  onChange: onChangeProp,
+  children,
+  ...rest
+}) => {
+  import.meta.css = [css$g, "@jsenv/navi/src/field/option_list.jsx"];
+  const ItemTrackerProvider = useOptionItemTrackerProvider();
+  const [highlightedValue, setHighlightedValue] = useState(null);
+  const highlightedValueRef = useRef(null);
+  highlightedValueRef.current = highlightedValue;
+  const ownId = useId();
+  const id = rest.id ?? ownId;
+  const listRef = useRef(null);
+  const effectiveOnChange = popover ? value => {
+    onChangeProp?.(value);
+    listRef.current?.dispatchEvent(new CustomEvent("combobox-selected", {
+      detail: {
+        value
+      },
+      bubbles: true
+    }));
+  } : onChangeProp;
+  const onChangeRef = useRef(effectiveOnChange);
+  onChangeRef.current = effectiveOnChange;
+  const navigate = direction => {
+    const values = ItemTrackerProvider.items.filter(item => !item.hidden).map(item => item.value);
+    if (values.length === 0) {
+      return false;
+    }
+    const current = highlightedValueRef.current;
+    if (direction === "down") {
+      const idx = current === null ? -1 : values.indexOf(current);
+      setHighlightedValue(values[idx < values.length - 1 ? idx + 1 : idx]);
+    } else if (direction === "up") {
+      const idx = current === null ? -1 : values.indexOf(current);
+      setHighlightedValue(values[idx > 0 ? idx - 1 : 0]);
+    } else if (direction === "first") {
+      setHighlightedValue(values[0]);
+    } else if (direction === "last") {
+      setHighlightedValue(values[values.length - 1]);
+    }
+    return true;
+  };
+
+  // Listen for commands dispatched by a linked Input (combobox mode)
+  const noopRef = useRef(null);
+  useEffect(() => {
+    if (!popover || !listRef.current) {
+      return undefined;
+    }
+    const el = listRef.current;
+    const onNavigate = e => {
+      navigate(e.detail.direction);
+    };
+    const onConfirm = e => {
+      const current = highlightedValueRef.current;
+      if (current !== null) {
+        onChangeRef.current?.(current);
+        e.preventDefault();
+      }
+    };
+    const onClear = () => {
+      setHighlightedValue(null);
+    };
+    el.addEventListener("combobox-navigate", onNavigate);
+    el.addEventListener("combobox-confirm", onConfirm);
+    el.addEventListener("combobox-clear", onClear);
+    return () => {
+      el.removeEventListener("combobox-navigate", onNavigate);
+      el.removeEventListener("combobox-confirm", onConfirm);
+      el.removeEventListener("combobox-clear", onClear);
+    };
+  }, [popover]);
+  useKeyboardShortcuts(popover ? noopRef : listRef, [{
+    key: "arrowdown",
+    description: "Highlight next option",
+    handler: () => navigate("down")
+  }, {
+    key: "arrowup",
+    description: "Highlight previous option",
+    handler: () => navigate("up")
+  }, {
+    key: "home",
+    description: "Highlight first option",
+    handler: () => navigate("first")
+  }, {
+    key: "end",
+    description: "Highlight last option",
+    handler: () => navigate("last")
+  }, {
+    key: "enter",
+    description: "Select highlighted option",
+    handler: () => {
+      const current = highlightedValueRef.current;
+      if (current === null) {
+        return false;
+      }
+      onChangeRef.current?.(current);
+      return true;
+    }
+  }, {
+    key: "escape",
+    description: "Clear highlighted option",
+    handler: () => {
+      setHighlightedValue(null);
+      return true;
+    }
+  }]);
+  const optionListContext = {
+    highlightedValue,
+    setHighlightedValue,
+    onSelect: effectiveOnChange
+  };
+  return jsx(Box, {
+    as: "ul",
+    ref: listRef,
+    id: id,
+    role: "listbox",
+    tabIndex: popover ? -1 : 0,
+    popover: popover ? "manual" : undefined,
+    ...rest,
+    baseClassName: "navi_option_list",
+    children: jsx(OptionListContext.Provider, {
+      value: optionListContext,
+      children: jsx(ItemTrackerProvider, {
+        children: children
+      })
+    })
+  });
+};
+const OPTION_PSEUDO_CLASSES = [":-navi-highlighted", ":-navi-selected"];
+const Option = ({
+  value,
+  selected,
+  hidden,
+  children,
+  ...rest
+}) => {
+  import.meta.css = [css$g, "@jsenv/navi/src/field/option_list.jsx"];
+  const optionId = useId();
+  const id = rest.id || optionId;
+  useTrackOption({
+    value,
+    optionId: id,
+    hidden
+  });
+  const {
+    highlightedValue,
+    setHighlightedValue,
+    onSelect
+  } = useContext(OptionListContext);
+  const isHighlighted = highlightedValue === value;
+  const optionRef = useRef(null);
+  useEffect(() => {
+    const optionEl = optionRef.current;
+    if (isHighlighted && optionEl) {
+      optionEl.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [isHighlighted]);
+  return jsx(Box, {
+    as: "li",
+    ref: optionRef,
+    baseClassName: "navi_option",
+    id: optionId,
+    role: "option",
+    "aria-selected": selected,
+    "aria-hidden": hidden ? true : undefined,
+    hidden: hidden,
+    basePseudoState: {
+      ":-navi-highlighted": isHighlighted,
+      ":-navi-selected": selected
+    },
+    pseudoClasses: OPTION_PSEUDO_CLASSES,
+    onMouseEnter: () => {
+      if (!hidden) {
+        setHighlightedValue(value);
+      }
+    },
+    onMouseLeave: () => {
+      if (!hidden) {
+        setHighlightedValue(null);
+      }
+    },
+    onMouseDown: e => {
+      if (hidden || e.button !== 0) {
+        return;
+      }
+      onSelect?.(value);
+    },
+    ...rest,
+    children: children
+  });
+};
+
 const RadioList = props => {
   const uiStateController = useUIGroupStateController(props, "radio_list", {
     childComponentType: "radio",
@@ -27124,6 +27903,131 @@ const filterTableSelection = (selection, predicate) => {
   return matching;
 };
 
+// https://github.com/reach/reach-ui/tree/b3d94d22811db6b5c0f272b9a7e2e3c1bb4699ae/packages/descendants
+// https://github.com/pacocoursey/use-descendants/tree/master
+
+const createIsolatedItemTracker = () => {
+  // Producer contexts (ref-based, no re-renders)
+  const ProducerTrackerContext = createContext();
+  const ProducerItemCountRefContext = createContext();
+  const ProducerListRenderIdContext = createContext();
+
+  // Consumer contexts (state-based, re-renders)
+  const ConsumerItemsContext = createContext();
+  const useIsolatedItemTrackerProvider = () => {
+    const itemsRef = useRef([]);
+    const items = itemsRef.current;
+    const itemCountRef = useRef();
+    const itemTracker = useMemo(() => {
+      // Snapshot taken by FlushSentinel after all producer children rendered.
+      // Consumers read from this — always up-to-date within the same render pass.
+      const itemsSnapshotRef = {
+        current: items
+      };
+      const registerItem = (index, value) => {
+        const hasValue = index in items;
+        if (hasValue) {
+          const currentValue = items[index];
+          if (compareTwoJsValues(currentValue, value)) {
+            return;
+          }
+        }
+        items[index] = value;
+      };
+      const getProducerItem = itemIndex => {
+        return items[itemIndex];
+      };
+      const ItemProducerProvider = ({
+        children
+      }) => {
+        items.length = 0;
+        itemCountRef.current = 0;
+        const listRenderId = {};
+        return jsx(ProducerItemCountRefContext.Provider, {
+          value: itemCountRef,
+          children: jsx(ProducerListRenderIdContext.Provider, {
+            value: listRenderId,
+            children: jsxs(ProducerTrackerContext.Provider, {
+              value: itemTracker,
+              children: [children, jsx(FlushSentinel, {})]
+            })
+          })
+        });
+      };
+
+      // Renders after all producer children (e.g. <Col>) have registered their
+      // items. Taking a snapshot here guarantees the consumer sees the correct
+      // item list within the same render pass, without any heuristic.
+      const FlushSentinel = () => {
+        itemsSnapshotRef.current = items;
+        return null;
+      };
+      const ItemConsumerProvider = ({
+        children
+      }) => {
+        // FlushSentinel (last child of ItemProducerProvider) already set
+        // itemsSnapshotRef.current to the up-to-date items array before any
+        // consumer rendered. Reading from the snapshot is always correct.
+        return jsx(ConsumerItemsContext.Provider, {
+          value: itemsSnapshotRef.current,
+          children: children
+        });
+      };
+      return {
+        registerItem,
+        getProducerItem,
+        ItemProducerProvider,
+        ItemConsumerProvider
+      };
+    }, []);
+    const {
+      ItemProducerProvider,
+      ItemConsumerProvider
+    } = itemTracker;
+    return [ItemProducerProvider, ItemConsumerProvider, items];
+  };
+
+  // Hook for producers to register items (ref-based, no re-renders)
+  const useTrackIsolatedItem = data => {
+    const listRenderId = useContext(ProducerListRenderIdContext);
+    const itemCountRef = useContext(ProducerItemCountRefContext);
+    const itemTracker = useContext(ProducerTrackerContext);
+    const listRenderIdRef = useRef();
+    const itemIndexRef = useRef();
+    const dataRef = useRef();
+    const prevListRenderId = listRenderIdRef.current;
+    if (prevListRenderId === listRenderId) {
+      const itemIndex = itemIndexRef.current;
+      itemTracker.registerItem(itemIndex, data);
+      dataRef.current = data;
+      return itemIndex;
+    }
+    listRenderIdRef.current = listRenderId;
+    const itemCount = itemCountRef.current;
+    const itemIndex = itemCount;
+    itemCountRef.current = itemIndex + 1;
+    itemIndexRef.current = itemIndex;
+    dataRef.current = data;
+    itemTracker.registerItem(itemIndex, data);
+    return itemIndex;
+  };
+  const useTrackedIsolatedItem = itemIndex => {
+    const items = useTrackedIsolatedItems();
+    const item = items[itemIndex];
+    return item;
+  };
+
+  // Hooks for consumers to read items (state-based, re-renders)
+  const useTrackedIsolatedItems = () => {
+    const consumerItems = useContext(ConsumerItemsContext);
+    if (!consumerItems) {
+      throw new Error("useTrackedIsolatedItems must be used within <ItemConsumerProvider />");
+    }
+    return consumerItems;
+  };
+  return [useIsolatedItemTrackerProvider, useTrackIsolatedItem, useTrackedIsolatedItem, useTrackedIsolatedItems];
+};
+
 const Z_INDEX_EDITING = 1; /* To go above neighbours, but should not be too big to stay under the sticky cells */
 
 /* needed because cell uses position:relative, sticky must win even if before in DOM order */
@@ -27580,193 +28484,6 @@ const createTableAttributeSync = (table, tableClone) => {
   return observer;
 };
 
-// https://github.com/reach/reach-ui/tree/b3d94d22811db6b5c0f272b9a7e2e3c1bb4699ae/packages/descendants
-// https://github.com/pacocoursey/use-descendants/tree/master
-
-const createIsolatedItemTracker = () => {
-  // Producer contexts (ref-based, no re-renders)
-  const ProducerTrackerContext = createContext();
-  const ProducerItemCountRefContext = createContext();
-  const ProducerListRenderIdContext = createContext();
-
-  // Consumer contexts (state-based, re-renders)
-  const ConsumerItemsContext = createContext();
-  const useIsolatedItemTrackerProvider = () => {
-    const itemsRef = useRef([]);
-    const items = itemsRef.current;
-    const itemCountRef = useRef();
-    const itemTracker = useMemo(() => {
-      // Snapshot taken by FlushSentinel after all producer children rendered.
-      // Consumers read from this — always up-to-date within the same render pass.
-      const itemsSnapshotRef = {
-        current: items
-      };
-      const registerItem = (index, value) => {
-        const hasValue = index in items;
-        if (hasValue) {
-          const currentValue = items[index];
-          if (compareTwoJsValues(currentValue, value)) {
-            return;
-          }
-        }
-        items[index] = value;
-      };
-      const getProducerItem = itemIndex => {
-        return items[itemIndex];
-      };
-      const ItemProducerProvider = ({
-        children
-      }) => {
-        items.length = 0;
-        itemCountRef.current = 0;
-        const listRenderId = {};
-        return jsx(ProducerItemCountRefContext.Provider, {
-          value: itemCountRef,
-          children: jsx(ProducerListRenderIdContext.Provider, {
-            value: listRenderId,
-            children: jsxs(ProducerTrackerContext.Provider, {
-              value: itemTracker,
-              children: [children, jsx(FlushSentinel, {})]
-            })
-          })
-        });
-      };
-
-      // Renders after all producer children (e.g. <Col>) have registered their
-      // items. Taking a snapshot here guarantees the consumer sees the correct
-      // item list within the same render pass, without any heuristic.
-      const FlushSentinel = () => {
-        itemsSnapshotRef.current = items;
-        return null;
-      };
-      const ItemConsumerProvider = ({
-        children
-      }) => {
-        // FlushSentinel (last child of ItemProducerProvider) already set
-        // itemsSnapshotRef.current to the up-to-date items array before any
-        // consumer rendered. Reading from the snapshot is always correct.
-        return jsx(ConsumerItemsContext.Provider, {
-          value: itemsSnapshotRef.current,
-          children: children
-        });
-      };
-      return {
-        registerItem,
-        getProducerItem,
-        ItemProducerProvider,
-        ItemConsumerProvider
-      };
-    }, []);
-    const {
-      ItemProducerProvider,
-      ItemConsumerProvider
-    } = itemTracker;
-    return [ItemProducerProvider, ItemConsumerProvider, items];
-  };
-
-  // Hook for producers to register items (ref-based, no re-renders)
-  const useTrackIsolatedItem = data => {
-    const listRenderId = useContext(ProducerListRenderIdContext);
-    const itemCountRef = useContext(ProducerItemCountRefContext);
-    const itemTracker = useContext(ProducerTrackerContext);
-    const listRenderIdRef = useRef();
-    const itemIndexRef = useRef();
-    const dataRef = useRef();
-    const prevListRenderId = listRenderIdRef.current;
-    if (prevListRenderId === listRenderId) {
-      const itemIndex = itemIndexRef.current;
-      itemTracker.registerItem(itemIndex, data);
-      dataRef.current = data;
-      return itemIndex;
-    }
-    listRenderIdRef.current = listRenderId;
-    const itemCount = itemCountRef.current;
-    const itemIndex = itemCount;
-    itemCountRef.current = itemIndex + 1;
-    itemIndexRef.current = itemIndex;
-    dataRef.current = data;
-    itemTracker.registerItem(itemIndex, data);
-    return itemIndex;
-  };
-  const useTrackedIsolatedItem = itemIndex => {
-    const items = useTrackedIsolatedItems();
-    const item = items[itemIndex];
-    return item;
-  };
-
-  // Hooks for consumers to read items (state-based, re-renders)
-  const useTrackedIsolatedItems = () => {
-    const consumerItems = useContext(ConsumerItemsContext);
-    if (!consumerItems) {
-      throw new Error("useTrackedIsolatedItems must be used within <ItemConsumerProvider />");
-    }
-    return consumerItems;
-  };
-  return [useIsolatedItemTrackerProvider, useTrackIsolatedItem, useTrackedIsolatedItem, useTrackedIsolatedItems];
-};
-
-const createItemTracker = () => {
-  const ItemTrackerContext = createContext();
-  const useItemTrackerProvider = () => {
-    const itemsRef = useRef([]);
-    const items = itemsRef.current;
-    const itemCountRef = useRef(0);
-    const tracker = useMemo(() => {
-      const ItemTrackerProvider = ({
-        children
-      }) => {
-        // Reset on each render to start fresh
-        tracker.reset();
-        return jsx(ItemTrackerContext.Provider, {
-          value: tracker,
-          children: children
-        });
-      };
-      ItemTrackerProvider.items = items;
-      return {
-        ItemTrackerProvider,
-        items,
-        registerItem: data => {
-          const index = itemCountRef.current++;
-          items[index] = data;
-          return index;
-        },
-        getItem: index => {
-          return items[index];
-        },
-        getAllItems: () => {
-          return items;
-        },
-        reset: () => {
-          items.length = 0;
-          itemCountRef.current = 0;
-        }
-      };
-    }, []);
-    return tracker.ItemTrackerProvider;
-  };
-  const useTrackItem = data => {
-    const tracker = useContext(ItemTrackerContext);
-    if (!tracker) {
-      throw new Error("useTrackItem must be used within SimpleItemTrackerProvider");
-    }
-    return tracker.registerItem(data);
-  };
-  const useTrackedItem = index => {
-    const trackedItems = useTrackedItems();
-    const item = trackedItems[index];
-    return item;
-  };
-  const useTrackedItems = () => {
-    const tracker = useContext(ItemTrackerContext);
-    if (!tracker) {
-      throw new Error("useTrackedItems must be used within SimpleItemTrackerProvider");
-    }
-    return tracker.items;
-  };
-  return [useItemTrackerProvider, useTrackItem, useTrackedItem, useTrackedItems];
-};
-
 const TableSizeContext = createContext();
 
 const useTableSizeContextValue = ({
@@ -32685,5 +33402,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, CloseSvg, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, Loading, MessageBox, Meter, Nav, Paragraph, Quantity, QuantityIntl, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createIntl, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, filterTableSelection, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDarkBackgroundAttribute, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState$1 as useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, Checkbox, CheckboxList, CloseSvg, Code, Col, Colgroup, ConstructionSvg, Details, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, Loading, MessageBox, Meter, Nav, Option, OptionList, Paragraph, Quantity, QuantityIntl, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createIntl, createRequestCanceller, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, filterTableSelection, forwardActionRequested, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, localStorageSignal, navBack, navForward, navTo, openCallout, rawUrlPart, reload, removeCustomMessage, requestAction, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDarkBackgroundAttribute, useDependenciesDiff, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState$1 as useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map