@jsenv/navi 0.27.15 → 0.27.16

package/dist/jsenv_navi.js

@@ -12885,11 +12885,27 @@ const definePseudoClass = (pseudoClass, definition) => {
 definePseudoClass(":hover", {
   attribute: "data-hover",
   setup: (el, callback) => {
-    let onmouseenter = () => {
+    const recheckProxy = (e) => {
+      const proxy = findControlProxy(el);
+      if (proxy) {
+        requestPseudoStateCheck(proxy, { event: e });
+      }
+    };
+    const recheckProxyTarget = (e) => {
+      const proxyTarget = findControlProxyTarget(el);
+      if (proxyTarget) {
+        requestPseudoStateCheck(proxyTarget, { event: e });
+      }
+    };
+    let onmouseenter = (e) => {
       callback();
+      recheckProxy(e);
+      recheckProxyTarget(e);
     };
-    let onmouseleave = () => {
+    let onmouseleave = (e) => {
       callback();
+      recheckProxy(e);
+      recheckProxyTarget(e);
     };
 
     if (el.tagName === "LABEL") {
@@ -12912,13 +12928,15 @@ definePseudoClass(":hover", {
         }
         requestPseudoStateCheck(input, { event: e });
       };
+      const _onmouseenter = onmouseenter;
       onmouseenter = (e) => {
-        callback();
         recheckInput(e);
+        _onmouseenter(e);
       };
+      const _onmouseleave = onmouseleave;
       onmouseleave = (e) => {
-        callback();
         recheckInput(e);
+        _onmouseleave(e);
       };
     }
 
@@ -12929,7 +12947,16 @@ definePseudoClass(":hover", {
       el.removeEventListener("mouseleave", onmouseleave);
     };
   },
-  test: (el) => el.matches(":hover"),
+  test: (el) => {
+    if (el.matches(":hover")) {
+      return true;
+    }
+    const proxy = findControlProxy(el);
+    if (proxy && proxy.matches(":hover")) {
+      return true;
+    }
+    return false;
+  },
 });
 definePseudoClass(":disabled", {
   attribute: "data-disabled",
@@ -17384,6 +17411,7 @@ const css$O = /* css */`
     opacity: 0;
     /* will be positioned with transform: translate */
     transition: opacity 0.2s ease-in-out;
+    pointer-events: auto; /* Must be interactive to be closabled (overrid list item pointer-events none for instance)  */
     overflow: visible;
 
     &[data-status="success"] {
@@ -21851,7 +21879,7 @@ const useCustomValidationRef = (
     }
     const element = elementRef.current;
     if (!element) {
-      if (!elementRef.nullExpected) {
+      if (!elementRef.nullCanHappen) {
         console.warn(
           `useCustomValidationRef: elementRef.current is null, make sure to pass a ref to an element
 ${callSiteRef.current}`,
@@ -24394,10 +24422,13 @@ const useNextResolver = () => useContext(NextResolverContext);
  * To terminate the chain early (e.g. render a specialized component), render
  * directly without calling Next.
  *
+ * The last entry in the array is the final/target component — it receives null
+ * from useNextResolver() indicating it is terminal.
+ *
  * Usage:
- *   const renderButton = createComponentResolver([ResolverA, ResolverB]);
+ *   const renderButton = createComponentResolver([ResolverA, ResolverB, ButtonTarget]);
  *   // Then inside a component render:
- *   renderButton(ButtonTarget, props)
+ *   renderButton(props)
  *
  * NextResolverContext exposes a stable Next component so resolvers can continue
  * the chain via useNextResolver().
@@ -24406,22 +24437,21 @@ const useNextResolver = () => useContext(NextResolverContext);
  */
 const createComponentResolver = resolvers => {
   const ResolverIndexContext = createContext(0);
-  const TargetComponentContext = createContext(null);
   const ChainRunner = props => {
     const index = useContext(ResolverIndexContext);
-    const TargetComponent = useContext(TargetComponentContext);
     if (index >= resolvers.length) {
-      return jsx(NextResolverContext.Provider, {
-        value: null,
-        children: jsx(TargetComponent, {
-          ...props
-        })
-      });
+      return null;
     }
     const Resolver = resolvers[index];
+    const isLast = index === resolvers.length - 1;
     return jsx(ResolverIndexContext.Provider, {
       value: index + 1,
-      children: jsx(Resolver, {
+      children: isLast ? jsx(NextResolverContext.Provider, {
+        value: null,
+        children: jsx(Resolver, {
+          ...props
+        })
+      }) : jsx(Resolver, {
         ...props
       })
     });
@@ -24434,11 +24464,11 @@ const createComponentResolver = resolvers => {
   const NextComponent = props => jsx(ChainRunner, {
     ...props
   });
-  const renderComponent = (TargetComponent, props) => {
+  const renderComponent = props => {
     return jsx(NextResolverContext.Provider, {
       value: NextComponent,
-      children: jsx(TargetComponentContext.Provider, {
-        value: TargetComponent,
+      children: jsx(ResolverIndexContext.Provider, {
+        value: 0,
         children: jsx(ChainRunner, {
           ...props
         })
@@ -24448,6 +24478,61 @@ const createComponentResolver = resolvers => {
   return renderComponent;
 };
 
+const ButtonInsideFormResolver = props => {
+  const Next = useNextResolver();
+  const formContext = useContext(FormContext);
+  if (formContext) {
+    return jsx(ButtonInsideForm, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ButtonInsideForm = props => {
+  const Next = useNextResolver();
+  return jsx(Next
+  // The default action for a button inside a form is to request form action
+  , {
+    action: "send",
+    ...props
+  });
+};
+
+const ButtonRouteResolver = props => {
+  const Next = useNextResolver();
+  if (props.route) {
+    return jsx(ButtonWithRoute, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ButtonWithRoute = props => {
+  const Next = useNextResolver();
+  const {
+    route,
+    routeParams,
+    children,
+    ...rest
+  } = props;
+  const url = route.buildUrl(routeParams);
+  const {
+    matching
+  } = useRouteStatus(route);
+  const paramsAreMatching = route.matchesParams(routeParams);
+  const linkMatching = matching && paramsAreMatching;
+  return jsx(Next, {
+    href: url,
+    "data-href-current": linkMatching ? "" : undefined,
+    ...rest,
+    children: children || route.buildRelativeUrl(routeParams)
+  });
+};
+
 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";
@@ -26520,38 +26605,8 @@ installImportMetaCssBuild(import.meta);const css$I = /* css */`
     }
   }
 `;
-const Button = props => {
-  const defaultRef = useRef(null);
-  props.ref = props.ref || defaultRef;
-  const button = renderButton(ButtonUI, props);
-  return button;
-};
-const ButtonRouteResolver = props => {
-  const Next = useNextResolver();
-  if (props.route) {
-    return jsx(ButtonWithRoute, {
-      ...props
-    });
-  }
-  return jsx(Next, {
-    ...props
-  });
-};
-const ButtonInsideFormResolver = props => {
-  const Next = useNextResolver();
-  const formContext = useContext(FormContext);
-  if (formContext) {
-    return jsx(ButtonInsideForm, {
-      ...props
-    });
-  }
-  return jsx(Next, {
-    ...props
-  });
-};
-const renderButton = createComponentResolver([ButtonRouteResolver, ButtonInsideFormResolver]);
 const ButtonUI = props => {
-  import.meta.css = [css$I, "@jsenv/navi/src/control/button.jsx"];
+  import.meta.css = [css$I, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -26701,36 +26756,16 @@ const ButtonShadow = () => {
   });
 };
 markAsOutsideTextFlow(ButtonShadow);
-const ButtonInsideForm = props => {
-  const Next = useNextResolver();
-  return jsx(Next
-  // The default action for a button inside a form is to request form action
-  , {
-    action: "send",
-    ...props
-  });
-};
-const ButtonWithRoute = props => {
+
+const ButtonFirstResolver = props => {
   const Next = useNextResolver();
-  const {
-    route,
-    routeParams,
-    children,
-    ...rest
-  } = props;
-  const url = route.buildUrl(routeParams);
-  const {
-    matching
-  } = useRouteStatus(route);
-  const paramsAreMatching = route.matchesParams(routeParams);
-  const linkMatching = matching && paramsAreMatching;
+  const defaultRef = useRef(null);
+  props.ref = props.ref || defaultRef;
   return jsx(Next, {
-    href: url,
-    "data-href-current": linkMatching ? "" : undefined,
-    ...rest,
-    children: children || route.buildRelativeUrl(routeParams)
+    ...props
   });
 };
+const Button = createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonInsideFormResolver, ButtonUI]);
 
 const CloseSvg = () => {
   return jsx("svg", {
@@ -29841,16 +29876,6 @@ const RangeStyleCSSVars = {
 const RangePseudoClasses = [":hover", ":active", ":-navi-pressed", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
 const RangePseudoElements = ["::-navi-loader"];
 
-const ChevronDownSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    children: jsx("path", {
-      d: "M4.427 7.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427z"
-    })
-  });
-};
-
 const SearchSvg = () => jsx("svg", {
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg",
@@ -29860,6 +29885,8 @@ const SearchSvg = () => jsx("svg", {
   })
 });
 
+const InputTextualContext = createContext(null);
+
 installImportMetaCssBuild(import.meta);const css$x = /* css */`
   @layer navi {
     [data-navi-field] {
@@ -30084,6 +30111,91 @@ const Label = props => {
 };
 const LabelPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
 
+const InputSlot = ({
+  side,
+  onClick,
+  hideWhileEmpty,
+  ...props
+}) => {
+  const ctx = useContext(InputTextualContext);
+  const {
+    id,
+    readOnly,
+    disabled
+  } = ctx;
+  return jsx(Label, {
+    htmlFor: id,
+    className: "navi_input_slot",
+    disabled: disabled,
+    readOnly: readOnly,
+    "data-readonly": readOnly,
+    "data-disabled": disabled,
+    "data-left": side === "left" ? "" : undefined,
+    "data-right": side === "right" ? "" : undefined,
+    "data-hide-while-empty": hideWhileEmpty ? "" : undefined,
+    inline: true,
+    flex: true,
+    align: "center",
+    onMouseDown: e => {
+      // Only prevent focus from leaving when the input already has focus.
+      // If the input is not focused, let the mousedown proceed normally so
+      // the slot element (e.g. a clear button) can receive focus itself.
+      const inputEl = document.getElementById(id);
+      if (inputEl && inputEl === document.activeElement) {
+        e.preventDefault();
+      }
+    },
+    onClick: e => {
+      onClick?.(e);
+      const input = document.getElementById(id);
+      const allowed = dispatchRequestInteraction(input, e);
+      if (!allowed) {
+        e.preventDefault();
+      }
+    },
+    ...props
+  });
+};
+const InputLeftSlot = props => {
+  return jsx(InputSlot, {
+    ...props,
+    side: "left"
+  });
+};
+const InputRightSlot = props => {
+  return jsx(InputSlot, {
+    ...props,
+    side: "right"
+  });
+};
+
+const InputWithListResolver = props => {
+  const Next = useNextResolver();
+  if (props["navi-list"]) {
+    return jsx(InputWithList, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+
+/**
+ * InputWithList — connects an input to a SelectableList via its id.
+ *
+ * Usage: <Input navi-list="my-list-id" /> next to <SelectableList id="my-list-id" />
+ *
+ * Behavior:
+ *   - ArrowDown / ArrowUp move the list's "current item" without moving focus
+ *   - Home / End jump to first/last navigable item
+ *   - Enter triggers selection of the current item (same as clicking it)
+ *   - aria-controls dynamically points at the current item's real input so the
+ *     pseudo-styles focus-inheritance kicks in (list item shows :focus /
+ *     :focus-visible while the input is focused).
+ *   - aria-activedescendant points at the current item's <li> id (standard
+ *     combobox/listbox ARIA pattern).
+ */
 const InputWithList = props => {
   const Next = useNextResolver();
   const {
@@ -30156,37 +30268,249 @@ const InputWithList = props => {
   });
 };
 
-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$w = /* css */`
-  @layer navi {
-    .navi_input {
-      --border-radius: 2px;
-      --border-width: 1px;
-      --outline-width: 1px;
-      --font-size: 14px;
+const ChevronDownSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    children: jsx("path", {
+      d: "M4.427 7.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427z"
+    })
+  });
+};
 
-      /* Default */
-      --outline-color: var(--navi-focus-outline-color);
-      --loader-color: var(--navi-loader-color);
-      --border-color: light-dark(#767676, #8e8e93);
-      --background-color: white;
-      --color: currentColor;
+const InputWithSuggestionsResolver = props => {
+  const Next = useNextResolver();
+  if (props["navi-suggestions"]) {
+    return jsx(InputTextualWithSuggestions, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const InputTextualWithSuggestions = props => {
+  const Next = useNextResolver();
+  const {
+    ref,
+    suggestions,
+    onInput,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    children,
+    ...rest
+  } = props;
+  const [expanded, setExpanded] = useState(false);
+  const expandedRef = useRef(expanded);
+  expandedRef.current = expanded;
+  const expand = () => {
+    expandedRef.current = true;
+    setExpanded(true);
+  };
+  const collapse = () => {
+    expandedRef.current = false;
+    setExpanded(false);
+  };
+  const getListEl = () => {
+    return document.getElementById(suggestions);
+  };
+  const showSuggestions = e => {
+    if (expandedRef.current) {
+      return;
+    }
+    const listEl = getListEl();
+    if (listEl) {
+      dispatchCustomEvent(listEl, "navi_request_open", {
+        event: e,
+        anchor: ref.current
+      });
+      expand();
+    }
+  };
+  const hideSuggestions = e => {
+    if (!expandedRef.current) {
+      return;
+    }
+    const listEl = getListEl();
+    if (listEl) {
+      dispatchCustomEvent(listEl, "navi_request_close", {
+        event: e
+      });
+      collapse();
+    }
+  };
+  useEffect(() => {
+    const inputEl = ref.current;
+    const listEl = getListEl();
+    if (!listEl) {
+      return undefined;
+    }
+    const onSelect = e => {
+      const {
+        item
+      } = e.detail;
+      const {
+        value
+      } = item;
+      inputEl.value = value;
+      inputEl.dispatchEvent(new Event("input", {
+        bubbles: true
+      }));
+      hideSuggestions(e);
+    };
+    listEl.addEventListener("navi_list_select", onSelect);
+    return () => {
+      listEl.removeEventListener("navi_list_select", onSelect);
+    };
+  }, [suggestions]);
+  const onKeyDownShortcuts = createOnKeyDownForShortcuts({
+    arrowdown: e => {
+      showSuggestions(e);
+    },
+    arrowup: e => {
+      showSuggestions(e);
+    },
+    escape: e => {
+      if (!expandedRef.current) {
+        return false;
+      }
+      hideSuggestions(e);
+      return true;
+    },
+    home: () => {},
+    end: () => {},
+    enter: () => {}
+  });
+  return jsx(Next, {
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": expanded,
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    basePseudoState: {
+      ":-navi-expanded": expanded
+    },
+    onnavi_callout_open: e => {
+      hideSuggestions(e);
+    },
+    ...rest,
+    ref: ref,
+    onFocus: e => {
+      onFocus?.(e);
+      showSuggestions(e);
+    },
+    onBlur: e => {
+      onBlur?.(e);
+      hideSuggestions(e);
+    },
+    onInput: e => {
+      onInput?.(e);
+      showSuggestions(e);
+    },
+    onKeyDown: e => {
+      onKeyDown?.(e);
+      onKeyDownShortcuts(e);
+    }
+    //  arrowdown: (e) => {
+    //   const listEl = getListEl();
+    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
+    //   return requestListNavFromCurrent(listEl, {
+    //     event: e,
+    //     goal: "down",
+    //   });
+    // },
+    // arrowup: (e) => {
+    //   const listEl = getListEl();
+    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
+    //   return requestListNavFromCurrent(listEl, {
+    //     event: e,
+    //     goal: "up",
+    //   });
+    // },
+    // home: (e) => {
+    //   const listEl = getListEl();
+    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
+    //   return requestListNavFromCurrent(listEl, {
+    //     event: e,
+    //     goal: "first",
+    //   });
+    // },
+    // end: (e) => {
+    //   const listEl = getListEl();
+    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
+    //   return requestListNavFromCurrent(listEl, {
+    //     event: e,
+    //     goal: "last",
+    //   });
+    // },
+    // enter: (e) => {
+    //   const listEl = getListEl();
+    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
+    //   return requestListSelectCurrent(listEl, { event: e });
+    // },
+    // escape: (e) => {
+    //   // prevent escape from reaching eventual <select> ancestor
+    //   // when the escape is meant to clear the search input (otherwise it would close the select too)
+    //   if (e.currentTarget.type === "search" && e.currentTarget.value !== "") {
+    //     e.stopPropagation();
+    //     return true;
+    //   }
+    //   const listEl = getListEl();
+    //   // here we allow propagation of escape up to the <select> to allow closing if within a select
+    //   // it also means list might catch escape and reset again but it's ok to reset twice here as it won't cause side effects
+    //   // (if we need the same pattern for other events where it could be problematic we would have to mark
+    //   // event as handled somehow to prevent list containing input to react to it)
+    //   return requestListInteractionStateReset(listEl, { event: e });
+    // },
+    ,
+    children: children || jsx(InputRightSlot, {
+      onClick: e => {
+        if (expanded) {
+          hideSuggestions(e);
+        } else {
+          showSuggestions(e);
+        }
+      },
+      children: jsx(Icon, {
+        color: "rgba(28, 43, 52, 0.5)",
+        children: jsx(ChevronDownSvg, {})
+      })
+    })
+  });
+};
+
+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$w = /* css */`
+  @layer navi {
+    .navi_input {
+      --border-radius: 2px;
+      --border-width: 1px;
+      --outline-width: 1px;
+      --font-size: 14px;
+
+      /* Default */
+      --outline-color: var(--navi-focus-outline-color);
+      --loader-color: var(--navi-loader-color);
+      --border-color: light-dark(#767676, #8e8e93);
+      --background-color: white;
+      --color: currentColor;
       --color-dimmed: color-mix(in srgb, currentColor 60%, transparent);
       --placeholder-color: var(--color-dimmed);
       /* Hover */
@@ -30414,28 +30738,6 @@ const css$w = /* css */`
     -webkit-text-fill-color: var(--x-color) !important;
   }
 `;
-const InputTextual = props => {
-  const defaultRef = useRef(null);
-  props.ref = props.ref || defaultRef;
-  const input = renderInput(InputTextualControlInterface, props);
-  return input;
-};
-const InputTextualWithListResolver = props => {
-  const Next = useNextResolver();
-  if (props["navi-list"]) {
-    return jsx(InputWithList, {
-      ...props
-    });
-  }
-  if (props.suggestions) {
-    return jsx(InputTextualWithSuggestions, {
-      ...props
-    });
-  }
-  return jsx(Next, {
-    ...props
-  });
-};
 const InputTypeResolver = props => {
   const Next = useNextResolver();
   if (props.type === "search") {
@@ -30483,7 +30785,6 @@ const InputHeadlessResolver = props => {
     ...props
   });
 };
-const renderInput = createComponentResolver([InputTextualWithListResolver, InputTypeResolver, InputHeadlessResolver]);
 const InputTextualHeadless = props => {
   const [inputProps, remainingProps] = useInputTextualProps(props);
   return jsx(BoxForwardedPropsContext.Provider, {
@@ -30508,8 +30809,7 @@ const useInputTextualProps = props => {
   });
   return [controlProps, remainingProps, ControlChildrenWrapper];
 };
-const InputNativeContext = createContext(null);
-const InputTextualControlInterface = props => {
+const InputTextualUI = props => {
   import.meta.css = [css$w, "@jsenv/navi/src/control/input/input_textual.jsx"];
   const {
     ui,
@@ -30527,7 +30827,7 @@ const InputTextualControlInterface = props => {
   const readOnly = basePseudoState[":read-only"];
   const loading = basePseudoState[":-navi-loading"];
   const childrenWithContext = jsx(ControlChildrenWrapper, {
-    children: jsx(InputNativeContext.Provider, {
+    children: jsx(InputTextualContext.Provider, {
       value: {
         id,
         readOnly,
@@ -30562,6 +30862,15 @@ const InputTextualControlInterface = props => {
     }), childrenWithContext]
   });
 };
+const InputTextualFirstResolver = props => {
+  const Next = useNextResolver();
+  const defaultRef = useRef(null);
+  props.ref = props.ref || defaultRef;
+  return jsx(Next, {
+    ...props
+  });
+};
+const InputTextual = createComponentResolver([InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputHeadlessResolver, InputTextualUI]);
 const RealInput = props => {
   const inputProps = useContext(BoxForwardedPropsContext);
   return jsx(Box, {
@@ -30613,63 +30922,6 @@ const InputStyleCSSVars = {
 };
 const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value", ":-navi-expanded"];
 const InputPseudoElements = ["::-navi-loader"];
-const InputSlot = ({
-  side,
-  onClick,
-  hideWhileEmpty,
-  ...props
-}) => {
-  const ctx = useContext(InputNativeContext);
-  const {
-    id,
-    readOnly,
-    disabled
-  } = ctx;
-  return jsx(Label, {
-    htmlFor: id,
-    className: "navi_input_slot",
-    disabled: disabled,
-    readOnly: readOnly,
-    "data-readonly": readOnly,
-    "data-disabled": disabled,
-    "data-left": side === "left" ? "" : undefined,
-    "data-right": side === "right" ? "" : undefined,
-    "data-hide-while-empty": hideWhileEmpty ? "" : undefined,
-    inline: true,
-    flex: true,
-    align: "center",
-    onMouseDown: e => {
-      // Only prevent focus from leaving when the input already has focus.
-      // If the input is not focused, let the mousedown proceed normally so
-      // the slot element (e.g. a clear button) can receive focus itself.
-      const inputEl = document.getElementById(id);
-      if (inputEl && inputEl === document.activeElement) {
-        e.preventDefault();
-      }
-    },
-    onClick: e => {
-      onClick?.(e);
-      const input = document.getElementById(id);
-      const allowed = dispatchRequestInteraction(input, e);
-      if (!allowed) {
-        e.preventDefault();
-      }
-    },
-    ...props
-  });
-};
-const InputLeftSlot = props => {
-  return jsx(InputSlot, {
-    ...props,
-    side: "left"
-  });
-};
-const InputRightSlot = props => {
-  return jsx(InputSlot, {
-    ...props,
-    side: "right"
-  });
-};
 const InputSearch = props => {
   const Next = useNextResolver();
   return jsx(Next, {
@@ -30682,7 +30934,7 @@ const InputSearch = props => {
 const InputSearchUI = ({
   icon
 }) => {
-  const ctx = useContext(InputNativeContext);
+  const ctx = useContext(InputTextualContext);
   const {
     id
   } = ctx;
@@ -30771,197 +31023,6 @@ const InputDatetimeLocal = props => {
     ...props
   });
 };
-const InputTextualWithSuggestions = props => {
-  const Next = useNextResolver();
-  const {
-    ref,
-    suggestions,
-    onInput,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    children,
-    ...rest
-  } = props;
-  const [expanded, setExpanded] = useState(false);
-  const expandedRef = useRef(expanded);
-  expandedRef.current = expanded;
-  const expand = () => {
-    expandedRef.current = true;
-    setExpanded(true);
-  };
-  const collapse = () => {
-    expandedRef.current = false;
-    setExpanded(false);
-  };
-  const getListEl = () => {
-    return document.getElementById(suggestions);
-  };
-  const showSuggestions = e => {
-    if (expandedRef.current) {
-      return;
-    }
-    const listEl = getListEl();
-    if (listEl) {
-      dispatchCustomEvent(listEl, "navi_request_open", {
-        event: e,
-        anchor: ref.current
-      });
-      expand();
-    }
-  };
-  const hideSuggestions = e => {
-    if (!expandedRef.current) {
-      return;
-    }
-    const listEl = getListEl();
-    if (listEl) {
-      dispatchCustomEvent(listEl, "navi_request_close", {
-        event: e
-      });
-      collapse();
-    }
-  };
-  useEffect(() => {
-    const inputEl = ref.current;
-    const listEl = getListEl();
-    if (!listEl) {
-      return undefined;
-    }
-    const onSelect = e => {
-      const {
-        item
-      } = e.detail;
-      const {
-        value
-      } = item;
-      inputEl.value = value;
-      inputEl.dispatchEvent(new Event("input", {
-        bubbles: true
-      }));
-      hideSuggestions(e);
-    };
-    listEl.addEventListener("navi_list_select", onSelect);
-    return () => {
-      listEl.removeEventListener("navi_list_select", onSelect);
-    };
-  }, [suggestions]);
-  const onKeyDownShortcuts = createOnKeyDownForShortcuts({
-    arrowdown: e => {
-      showSuggestions(e);
-    },
-    arrowup: e => {
-      showSuggestions(e);
-    },
-    escape: e => {
-      if (!expandedRef.current) {
-        return false;
-      }
-      hideSuggestions(e);
-      return true;
-    },
-    home: () => {},
-    end: () => {},
-    enter: () => {}
-  });
-  return jsx(Next, {
-    role: "combobox",
-    "aria-haspopup": "listbox",
-    "aria-expanded": expanded,
-    "aria-autocomplete": "list",
-    autoComplete: "off",
-    basePseudoState: {
-      ":-navi-expanded": expanded
-    },
-    onnavi_callout_open: e => {
-      hideSuggestions(e);
-    },
-    ...rest,
-    ref: ref,
-    onFocus: e => {
-      onFocus?.(e);
-      showSuggestions(e);
-    },
-    onBlur: e => {
-      onBlur?.(e);
-      hideSuggestions(e);
-    },
-    onInput: e => {
-      onInput?.(e);
-      showSuggestions(e);
-    },
-    onKeyDown: e => {
-      onKeyDown?.(e);
-      onKeyDownShortcuts(e);
-    }
-    //  arrowdown: (e) => {
-    //   const listEl = getListEl();
-    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
-    //   return requestListNavFromCurrent(listEl, {
-    //     event: e,
-    //     goal: "down",
-    //   });
-    // },
-    // arrowup: (e) => {
-    //   const listEl = getListEl();
-    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
-    //   return requestListNavFromCurrent(listEl, {
-    //     event: e,
-    //     goal: "up",
-    //   });
-    // },
-    // home: (e) => {
-    //   const listEl = getListEl();
-    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
-    //   return requestListNavFromCurrent(listEl, {
-    //     event: e,
-    //     goal: "first",
-    //   });
-    // },
-    // end: (e) => {
-    //   const listEl = getListEl();
-    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
-    //   return requestListNavFromCurrent(listEl, {
-    //     event: e,
-    //     goal: "last",
-    //   });
-    // },
-    // enter: (e) => {
-    //   const listEl = getListEl();
-    //   e.stopPropagation(); // when within a list, prevent list from handling it twice
-    //   return requestListSelectCurrent(listEl, { event: e });
-    // },
-    // escape: (e) => {
-    //   // prevent escape from reaching eventual <select> ancestor
-    //   // when the escape is meant to clear the search input (otherwise it would close the select too)
-    //   if (e.currentTarget.type === "search" && e.currentTarget.value !== "") {
-    //     e.stopPropagation();
-    //     return true;
-    //   }
-    //   const listEl = getListEl();
-    //   // here we allow propagation of escape up to the <select> to allow closing if within a select
-    //   // it also means list might catch escape and reset again but it's ok to reset twice here as it won't cause side effects
-    //   // (if we need the same pattern for other events where it could be problematic we would have to mark
-    //   // event as handled somehow to prevent list containing input to react to it)
-    //   return requestListInteractionStateReset(listEl, { event: e });
-    // },
-    ,
-
-    children: children || jsx(InputRightSlot, {
-      onClick: e => {
-        if (expanded) {
-          hideSuggestions(e);
-        } else {
-          showSuggestions(e);
-        }
-      },
-      children: jsx(Icon, {
-        color: "rgba(28, 43, 52, 0.5)",
-        children: jsx(ChevronDownSvg, {})
-      })
-    })
-  });
-};
 
 const Input = props => {
   const {
@@ -30986,6 +31047,10 @@ const Input = props => {
     ...props
   });
 };
+Input.UI = {
+  LeftSlot: InputLeftSlot,
+  RightSlot: InputRightSlot
+};
 
 installImportMetaCssBuild(import.meta);/**
  * - We must keep the edited element in the DOM so that
@@ -33739,1943 +33804,2032 @@ const createItemTracker = (onChange) => {
   };
 };
 
-/**
- * CSS Highlight API integration for navi-search-match.
- *
- * Provides a shared `Highlight` instance registered as "navi-search-match"
- * and a `useSearchHighlight` hook that marks matching text ranges on an element.
- *
- * The highlight is not specific to ListItem — any element that wants to mark
- * search match ranges (e.g. Suggestion, custom search results) can use these.
- *
- * CSS to paint the highlight:
- *   ::highlight(navi-search-match) {
- *     color: var(--search-match-color);
- *     background-color: var(--search-match-background-color);
- *   }
- *
- * The `highlight` prop can be:
- *   - an array of [start, end] pairs — applied to all text nodes under the root element
- *   - an object { [domSelector]: [[start, end], …] } — applied to each sub-element
- *     matched by the selector (the format produced by createSearch)
- */
-
-// Module-level shared Highlight instance — created lazily once.
-let naviSearchHighlight = null;
-const getNaviSearchHighlight = () => {
-  if (!CSS.highlights) {
-    return null;
+const ListItemHeaderOrFooterResolver = props => {
+  const Next = useNextResolver();
+  if (props.header) {
+    return jsx(ListItemHeader, {
+      ...props
+    });
   }
-  if (!naviSearchHighlight) {
-    naviSearchHighlight = new Highlight();
-    CSS.highlights.set("navi-search-match", naviSearchHighlight);
+  if (props.footer) {
+    return jsx(ListItemFooter, {
+      ...props
+    });
   }
-  return naviSearchHighlight;
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListItemHeader = props => {
+  const Next = useNextResolver();
+  const {
+    ref
+  } = props;
+  useDisplayedLayoutEffect(ref, headerEl => {
+    const listContainerEl = headerEl.closest(".navi_list_container");
+    const rect = headerEl.getBoundingClientRect();
+    listContainerEl.style.setProperty("--list-header-height", `${rect.height}px`);
+    listContainerEl.style.setProperty("--list-header-width", `${rect.width}px`);
+  }, []);
+  return jsx(Next, {
+    ...props,
+    role: "presentation",
+    baseClassName: "navi_list_item_header"
+  });
+};
+const ListItemFooter = props => {
+  const Next = useNextResolver();
+  const {
+    ref
+  } = props;
+  useDisplayedLayoutEffect(ref, footerEl => {
+    const listContainerEl = footerEl.closest(".navi_list_container");
+    const rect = footerEl.getBoundingClientRect();
+    listContainerEl.style.setProperty("--list-footer-height", `${rect.height}px`);
+    listContainerEl.style.setProperty("--list-footer-width", `${rect.width}px`);
+  }, []);
+  return jsx(Next, {
+    ...props,
+    role: "presentation",
+    baseClassName: "navi_list_item_footer"
+  });
 };
 
-/**
- * useSearchHighlight — registers/unregisters CSS Highlight API ranges for an element.
- *
- * @param {import("preact").RefObject} ref - ref to the root element
- * @param {Array|Object|null|undefined} highlight - ranges to highlight
- * @param {Array} deps - additional dependencies that should retrigger the effect
- *                       (typically [children, hidden] from the consuming component)
- */
-const useSearchHighlight = (ref, highlight, deps = []) => {
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !highlight) {
-      return undefined;
+installImportMetaCssBuild(import.meta);const css$m = /* css */`
+  @layer navi {
+    .navi_list_container {
+      --list-outline-color: var(--navi-focus-outline-color);
+      --list-item-outline-color: var(--navi-focus-outline-color);
+      --list-item-outline-width: 2px;
+      --list-item-outline-offset: calc(-1 * var(--list-item-outline-width));
+      /* Hover (mouse) */
+      --list-item-color-hover: var(--list-item-color);
+      --list-item-background-color-hover: light-dark(#f5f5f5, #2a2a2a);
+      /* Pointed by mouse — subtle, just a shade above background */
+      --list-item-color-mouse-pointed: var(--list-item-color);
+      --list-item-background-color-mouse-pointed: light-dark(#ebebeb, #303030);
+      /* Pointed by keyboard — subtle light blue highlight */
+      --list-item-color-keyboard-pointed: var(--list-item-color);
+      --list-item-background-color-keyboard-pointed: light-dark(
+        #c2dcff,
+        #1c3a6e
+      );
+      /* Pointed by proxy */
+      --list-item-color-pointed: var(--list-item-color);
+      --list-item-background-color-pointed: light-dark(#dbeafe, #1c3a6e);
+      /* Selected — vivid blue accent */
+      --list-item-color-selected: white;
+      --list-item-background-color-selected: rgb(3, 30, 60);
+      --list-item-border-color-selected: var(
+        --list-item-background-color-selected
+      );
+      /* Disabled */
+      --list-item-color-disabled: light-dark(#aaa, #555);
+      --list-item-background-color-disabled: var(--list-item-background-color);
     }
-    return applySearchHighlight(el, highlight);
-  }, [highlight, ...deps]);
-};
+  }
 
-const applySearchHighlight = (el, highlight) => {
-  const hl = getNaviSearchHighlight();
-  if (!hl) {
-    return undefined;
+  fieldset.navi_list_container {
+    margin: 0; /* Reset margin that might come from fieldset */
+    padding: 0; /* Reset padding that might come from fieldset */
   }
 
-  // Normalise highlight to { root, ranges }[] entries.
-  // Flat array → single entry scoped to the whole element.
-  const entries = Array.isArray(highlight)
-    ? highlight.length === 0
-      ? []
-      : [{ root: el, ranges: highlight }]
-    : Object.entries(highlight).map(([selector, ranges]) => ({
-        root: el.querySelector(selector) ?? el,
-        ranges,
-      }));
+  .navi_list_container {
+    --x-list-outline-width: calc(
+      var(--list-outline-width) + var(--list-border-width)
+    );
+    --x-list-outline-offset: calc(-1 * var(--list-border-width));
 
-  if (entries.length === 0) {
-    return undefined;
-  }
+    outline-width: var(--x-list-outline-width);
+    outline-color: var(--list-outline-color);
+    outline-offset: var(--x-list-outline-offset);
 
-  const ownRanges = [];
-  for (const { root, ranges } of entries) {
-    // Collect text nodes under root with cumulative character offsets so that
-    // [start, end] ranges (positions in the field string) map directly to
-    // the correct DOM text node positions without re-searching.
-    const textNodes = [];
-    let totalLength = 0;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-      acceptNode: (node) => {
-        // Skip text nodes inside aria-hidden elements (icons, decorative content, etc.)
-        let parent = node.parentElement;
-        while (parent && parent !== root) {
-          if (parent.getAttribute("aria-hidden") === "true") {
-            return NodeFilter.FILTER_REJECT;
-          }
-          parent = parent.parentElement;
-        }
-        return NodeFilter.FILTER_ACCEPT;
-      },
-    });
-    let node;
-    while ((node = walker.nextNode())) {
-      textNodes.push({ node, offset: totalLength });
-      totalLength += node.textContent.length;
+    &[data-focus] {
+      /* outline: var(--list-outline-width) solid var(--navi-focus-outline-color);
+      outline-offset: calc(-1 * var(--list-outline-width)); */
     }
-    for (const [start, end] of ranges) {
-      for (const { node: textNode, offset: nodeOffset } of textNodes) {
-        const nodeEnd = nodeOffset + textNode.textContent.length;
-        if (nodeEnd <= start || nodeOffset >= end) {
-          continue;
-        }
-        const rangeStart = start - nodeOffset;
-        const rangeEnd = end - nodeOffset;
-        const range = new Range();
-        range.setStart(textNode, rangeStart < 0 ? 0 : rangeStart);
-        range.setEnd(
-          textNode,
-          rangeEnd > textNode.textContent.length
-            ? textNode.textContent.length
-            : rangeEnd,
-        );
-        hl.add(range);
-        ownRanges.push(range);
-      }
+    &[data-focus-visible] {
+      outline-style: solid;
     }
-  }
-  return () => {
-    for (const range of ownRanges) {
-      hl.delete(range);
+    &[data-callout] {
+      --x-list-border-color: var(--callout-color);
     }
-  };
-};
-
-installImportMetaCssBuild(import.meta);const ListItemTrackerContext = createContext(null);
-const GroupItemTrackerContext = createContext(null);
-const PendingScrollRefContext = createContext(null);
+  }
 
-// When total rendered items exceeds renderBudget, a render window [start, end)
-// is activated to cap the number of DOM nodes. Items outside the window return
-// null. The window slides as the user scrolls, using actual DOM positions
-// (getBoundingClientRect) to find the first visible item — no height estimation.
-const RENDER_BUDGET_DEFAULT = 100;
+  .navi_list_item {
+    --x-list-item-cursor: default;
 
-// Attribute used on <li> elements rendered by ListItemReal so the scroll listener
-// and filler-height calculation can find real items without matching presentation ones.
-const REAL_LIST_ITEM_SELECTOR = `[navi-list-item-real]`;
+    position: relative;
+    outline-width: var(--list-item-outline-width);
+    outline-color: var(--list-item-outline-color);
+    outline-offset: var(--list-item-outline-offset);
+    cursor: var(--x-list-item-cursor);
 
-// Carries the render window {start, end} (or null = render all) from
-// List down to each ListItem.
-const RenderWindowContext = createContext(null);
-// Carries the separator element/function down to each ListItem so separators
-// are only rendered between items that actually mount (post-filter, post-window).
-const SeparatorContext = createContext(null);
-const css$m = /* css */`
-  @layer navi {
-    .navi_list_container {
-      --list-outline-width: 1px;
-      --list-border-radius: 4px;
-      --list-border-width: 1px;
-      --list-border-color: light-dark(#ccc, #555);
-      --list-background-color: light-dark(#fff, #1e1e1e);
-      --list-max-height: 220px;
+    &[navi-selectable] {
+      user-select: none;
     }
-    .navi_list_item {
-      --list-item-padding-x: 0px;
-      --list-item-padding-y: 0px;
-      --list-item-padding: var(--list-item-padding-y) var(--list-item-padding-x);
-      --list-item-color: inherit;
-      --list-item-font-weight: inherit;
-      --list-item-background-color: transparent;
-
-      /* Highlight (CSS Highlight API match) */
-      --list-item-color-highlight: inherit;
-      --list-item-background-color-highlight: #ffe066;
+    &[navi-selectable-area-all] {
+      --x-list-item-cursor: pointer;
+      pointer-events: none;
 
-      /* Here to be overridable by box layout props such as flex */
-      display: inline-block;
+      [navi-selectable-real-input] {
+        z-index: 0;
+        outline: none;
+        opacity: 0;
+        clip-path: none;
+        cursor: var(--x-list-item-cursor);
+        pointer-events: auto;
+      }
     }
-    .navi_list_item_group_label {
-      --list-group-label-background-color: var(--list-background-color);
+
+    &[data-interactive] {
+      cursor: pointer;
+      user-select: none;
     }
-    .navi_list_item_header {
-      background: var(--list-background-color);
+    &[data-hover] {
+      --x-list-item-color: var(--list-item-color-mouse-pointed);
+      --x-list-item-background-color: var(
+        --list-item-background-color-mouse-pointed
+      );
     }
-    .navi_list_item_footer {
-      background: var(--list-background-color);
+    &[data-pointed] {
+      --x-list-item-color: var(--list-item-color-pointed);
+      --x-list-item-background-color: var(--list-item-background-color-pointed);
     }
-  }
-
-  .navi_list_container {
-    --x-list-border-radius: var(--list-border-radius);
-    --x-list-border-width: var(--list-border-width);
-    --x-list-border-color: var(--list-border-color);
-    --x-list-background-color: var(--list-background-color);
-    /* When typing inside an input browser tries to keep caret visible */
-    /* For input within a sticky element inside a scrollable container */
-    /* Browser will try to scroll that input into view */
-    /* When that scrollable container has a scroll padding it causes scroll on each keystroke */
-    /* Even putting a scroll margin on the input won't fix */
-    /* The only solution is to use scroll-margins on each item that can scroll */
-    /* This is why these props are named list-scroll-spacing-top and applied via scroll-margin on items */
-    --x-list-scroll-spacing-top: calc(
-      var(--list-header-height, 0px) + var(--list-scroll-padding-top, 0px)
-    );
-    --x-list-scroll-spacing-bottom: calc(
-      var(--list-footer-height, 0px) + var(--list-scroll-padding-bottom, 0px)
-    );
+    /* No input proxy: focused,selected */
+    &:not(:has(input[navi-control-proxy-for])) {
+      &:has([data-focus-visible]) {
+        --x-list-item-color: var(--list-item-color-keyboard-pointed);
+        --x-list-item-background-color: var(
+          --list-item-background-color-keyboard-pointed
+        );
+        outline-style: solid;
 
-    display: flex;
-    min-width: 0;
-    /* fit-content by default, but never wider than the parent */
-    max-width: 100%;
-    flex-direction: column;
-    background-color: var(--x-list-background-color);
-    border: var(--x-list-border-width) solid var(--x-list-border-color);
-    border-radius: var(--x-list-border-radius);
+        /* Selected must win over keyboard-pointed */
+        &[data-selected] {
+          --x-list-item-background-color: var(
+            --list-item-background-color-selected,
+            var(--list-item-background-color-keyboard-pointed)
+          );
+        }
+      }
 
-    transition: opacity 0.2s ease;
-    /* overflow:hidden is required on the container (not the inner scroll element)
-       so that border-radius clips the content correctly. Without it, items near
-       the corners would visually overflow the rounded corners during scroll. */
-    overflow: hidden;
+      &[data-selected] {
+        --x-list-item-border-color: var(--list-item-border-color-selected);
+        --x-list-item-background-color: var(
+          --list-item-background-color-selected
+        );
+        --x-list-item-color: var(--list-item-color-selected);
 
-    .navi_list_scroll_container {
-      width: inherit;
-      min-width: inherit;
-      max-width: inherit;
-      max-height: var(--list-max-height);
-      overflow: auto;
-      overscroll-behavior: inherit; /* inherit select behavior */
+        &[data-hover] {
+          --x-list-item-background-color: var(
+            --list-item-background-color-selected,
+            var(--list-item-background-color-mouse-pointed)
+          ) !important;
+        }
+      }
     }
 
-    &[data-expand-x] {
-      width: 100%;
+    &[data-disabled] {
+      --x-list-item-color: var(--list-item-color-disabled);
+      --x-list-item-background-color: var(
+        --list-item-background-color-disabled
+      );
+      --x-list-item-cursor: default;
+      pointer-events: none;
     }
-    &[popover] {
-      position: absolute;
-      inset: unset;
-      display: none;
-      min-width: var(--list-anchor-width, 0px);
-      max-width: 95vw;
-      margin: 0;
-      padding: 0;
-
-      &:popover-open {
-        display: flex;
+    &[data-readonly] {
+      --x-list-item-color: var(--list-item-color-disabled);
+      --x-list-item-cursor: default;
+    }
+  }
+`;
+const SelectableListMultipleContext = createContext(false);
+// Interactive variant: manages hover/keyboard/selection state and handles the
+// navi event protocol. When an action is provided it binds the action to ui state
+// and fires it on select. When only uiAction is provided it calls it directly.
+const ListSelectableResolver = props => {
+  const Next = useNextResolver();
+  if (props.selectable) {
+    return jsx(ListSelectable, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListSelectable = props => {
+  const Next = useNextResolver();
+  import.meta.css = [css$m, "@jsenv/navi/src/control/list/list_selectable.jsx"];
+  // we allow ourselves to auto-generate a name
+  const defaultName = useId();
+  props.name = props.name || `listbox_${defaultName}`;
+  const {
+    ref,
+    multiple,
+    selectedIndicator = "backgroundColor",
+    focusGroupDirection,
+    focusGroupWrap
+  } = props;
+  const [listControlProps, remainingProps, childrenWrapperProps, uiGroupStateController] = useControlgroupProps(props, {
+    stateType: multiple ? "array" : "",
+    controlType: multiple ? "checkbox_group" : "radio_group",
+    childControlFilter: multiple ? childUIStateController => {
+      return childUIStateController.controlType === "input" && childUIStateController.props.type === "checkbox";
+    } : childUIStateController => {
+      return childUIStateController.controlType === "input" && childUIStateController.props.type === "radio";
+    },
+    aggregateChildStates: multiple ? childUIStateControllers => {
+      const values = [];
+      for (const childUIStateController of childUIStateControllers) {
+        if (childUIStateController.uiState) {
+          values.push(childUIStateController.uiState);
+        }
       }
-      .navi_list {
-        width: 100%;
+      return values.length === 0 ? undefined : values;
+    } : childUIStateControllers => {
+      let activeValue;
+      for (const childUIStateController of childUIStateControllers) {
+        if (childUIStateController.uiState) {
+          activeValue = childUIStateController.uiState;
+          break;
+        }
       }
+      return activeValue;
+    }
+  });
+  useFocusGroup(ref, {
+    direction: focusGroupDirection,
+    wrap: focusGroupWrap,
+    // Up/Down navigate between list items only (the visually-hidden real inputs).
+    ySelector: "[navi-selectable-real-input]"
+  });
 
-      &[data-anchor-hidden] {
-        opacity: 0;
-        pointer-events: none;
+  // "Current item" tracking — the item that an external controller (e.g. an
+  // <input navi-list>) navigates from. Defaults to the first selected item,
+  // else the first navigable item. Updated when:
+  //   - an item's real input gains focus (via Tab, click, etc.)
+  //   - the controller dispatches navi_request_list_nav
+  // The current id is announced via navi_list_current_change (bubbling) so a
+  // connected input can update its aria-controls / aria-activedescendant.
+  const currentIdRef = useRef(null);
+  const setCurrentId = (id, event) => {
+    const previousId = currentIdRef.current;
+    if (previousId === id) {
+      return;
+    }
+    currentIdRef.current = id;
+    const listEl = ref.current;
+    if (!listEl) {
+      return;
+    }
+    if (id) {
+      listEl.setAttribute("navi-current-id", id);
+    } else {
+      listEl.removeAttribute("navi-current-id");
+    }
+    dispatchPublicCustomEvent(listEl, "navi_current_change", {
+      event,
+      id,
+      realInputId: id ? `${id}_input` : null
+    });
+  };
+  const getNavigableElements = () => {
+    const listEl = ref.current;
+    if (!listEl) {
+      return [];
+    }
+    const itemEls = Array.from(listEl.querySelectorAll("[navi-list-item-real]"));
+    const navigableEls = [];
+    for (const itemEl of itemEls) {
+      if (itemEl.hidden) {
+        continue;
+      }
+      const realInput = itemEl.querySelector("[navi-selectable-real-input]");
+      if (!realInput || realInput.disabled) {
+        continue;
       }
+      navigableEls.push(itemEl);
     }
-  }
-
-  .navi_list {
-    display: flex;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    flex-direction: column;
-    list-style: none;
-    outline: none; /*  Focus is displayed on the container */
-
-    /* Would create scrollbars, for now just hide the loader here */
-    .navi_input {
-      .navi_loading_rectangle_wrapper {
-        display: none;
+    return navigableEls;
+  };
+  // On mount: set the initial current item to the first selected, else the first navigable.
+  // After that, focusin events on the list keep currentIdRef up to date.
+  useLayoutEffect(() => {
+    const navigableEls = getNavigableElements();
+    if (navigableEls.length === 0) {
+      return;
+    }
+    let initialEl;
+    for (const el of navigableEls) {
+      const realInput = el.querySelector("[navi-selectable-real-input]");
+      if (realInput && realInput.checked) {
+        initialEl = el;
+        break;
       }
     }
-  }
-
-  .navi_list_item {
-    --x-list-item-color: var(--list-item-color);
-    --x-list-item-background-color: var(--list-item-background-color);
-    --x-list-item-font-weight: var(--list-item-font-weight);
+    if (!initialEl) {
+      initialEl = navigableEls[0];
+    }
+    setCurrentId(initialEl.id);
+  }, []);
+  const listVnode = jsx(Next, {
+    as: "fieldset",
+    "navi-has-selected-background": selectedIndicator === "backgroundColor" ? "" : undefined,
+    ...listControlProps,
+    ...remainingProps,
+    name: undefined,
+    selectedIndicator: undefined,
+    multiple: undefined
+    // Track focus inside the list: whichever item gets focus becomes current.
+    ,
 
-    box-sizing: border-box;
-    min-width: 0;
-    max-width: 100%;
-    padding: var(--list-item-padding);
-    color: var(--x-list-item-color);
-    font-weight: var(--x-list-item-font-weight);
-    background-color: var(--x-list-item-background-color);
-    /*
-    CSS impossible d'obtenir un layout qui ferait en gros:
-    width = max(min(max-content, 100%), unbreakable-content)
-    Donc 3 options:
-    - Laisser le contenu overflow
-      - moche, background ne suit pas
-      -> NOPE
-    - Force overflow hidden + ellipsis
-      - casse la lisibilité des mots insécables
-      - possible d'optin en utilisant overflowEllipsis sur le ListItem
-      -> Bien mais pas par défaut
-    - Forcer le retour a la ligne des mot inécables
-      - Aucun des inconvénient ci dessus 
-      -> Comportement par défaut
-    */
-    overflow-wrap: anywhere;
-    /* When list has sticky header/footer, put a scroll padding */
-    scroll-margin-top: var(--x-list-scroll-spacing-top);
-    scroll-margin-bottom: var(--x-list-scroll-spacing-bottom);
-  }
-
-  /* Virtual scroll fillers — must remain invisible.
-     The browser may briefly flash them during scroll before the render window
-     updates, so giving them a visible background would cause visual glitches. */
-  .navi_list_virtual_filler {
-    display: inline-block;
-    height: 0px;
-    list-style: none;
-    /* background: pink; */
-  }
-
-  /* Empty state — hidden by default, shown when no list items are rendered.
-     order: 1 pushes fallbacks after all regular items in flex column layout.
-     The list children are open-ended (headers, presentation items, real items),
-     so we cannot control where the consumer places the fallback nodes in the DOM.
-     Using order ensures fallbacks always appear after items regardless of DOM order.
-     matchFallback intentionally shares the same order as fallback so it appears
-     at the same visual position — after an input if present but before any items
-     still displayed (non-matching items remain in DOM with hidden prop):
-       1. Input (sticky header, order: -2)
-       2. matchFallback (order: -1)
-       3. hidden items (regular order, after DOM flow)
-       4. HOT FIX OF THE DEAD for bottom filler + preact issue: order: 1
-       5. sticky footer (order: 2)
-  */
-  /* order: 0 keeps the header pinned before fallbacks (order: 1) in flex order,
-     ensuring the header (e.g. a search input) always appears above them. */
-  .navi_list_item_header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    order: -2;
-  }
-  .navi_list_fallback,
-  .navi_list_no_match_fallback {
-    order: -1;
-    color: light-dark(#888, #aaa);
-    &[navi-default] {
-      display: inline;
-      padding: var(--list-item-padding);
-      text-align: center;
-      user-select: none;
-    }
-  }
-  [navi-virtual-filler="bottom"] {
-    /* for some reason preact ends up puttin this element before the list items in some scenarios
-     I've noticed that removing the ItemIndexToScrollOnMountRefContext.Provider
-     does fix this issue (I suppose it's because it cause on less render of the list which is the problematic one)
-     this order ENSURE that even when preact hallucinates we are still correctly putting the bottom filler
-     after the list items */
-    order: 1;
-  }
-  /* order: 2 pins the footer after fallbacks (order: 1) and all items. */
-  .navi_list_item_footer {
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-    order: 2;
-  }
-
-  ::highlight(navi-search-match) {
-    color: var(--list-item-color-highlight);
-    background-color: var(--list-item-background-color-highlight);
-  }
-
-  /* Hide groups that have no rendered items. */
-  .navi_list_item_group {
-    min-width: 100%;
-
-    .navi_list_item_group_label {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      display: block;
-      background-color: var(--list-group-label-background-color);
-      user-select: none;
-
-      &[navi-default] {
-        padding: 4px 12px 2px;
-        color: light-dark(#888, #aaa);
-        font-weight: 600;
-        font-size: 0.75em;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-    }
-    .navi_list_item_group_list {
-      display: flex;
-      width: max-content;
-      min-width: 100%;
-      margin: 0;
-      padding: 0;
-      flex-direction: column;
-      list-style: none;
-
-      /* Items inside a group must account for the sticky group label height
-         on top of the list's global header/scroll-padding spacing. */
-      .navi_list_item {
-        scroll-margin-top: calc(
-          var(--x-list-scroll-spacing-top) + var(--list-group-label-height, 0px)
-        );
-      }
-    }
-
-    &[data-hidden-while-empty]:not(:has([navi-list-item-real])) {
-      display: none;
-    }
-  }
-`;
-
-/**
- * List — generic virtualized scroll container.
- *
- * Renders children inside a scrollable container with an optional render budget
- * for virtual scrolling. Items must use <ListItem> to participate in tracking.
- *
- * Props:
- *   keyboardInteractions  — when true, attaches arrow/enter/escape keyboard shortcuts
- *                          that dispatch navi_list_nav / navi_list_confirm / navi_list_clear
- *                          to the list container. Pair with uiAction for a full keyboard-
- *                          navigable list.
- *   uiAction             — called with the selected value on confirm. When provided
- *                          the list becomes interactive: tracks hover and keyboard-
- *                          pointed state, handles navi_list_nav / navi_list_clear /
- *                          navi_list_confirm custom events via ListInteractionContext.
- *   popover              — when true, renders as a managed popover positioned near
- *                          an anchor element via navi_list_open / navi_list_close events.
- *   renderBudget         — max items in DOM at once (default 100, virtual scroll when exceeded)
- *   virtualItemHeight    — fixed px height per item when all items have the same height.
- *                          Enables precise virtual-scroll filler sizing without a DOM
- *                          measurement pass. Required when renderBudget is active and
- *                          item height is known up-front.
- *   fallback             — content shown when no items exist at all
- *   matchFallback         — content shown when items exist but all are hidden (e.g. no search match)
- *   separator            — element or function(index, { previousItem, currentItem }) inserted between visible items
- *   lockSize             — when true, captures the container's dimensions on first render
- *                          (always in unfiltered state). Those values become min-width/
- *                          min-height so filtering cannot collapse the layout.
- *   ...rest              — forwarded to the outer scroll container <Box>
- */
-const List = props => {
-  const refDefault = useRef(null);
-  props.ref = props.ref || refDefault;
-  const idDefault = useId();
-  props.id = props.id || idDefault;
-  const listVnode = jsx(ListUI, {
-    ...props
-  });
-  return listVnode;
-};
-const ListUI = props => {
-  import.meta.css = [css$m, "@jsenv/navi/src/control/list/list.jsx"];
-  const {
-    ref,
-    renderBudget = RENDER_BUDGET_DEFAULT,
-    renderBudgetSkipCheck,
-    role,
-    fallback,
-    noMatchFallback,
-    separator,
-    children,
-    popover,
-    expandX,
-    expand,
-    maxHeight,
-    onListVisibleItemsChange,
-    virtualItemHeight,
-    lockSize,
-    searchText,
-    ...rest
-  } = props;
-  if (renderBudget < 30 && !renderBudgetSkipCheck) {
-    console.warn(`List: renderBudget=${renderBudget} is too low. A renderBudget below 30 is not supported: on large screens or when the list grows, items outside the window would appear as blank space instead of rendered content. Use a value of at least 30, or omit the prop to use the default (${RENDER_BUDGET_DEFAULT}).`);
-  }
-
-  // lockSize: capture the container's dimensions on first render so filtering
-  // cannot collapse the layout. Measurement happens on the initial (unfiltered)
-  // state because the parent controls hidden props before any search is applied.
-  const sizeLocked = useRef(false);
-  useDisplayedLayoutEffect(ref, listContainerEl => {
-    if (!lockSize) {
-      return undefined;
-    }
-    const observer = new ResizeObserver(entries => {
-      const entry = entries[0];
-      // Use borderBoxSize (outer width) not contentRect (which excludes the
-      // scrollbar width). If we used contentRect, min-width would be set to
-      // outerWidth − scrollbarWidth, and the container would shrink by exactly
-      // the scrollbar width when the scrollbar disappears.
-      const borderBoxEntry = entry.borderBoxSize ? entry.borderBoxSize[0] : null;
-      const width = borderBoxEntry ? borderBoxEntry.inlineSize : entry.contentRect.width;
-      const height = borderBoxEntry ? borderBoxEntry.blockSize : entry.contentRect.height;
-      if (width === 0 && height === 0) {
+    onFocusIn: e => {
+      const realInput = e.target.closest("[navi-selectable-real-input]");
+      if (!realInput) {
         return;
       }
-      listContainerEl.style.minWidth = `${width}px`;
-      listContainerEl.style.minHeight = `${height}px`;
-      sizeLocked.current = true;
-      observer.disconnect();
-    });
-    observer.observe(listContainerEl);
-    return () => {
-      observer.disconnect();
-    };
-  }, [lockSize]);
-  const tracker = useItemTracker({
-    onChange: () => {
-      onListVisibleItemsChange?.(tracker.visibleItemsSignal.peek());
-    }
-  });
-  const {
-    virtualItemHeightSignal,
-    renderWindow,
-    scrollToItem,
-    pendingScrollRef
-  } = useListScrollSync({
-    ref,
-    tracker,
-    renderBudget,
-    virtualItemHeight,
-    searchText
-  });
-  const getItemById = itemId => {
-    return tracker.itemsSignal.peek().find(item => item.id === itemId);
-  };
-  return jsx(Box, {
-    ...rest,
-    ref: ref,
-    baseClassName: "navi_list_container",
-    popover: popover,
-    "data-expand-x": expandX || expand ? "" : undefined,
-    expandX: expandX,
-    expand: expand,
-    maxHeight: maxHeight,
-    styleCSSVars: LIST_STYLE_CSS_VARS,
-    pseudoClasses: LIST_PSEUDO_CLASSES,
-    hasChildUsingForwardedProps: true,
-    onnavi_request_scroll: e => {
-      if (!Object.hasOwn(e.detail, "id")) {
-        console.warn(`navi_request_scroll event is missing the "id" property in its detail.`, e);
-        return;
+      const itemEl = realInput.closest("[navi-list-item-real]");
+      if (itemEl && itemEl.id) {
+        setCurrentId(itemEl.id, e);
       }
+    },
+    onnavi_request_select: e => {
       const {
         id
       } = e.detail;
-      const item = getItemById(id);
-      scrollToItem(item, {
-        event: e,
-        reason: "navi_request_scroll"
-      });
-    },
-    children: jsx(ListContent, {
-      role: role,
-      fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
-      separator: separator,
-      expandX: expandX,
-      expand: expand,
-      tracker: tracker,
-      renderWindow: renderWindow,
-      virtualItemHeightSignal: virtualItemHeightSignal,
-      pendingScrollRef: pendingScrollRef,
-      children: children
+      if (id === undefined) {
+        return;
+      }
+      const inputId = `${id}_input`;
+      const childController = uiGroupStateController.findChildById(inputId);
+      if (!childController) {
+        return;
+      }
+      const list = ref.current;
+      const allowed = dispatchRequestInteraction(list, e, "select");
+      if (!allowed) {
+        e.preventDefault();
+        return;
+      }
+      if (childController.setUIState(true, e)) {
+        dispatchRequestAction(list, {
+          event: e
+        });
+      }
+    },
+    onnavi_request_unselect: e => {
+      const {
+        id
+      } = e.detail;
+      if (id === undefined) {
+        return;
+      }
+      const inputId = `${id}_input`;
+      const childController = uiGroupStateController.findChildById(inputId);
+      if (!childController) {
+        return;
+      }
+      const list = ref.current;
+      const allowed = dispatchRequestInteraction(list, e, "unselect");
+      if (!allowed) {
+        e.preventDefault();
+        return;
+      }
+      if (childController.setUIState(false, e)) {
+        dispatchRequestAction(list, {
+          event: e
+        });
+      }
+    },
+    onnavi_request_nav: e => {
+      const {
+        goal
+      } = e.detail;
+      const navigableEls = getNavigableElements();
+      if (navigableEls.length === 0) {
+        return;
+      }
+      const currentId = currentIdRef.current;
+      let currentIndex = -1;
+      if (currentId) {
+        currentIndex = navigableEls.findIndex(el => el.id === currentId);
+      }
+      let targetEl;
+      if (goal === "first") {
+        targetEl = navigableEls[0];
+      } else if (goal === "last") {
+        targetEl = navigableEls[navigableEls.length - 1];
+      } else if (goal === "down") {
+        if (currentIndex === -1) {
+          targetEl = navigableEls[0];
+        } else if (currentIndex < navigableEls.length - 1) {
+          targetEl = navigableEls[currentIndex + 1];
+        } else {
+          targetEl = navigableEls[navigableEls.length - 1];
+        }
+      } else if (goal === "up") {
+        if (currentIndex === -1) {
+          targetEl = navigableEls[0];
+        } else if (currentIndex > 0) {
+          targetEl = navigableEls[currentIndex - 1];
+        } else {
+          targetEl = navigableEls[0];
+        }
+      }
+      if (!targetEl) {
+        return;
+      }
+      setCurrentId(targetEl.id, e);
+      dispatchCustomEvent(ref.current, "navi_request_scroll", {
+        event: e,
+        id: targetEl.id
+      });
+    },
+    onnavi_request_activate: e => {
+      const currentId = currentIdRef.current;
+      if (!currentId) {
+        return;
+      }
+      if (multiple) {
+        const inputId = `${currentId}_input`;
+        const childController = uiGroupStateController.findChildById(inputId);
+        const isSelected = childController && childController.uiState;
+        dispatchCustomEvent(ref.current, isSelected ? "navi_request_unselect" : "navi_request_select", {
+          event: e,
+          id: currentId
+        });
+        return;
+      }
+      dispatchCustomEvent(ref.current, "navi_request_select", {
+        event: e,
+        id: currentId
+      });
+    },
+    children: jsx(ControlgroupChildrenWrapper, {
+      ...childrenWrapperProps,
+      children: props.children
     })
   });
+  return jsx(SelectableListMultipleContext.Provider, {
+    value: multiple,
+    children: listVnode
+  });
 };
-const ListContent = ({
-  role,
-  fallback,
-  noMatchFallback,
-  searchText,
-  separator,
-  expandX,
-  expand,
-  tracker,
-  renderWindow,
-  virtualItemHeightSignal,
-  pendingScrollRef,
-  children
-}) => {
-  const listProps = useContext(BoxForwardedPropsContext);
-  return jsx("div", {
-    className: "navi_list_scroll_container",
-    children: jsx(UnorderedList, {
-      role: role,
-      fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
-      separator: separator === true ? jsx(Separator, {
-        margin: "0"
-      }) : separator,
-      expandX: expandX || expand,
-      ...listProps,
-      tracker: tracker,
-      renderWindow: renderWindow,
-      virtualItemHeightSignal: virtualItemHeightSignal,
-      children: jsx(PendingScrollRefContext.Provider, {
-        value: pendingScrollRef,
+const SelectableRealInputContext = createContext(null);
+const ListItemSelectableResolver = props => {
+  const Next = useNextResolver();
+  if (props.selectable) {
+    return jsx(ListItemSelectable, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListItemSelectable = props => {
+  const Next = useNextResolver();
+  const {
+    index,
+    id,
+    highlight,
+    hidden,
+    filtered,
+    matchScore,
+    defaultSelected,
+    selected,
+    pointed,
+    selectableArea = "all",
+    ...rest
+  } = props;
+  const multiple = useContext(SelectableListMultipleContext);
+  const inputRef = useRef();
+  const inputType = multiple ? "checkbox" : "radio";
+  const inputId = `${id}_input`;
+  inputRef.nullCanHappen = true; // virtualization
+  const [checkableProps, remainingProps, ChildrenContextWrapper] = useCheckableProps({
+    readOnlyMessage: naviI18n(`constraint.readonly.option`, props),
+    ...rest,
+    ref: inputRef,
+    id: inputId,
+    type: inputType,
+    defaultChecked: defaultSelected,
+    checked: selected,
+    action: (v, {
+      event
+    }) => {
+      const listContainerEl = event.currentTarget.closest(".navi_list_container");
+      dispatchRequestAction(listContainerEl, {
+        event
+      });
+    }
+  });
+  const {
+    checked,
+    value,
+    basePseudoState,
+    children
+  } = checkableProps;
+  const readOnly = basePseudoState[":read-only"];
+  // const disabled = basePseudoState[":disabled"];
+  // const loading = basePseudoState[":-navi-loading"];
+  const realInputContextValue = useMemo(() => {
+    return {
+      id: inputId,
+      type: inputType,
+      checked,
+      readOnly,
+      value
+    };
+  }, [inputId, inputType, checked, readOnly, value]);
+  return jsxs(Next, {
+    id: id,
+    index: index,
+    highlight: highlight,
+    filtered: filtered,
+    hidden: hidden,
+    matchScore: matchScore,
+    "aria-selected": checked,
+    selected: checked,
+    "navi-selectable": "",
+    padding: "m",
+    spacing: "s",
+    flex: true,
+    alignY: "center",
+    ...remainingProps,
+    pseudoClasses: SELECTABLE_PSEUDO_CLASSES,
+    basePseudoState: {
+      ":-navi-selected": checked,
+      ":-navi-pointed": pointed,
+      ...basePseudoState
+    },
+    ref: props.ref,
+    selectable: undefined,
+    "navi-selectable-area-all": selectableArea === "all" ? "" : undefined,
+    children: [jsx(SelectableRealInput, {
+      ...checkableProps,
+      // eslint-disable-next-line react/no-children-prop
+      children: undefined
+    }), jsx(SelectableRealInputContext.Provider, {
+      value: realInputContextValue,
+      children: jsx(ChildrenContextWrapper, {
         children: children
       })
-    })
+    })]
   });
 };
-const LIST_STYLE_CSS_VARS = {
-  maxHeight: "--list-max-height",
-  borderColor: "--list-border-color",
-  borderRadius: "--list-border-radius",
-  borderWidth: "--list-border-width"
+const SELECTABLE_PSEUDO_CLASSES = [":hover", ":disabled", ":read-only", ":focus-within", ":focus", ":focus-visible", ":-navi-loading", ":-navi-pointed", ":-navi-selected", ":disabled", ":read-only"];
+const SelectableRealInput = props => {
+  // here for some reason we can't use <Input, so instead we use <Box
+  // ideally we could use <Input but it would interfere with the control props we already create
+  // in the ListItemSelectable
+  return jsx(Box, {
+    as: "input",
+    pseudoClasses: SELECTABLE_INPUT_PSEUDO_CLASSES,
+    ...props,
+    "navi-visually-hidden": "",
+    "navi-selectable-real-input": "",
+    "data-callout-arrow-x": "center"
+    // navi-debug
+  });
 };
-const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
-const useListScrollSync = ({
-  ref,
-  tracker,
-  renderBudget,
-  virtualItemHeight,
-  searchText
-}) => {
-  const debugScroll = useDebugScroll();
-  const virtualItemHeightSignal = useVirtualItemHeightSignal(ref, virtualItemHeight);
-  const [renderWindow, setRenderWindow] = useState({
-    start: 0,
-    end: renderBudget
+const SELECTABLE_INPUT_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked"];
+const SelectableInputProxy = props => {
+  const selectableRealInputProps = useContext(SelectableRealInputContext);
+  if (!selectableRealInputProps) {
+    throw new Error("Selectable.Input must be used within a Selectable component");
+  }
+
+  // Reset FieldToInterfaceContext to ensure we don't read id or report our
+  // states (real input should take id and report)
+  return jsx(ControlToInterfaceContext.Provider, {
+    value: undefined,
+    children: jsx(Input, {
+      ...props,
+      ...selectableRealInputProps,
+      id: undefined,
+      "navi-control-proxy-for": selectableRealInputProps.id
+      // give it a specific name to avoid radio name (would unselect others)
+      // (making it unique to the list would be enough, but here it's even more unique)
+      ,
+
+      name: `${selectableRealInputProps.id}_proxy`,
+      "aria-hidden": "true",
+      tabIndex: -1
+    })
   });
-  const renderWindowRef = useRef(null);
-  renderWindowRef.current = renderWindow;
-  const updateRenderWindow = (newStart, newEnd, reason) => {
-    const {
-      start,
-      end
-    } = renderWindowRef.current;
-    if (newStart === start && newEnd === end) {
-      return;
+};
+const SelectableInput = SelectableInputProxy;
+
+/**
+ * CSS Highlight API integration for navi-search-match.
+ *
+ * Provides a shared `Highlight` instance registered as "navi-search-match"
+ * and a `useSearchHighlight` hook that marks matching text ranges on an element.
+ *
+ * The highlight is not specific to ListItem — any element that wants to mark
+ * search match ranges (e.g. Suggestion, custom search results) can use these.
+ *
+ * CSS to paint the highlight:
+ *   ::highlight(navi-search-match) {
+ *     color: var(--search-match-color);
+ *     background-color: var(--search-match-background-color);
+ *   }
+ *
+ * The `highlight` prop can be:
+ *   - an array of [start, end] pairs — applied to all text nodes under the root element
+ *   - an object { [domSelector]: [[start, end], …] } — applied to each sub-element
+ *     matched by the selector (the format produced by createSearch)
+ */
+
+// Module-level shared Highlight instance — created lazily once.
+let naviSearchHighlight = null;
+const getNaviSearchHighlight = () => {
+  if (!CSS.highlights) {
+    return null;
+  }
+  if (!naviSearchHighlight) {
+    naviSearchHighlight = new Highlight();
+    CSS.highlights.set("navi-search-match", naviSearchHighlight);
+  }
+  return naviSearchHighlight;
+};
+
+/**
+ * useSearchHighlight — registers/unregisters CSS Highlight API ranges for an element.
+ *
+ * @param {import("preact").RefObject} ref - ref to the root element
+ * @param {Array|Object|null|undefined} highlight - ranges to highlight
+ * @param {Array} deps - additional dependencies that should retrigger the effect
+ *                       (typically [children, hidden] from the consuming component)
+ */
+const useSearchHighlight = (ref, highlight, deps = []) => {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !highlight) {
+      return undefined;
+    }
+    return applySearchHighlight(el, highlight);
+  }, [highlight, ...deps]);
+};
+
+const applySearchHighlight = (el, highlight) => {
+  const hl = getNaviSearchHighlight();
+  if (!hl) {
+    return undefined;
+  }
+
+  // Normalise highlight to { root, ranges }[] entries.
+  // Flat array → single entry scoped to the whole element.
+  const entries = Array.isArray(highlight)
+    ? highlight.length === 0
+      ? []
+      : [{ root: el, ranges: highlight }]
+    : Object.entries(highlight).map(([selector, ranges]) => ({
+        root: el.querySelector(selector) ?? el,
+        ranges,
+      }));
+
+  if (entries.length === 0) {
+    return undefined;
+  }
+
+  const ownRanges = [];
+  for (const { root, ranges } of entries) {
+    // Collect text nodes under root with cumulative character offsets so that
+    // [start, end] ranges (positions in the field string) map directly to
+    // the correct DOM text node positions without re-searching.
+    const textNodes = [];
+    let totalLength = 0;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => {
+        // Skip text nodes inside aria-hidden elements (icons, decorative content, etc.)
+        let parent = node.parentElement;
+        while (parent && parent !== root) {
+          if (parent.getAttribute("aria-hidden") === "true") {
+            return NodeFilter.FILTER_REJECT;
+          }
+          parent = parent.parentElement;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    let node;
+    while ((node = walker.nextNode())) {
+      textNodes.push({ node, offset: totalLength });
+      totalLength += node.textContent.length;
+    }
+    for (const [start, end] of ranges) {
+      for (const { node: textNode, offset: nodeOffset } of textNodes) {
+        const nodeEnd = nodeOffset + textNode.textContent.length;
+        if (nodeEnd <= start || nodeOffset >= end) {
+          continue;
+        }
+        const rangeStart = start - nodeOffset;
+        const rangeEnd = end - nodeOffset;
+        const range = new Range();
+        range.setStart(textNode, rangeStart < 0 ? 0 : rangeStart);
+        range.setEnd(
+          textNode,
+          rangeEnd > textNode.textContent.length
+            ? textNode.textContent.length
+            : rangeEnd,
+        );
+        hl.add(range);
+        ownRanges.push(range);
+      }
+    }
+  }
+  return () => {
+    for (const range of ownRanges) {
+      hl.delete(range);
     }
-    debugScroll(`updateRenderWindow(${newStart}, ${newEnd}, "${reason}")`);
-    const renderWindow = {
-      start: newStart,
-      end: newEnd
-    };
-    renderWindowRef.current = renderWindow;
-    setRenderWindow(renderWindow);
   };
-  const pendingScrollRef = useRef();
-  const scrollToItem = (item, {
-    event,
-    reason
-  }) => {
-    if (!item) {
-      return;
+};
+
+installImportMetaCssBuild(import.meta);const ListItemTrackerContext = createContext(null);
+const GroupItemTrackerContext = createContext(null);
+const PendingScrollRefContext = createContext(null);
+
+// When total rendered items exceeds renderBudget, a render window [start, end)
+// is activated to cap the number of DOM nodes. Items outside the window return
+// null. The window slides as the user scrolls, using actual DOM positions
+// (getBoundingClientRect) to find the first visible item — no height estimation.
+const RENDER_BUDGET_DEFAULT = 100;
+
+// Attribute used on <li> elements rendered by ListItemReal so the scroll listener
+// and filler-height calculation can find real items without matching presentation ones.
+const REAL_LIST_ITEM_SELECTOR = `[navi-list-item-real]`;
+
+// Carries the render window {start, end} (or null = render all) from
+// List down to each ListItem.
+const RenderWindowContext = createContext(null);
+// Carries the separator element/function down to each ListItem so separators
+// are only rendered between items that actually mount (post-filter, post-window).
+const SeparatorContext = createContext(null);
+const css$l = /* css */`
+  @layer navi {
+    .navi_list_container {
+      --list-outline-width: 1px;
+      --list-border-radius: 4px;
+      --list-border-width: 1px;
+      --list-border-color: light-dark(#ccc, #555);
+      --list-background-color: light-dark(#fff, #1e1e1e);
+      --list-max-height: 220px;
     }
-    const items = tracker.itemsSignal.peek();
-    const itemCount = items.length;
-    if (itemCount === 0) {
-      return;
+    .navi_list_item {
+      --list-item-padding-x: 0px;
+      --list-item-padding-y: 0px;
+      --list-item-padding: var(--list-item-padding-y) var(--list-item-padding-x);
+      --list-item-color: inherit;
+      --list-item-font-weight: inherit;
+      --list-item-background-color: transparent;
+
+      /* Highlight (CSS Highlight API match) */
+      --list-item-color-highlight: inherit;
+      --list-item-background-color-highlight: #ffe066;
+
+      /* Here to be overridable by box layout props such as flex */
+      display: inline-block;
     }
-    let index = items.findIndex(i => i.id === item.id);
-    if (index === -1) {
-      return;
+    .navi_list_item_group_label {
+      --list-group-label-background-color: var(--list-background-color);
     }
-    if (index >= itemCount) {
-      index = itemCount - 1;
+    .navi_list_item_header {
+      background: var(--list-background-color);
     }
-    const scrollItemIntoView = itemEl => {
-      const trigger = `"${event.type}" on ${getElementSignature(event.target)} (${reason})`;
-      // When we display the list we prefer to have selected item at the center
-      // otherwise, usually when focused by arrow nav, we want to keep it into view close to the nearest edge
-      const block = event.type === "navi_displayed" ? "center" : "nearest";
-      const scrollToItemCall = `${getElementSignature(itemEl)}.scrollIntoView({ block: "${block}", container: "nearest" })`;
-      const listScrollContainerEl = ref.current.querySelector(`.navi_list_scroll_container`);
-      debugScroll(`${trigger} -> ${scrollToItemCall}`);
-      scrollIntoViewScoped(itemEl, {
-        container: listScrollContainerEl,
-        block
-      });
-      const listEl = ref.current.querySelector(".navi_list");
-      dispatchPublicCustomEvent(listEl, "navi_scroll", {
-        event,
-        item
-      });
-    };
-    const {
-      start,
-      end
-    } = renderWindowRef.current;
-    const isInWindow = index >= start && index < end;
-    if (isInWindow) {
-      const itemEl = document.getElementById(item.id);
-      if (itemEl) {
-        scrollItemIntoView(itemEl);
-        return;
-      }
-    }
-    // Not in DOM — shift the render window. The item will read
-    // pendingScrollRef on mount and scroll into view.
-    pendingScrollRef.current = {
-      id: item.id,
-      resolve: itemEl => {
-        pendingScrollRef.current = null;
-        scrollItemIntoView(itemEl);
-      }
-    };
-    const half = Math.floor(renderBudget / 2);
-    const newStart = Math.max(0, index - half);
-    const newEnd = newStart + renderBudget;
-    updateRenderWindow(newStart, newEnd, `item to scroll (at ${index}) is out of render window`);
-  };
-  const currentScrollRef = useRef(null);
-  const updateCurrentScroll = () => {
-    const listScrollContainerEl = ref.current.querySelector(`.navi_list_scroll_container`);
-    const currentScrollLeft = listScrollContainerEl.scrollLeft;
-    const currentScrollTop = listScrollContainerEl.scrollTop;
-    const renderWindow = renderWindowRef.current;
-    currentScrollRef.current = {
-      left: currentScrollLeft,
-      top: currentScrollTop,
-      renderWindow: {
-        ...renderWindow
-      }
-    };
-    debugScroll(`store currentScroll: scrollTop=${currentScrollTop}, renderWindow=[${renderWindow.start}, ${renderWindow.end})`);
-  };
-  const searchTextRef = useRef();
-  let searchTextBecomesActive = false;
-  if (searchTextRef.current === undefined) {
-    searchTextRef.current = searchText;
-  } else {
-    const searchTextPrevious = searchTextRef.current;
-    searchTextRef.current = searchText;
-    if (!searchTextPrevious && searchText) {
-      searchTextBecomesActive = true;
+    .navi_list_item_footer {
+      background: var(--list-background-color);
     }
   }
-  // Scroll to the selected item only the FIRST time the list is presented on screen,
-  // so the user can see what's selected on initial open. On subsequent re-displays
-  // (e.g. reopening a popover containing the list), we intentionally keep the previous
-  // scroll position — it's less disruptive UX to land where the user last was, even
-  // if that means the selected item isn't currently visible.
-  // Skipped when inside a closed <dialog>/<details> (scrollIntoView is a no-op
-  // on hidden elements); re-runs automatically every time the ancestor opens.
-  const hasBeenDisplayedRef = useRef(false);
-  useDisplayedLayoutEffect(ref, (el, openEvent) => {
-    updateCurrentScroll();
-    if (hasBeenDisplayedRef.current) {
-      return;
-    }
-    hasBeenDisplayedRef.current = true;
-    const items = tracker.itemsSignal.peek();
-    const firstSelected = items.find(i => i.selected);
-    if (firstSelected) {
-      scrollToItem(firstSelected, {
-        event: new CustomEvent("navi_displayed", {
-          detail: {
-            originalEvent: openEvent
-          }
-        }),
-        reason: "scroll to selected"
-      });
-    } else {
-      scrollToItem(items[0], {
-        event: new CustomEvent("navi_displayed", {
-          detail: {
-            originalEvent: openEvent
-          }
-        }),
-        reason: "scroll to top (no selected item)"
-      });
-    }
-  }, []);
-  // Watch scores of the top renderBudget items.
-  // When scores change during an active search, scroll to top to reveal the most relevant items.
-  // When search becomes empty, restore the scroll position from before the search started.
-  // We save the first-visible item ID so restoration is item-precise
-  // and survives render-window shifts or item reordering.
 
-  // NOTE POUR LE JOUR OU ON A LE MULTISELECT:
-  // Lorsqu'on selectionne quelque chose pendant une recherche, alors ensuite meme si on clear
-  // on veut pas revenir a la position scroll précédente car on veut garde l'item qu'on a selectionné visible
-  // (pour l'instant pas grave car on travaille pour le mode select qui fermera le dialog au select)
-  const savedScrollRef = useRef(null);
-  const topMatchScoresKeyRef = useRef("");
-  useLayoutEffect(() => {
-    const listScrollContainerEl = ref.current?.querySelector(`.navi_list_scroll_container`);
-    if (!listScrollContainerEl) {
-      return undefined;
-    }
-    if (!searchText) {
-      // no search -> try to restore scroll position
-      topMatchScoresKeyRef.current = "";
-      const savedScroll = savedScrollRef.current;
-      if (!savedScroll) {
-        // nothing to restore
-        return undefined;
-      }
-      savedScrollRef.current = null;
-      debugScroll("Restoring scroll to", savedScroll);
-      updateRenderWindow(savedScroll.renderWindow.start, savedScroll.renderWindow.end, "restore scroll window");
-      const raf = requestAnimationFrame(() => {
-        const left = savedScroll.left;
-        const top = savedScroll.top;
-        // use scrollTo to respect eventual css scroll-behavior: smooth;
-        debugScroll(`restore scroll: ${getElementSignature(listScrollContainerEl)}.scrollTo({ left: ${left}, top: ${top} })`);
-        // The reliable way to restore scroll is to use scrollTop because otherwise we will estimate the item to scroll
-        // based on virtual item height which can wrongly restore the scroll.
-        // However we have a contract with outside to inside which item is scrolled
-        // (used by keyboard nav to enable anchoring the item for list item nav with arrow keys)
-        // so we do our best to give that item back
-        const {
-          item
-        } = getScrollInfo({
-          scrollTop: savedScroll.top
-        }, listScrollContainerEl, tracker, virtualItemHeightSignal, renderWindowRef);
-        listScrollContainerEl.scrollTo({
-          left: savedScroll.left,
-          top: savedScroll.top
-        });
-        const listEl = ref.current.querySelector(".navi_list");
-        dispatchPublicCustomEvent(listEl, "navi_scroll", {
-          item,
-          event: new CustomEvent("navi_scroll_restore")
-        });
-      });
-      return () => {
-        cancelAnimationFrame(raf);
-      };
-    }
-    const visibleItems = tracker.visibleItemsSignal.peek();
-    const topItems = visibleItems.slice(0, renderBudget);
-    const topMatchScoresKey = topItems.map(i => `${i.id}:${i.matchScore ?? ""}`).join(",");
-    const currentTopMatchScore = topMatchScoresKeyRef.current;
-    if (topMatchScoresKey === currentTopMatchScore) {
-      // no changes in top matches -> no need to scroll
-      return undefined;
-    }
-    // n items are now more important to see, scrollTop to show them
-    topMatchScoresKeyRef.current = topMatchScoresKey;
-    if (searchTextBecomesActive) {
-      // search just started -> save the currently scrolled item id to restore later
-      const currentScroll = currentScrollRef.current;
-      savedScrollRef.current = currentScroll;
-      debugScroll(`Saving scroll: { top: ${currentScroll.top}, renderWindowStart: ${currentScroll.renderWindow.start}, renderWindowEnd: ${currentScroll.renderWindow.end} }`);
+  .navi_list_container {
+    --x-list-border-radius: var(--list-border-radius);
+    --x-list-border-width: var(--list-border-width);
+    --x-list-border-color: var(--list-border-color);
+    --x-list-background-color: var(--list-background-color);
+    /* When typing inside an input browser tries to keep caret visible */
+    /* For input within a sticky element inside a scrollable container */
+    /* Browser will try to scroll that input into view */
+    /* When that scrollable container has a scroll padding it causes scroll on each keystroke */
+    /* Even putting a scroll margin on the input won't fix */
+    /* The only solution is to use scroll-margins on each item that can scroll */
+    /* This is why these props are named list-scroll-spacing-top and applied via scroll-margin on items */
+    --x-list-scroll-spacing-top: calc(
+      var(--list-header-height, 0px) + var(--list-scroll-padding-top, 0px)
+    );
+    --x-list-scroll-spacing-bottom: calc(
+      var(--list-footer-height, 0px) + var(--list-scroll-padding-bottom, 0px)
+    );
+    --x-list-scroll-spacing-left: calc(
+      var(--list-header-width, 0px) + var(--list-scroll-padding-left, 0px)
+    );
+    --x-list-scroll-spacing-right: calc(
+      var(--list-footer-width, 0px) + var(--list-scroll-padding-right, 0px)
+    );
+
+    display: flex;
+    min-width: 0;
+    /* fit-content by default, but never wider than the parent */
+    max-width: 100%;
+    flex-direction: column;
+    background-color: var(--x-list-background-color);
+    border: var(--x-list-border-width) solid var(--x-list-border-color);
+    border-radius: var(--x-list-border-radius);
+
+    transition: opacity 0.2s ease;
+    /* overflow:hidden is required on the container (not the inner scroll element)
+       so that border-radius clips the content correctly. Without it, items near
+       the corners would visually overflow the rounded corners during scroll. */
+    overflow: hidden;
+
+    .navi_list_scroll_container {
+      width: inherit;
+      min-width: inherit;
+      max-width: inherit;
+      max-height: var(--list-max-height);
+      overflow: auto;
+      overscroll-behavior: inherit; /* inherit select behavior */
     }
-    // -> scroll to the top
-    scrollToItem(visibleItems[0], {
-      event: new CustomEvent("navi_list_top_match_change")
-    });
-    return undefined;
-  });
 
-  // Scroll listener — slides the window as the user scrolls.
-  useLayoutEffect(() => {
-    const listContainerEl = ref.current;
-    if (!listContainerEl) {
-      return undefined;
+    &[data-expand-x] {
+      width: 100%;
     }
-    const listScrollContainerEl = listContainerEl.querySelector(`.navi_list_scroll_container`);
-    const listEl = listContainerEl.querySelector(".navi_list");
-    const onScroll = () => {
-      updateCurrentScroll();
-      const visibleItemCount = tracker.visibleCountSignal.peek();
-      if (visibleItemCount <= renderBudget) {
-        return;
-      }
-      const oneRealListItemInDom = Boolean(listEl.querySelector(REAL_LIST_ITEM_SELECTOR));
-      if (!oneRealListItemInDom) {
-        return;
+    &[popover] {
+      position: absolute;
+      inset: unset;
+      display: none;
+      min-width: var(--list-anchor-width, 0px);
+      max-width: 95vw;
+      margin: 0;
+      padding: 0;
+
+      &:popover-open {
+        display: flex;
       }
-      let reason = "";
-      const scrollInfo = getScrollInfo({
-        scrollTop: listScrollContainerEl.scrollTop
-      }, listScrollContainerEl, tracker, virtualItemHeightSignal, renderWindowRef);
-      if (!scrollInfo) {
-        return;
+      .navi_list {
+        width: 100%;
       }
-      const {
-        index,
-        reason: hitReason
-      } = scrollInfo;
-      reason = hitReason;
-      const half = Math.floor(renderBudget / 2);
-      let newStart = Math.max(0, index - half);
-      let newEnd = Math.min(visibleItemCount, newStart + renderBudget);
-      if (newEnd === visibleItemCount) {
-        newStart = Math.max(0, visibleItemCount - renderBudget);
+
+      &[data-anchor-hidden] {
+        opacity: 0;
+        pointer-events: none;
       }
-      updateRenderWindow(newStart, newEnd, reason);
-    };
-    listScrollContainerEl.addEventListener("scroll", onScroll, {
-      passive: true
-    });
-    return () => {
-      listScrollContainerEl.removeEventListener("scroll", onScroll);
-    };
-  }, [renderBudget]);
-  return {
-    virtualItemHeightSignal,
-    renderWindow,
-    pendingScrollRef,
-    scrollToItem
-  };
-};
-// Returns the item located at the current scroll position of a list container.
-// Uses DOM hit-testing to find visible items/fillers; falls back to index
-// estimation via virtualItemHeight or renderWindow.start.
-// Returns { index, item, reason } or null if nothing can be determined.
-const getScrollInfo = ({
-  scrollTop
-}, listScrollContainerEl, tracker, virtualItemHeightSignal, renderWindowRef) => {
-  const listEl = listScrollContainerEl.querySelector(".navi_list");
-  const items = tracker.itemsSignal.peek();
-  const containerRect = listScrollContainerEl.getBoundingClientRect();
-  let hitEl = null;
-  let hitFiller = null;
-  // Start scanning from the vertical center of the viewport rather than the top.
-  // The render window places half its budget above and half below the hit index.
-  // Anchoring to the center maximises how many rendered items fall within the
-  // visible area: starting from the top would waste the "above" budget on items
-  // already scrolled past, leaving the bottom of the viewport uncovered.
-  // For large lists where renderBudget >> visible item count this never matters
-  // in practice (the window always covers the whole viewport), but it is
-  // strictly better and costs nothing.
-  const scanStartY = (containerRect.top + containerRect.bottom) / 2;
-  for (let y = scanStartY; y < containerRect.bottom; y += 4) {
-    const el = document.elementFromPoint(containerRect.left + 1, y);
-    if (!el || !listEl.contains(el)) {
-      continue;
-    }
-    const realItem = el.closest(REAL_LIST_ITEM_SELECTOR);
-    if (realItem) {
-      hitEl = realItem;
-      break;
-    }
-    const filler = el.closest("[navi-virtual-filler]");
-    if (filler) {
-      hitFiller = filler;
-      break;
-    }
-  }
-  if (hitFiller) {
-    const virtualItemHeight = virtualItemHeightSignal.peek();
-    if (virtualItemHeight === 0) {
-      return null;
     }
-    const estimatedIndex = Math.floor(scrollTop / virtualItemHeight);
-    const index = Math.min(items.length - 1, estimatedIndex);
-    return {
-      item: items[index],
-      index,
-      reason: `hit filler, estimated at ${index} (${items[index]?.value})`
-    };
   }
-  if (hitEl) {
-    const hitId = hitEl.id;
-    const index = items.findIndex(i => i.id === hitId);
-    if (index === -1) {
-      return null;
-    }
-    return {
-      item: items[index],
-      index,
-      reason: `hit item at ${index} (${items[index].value})`
-    };
+
+  .navi_list {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none; /*  Focus is displayed on the container */
   }
-  const fallbackIndex = renderWindowRef.current.start;
-  return {
-    item: items[fallbackIndex],
-    index: fallbackIndex,
-    reason: "no hit"
-  };
-};
-const useVirtualItemHeightSignal = (ref, virtualItemHeightProp = 0) => {
-  const virtualHeightSignalRef = useRef(null);
-  if (!virtualHeightSignalRef.current) {
-    virtualHeightSignalRef.current = signal(virtualItemHeightProp);
+
+  .navi_list_item {
+    --x-list-item-color: var(--list-item-color);
+    --x-list-item-background-color: var(--list-item-background-color);
+    --x-list-item-font-weight: var(--list-item-font-weight);
+    --x-list-item-border-width: var(--list-item-border-width, 0px);
+    --x-list-item-border-color: var(--list-item-border-color, black);
+
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    padding: var(--list-item-padding);
+    color: var(--x-list-item-color);
+    font-weight: var(--x-list-item-font-weight);
+    background-color: var(--x-list-item-background-color);
+    border: var(--x-list-item-border-width) solid
+      var(--x-list-item-border-color);
+    /*
+    CSS impossible d'obtenir un layout qui ferait en gros:
+    width = max(min(max-content, 100%), unbreakable-content)
+    Donc 3 options:
+    - Laisser le contenu overflow
+      - moche, background ne suit pas
+      -> NOPE
+    - Force overflow hidden + ellipsis
+      - casse la lisibilité des mots insécables
+      - possible d'optin en utilisant overflowEllipsis sur le ListItem
+      -> Bien mais pas par défaut
+    - Forcer le retour a la ligne des mot inécables
+      - Aucun des inconvénient ci dessus 
+      -> Comportement par défaut
+    */
+    overflow-wrap: anywhere;
+    /* When list has sticky header/footer, put a scroll padding */
+    scroll-margin-top: var(--x-list-scroll-spacing-top);
+    scroll-margin-right: var(--x-list-scroll-spacing-right);
+    scroll-margin-bottom: var(--x-list-scroll-spacing-bottom);
+    scroll-margin-left: var(--x-list-scroll-spacing-left);
   }
-  const virtualHeightSignal = virtualHeightSignalRef.current;
-  // propagate prop changes to the signal
-  if (virtualItemHeightProp && virtualHeightSignal.peek() !== virtualItemHeightProp) {
-    virtualHeightSignal.value = virtualItemHeightProp;
+
+  /* Virtual scroll fillers — must remain invisible.
+     The browser may briefly flash them during scroll before the render window
+     updates, so giving them a visible background would cause visual glitches. */
+  .navi_list_virtual_filler {
+    display: inline-block;
+    height: var(--size-to-fill, 0px);
+    list-style: none;
+    /* background: pink; */
   }
-  useLayoutEffect(() => {
-    if (virtualHeightSignal.peek() !== 0) {
-      return;
-    }
-    const listEl = ref.current?.querySelector(".navi_list");
-    if (!listEl) {
-      return;
-    }
-    const firstListItem = listEl.querySelector(REAL_LIST_ITEM_SELECTOR);
-    if (!firstListItem) {
-      return;
+  &[data-horizontal] {
+    .navi_list_virtual_filler {
+      width: var(--size-to-fill, 0px);
+      height: 100%;
     }
-    const measuredHeight = firstListItem.getBoundingClientRect().height;
-    virtualHeightSignal.value = measuredHeight;
-  });
-  return virtualHeightSignal;
-};
-
-// Inner <ul> — hosts the fillers + items.
-// Creates a virtualItemHeight signal so TopFiller and BottomFiller can
-// subscribe to it independently. When virtualItemHeight is passed as a prop it
-// initialises the signal directly; otherwise UnorderedList measures a rendered
-// item after each commit and writes to the signal, causing only the fillers to
-// re-render.
-const UnorderedList = ({
-  tracker,
-  renderWindow,
-  virtualItemHeightSignal,
-  fallback,
-  noMatchFallback,
-  searchText,
-  separator,
-  children,
-  ...rest
-}) => {
-  return jsxs(Box, {
-    as: "ul",
-    ...rest,
-    baseClassName: "navi_list",
-    children: [jsx(TopFiller, {
-      virtualItemHeightSignal: virtualItemHeightSignal,
-      renderWindowStart: renderWindow.start
-    }), jsx(NoMatchFallback, {
-      noMatchFallback: noMatchFallback,
-      tracker: tracker,
-      searchText: searchText
-    }), jsx(Fallback, {
-      fallback: fallback,
-      tracker: tracker
-    }), jsx(RenderWindowContext.Provider, {
-      value: renderWindow,
-      children: jsx(SeparatorContext.Provider, {
-        value: separator ?? null,
-        children: jsx(ListItemTrackerContext.Provider, {
-          value: tracker,
-          children: children
-        })
-      })
-    }), jsx(BottomFiller, {
-      virtualItemHeightSignal: virtualItemHeightSignal,
-      renderWindowEnd: renderWindow.end,
-      tracker: tracker
-    })]
-  });
-};
-const NoMatchFallback = ({
-  tracker,
-  noMatchFallback,
-  searchText
-}) => {
-  const itemCount = tracker.countSignal.value;
-  const visibleItemCount = tracker.visibleCountSignal.value;
-  const matchCount = tracker.matchCountSignal.value;
-  // Show when all items are filtered out (filtered prop), or when search is
-  // active but no visible item has a positive match score.
-  const allHidden = itemCount > 0 && visibleItemCount === 0;
-  const noneMatch = searchText && visibleItemCount > 0 && matchCount === 0;
-  const showMatchFallback = allHidden || noneMatch;
-  if (noMatchFallback === undefined) {
-    noMatchFallback = allHidden ? naviI18n("list.no_match") : naviI18n("list.no_match_rest_shown");
   }
-  if (!showMatchFallback) {
-    return null;
+
+  /* Empty state — hidden by default, shown when no list items are rendered.
+     order: 1 pushes fallbacks after all regular items in flex column layout.
+     The list children are open-ended (headers, presentation items, real items),
+     so we cannot control where the consumer places the fallback nodes in the DOM.
+     Using order ensures fallbacks always appear after items regardless of DOM order.
+     matchFallback intentionally shares the same order as fallback so it appears
+     at the same visual position — after an input if present but before any items
+     still displayed (non-matching items remain in DOM with hidden prop):
+       1. Input (sticky header, order: -2)
+       2. matchFallback (order: -1)
+       3. hidden items (regular order, after DOM flow)
+       4. HOT FIX OF THE DEAD for bottom filler + preact issue: order: 1
+       5. sticky footer (order: 2)
+  */
+  /* order: 0 keeps the header pinned before fallbacks (order: 1) in flex order,
+     ensuring the header (e.g. a search input) always appears above them. */
+  .navi_list_item_header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    order: -2;
   }
-  return jsx(ListItem, {
-    role: "presentation",
-    className: "navi_list_item navi_list_no_match_fallback",
-    hidden: !showMatchFallback,
-    "navi-default": typeof noMatchFallback === "string" ? "" : undefined,
-    children: noMatchFallback
-  });
-};
-const Fallback = ({
-  tracker,
-  fallback
-}) => {
-  const itemCount = tracker.countSignal.value;
-  const showFallback = itemCount === 0;
-  if (fallback === undefined) {
-    fallback = naviI18n("list.empty");
+  .navi_list_fallback,
+  .navi_list_no_match_fallback {
+    order: -1;
+    color: light-dark(#888, #aaa);
+    &[navi-default] {
+      display: inline;
+      padding: var(--list-item-padding);
+      text-align: center;
+      user-select: none;
+    }
   }
-  if (!showFallback) {
-    return null;
+  [navi-virtual-filler="after"] {
+    /* for some reason preact ends up puttin this element before the list items in some scenarios
+     I've noticed that removing the ItemIndexToScrollOnMountRefContext.Provider
+     does fix this issue (I suppose it's because it cause on less render of the list which is the problematic one)
+     this order ENSURE that even when preact hallucinates we are still correctly putting the bottom filler
+     after the list items */
+    order: 1;
   }
-  return jsx(ListItem, {
-    role: "presentation",
-    className: "navi_list_item navi_list_fallback",
-    hidden: !showFallback,
-    "navi-default": typeof fallback === "string" ? "" : undefined,
-    children: fallback
-  });
-};
-const TopFiller = ({
-  virtualItemHeightSignal,
-  renderWindowStart
-}) => {
-  const virtualItemHeight = virtualItemHeightSignal.value;
-  const numberOfItemsAbove = renderWindowStart;
-  const heightToFillAbove = numberOfItemsAbove * virtualItemHeight;
-  if (!heightToFillAbove) {
-    return null;
+  /* order: 2 pins the footer after fallbacks (order: 1) and all items. */
+  .navi_list_item_footer {
+    position: sticky;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    order: 2;
   }
-  return jsx("li", {
-    className: "navi_list_virtual_filler"
-    // eslint-disable-next-line react/no-unknown-property
-    ,
 
-    "navi-virtual-filler": "top",
-    "aria-hidden": true,
-    style: {
-      height: `${heightToFillAbove}px`
-    }
-  });
-};
-const BottomFiller = ({
-  virtualItemHeightSignal,
-  renderWindowEnd,
-  tracker
-}) => {
-  const visibleItemCount = tracker.visibleCountSignal.value;
-  const virtualItemHeight = virtualItemHeightSignal.value;
-  const numberOfItemsBelow = Math.max(visibleItemCount - renderWindowEnd, 0);
-  const heightToFillBelow = numberOfItemsBelow * virtualItemHeight;
-  if (!heightToFillBelow) {
-    return null;
+  ::highlight(navi-search-match) {
+    color: var(--list-item-color-highlight);
+    background-color: var(--list-item-background-color-highlight);
   }
-  return jsx("li", {
-    className: "navi_list_virtual_filler"
-    // eslint-disable-next-line react/no-unknown-property
-    ,
 
-    "navi-virtual-filler": "bottom",
-    "aria-hidden": true,
-    style: {
-      height: `${heightToFillBelow}px`
+  /* Hide groups that have no rendered items. */
+  .navi_list_item_group {
+    min-width: 100%;
+
+    .navi_list_item_group_label {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: block;
+      background-color: var(--list-group-label-background-color);
+      user-select: none;
+
+      &[navi-default] {
+        padding: 4px 12px 2px;
+        color: light-dark(#888, #aaa);
+        font-weight: 600;
+        font-size: 0.75em;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
     }
-  });
-};
+    .navi_list_item_group_list {
+      display: flex;
+      width: max-content;
+      min-width: 100%;
+      margin: 0;
+      padding: 0;
+      flex-direction: column;
+      list-style: none;
+
+      /* Items inside a group must account for the sticky group label height
+         on top of the list's global header/scroll-padding spacing. */
+      .navi_list_item {
+        scroll-margin-top: calc(
+          var(--x-list-scroll-spacing-top) + var(--list-group-label-height, 0px)
+        );
+        scroll-margin-left: calc(
+          var(--x-list-scroll-spacing-left) + var(--list-group-label-width, 0px)
+        );
+      }
+    }
+
+    &[data-hidden-while-empty]:not(:has([navi-list-item-real])) {
+      display: none;
+    }
+  }
+`;
 
 /**
- * ListItem — a trackable item that participates in virtualization.
+ * List — generic virtualized scroll container.
  *
- * Must be used inside <List>. Handles:
- * - Registration with item tracker (always runs, even when hidden)
- * - Early return when outside the render window
- * - Separator rendering between visible items
+ * Renders children inside a scrollable container with an optional render budget
+ * for virtual scrolling. Items must use <ListItem> to participate in tracking.
  *
  * Props:
- *   itemId    — stable string id for tracking (auto-generated if omitted)
- *   filtered  — when true, item is excluded from visible count and removed from DOM entirely
- *   hidden    — when true, item is excluded from visible count (no virtual scroll height)
- *               but stays in DOM with the native HTML hidden attribute
- *   highlight — array of [start, end] ranges to highlight via CSS Highlight API
- *   ...rest   — forwarded to the rendered <li> element
+ *   keyboardInteractions  — when true, attaches arrow/enter/escape keyboard shortcuts
+ *                          that dispatch navi_list_nav / navi_list_confirm / navi_list_clear
+ *                          to the list container. Pair with uiAction for a full keyboard-
+ *                          navigable list.
+ *   uiAction             — called with the selected value on confirm. When provided
+ *                          the list becomes interactive: tracks hover and keyboard-
+ *                          pointed state, handles navi_list_nav / navi_list_clear /
+ *                          navi_list_confirm custom events via ListInteractionContext.
+ *   popover              — when true, renders as a managed popover positioned near
+ *                          an anchor element via navi_list_open / navi_list_close events.
+ *   renderBudget         — max items in DOM at once (default 100, virtual scroll when exceeded)
+ *   virtualItemSize     — fixed px size per item (width if horizontal, height otherwise) when all items have the same size.
+ *                          Enables precise virtual-scroll filler sizing without a DOM
+ *                          measurement pass. Required when renderBudget is active and
+ *                          item height is known up-front.
+ *   fallback             — content shown when no items exist at all
+ *   matchFallback         — content shown when items exist but all are hidden (e.g. no search match)
+ *   separator            — element or function(index, { previousItem, currentItem }) inserted between visible items
+ *   lockSize             — when true, captures the container's dimensions on first render
+ *                          (always in unfiltered state). Those values become min-width/
+ *                          min-height so filtering cannot collapse the layout.
+ *   ...rest              — forwarded to the outer scroll container <Box>
  */
-const ListItem = props => {
-  if (props.role === "presentation") {
-    return jsx(ListItemPresentation, {
-      ...props
-    });
+const ListUI = props => {
+  import.meta.css = [css$l, "@jsenv/navi/src/control/list/list.jsx"];
+  const {
+    ref,
+    renderBudget = RENDER_BUDGET_DEFAULT,
+    renderBudgetSkipCheck,
+    role,
+    fallback,
+    noMatchFallback,
+    separator,
+    children,
+    popover,
+    expandX,
+    expand,
+    maxHeight,
+    onListVisibleItemsChange,
+    virtualItemSize,
+    lockSize,
+    searchText,
+    horizontal,
+    spacing,
+    ...rest
+  } = props;
+  if (renderBudget < 30 && !renderBudgetSkipCheck) {
+    console.warn(`List: renderBudget=${renderBudget} is too low. A renderBudget below 30 is not supported: on large screens or when the list grows, items outside the window would appear as blank space instead of rendered content. Use a value of at least 30, or omit the prop to use the default (${RENDER_BUDGET_DEFAULT}).`);
   }
-  return jsx(ListItemRealOrVoid, {
-    ...props
+
+  // lockSize: capture the container's dimensions on first render so filtering
+  // cannot collapse the layout. Measurement happens on the initial (unfiltered)
+  // state because the parent controls hidden props before any search is applied.
+  const sizeLocked = useRef(false);
+  useDisplayedLayoutEffect(ref, listContainerEl => {
+    if (!lockSize) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // Use borderBoxSize (outer width) not contentRect (which excludes the
+      // scrollbar width). If we used contentRect, min-width would be set to
+      // outerWidth − scrollbarWidth, and the container would shrink by exactly
+      // the scrollbar width when the scrollbar disappears.
+      const borderBoxEntry = entry.borderBoxSize ? entry.borderBoxSize[0] : null;
+      const width = borderBoxEntry ? borderBoxEntry.inlineSize : entry.contentRect.width;
+      const height = borderBoxEntry ? borderBoxEntry.blockSize : entry.contentRect.height;
+      if (width === 0 && height === 0) {
+        return;
+      }
+      listContainerEl.style.minWidth = `${width}px`;
+      listContainerEl.style.minHeight = `${height}px`;
+      sizeLocked.current = true;
+      observer.disconnect();
+    });
+    observer.observe(listContainerEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [lockSize]);
+  const tracker = useItemTracker({
+    onChange: () => {
+      onListVisibleItemsChange?.(tracker.visibleItemsSignal.peek());
+    }
   });
-};
-const ListItemPresentation = props => {
+  const {
+    virtualItemSizeSignal,
+    renderWindow,
+    scrollToItem,
+    pendingScrollRef
+  } = useListScrollSync({
+    ref,
+    tracker,
+    renderBudget,
+    virtualItemSize,
+    searchText,
+    horizontal
+  });
+  const getItemById = itemId => {
+    return tracker.itemsSignal.peek().find(item => item.id === itemId);
+  };
   return jsx(Box, {
-    as: "li",
-    ...props
+    ...rest,
+    ref: ref,
+    baseClassName: "navi_list_container",
+    popover: popover,
+    "data-horizontal": horizontal ? "" : undefined,
+    "data-expand-x": expandX || expand ? "" : undefined,
+    expandX: expandX,
+    expand: expand,
+    maxHeight: maxHeight,
+    styleCSSVars: LIST_STYLE_CSS_VARS,
+    pseudoClasses: LIST_PSEUDO_CLASSES,
+    hasChildUsingForwardedProps: true,
+    onnavi_request_scroll: e => {
+      if (!Object.hasOwn(e.detail, "id")) {
+        console.warn(`navi_request_scroll event is missing the "id" property in its detail.`, e);
+        return;
+      }
+      const {
+        id
+      } = e.detail;
+      const item = getItemById(id);
+      scrollToItem(item, {
+        event: e,
+        reason: "navi_request_scroll"
+      });
+    },
+    children: jsx(ListContent, {
+      role: role,
+      fallback: fallback,
+      noMatchFallback: noMatchFallback,
+      searchText: searchText,
+      separator: separator,
+      expandX: expandX,
+      expand: expand,
+      horizontal: horizontal,
+      spacing: spacing,
+      tracker: tracker,
+      renderWindow: renderWindow,
+      virtualItemSizeSignal: virtualItemSizeSignal,
+      pendingScrollRef: pendingScrollRef,
+      children: children
+    })
   });
 };
-const ListItemRealOrVoid = props => {
-  if (props.id === undefined) {
-    console.warn("ListItem is missing an explicit id prop. Provide a stable id so pointed/selected state survives search reordering.");
-  }
-  if (props.index === undefined) {
-    console.warn("ListItem is missing an explicit index prop. Provide an index so item ordering is stable regardless of render order.");
-  }
+const ListFirstResolver = props => {
+  const Next = useNextResolver();
+  const refDefault = useRef(null);
+  props.ref = props.ref || refDefault;
   const idDefault = useId();
   props.id = props.id || idDefault;
-  const renderWindow = useContext(RenderWindowContext);
-  const tracker = useContext(ListItemTrackerContext);
-  const item = props;
-  const visibleIndex = tracker.useTrackItem(item);
-  const groupTracker = useContext(GroupItemTrackerContext);
-  const groupVisibleIndex = groupTracker ? groupTracker.useTrackItem(item) : null;
-  const separator = useContext(SeparatorContext);
-  if (props.filtered) {
-    return null;
-  }
-  // html-hidden items: excluded from virtual scroll accounting but always in DOM
-  if (props.hidden) {
-    return jsx(ListItemReal, {
-      ...props
-    });
-  }
-  if (visibleIndex === -1) {
-    return null;
-  }
-  if (visibleIndex < renderWindow.start || visibleIndex >= renderWindow.end) {
-    return jsx(ListItemVoid, {});
-  }
-  const listItemVnode = jsx(ListItemReal, {
+  return jsx(Next, {
     ...props
   });
-  // For separator decision, we need to know "am I the first visible item?".
-  // We deliberately do NOT use tracker's visibleIndex here because, during a
-  // reorder render pass (e.g. items resorted by search score), other items
-  // still have stale keyToExplicitOrder values — the binary search reads
-  // those stale values and computes wrong indices. The result is that no
-  // item gets visibleIndex === 0 and a spurious <hr> appears at the top.
-  //
-  // Instead we use the parent-provided index, which is race-free:
-  //   - global list: props.index === 0 means "first by explicit order"
-  //     (parent passes sequential indices starting at 0; filtered items
-  //     are already pushed to the end by useSearchText)
-  //   - inside a group: each group has its own item tracker and group
-  //     items don't reorder, so groupVisibleIndex is reliable
-  const isFirstInList = groupVisibleIndex === null ? props.index === 0 : groupVisibleIndex === 0;
-  if (!separator || isFirstInList) {
-    return listItemVnode;
-  }
-  // separatorIndex is only used as the function-form argument (gap index)
-  const separatorIndex = groupVisibleIndex === null ? visibleIndex : groupVisibleIndex;
-  const separatorVnode = typeof separator === "function" ? separator(separatorIndex - 1) : separator;
-  return jsxs(Fragment$1, {
-    children: [separatorVnode, listItemVnode]
+};
+const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
+const ListContent = ({
+  role,
+  fallback,
+  noMatchFallback,
+  searchText,
+  separator,
+  expandX,
+  expand,
+  horizontal,
+  spacing,
+  tracker,
+  renderWindow,
+  virtualItemSizeSignal,
+  pendingScrollRef,
+  children
+}) => {
+  const listProps = useContext(BoxForwardedPropsContext);
+  return jsx("div", {
+    className: "navi_list_scroll_container",
+    children: jsx(UnorderedList, {
+      role: role,
+      fallback: fallback,
+      noMatchFallback: noMatchFallback,
+      searchText: searchText,
+      separator: separator === true ? jsx(Separator, {
+        margin: "0"
+      }) : separator,
+      expandX: expandX || expand,
+      horizontal: horizontal,
+      spacing: spacing,
+      ...listProps,
+      tracker: tracker,
+      renderWindow: renderWindow,
+      virtualItemSizeSignal: virtualItemSizeSignal,
+      children: jsx(PendingScrollRefContext.Provider, {
+        value: pendingScrollRef,
+        children: children
+      })
+    })
   });
 };
-// When an item is outside the render window it cannot render a DOM node.
-// If it wants to scroll into view it sets scrollTop so the scroll event
-// shifts the window; once the item mounts as ListItemReal its layout effect
-// calls scrollIntoViewWithStickyAwareness to fine-tune the position.
-const ListItemVoid = () => {
-  return null;
+const LIST_STYLE_CSS_VARS = {
+  maxHeight: "--list-max-height",
+  borderColor: "--list-border-color",
+  borderRadius: "--list-border-radius",
+  borderWidth: "--list-border-width"
 };
-const ListItemReal = props => {
-  const defaultRef = useRef(null);
-  props.ref = props.ref || defaultRef;
-  const {
-    ref,
-    id,
-    hidden,
-    highlight,
-    children,
-    ...rest
-  } = props;
-  const pendingScrollRef = useContext(PendingScrollRefContext);
-  const pendingScroll = pendingScrollRef.current;
-  const needScrollOnMount = pendingScroll && pendingScroll.id === id;
-  useLayoutEffect(() => {
-    if (!needScrollOnMount) {
+const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
+const useListScrollSync = ({
+  ref,
+  tracker,
+  renderBudget,
+  virtualItemSize,
+  searchText,
+  horizontal
+}) => {
+  const debugScroll = useDebugScroll();
+  const virtualItemSizeSignal = useVirtualItemSizeSignal(ref, virtualItemSize, horizontal);
+  const [renderWindow, setRenderWindow] = useState({
+    start: 0,
+    end: renderBudget
+  });
+  const renderWindowRef = useRef(null);
+  renderWindowRef.current = renderWindow;
+  const updateRenderWindow = (newStart, newEnd, reason) => {
+    const {
+      start,
+      end
+    } = renderWindowRef.current;
+    if (newStart === start && newEnd === end) {
       return;
     }
-    const itemEl = ref.current;
-    if (!itemEl) {
+    debugScroll(`updateRenderWindow(${newStart}, ${newEnd}, "${reason}")`);
+    const renderWindow = {
+      start: newStart,
+      end: newEnd
+    };
+    renderWindowRef.current = renderWindow;
+    setRenderWindow(renderWindow);
+  };
+  const pendingScrollRef = useRef();
+  const scrollToItem = (item, {
+    event,
+    reason
+  }) => {
+    if (!item) {
       return;
     }
-    pendingScroll.resolve(itemEl);
-  }, [needScrollOnMount]);
-
-  // CSS Highlight API: mark matching text ranges when highlight prop is set.
-  useSearchHighlight(ref, highlight, [children, hidden]);
-  return jsx(Box, {
-    as: "li",
-    baseClassName: "navi_list_item",
-    styleCSSVars: LIST_ITEM_STYLE_CSS_VARS,
-    pseudoClasses: LIST_ITEM_PSEUDO_CLASSES,
-    pseudoElements: LIST_ITEM_PSEUDO_ELEMENTS,
-    id: id,
-    "navi-list-item-real": "",
-    ...rest,
-    index: undefined,
-    selected: undefined,
-    matchScore: undefined,
-    hidden: hidden,
-    ref: ref,
-    children: children
-  });
-};
-const LIST_ITEM_STYLE_CSS_VARS = {
-  "paddingX": "--list-item-padding-x",
-  "paddingY": "--list-item-padding-y",
-  "padding": "--list-item-padding",
-  "color": "--list-item-color",
-  "backgroundColor": "--list-item-background-color",
-  "fontWeight": "--list-item-font-weight",
-  ":-navi-pointed": {
-    color: "--list-item-color-keyboard-pointed",
-    backgroundColor: "--list-item-background-color-keyboard-pointed"
-  },
-  ":hover": {
-    color: "--list-item-color-hover",
-    backgroundColor: "--list-item-background-color-hover"
-  },
-  ":-navi-selected": {
-    color: "--list-item-color-selected",
-    backgroundColor: "--list-item-background-color-selected"
-  },
-  ":disabled": {
-    color: "--list-item-color-disabled",
-    backgroundColor: "--list-item-background-color-disabled"
-  },
-  "::highlight": {
-    color: "--suggestion-color-highlight",
-    backgroundColor: "--suggestion-background-color-highlight"
-  }
-};
-const LIST_ITEM_PSEUDO_CLASSES = [];
-const LIST_ITEM_PSEUDO_ELEMENTS = ["::highlight"];
-
-/**
- * ListGroup — a labeled group of list items.
- *
- * Renders a <li role="presentation"> wrapper containing a label span
- * (accessible via aria-labelledby) and a <ul role="group"> for the items.
- *
- * Props:
- *   label      — group label content
- *   labelProps — props forwarded to the label <span>
- *   ...rest    — forwarded to the outer <li role="presentation">
- */
-const ListItemGroup = ({
-  label,
-  hiddenWhileEmpty,
-  children,
-  ...rest
-}) => {
-  const groupId = useId();
-  const groupTracker = useItemTracker();
-  const groupRef = useRef(null);
-  const labelRef = useRef(null);
-  useDisplayedLayoutEffect(labelRef, labelEl => {
-    const groupEl = groupRef.current;
-    if (!groupEl) {
+    const items = tracker.itemsSignal.peek();
+    const itemCount = items.length;
+    if (itemCount === 0) {
       return;
     }
-    const labelHeight = labelEl.getBoundingClientRect().height;
-    groupEl.style.setProperty("--list-group-label-height", `${labelHeight}px`);
-  }, []);
-  return jsxs(ListItem, {
-    ...rest,
-    ref: groupRef,
-    baseClassName: "navi_list_item_group",
-    role: "presentation",
-    "data-hidden-while-empty": hiddenWhileEmpty ? "" : undefined,
-    children: [jsx("span", {
-      ref: labelRef,
-      id: groupId,
-      className: "navi_list_item_group_label",
-      role: "presentation"
-      // eslint-disable-next-line react/no-unknown-property
-      ,
-
-      "navi-default": typeof label === "string" ? "" : undefined,
-      children: label
-    }), jsx("ul", {
-      className: "navi_list_item_group_list",
-      role: "group",
-      "aria-labelledby": groupId,
-      children: jsx(GroupItemTrackerContext.Provider, {
-        value: groupTracker,
-        children: children
-      })
-    })]
-  });
-};
-const ListItemHeader = props => {
-  const defaultRef = useRef(null);
-  const ref = props.ref || defaultRef;
-  useDisplayedLayoutEffect(ref, headerEl => {
-    const listContainerEl = headerEl.closest(".navi_list_container");
-    const headerHeight = headerEl.getBoundingClientRect().height;
-    listContainerEl.style.setProperty("--list-header-height", `${headerHeight}px`);
-  }, []);
-  return jsx(ListItem, {
-    ...props,
-    ref: ref,
-    role: "presentation",
-    baseClassName: "navi_list_item_header"
-  });
-};
-const ListItemFooter = props => {
-  const defaultRef = useRef(null);
-  const ref = props.ref || defaultRef;
-  useDisplayedLayoutEffect(ref, headerEl => {
-    const listContainerEl = headerEl.closest(".navi_list_container");
-    const headerHeight = headerEl.getBoundingClientRect().height;
-    listContainerEl.style.setProperty("--list-footer-height", `${headerHeight}px`);
-  }, []);
-  return jsx(ListItem, {
-    ...props,
-    ref: ref,
-    role: "presentation",
-    baseClassName: "navi_list_item_footer"
-  });
-};
-
-installImportMetaCssBuild(import.meta);/**
- *
- * Voila le délire:
- *
- * En fait quoiqu'il on mettre un radio/checkbox MAIS
- *
- * il est aussi possible d'afficher une version décorative
- * en instanciant un input dans le <Selectable>
- * il faudra donc ptet un Selectable.Input par example
- * qui se charge de render un input qui est décoratif, le vrai input est caché
- * mais pilote cet input décoratif
- */
-const css$l = /* css */`
-  @layer navi {
-    .navi_list_container {
-      --list-outline-color: var(--navi-focus-outline-color);
-      --list-item-outline-color: var(--navi-focus-outline-color);
-      --list-item-outline-width: 2px;
-      --list-item-outline-offset: calc(-1 * var(--list-item-outline-width));
-      /* Hover (mouse) */
-      --list-item-color-hover: var(--list-item-color);
-      --list-item-background-color-hover: light-dark(#f5f5f5, #2a2a2a);
-      /* Pointed by mouse — subtle, just a shade above background */
-      --list-item-color-mouse-pointed: var(--list-item-color);
-      --list-item-background-color-mouse-pointed: light-dark(#ebebeb, #303030);
-      /* Pointed by keyboard — subtle light blue highlight */
-      --list-item-color-keyboard-pointed: var(--list-item-color);
-      --list-item-background-color-keyboard-pointed: light-dark(
-        #c2dcff,
-        #1c3a6e
-      );
-      /* Pointed by proxy */
-      --list-item-color-pointed: var(--list-item-color);
-      --list-item-background-color-pointed: light-dark(#dbeafe, #1c3a6e);
-      /* Selected — vivid blue accent */
-      --list-item-color-selected: white;
-      --list-item-background-color-selected: rgb(3, 30, 60);
-      /* Disabled */
-      --list-item-color-disabled: light-dark(#aaa, #555);
-      --list-item-background-color-disabled: var(--list-item-background-color);
+    let index = items.findIndex(i => i.id === item.id);
+    if (index === -1) {
+      return;
     }
-  }
-
-  fieldset.navi_list_container {
-    margin: 0; /* Reset margin that might come from fieldset */
-    padding: 0; /* Reset padding that might come from fieldset */
-  }
-
-  .navi_list_container {
-    --x-list-outline-width: calc(
-      var(--list-outline-width) + var(--list-border-width)
-    );
-    --x-list-outline-offset: calc(-1 * var(--list-border-width));
-
-    outline-width: var(--x-list-outline-width);
-    outline-color: var(--list-outline-color);
-    outline-offset: var(--x-list-outline-offset);
-
-    &[data-focus] {
-      /* outline: var(--list-outline-width) solid var(--navi-focus-outline-color);
-      outline-offset: calc(-1 * var(--list-outline-width)); */
+    if (index >= itemCount) {
+      index = itemCount - 1;
     }
-    &[data-focus-visible] {
-      outline-style: solid;
+    const scrollItemIntoView = itemEl => {
+      const trigger = `"${event.type}" on ${getElementSignature(event.target)} (${reason})`;
+      // When we display the list we prefer to have selected item at the center
+      // otherwise, usually when focused by arrow nav, we want to keep it into view close to the nearest edge
+      const block = event.type === "navi_displayed" ? "center" : "nearest";
+      const scrollToItemCall = `${getElementSignature(itemEl)}.scrollIntoView({ block: "${block}", container: "nearest" })`;
+      const listScrollContainerEl = ref.current.querySelector(`.navi_list_scroll_container`);
+      debugScroll(`${trigger} -> ${scrollToItemCall}`);
+      scrollIntoViewScoped(itemEl, {
+        container: listScrollContainerEl,
+        block
+      });
+      const listEl = ref.current.querySelector(".navi_list");
+      dispatchPublicCustomEvent(listEl, "navi_scroll", {
+        event,
+        item
+      });
+    };
+    const {
+      start,
+      end
+    } = renderWindowRef.current;
+    const isInWindow = index >= start && index < end;
+    if (isInWindow) {
+      const itemEl = document.getElementById(item.id);
+      if (itemEl) {
+        scrollItemIntoView(itemEl);
+        return;
+      }
     }
-    &[data-callout] {
-      --x-list-border-color: var(--callout-color);
+    // Not in DOM — shift the render window. The item will read
+    // pendingScrollRef on mount and scroll into view.
+    pendingScrollRef.current = {
+      id: item.id,
+      resolve: itemEl => {
+        pendingScrollRef.current = null;
+        scrollItemIntoView(itemEl);
+      }
+    };
+    const half = Math.floor(renderBudget / 2);
+    const newStart = Math.max(0, index - half);
+    const newEnd = newStart + renderBudget;
+    updateRenderWindow(newStart, newEnd, `item to scroll (at ${index}) is out of render window`);
+  };
+  const currentScrollRef = useRef(null);
+  const updateCurrentScroll = () => {
+    const listScrollContainerEl = ref.current.querySelector(`.navi_list_scroll_container`);
+    const currentScrollLeft = listScrollContainerEl.scrollLeft;
+    const currentScrollTop = listScrollContainerEl.scrollTop;
+    const renderWindow = renderWindowRef.current;
+    currentScrollRef.current = {
+      left: currentScrollLeft,
+      top: currentScrollTop,
+      renderWindow: {
+        ...renderWindow
+      }
+    };
+    debugScroll(`store currentScroll: scrollTop=${currentScrollTop}, renderWindow=[${renderWindow.start}, ${renderWindow.end})`);
+  };
+  const searchTextRef = useRef();
+  let searchTextBecomesActive = false;
+  if (searchTextRef.current === undefined) {
+    searchTextRef.current = searchText;
+  } else {
+    const searchTextPrevious = searchTextRef.current;
+    searchTextRef.current = searchText;
+    if (!searchTextPrevious && searchText) {
+      searchTextBecomesActive = true;
     }
   }
-
-  .navi_list_item {
-    position: relative;
-    outline-width: var(--list-item-outline-width);
-    outline-color: var(--list-item-outline-color);
-    outline-offset: var(--list-item-outline-offset);
-
-    &[navi-selectable] {
-      user-select: none;
+  // Scroll to the selected item only the FIRST time the list is presented on screen,
+  // so the user can see what's selected on initial open. On subsequent re-displays
+  // (e.g. reopening a popover containing the list), we intentionally keep the previous
+  // scroll position — it's less disruptive UX to land where the user last was, even
+  // if that means the selected item isn't currently visible.
+  // Skipped when inside a closed <dialog>/<details> (scrollIntoView is a no-op
+  // on hidden elements); re-runs automatically every time the ancestor opens.
+  const hasBeenDisplayedRef = useRef(false);
+  useDisplayedLayoutEffect(ref, (el, openEvent) => {
+    updateCurrentScroll();
+    if (hasBeenDisplayedRef.current) {
+      return;
+    }
+    hasBeenDisplayedRef.current = true;
+    const items = tracker.itemsSignal.peek();
+    const firstSelected = items.find(i => i.selected);
+    if (firstSelected) {
+      scrollToItem(firstSelected, {
+        event: new CustomEvent("navi_displayed", {
+          detail: {
+            originalEvent: openEvent
+          }
+        }),
+        reason: "scroll to selected"
+      });
+    } else {
+      scrollToItem(items[0], {
+        event: new CustomEvent("navi_displayed", {
+          detail: {
+            originalEvent: openEvent
+          }
+        }),
+        reason: "scroll to top (no selected item)"
+      });
     }
+  }, []);
+  // Watch scores of the top renderBudget items.
+  // When scores change during an active search, scroll to top to reveal the most relevant items.
+  // When search becomes empty, restore the scroll position from before the search started.
+  // We save the first-visible item ID so restoration is item-precise
+  // and survives render-window shifts or item reordering.
 
-    &[data-interactive] {
-      cursor: pointer;
-      user-select: none;
+  // NOTE POUR LE JOUR OU ON A LE MULTISELECT:
+  // Lorsqu'on selectionne quelque chose pendant une recherche, alors ensuite meme si on clear
+  // on veut pas revenir a la position scroll précédente car on veut garde l'item qu'on a selectionné visible
+  // (pour l'instant pas grave car on travaille pour le mode select qui fermera le dialog au select)
+  const savedScrollRef = useRef(null);
+  const topMatchScoresKeyRef = useRef("");
+  useLayoutEffect(() => {
+    const listScrollContainerEl = ref.current?.querySelector(`.navi_list_scroll_container`);
+    if (!listScrollContainerEl) {
+      return undefined;
     }
-    &[data-hover] {
-      --x-list-item-color: var(--list-item-color-mouse-pointed);
-      --x-list-item-background-color: var(
-        --list-item-background-color-mouse-pointed
-      );
+    if (!searchText) {
+      // no search -> try to restore scroll position
+      topMatchScoresKeyRef.current = "";
+      const savedScroll = savedScrollRef.current;
+      if (!savedScroll) {
+        // nothing to restore
+        return undefined;
+      }
+      savedScrollRef.current = null;
+      debugScroll("Restoring scroll to", savedScroll);
+      updateRenderWindow(savedScroll.renderWindow.start, savedScroll.renderWindow.end, "restore scroll window");
+      const raf = requestAnimationFrame(() => {
+        const left = savedScroll.left;
+        const top = savedScroll.top;
+        // use scrollTo to respect eventual css scroll-behavior: smooth;
+        debugScroll(`restore scroll: ${getElementSignature(listScrollContainerEl)}.scrollTo({ left: ${left}, top: ${top} })`);
+        // The reliable way to restore scroll is to use scrollTop because otherwise we will estimate the item to scroll
+        // based on virtual item height which can wrongly restore the scroll.
+        // However we have a contract with outside to inside which item is scrolled
+        // (used by keyboard nav to enable anchoring the item for list item nav with arrow keys)
+        // so we do our best to give that item back
+        const {
+          item
+        } = getScrollInfo(savedScroll, listScrollContainerEl, tracker, virtualItemSizeSignal, renderWindowRef, horizontal);
+        listScrollContainerEl.scrollTo({
+          left: savedScroll.left,
+          top: savedScroll.top
+        });
+        const listEl = ref.current.querySelector(".navi_list");
+        dispatchPublicCustomEvent(listEl, "navi_scroll", {
+          item,
+          event: new CustomEvent("navi_scroll_restore")
+        });
+      });
+      return () => {
+        cancelAnimationFrame(raf);
+      };
     }
-    &[data-pointed] {
-      --x-list-item-color: var(--list-item-color-pointed);
-      --x-list-item-background-color: var(--list-item-background-color-pointed);
+    const visibleItems = tracker.visibleItemsSignal.peek();
+    const topItems = visibleItems.slice(0, renderBudget);
+    const topMatchScoresKey = topItems.map(i => `${i.id}:${i.matchScore ?? ""}`).join(",");
+    const currentTopMatchScore = topMatchScoresKeyRef.current;
+    if (topMatchScoresKey === currentTopMatchScore) {
+      // no changes in top matches -> no need to scroll
+      return undefined;
     }
-    /* No input proxy: focused,selected */
-    &:not(:has(input[navi-control-proxy-for])) {
-      &:has([data-focus-visible]) {
-        --x-list-item-color: var(--list-item-color-keyboard-pointed);
-        --x-list-item-background-color: var(
-          --list-item-background-color-keyboard-pointed
-        );
-        outline-style: solid;
+    // n items are now more important to see, scrollTop to show them
+    topMatchScoresKeyRef.current = topMatchScoresKey;
+    if (searchTextBecomesActive) {
+      // search just started -> save the currently scrolled item id to restore later
+      const currentScroll = currentScrollRef.current;
+      savedScrollRef.current = currentScroll;
+      debugScroll(`Saving scroll: { top: ${currentScroll.top}, renderWindowStart: ${currentScroll.renderWindow.start}, renderWindowEnd: ${currentScroll.renderWindow.end} }`);
+    }
+    // -> scroll to the top
+    scrollToItem(visibleItems[0], {
+      event: new CustomEvent("navi_list_top_match_change")
+    });
+    return undefined;
+  });
 
-        /* Selected must win over keyboard-pointed */
-        &[data-selected] {
-          --x-list-item-background-color: var(
-            --list-item-background-color-selected,
-            var(--list-item-background-color-keyboard-pointed)
-          );
-        }
+  // Scroll listener — slides the window as the user scrolls.
+  useLayoutEffect(() => {
+    const listContainerEl = ref.current;
+    if (!listContainerEl) {
+      return undefined;
+    }
+    const listScrollContainerEl = listContainerEl.querySelector(`.navi_list_scroll_container`);
+    const listEl = listContainerEl.querySelector(".navi_list");
+    const onScroll = () => {
+      updateCurrentScroll();
+      const visibleItemCount = tracker.visibleCountSignal.peek();
+      if (visibleItemCount <= renderBudget) {
+        return;
       }
-
-      &[data-selected] {
-        --x-list-item-color: var(--list-item-color-selected);
-        --x-list-item-background-color: var(
-          --list-item-background-color-selected
-        );
-        &[data-hover] {
-          --x-list-item-background-color: var(
-            --list-item-background-color-selected,
-            var(--list-item-background-color-mouse-pointed)
-          ) !important;
-        }
+      const oneRealListItemInDom = Boolean(listEl.querySelector(REAL_LIST_ITEM_SELECTOR));
+      if (!oneRealListItemInDom) {
+        return;
       }
-    }
-
-    &[data-disabled] {
-      --x-list-item-color: var(--list-item-color-disabled);
-      --x-list-item-background-color: var(
-        --list-item-background-color-disabled
-      );
-      cursor: default;
-      pointer-events: none;
-    }
-    &[data-readonly] {
-      --x-list-item-color: var(--list-item-color-disabled);
-      cursor: default;
-    }
-  }
-`;
-const SelectableListMultipleContext = createContext(false);
-
-// Interactive variant: manages hover/keyboard/selection state and handles the
-// navi event protocol. When an action is provided it binds the action to ui state
-// and fires it on select. When only uiAction is provided it calls it directly.
-const SelectableList = props => {
-  import.meta.css = [css$l, "@jsenv/navi/src/control/list/selectable_list.jsx"];
-  const defaultRef = useRef();
-  props.ref = props.ref || defaultRef;
-  // we allow ourselves to auto-generate a name
-  const defaultName = useId();
-  props.name = props.name || `listbox_${defaultName}`;
-  const {
-    ref,
-    multiple,
-    selectedIndicator = "backgroundColor",
-    focusGroupDirection,
-    focusGroupWrap
-  } = props;
-  const [listControlProps, remainingProps, childrenWrapperProps, uiGroupStateController] = useControlgroupProps(props, {
-    stateType: multiple ? "array" : "",
-    controlType: multiple ? "checkbox_group" : "radio_group",
-    childControlFilter: multiple ? childUIStateController => {
-      return childUIStateController.controlType === "input" && childUIStateController.props.type === "checkbox";
-    } : childUIStateController => {
-      return childUIStateController.controlType === "input" && childUIStateController.props.type === "radio";
-    },
-    aggregateChildStates: multiple ? childUIStateControllers => {
-      const values = [];
-      for (const childUIStateController of childUIStateControllers) {
-        if (childUIStateController.uiState) {
-          values.push(childUIStateController.uiState);
-        }
+      let reason = "";
+      const scrollInfo = getScrollInfo({
+        left: listScrollContainerEl.scrollLeft,
+        top: listScrollContainerEl.scrollTop
+      }, listScrollContainerEl, tracker, virtualItemSizeSignal, renderWindowRef, horizontal);
+      if (!scrollInfo) {
+        return;
       }
-      return values.length === 0 ? undefined : values;
-    } : childUIStateControllers => {
-      let activeValue;
-      for (const childUIStateController of childUIStateControllers) {
-        if (childUIStateController.uiState) {
-          activeValue = childUIStateController.uiState;
-          break;
-        }
+      const {
+        index,
+        reason: hitReason
+      } = scrollInfo;
+      reason = hitReason;
+      const half = Math.floor(renderBudget / 2);
+      let newStart = Math.max(0, index - half);
+      let newEnd = Math.min(visibleItemCount, newStart + renderBudget);
+      if (newEnd === visibleItemCount) {
+        newStart = Math.max(0, visibleItemCount - renderBudget);
       }
-      return activeValue;
-    }
-  });
-  useFocusGroup(ref, {
-    direction: focusGroupDirection,
-    wrap: focusGroupWrap,
-    // Up/Down navigate between list items only (the visually-hidden real inputs).
-    ySelector: "[navi-selectable-real-input]"
-  });
-
-  // "Current item" tracking — the item that an external controller (e.g. an
-  // <input navi-list>) navigates from. Defaults to the first selected item,
-  // else the first navigable item. Updated when:
-  //   - an item's real input gains focus (via Tab, click, etc.)
-  //   - the controller dispatches navi_request_list_nav
-  // The current id is announced via navi_list_current_change (bubbling) so a
-  // connected input can update its aria-controls / aria-activedescendant.
-  const currentIdRef = useRef(null);
-  const setCurrentId = (id, event) => {
-    const previousId = currentIdRef.current;
-    if (previousId === id) {
-      return;
+      updateRenderWindow(newStart, newEnd, reason);
+    };
+    listScrollContainerEl.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    return () => {
+      listScrollContainerEl.removeEventListener("scroll", onScroll);
+    };
+  }, [renderBudget]);
+  return {
+    virtualItemSizeSignal,
+    renderWindow,
+    pendingScrollRef,
+    scrollToItem
+  };
+};
+// Returns the item located at the current scroll position of a list container.
+// Uses DOM hit-testing to find visible items/fillers; falls back to index
+// estimation via virtualItemSize or renderWindow.start.
+// Returns { index, item, reason } or null if nothing can be determined.
+const getScrollInfo = (scrollValues, listScrollContainerEl, tracker, virtualItemSizeSignal, renderWindowRef, horizontal) => {
+  const listEl = listScrollContainerEl.querySelector(".navi_list");
+  const items = tracker.itemsSignal.peek();
+  const containerRect = listScrollContainerEl.getBoundingClientRect();
+  let hitEl = null;
+  let hitFiller = null;
+  const scrollPos = horizontal ? scrollValues.left : scrollValues.top;
+  // Start scanning from the center of the viewport along the main axis.
+  // The render window places half its budget before and half after the hit index.
+  // Anchoring to the center maximises how many rendered items fall within the
+  // visible area.
+  const scanStart = horizontal ? (containerRect.left + containerRect.right) / 2 : (containerRect.top + containerRect.bottom) / 2;
+  const scanEnd = horizontal ? containerRect.right : containerRect.bottom;
+  for (let pos = scanStart; pos < scanEnd; pos += 4) {
+    const x = horizontal ? pos : containerRect.left + 1;
+    const y = horizontal ? containerRect.top + 1 : pos;
+    const el = document.elementFromPoint(x, y);
+    if (!el || !listEl.contains(el)) {
+      continue;
     }
-    currentIdRef.current = id;
-    const listEl = ref.current;
-    if (!listEl) {
-      return;
+    const realItem = el.closest(REAL_LIST_ITEM_SELECTOR);
+    if (realItem) {
+      hitEl = realItem;
+      break;
     }
-    if (id) {
-      listEl.setAttribute("navi-current-id", id);
-    } else {
-      listEl.removeAttribute("navi-current-id");
+    const filler = el.closest("[navi-virtual-filler]");
+    if (filler) {
+      hitFiller = filler;
+      break;
     }
-    dispatchPublicCustomEvent(listEl, "navi_current_change", {
-      event,
-      id,
-      realInputId: id ? `${id}_input` : null
-    });
-  };
-  const getNavigableElements = () => {
-    const listEl = ref.current;
-    if (!listEl) {
-      return [];
+  }
+  if (hitFiller) {
+    const virtualItemSize = virtualItemSizeSignal.peek();
+    if (virtualItemSize === 0) {
+      return null;
     }
-    const itemEls = Array.from(listEl.querySelectorAll("[navi-list-item-real]"));
-    const navigableEls = [];
-    for (const itemEl of itemEls) {
-      if (itemEl.hidden) {
-        continue;
-      }
-      const realInput = itemEl.querySelector("[navi-selectable-real-input]");
-      if (!realInput || realInput.disabled) {
-        continue;
-      }
-      navigableEls.push(itemEl);
+    const estimatedIndex = Math.floor(scrollPos / virtualItemSize);
+    const index = Math.min(items.length - 1, estimatedIndex);
+    return {
+      item: items[index],
+      index,
+      reason: `hit filler, estimated at ${index} (${items[index]?.value})`
+    };
+  }
+  if (hitEl) {
+    const hitId = hitEl.id;
+    const index = items.findIndex(i => i.id === hitId);
+    if (index === -1) {
+      return null;
     }
-    return navigableEls;
+    return {
+      item: items[index],
+      index,
+      reason: `hit item at ${index} (${items[index].value})`
+    };
+  }
+  const fallbackIndex = renderWindowRef.current.start;
+  return {
+    item: items[fallbackIndex],
+    index: fallbackIndex,
+    reason: "no hit"
   };
-  // On mount: set the initial current item to the first selected, else the first navigable.
-  // After that, focusin events on the list keep currentIdRef up to date.
+};
+const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal) => {
+  const virtualSizeSignalRef = useRef(null);
+  if (!virtualSizeSignalRef.current) {
+    virtualSizeSignalRef.current = signal(virtualItemSizeProp);
+  }
+  const virtualSizeSignal = virtualSizeSignalRef.current;
+  // propagate prop changes to the signal
+  if (virtualItemSizeProp && virtualSizeSignal.peek() !== virtualItemSizeProp) {
+    virtualSizeSignal.value = virtualItemSizeProp;
+  }
   useLayoutEffect(() => {
-    const navigableEls = getNavigableElements();
-    if (navigableEls.length === 0) {
+    if (virtualSizeSignal.peek() !== 0) {
       return;
     }
-    let initialEl;
-    for (const el of navigableEls) {
-      const realInput = el.querySelector("[navi-selectable-real-input]");
-      if (realInput && realInput.checked) {
-        initialEl = el;
-        break;
-      }
+    const listEl = ref.current?.querySelector(".navi_list");
+    if (!listEl) {
+      return;
     }
-    if (!initialEl) {
-      initialEl = navigableEls[0];
+    const firstListItem = listEl.querySelector(REAL_LIST_ITEM_SELECTOR);
+    if (!firstListItem) {
+      return;
     }
-    setCurrentId(initialEl.id);
-  }, []);
-  const listVnode = jsx(List, {
-    as: "fieldset",
-    "navi-has-selected-background": selectedIndicator === "backgroundColor" ? "" : undefined,
-    ...listControlProps,
-    ...remainingProps,
-    name: undefined,
-    selectedIndicator: undefined,
-    multiple: undefined
-    // Track focus inside the list: whichever item gets focus becomes current.
-    ,
+    const rect = firstListItem.getBoundingClientRect();
+    const measuredSize = horizontal ? rect.width : rect.height;
+    virtualSizeSignal.value = measuredSize;
+  });
+  return virtualSizeSignal;
+};
 
-    onFocusIn: e => {
-      const realInput = e.target.closest("[navi-selectable-real-input]");
-      if (!realInput) {
-        return;
-      }
-      const itemEl = realInput.closest("[navi-list-item-real]");
-      if (itemEl && itemEl.id) {
-        setCurrentId(itemEl.id, e);
-      }
-    },
-    onnavi_request_select: e => {
-      const {
-        id
-      } = e.detail;
-      if (id === undefined) {
-        return;
-      }
-      const inputId = `${id}_input`;
-      const childController = uiGroupStateController.findChildById(inputId);
-      if (!childController) {
-        return;
-      }
-      const list = ref.current;
-      const allowed = dispatchRequestInteraction(list, e, "select");
-      if (!allowed) {
-        e.preventDefault();
-        return;
-      }
-      if (childController.setUIState(true, e)) {
-        dispatchRequestAction(list, {
-          event: e
-        });
-      }
-    },
-    onnavi_request_unselect: e => {
-      const {
-        id
-      } = e.detail;
-      if (id === undefined) {
-        return;
-      }
-      const inputId = `${id}_input`;
-      const childController = uiGroupStateController.findChildById(inputId);
-      if (!childController) {
-        return;
-      }
-      const list = ref.current;
-      const allowed = dispatchRequestInteraction(list, e, "unselect");
-      if (!allowed) {
-        e.preventDefault();
-        return;
-      }
-      if (childController.setUIState(false, e)) {
-        dispatchRequestAction(list, {
-          event: e
-        });
-      }
-    },
-    onnavi_request_nav: e => {
-      const {
-        goal
-      } = e.detail;
-      const navigableEls = getNavigableElements();
-      if (navigableEls.length === 0) {
-        return;
-      }
-      const currentId = currentIdRef.current;
-      let currentIndex = -1;
-      if (currentId) {
-        currentIndex = navigableEls.findIndex(el => el.id === currentId);
-      }
-      let targetEl;
-      if (goal === "first") {
-        targetEl = navigableEls[0];
-      } else if (goal === "last") {
-        targetEl = navigableEls[navigableEls.length - 1];
-      } else if (goal === "down") {
-        if (currentIndex === -1) {
-          targetEl = navigableEls[0];
-        } else if (currentIndex < navigableEls.length - 1) {
-          targetEl = navigableEls[currentIndex + 1];
-        } else {
-          targetEl = navigableEls[navigableEls.length - 1];
-        }
-      } else if (goal === "up") {
-        if (currentIndex === -1) {
-          targetEl = navigableEls[0];
-        } else if (currentIndex > 0) {
-          targetEl = navigableEls[currentIndex - 1];
-        } else {
-          targetEl = navigableEls[0];
-        }
-      }
-      if (!targetEl) {
-        return;
-      }
-      setCurrentId(targetEl.id, e);
-      dispatchCustomEvent(ref.current, "navi_request_scroll", {
-        event: e,
-        id: targetEl.id
-      });
-    },
-    onnavi_request_activate: e => {
-      const currentId = currentIdRef.current;
-      if (!currentId) {
-        return;
-      }
-      if (multiple) {
-        const inputId = `${currentId}_input`;
-        const childController = uiGroupStateController.findChildById(inputId);
-        const isSelected = childController && childController.uiState;
-        dispatchCustomEvent(ref.current, isSelected ? "navi_request_unselect" : "navi_request_select", {
-          event: e,
-          id: currentId
-        });
-        return;
-      }
-      dispatchCustomEvent(ref.current, "navi_request_select", {
-        event: e,
-        id: currentId
-      });
-    },
-    children: jsx(ControlgroupChildrenWrapper, {
-      ...childrenWrapperProps,
-      children: props.children
-    })
+// Inner <ul> — hosts the fillers + items.
+// Creates a virtualItemSize signal so BeforeFiller and AfterFiller can
+// subscribe to it independently. When virtualItemSize is passed as a prop it
+// initialises the signal directly; otherwise UnorderedList measures a rendered
+// item after each commit and writes to the signal, causing only the fillers to
+// re-render.
+const UnorderedList = ({
+  tracker,
+  renderWindow,
+  virtualItemSizeSignal,
+  fallback,
+  noMatchFallback,
+  searchText,
+  separator,
+  horizontal,
+  spacing,
+  children,
+  ...rest
+}) => {
+  return jsxs(Box, {
+    as: "ul",
+    ...rest,
+    flex: horizontal ? "x" : "y",
+    spacing: spacing,
+    baseClassName: "navi_list",
+    children: [jsx(BeforeFiller, {
+      virtualItemSizeSignal: virtualItemSizeSignal,
+      renderWindowStart: renderWindow.start
+    }), jsx(NoMatchFallback, {
+      noMatchFallback: noMatchFallback,
+      tracker: tracker,
+      searchText: searchText
+    }), jsx(Fallback, {
+      fallback: fallback,
+      tracker: tracker
+    }), jsx(RenderWindowContext.Provider, {
+      value: renderWindow,
+      children: jsx(SeparatorContext.Provider, {
+        value: separator ?? null,
+        children: jsx(ListItemTrackerContext.Provider, {
+          value: tracker,
+          children: children
+        })
+      })
+    }), jsx(AfterFiller, {
+      virtualItemSizeSignal: virtualItemSizeSignal,
+      renderWindowEnd: renderWindow.end,
+      tracker: tracker
+    })]
   });
-  return jsx(SelectableListMultipleContext.Provider, {
-    value: multiple,
-    children: listVnode
+};
+const NoMatchFallback = ({
+  tracker,
+  noMatchFallback,
+  searchText
+}) => {
+  const itemCount = tracker.countSignal.value;
+  const visibleItemCount = tracker.visibleCountSignal.value;
+  const matchCount = tracker.matchCountSignal.value;
+  // Show when all items are filtered out (filtered prop), or when search is
+  // active but no visible item has a positive match score.
+  const allHidden = itemCount > 0 && visibleItemCount === 0;
+  const noneMatch = searchText && visibleItemCount > 0 && matchCount === 0;
+  const showMatchFallback = allHidden || noneMatch;
+  if (noMatchFallback === undefined) {
+    noMatchFallback = allHidden ? naviI18n("list.no_match") : naviI18n("list.no_match_rest_shown");
+  }
+  if (!showMatchFallback) {
+    return null;
+  }
+  return jsx(ListItem, {
+    role: "presentation",
+    className: "navi_list_item navi_list_no_match_fallback",
+    hidden: !showMatchFallback,
+    "navi-default": typeof noMatchFallback === "string" ? "" : undefined,
+    children: noMatchFallback
+  });
+};
+const Fallback = ({
+  tracker,
+  fallback
+}) => {
+  const itemCount = tracker.countSignal.value;
+  const showFallback = itemCount === 0;
+  if (fallback === undefined) {
+    fallback = naviI18n("list.empty");
+  }
+  if (!showFallback) {
+    return null;
+  }
+  return jsx(ListItem, {
+    role: "presentation",
+    className: "navi_list_item navi_list_fallback",
+    hidden: !showFallback,
+    "navi-default": typeof fallback === "string" ? "" : undefined,
+    children: fallback
+  });
+};
+const BeforeFiller = ({
+  virtualItemSizeSignal,
+  renderWindowStart
+}) => {
+  const virtualItemSize = virtualItemSizeSignal.value;
+  const numberOfItemsBefore = renderWindowStart;
+  const sizeToFillBefore = numberOfItemsBefore * virtualItemSize;
+  if (!sizeToFillBefore) {
+    return null;
+  }
+  return jsx("li", {
+    className: "navi_list_virtual_filler"
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+
+    "navi-virtual-filler": "before",
+    "aria-hidden": true,
+    style: {
+      "--size-to-fill": `${sizeToFillBefore}px`
+    }
+  });
+};
+const AfterFiller = ({
+  virtualItemSizeSignal,
+  renderWindowEnd,
+  tracker
+}) => {
+  const visibleItemCount = tracker.visibleCountSignal.value;
+  const virtualItemSize = virtualItemSizeSignal.value;
+  const numberOfItemsAfter = Math.max(visibleItemCount - renderWindowEnd, 0);
+  const sizeToFillAfter = numberOfItemsAfter * virtualItemSize;
+  if (!sizeToFillAfter) {
+    return null;
+  }
+  return jsx("li", {
+    className: "navi_list_virtual_filler"
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+
+    "navi-virtual-filler": "after",
+    "aria-hidden": true,
+    style: {
+      "--size-to-fill": `${sizeToFillAfter}px`
+    }
+  });
+};
+const ListItemFirstResolver = props => {
+  const Next = useNextResolver();
+  const defaultRef = useRef(null);
+  props.ref = props.ref || defaultRef;
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListItemPresentationResolver = props => {
+  const Next = useNextResolver();
+  if (props.role === "presentation") {
+    return jsx(ListItemPresentation, {
+      ...props
+    });
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListItemPresentation = props => {
+  return jsx(Box, {
+    as: "li",
+    ...props
+  });
+};
+const ListItemUI = props => {
+  if (props.id === undefined) {
+    console.warn("ListItem is missing an explicit id prop. Provide a stable id so pointed/selected state survives search reordering.");
+  }
+  if (props.index === undefined) {
+    console.warn("ListItem is missing an explicit index prop. Provide an index so item ordering is stable regardless of render order.");
+  }
+  const idDefault = useId();
+  props.id = props.id || idDefault;
+  const renderWindow = useContext(RenderWindowContext);
+  const tracker = useContext(ListItemTrackerContext);
+  const item = props;
+  const visibleIndex = tracker.useTrackItem(item);
+  const groupTracker = useContext(GroupItemTrackerContext);
+  const groupVisibleIndex = groupTracker ? groupTracker.useTrackItem(item) : null;
+  const separator = useContext(SeparatorContext);
+  if (props.filtered) {
+    return null;
+  }
+  // html-hidden items: excluded from virtual scroll accounting but always in DOM
+  if (props.hidden) {
+    return jsx(ListItemReal, {
+      ...props
+    });
+  }
+  if (visibleIndex === -1) {
+    return null;
+  }
+  if (visibleIndex < renderWindow.start || visibleIndex >= renderWindow.end) {
+    return jsx(ListItemVoid, {});
+  }
+  const listItemVnode = jsx(ListItemReal, {
+    ...props
+  });
+  // For separator decision, we need to know "am I the first visible item?".
+  // We deliberately do NOT use tracker's visibleIndex here because, during a
+  // reorder render pass (e.g. items resorted by search score), other items
+  // still have stale keyToExplicitOrder values — the binary search reads
+  // those stale values and computes wrong indices. The result is that no
+  // item gets visibleIndex === 0 and a spurious <hr> appears at the top.
+  //
+  // Instead we use the parent-provided index, which is race-free:
+  //   - global list: props.index === 0 means "first by explicit order"
+  //     (parent passes sequential indices starting at 0; filtered items
+  //     are already pushed to the end by useSearchText)
+  //   - inside a group: each group has its own item tracker and group
+  //     items don't reorder, so groupVisibleIndex is reliable
+  const isFirstInList = groupVisibleIndex === null ? props.index === 0 : groupVisibleIndex === 0;
+  if (!separator || isFirstInList) {
+    return listItemVnode;
+  }
+  // separatorIndex is only used as the function-form argument (gap index)
+  const separatorIndex = groupVisibleIndex === null ? visibleIndex : groupVisibleIndex;
+  const separatorVnode = typeof separator === "function" ? separator(separatorIndex - 1) : separator;
+  return jsxs(Fragment$1, {
+    children: [separatorVnode, listItemVnode]
   });
 };
-const SelectableRealInputContext = createContext(null);
-const Selectable = props => {
+// When an item is outside the render window it cannot render a DOM node.
+// If it wants to scroll into view it sets scrollTop so the scroll event
+// shifts the window; once the item mounts as ListItemReal its layout effect
+// calls scrollIntoViewWithStickyAwareness to fine-tune the position.
+const ListItemVoid = () => {
+  return null;
+};
+const ListItemReal = props => {
   const {
-    index,
+    ref,
     id,
-    highlight,
     hidden,
-    filtered,
-    matchScore,
-    defaultSelected,
-    selected,
-    pointed,
-    selectableArea,
+    highlight,
+    children,
     ...rest
   } = props;
-  const multiple = useContext(SelectableListMultipleContext);
-  const inputRef = useRef();
-  const inputType = multiple ? "checkbox" : "radio";
-  const inputId = `${id}_input`;
-  inputRef.nullExpected = true; // virtualization
-  const [checkableProps, remainingProps, ChildrenContextWrapper] = useCheckableProps({
-    readOnlyMessage: naviI18n(`constraints.readonly.option`, props),
-    ...rest,
-    ref: inputRef,
-    id: inputId,
-    type: inputType,
-    defaultChecked: defaultSelected,
-    checked: selected,
-    action: (v, {
-      event
-    }) => {
-      const listContainerEl = event.currentTarget.closest(".navi_list_container");
-      dispatchRequestAction(listContainerEl, {
-        event
-      });
+  const pendingScrollRef = useContext(PendingScrollRefContext);
+  const pendingScroll = pendingScrollRef.current;
+  const needScrollOnMount = pendingScroll && pendingScroll.id === id;
+  useLayoutEffect(() => {
+    if (!needScrollOnMount) {
+      return;
     }
-  });
-  const {
-    checked,
-    value,
-    basePseudoState,
-    children
-  } = checkableProps;
-  const readOnly = basePseudoState[":read-only"];
-  const disabled = basePseudoState[":disabled"];
-  const loading = basePseudoState[":-navi-loading"];
-  const realInputContextValue = useMemo(() => {
-    return {
-      id: inputId,
-      type: inputType,
-      checked,
-      readOnly,
-      value
-    };
-  }, [inputId, inputType, checked, readOnly, value]);
-  return jsx(ListItem, {
+    const itemEl = ref.current;
+    if (!itemEl) {
+      return;
+    }
+    pendingScroll.resolve(itemEl);
+  }, [needScrollOnMount]);
+
+  // CSS Highlight API: mark matching text ranges when highlight prop is set.
+  useSearchHighlight(ref, highlight, [children, hidden]);
+  return jsx(Box, {
+    as: "li",
+    baseClassName: "navi_list_item",
+    styleCSSVars: LIST_ITEM_STYLE_CSS_VARS,
+    pseudoClasses: LIST_ITEM_PSEUDO_CLASSES,
+    pseudoElements: LIST_ITEM_PSEUDO_ELEMENTS,
     id: id,
-    index: index,
-    highlight: highlight,
-    filtered: filtered,
+    "navi-list-item-real": "",
+    ...rest,
+    index: undefined,
+    selected: undefined,
+    matchScore: undefined,
     hidden: hidden,
-    matchScore: matchScore,
-    pseudoClasses: SELECTABLE_PSEUDO_CLASSES,
-    basePseudoState: {
-      ":-navi-selected": checked,
-      ":-navi-pointed": pointed,
-      ...basePseudoState
-    },
-    "aria-selected": checked,
-    selected: checked,
-    "navi-selectable": "",
-    children: jsxs(Field, {
-      as: selectableArea === "manual" ? "div" : undefined,
-      padding: "m",
-      flex: true,
-      alignY: "center",
-      spacing: "s",
-      expandX: true,
-      ...remainingProps,
-      selectableArea: undefined,
-      basePseudoState: basePseudoState,
-      pseudoStateSelector: "[navi-selectable-real-input]",
-      disabled: disabled,
-      readOnly: readOnly,
-      loading: loading,
-      interactive: true,
-      children: [jsx(SelectableRealInput, {
-        ...checkableProps,
-        // eslint-disable-next-line react/no-children-prop
-        children: undefined
-      }), jsx(SelectableRealInputContext.Provider, {
-        value: realInputContextValue,
-        children: jsx(ChildrenContextWrapper, {
-          children: children
-        })
-      })]
-    })
-  });
-};
-const SELECTABLE_PSEUDO_CLASSES = [...LIST_ITEM_PSEUDO_CLASSES, ":hover", ":disabled", ":read-only", ":focus-within", ":focus", ":focus-visible", ":-navi-loading", ":-navi-pointed", ":-navi-selected", ":disabled", ":read-only"];
-const SelectableRealInput = props => {
-  return jsx(Box, {
-    as: "input",
-    ...props,
-    "navi-selectable-real-input": "",
-    "navi-visually-hidden": "",
-    "data-callout-arrow-x": "center"
-    // navi-debug
+    ref: ref,
+    children: children
   });
 };
-const SelectableInputProxy = props => {
-  const selectableRealInputProps = useContext(SelectableRealInputContext);
-  if (!selectableRealInputProps) {
-    throw new Error("Selectable.Input must be used within a Selectable component");
+const LIST_ITEM_STYLE_CSS_VARS = {
+  "paddingX": "--list-item-padding-x",
+  "paddingY": "--list-item-padding-y",
+  "padding": "--list-item-padding",
+  "color": "--list-item-color",
+  "backgroundColor": "--list-item-background-color",
+  "fontWeight": "--list-item-font-weight",
+  "borderWidth": "--list-item-border-width",
+  "borderColor": "--list-item-border-color",
+  ":-navi-pointed": {
+    color: "--list-item-color-keyboard-pointed",
+    backgroundColor: "--list-item-background-color-keyboard-pointed"
+  },
+  ":hover": {
+    color: "--list-item-color-hover",
+    backgroundColor: "--list-item-background-color-hover"
+  },
+  ":-navi-selected": {
+    color: "--list-item-color-selected",
+    backgroundColor: "--list-item-background-color-selected",
+    borderColor: "--list-item-border-color-selected"
+  },
+  ":disabled": {
+    color: "--list-item-color-disabled",
+    backgroundColor: "--list-item-background-color-disabled"
+  },
+  "::highlight": {
+    color: "--suggestion-color-highlight",
+    backgroundColor: "--suggestion-background-color-highlight"
   }
+};
+const LIST_ITEM_PSEUDO_CLASSES = [];
+const LIST_ITEM_PSEUDO_ELEMENTS = ["::highlight"];
 
-  // Reset FieldToInterfaceContext to ensure we don't read id or report our
-  // states (real input should take id and report)
-  return jsx(ControlToInterfaceContext.Provider, {
-    value: undefined,
-    children: jsx(Input, {
-      ...props,
-      ...selectableRealInputProps,
-      id: undefined,
-      "navi-control-proxy-for": selectableRealInputProps.id
-      // give it a specific name to avoid radio name (would unselect others)
-      // (making it unique to the list would be enough, but here it's even more unique)
+/**
+ * ListItem — a trackable item that participates in virtualization.
+ *
+ * Must be used inside <List>. Handles:
+ * - Registration with item tracker (always runs, even when hidden)
+ * - Early return when outside the render window
+ * - Separator rendering between visible items
+ *
+ * Props:
+ *   itemId    — stable string id for tracking (auto-generated if omitted)
+ *   filtered  — when true, item is excluded from visible count and removed from DOM entirely
+ *   hidden    — when true, item is excluded from visible count (no virtual scroll height)
+ *               but stays in DOM with the native HTML hidden attribute
+ *   highlight — array of [start, end] ranges to highlight via CSS Highlight API
+ *   ...rest   — forwarded to the rendered <li> element
+ */
+const ListItem = createComponentResolver([ListItemFirstResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI]);
+List.Item = ListItem;
+
+/**
+ * ListGroup — a labeled group of list items.
+ *
+ * Renders a <li role="presentation"> wrapper containing a label span
+ * (accessible via aria-labelledby) and a <ul role="group"> for the items.
+ *
+ * Props:
+ *   label      — group label content
+ *   labelProps — props forwarded to the label <span>
+ *   ...rest    — forwarded to the outer <li role="presentation">
+ */
+const ListItemGroup = ({
+  label,
+  hiddenWhileEmpty,
+  children,
+  ...rest
+}) => {
+  const groupId = useId();
+  const groupTracker = useItemTracker();
+  const groupRef = useRef(null);
+  const labelRef = useRef(null);
+  useDisplayedLayoutEffect(labelRef, labelEl => {
+    const groupEl = groupRef.current;
+    if (!groupEl) {
+      return;
+    }
+    const rect = labelEl.getBoundingClientRect();
+    groupEl.style.setProperty("--list-group-label-height", `${rect.height}px`);
+    groupEl.style.setProperty("--list-group-label-width", `${rect.width}px`);
+  }, []);
+  return jsxs(ListItem, {
+    ...rest,
+    ref: groupRef,
+    baseClassName: "navi_list_item_group",
+    role: "presentation",
+    "data-hidden-while-empty": hiddenWhileEmpty ? "" : undefined,
+    children: [jsx("span", {
+      ref: labelRef,
+      id: groupId,
+      className: "navi_list_item_group_label",
+      role: "presentation"
+      // eslint-disable-next-line react/no-unknown-property
       ,
 
-      name: `${selectableRealInputProps.id}_proxy`,
-      "aria-hidden": "true",
-      tabIndex: -1
-    })
+      "navi-default": typeof label === "string" ? "" : undefined,
+      children: label
+    }), jsx("ul", {
+      className: "navi_list_item_group_list",
+      role: "group",
+      "aria-labelledby": groupId,
+      children: jsx(GroupItemTrackerContext.Provider, {
+        value: groupTracker,
+        children: children
+      })
+    })]
   });
 };
-Selectable.Input = SelectableInputProxy;
 
 const PickerNaviTime = props => {
   const Next = useNextResolver();
@@ -35690,9 +35844,11 @@ const PickerNaviTime = props => {
   return jsx(Next, {
     ...props,
     type: "time",
-    children: jsx(SelectableList, {
+    children: jsx(List, {
+      selectable: true,
       action: "send",
-      children: slots.map((slot, i) => jsx(Selectable, {
+      children: slots.map((slot, i) => jsx(List.Item, {
+        selectable: true,
         id: slot,
         index: i,
         value: slot,
@@ -36042,13 +36198,6 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
  *   children    — content to display inside the popup (enables popover/dialog mode)
  *   mode        — "popover" or "dialog"; auto-detected from screen size when omitted
  */
-const Picker = props => {
-  const defaultRef = useRef(null);
-  props.ref = props.ref || defaultRef;
-  const picker = renderPicker(PickerButton, props);
-  return picker;
-};
-const renderPicker = createComponentResolver(pickerResolvers);
 const PickerButton = props => {
   import.meta.css = [css$k, "@jsenv/navi/src/control/picker/picker.jsx"];
   resolveInputProps(props);
@@ -36214,6 +36363,15 @@ const PickerDefaultUI = () => {
     children: value
   });
 };
+const PickerFirstResolver = props => {
+  const Next = useNextResolver();
+  const defaultRef = useRef(null);
+  props.ref = props.ref || defaultRef;
+  return jsx(Next, {
+    ...props
+  });
+};
+const Picker = createComponentResolver([PickerFirstResolver, ...pickerResolvers, PickerButton]);
 Picker.Placeholder = PickerPlaceholder;
 Picker.Value = PickerValue;
 Picker.UI = PickerDefaultUI;
@@ -40252,7 +40410,7 @@ const ButtonCopyToClipboard = ({
   children,
   ...props
 }) => {
-  import.meta.css = [css$c, "@jsenv/navi/src/control/button_copy_to_clipboard.jsx"];
+  import.meta.css = [css$c, "@jsenv/navi/src/control/input/button_copy_to_clipboard.jsx"];
   const [copied, setCopied] = useState(false);
   const renderedRef = useRef();
   useEffect(() => {
@@ -42409,5 +42567,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, Details, Dialog, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemFooter, ListItemGroup, ListItemHeader, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, Paragraph, Picker, Popover, Quantity, RadioGroup, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Selectable, SelectableList, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Thead, Time, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, anyMatchingRouteSignal, applySearch, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, installCustomConstraintValidation, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isToday, langSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navTo, naviI18n, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Box, Button, ButtonCopyToClipboard, Caption, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, Details, Dialog, DialogLayout, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, Paragraph, Picker, Popover, Quantity, RadioGroup, Route, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Thead, Time, Title, Tr, UITransition, UserSvg, ViewportLayout, actionIntegratedVia, actionRunEffect, addCustomMessage, anyMatchingRouteSignal, applySearch, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, installCustomConstraintValidation, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isToday, langSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navTo, naviI18n, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, route, routeAction, setBaseUrl, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSidePanelClose, useSignalSync, useStateArray, useTitleLevel, useUrlSearchParam, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map