@jsenv/navi 0.27.52 → 0.27.54

package/dist/jsenv_navi.js

@@ -8891,11 +8891,35 @@ import.meta.css = [/* css */`
 const PSEUDO_CLASSES_DEFAULT = [];
 const PSEUDO_ELEMENTS_DEFAULT = [];
 const STYLE_CSS_VARS_DEFAULT = {};
-const PROPS_CSS_VARS_DEFAULT = {};
 // When only pseudoStateSelector is set (no visualSelector), the box owns its
 // visual identity. Only event handlers and these explicit props are forwarded
 // to the inner semantic/interactive child element.
 const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   as?: string,
+ *   className?: string,
+ *   style?: import("ignore:preact").JSX.CSSProperties & { [pseudo: string]: import("ignore:preact").JSX.CSSProperties },
+ *   styleCSSVars?: { [stylePropName: string]: string },
+ *   inline?: boolean,
+ *   block?: boolean,
+ *   flex?: "x" | "y" | boolean,
+ *   grid?: boolean,
+ *   display?: "inherit",
+ *   pseudoState?: { [stateName: string]: boolean },
+ *   pseudoClasses?: string[],
+ *   pseudoElements?: string[],
+ *   visualSelector?: string,
+ *   pseudoStateSelector?: string,
+ *   hasChildUsingForwardedProps?: boolean,
+ *   childPropSet?: Set<string>,
+ *   preventInitialTransition?: boolean,
+ *   separator?: import("ignore:preact").ComponentChildren | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ */
 const Box = props => {
   const {
     ref,
@@ -8906,7 +8930,6 @@ const Box = props => {
     // style management
     style,
     styleCSSVars = STYLE_CSS_VARS_DEFAULT,
-    propsCSSVars = PROPS_CSS_VARS_DEFAULT,
     basePseudoState,
     pseudoState,
     // for demo purposes it's possible to control pseudo state from props
@@ -9165,13 +9188,6 @@ const Box = props => {
         addStyle(value, name, styleContext, boxStylesTarget, context);
         return;
       }
-      const propCssVar = propsCSSVars[name];
-      if (propCssVar) {
-        if (value !== undefined) {
-          addCSSVar(value, propCssVar, boxStylesTarget);
-        }
-        return;
-      }
       const isPseudoStyle = styleOrigin === "pseudo_style";
       if (isStyleProp(name)) {
         // it's a style prop, we need first to check if we have css var to handle them
@@ -9205,6 +9221,13 @@ const Box = props => {
         }
         return;
       }
+      const cssVarName = styleCSSVars[name];
+      if (cssVarName) {
+        if (value !== undefined) {
+          addCSSVar(value, cssVarName, boxStylesTarget);
+        }
+        return;
+      }
       // not a style prop what do we do with it?
       // When pseudoStateSelector is set, the child element is the semantic/interactive one
       // When both selectors are set the child IS the component (e.g. Button with scale
@@ -17601,11 +17624,32 @@ const createI18n = ({
     return interpolateText(template, values);
   };
 
+  const has = (key, { lang = activeLang } = {}) => {
+    const resolvedLang = lang ? matchLang(lang, languageMap) : null;
+    if (resolvedLang) {
+      const translations = languageMap.get(resolvedLang);
+      if (translations && key in translations) {
+        return true;
+      }
+    }
+    if (fallbackLang) {
+      const resolvedFallbackLang = matchLang(fallbackLang, languageMap);
+      if (resolvedFallbackLang) {
+        const fallbackTranslations = languageMap.get(resolvedFallbackLang);
+        if (fallbackTranslations && key in fallbackTranslations) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
   // The i18n instance is itself a callable function
   const i18n = (key, values, opts) => format(key, values, opts);
   i18n.add = add;
   i18n.addAll = addAll;
   i18n.addLangKeys = addLangKeys;
+  i18n.has = has;
   i18n.format = format;
   i18n.languageMap = languageMap;
 
@@ -27347,57 +27391,74 @@ const shouldInjectSpacingBetween = (left, right) => {
 };
 
 /**
- * Text component for rendering inline or block text with layout-stable style changes.
- *
- * Most props are forwarded to the underlying `Box` component (as, style, bold, noWrap, …).
- * The props listed below are specific to Text.
- *
- * @param {object} props
- *
- * @param {number} [props.maxLines]
- *   Truncates overflowing text with an ellipsis after at most N lines.
- *   `maxLines={1}` truncates after one line (single-line ellipsis).
- *   `maxLines={n}` (n > 1) truncates after n lines (multi-line clamp).
- *
- * @param {string} [props.spacing]
- *   Controls the separator injected between child nodes.
- *   Accepts a size/spacing scale key, a CSS length, or `"pre"` / `0` to disable.
- *   Defaults to a regular space character (or a padding-based fake space when
- *   `preventSpaceUnderlines` is active).
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   as?: string,
+ *   className?: string,
+ *   style?: import("ignore:preact").JSX.CSSProperties,
+ *   bold?: boolean,
+ *   noWrap?: boolean,
+ *   maxLines?: number,
+ *   spacing?: string | number | import("ignore:preact").ComponentChildren,
+ *   loading?: boolean,
+ *   skeleton?: boolean,
+ *   preventSpaceUnderlines?: boolean,
+ *   holdSpaceForStyle?: import("ignore:preact").JSX.CSSProperties,
+ *   boldStable?: boolean,
+ *   shrinkWrap?: boolean,
+ *   capitalize?: boolean,
+ *   selectRange?: string | [number, number],
+ *   childrenOutsideFlow?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
  *
- * @param {boolean} [props.loading]
- *   Renders a shimmer skeleton in place of the text.
- *
- * @param {boolean} [props.skeleton]
- *   Same as `loading` but without the shimmer animation.
- *
- * @param {boolean} [props.preventSpaceUnderlines]
- *   Replaces real space characters between children with padding-based spaces
- *   to avoid the underline browsers draw under spaces inside links.
- *
- * @param {object} [props.holdSpaceForStyle]
- *   Prevents layout shifts when text styles change (font-weight, font-size, …).
- *   Pass an object of CSS-in-JS style properties representing the "maximum" state of the text.
- *   An invisible placeholder is rendered with those styles to reserve the space,
- *   and the real visible text is layered on top via `position: absolute`.
- *   Only works reliably with single-line (`noWrap`) text.
- *   Example: `holdSpaceForStyle={{ fontWeight: "bold", fontSize: "1.5rem" }}`
- *
- * @param {boolean} [props.boldStable]
- *   Alternative to `holdSpaceForStyle` for multi-line text.
- *   Keeps a consistent visual width regardless of font-weight by painting normal-weight
- *   text on top of a bold background using `background-clip: text`.
- *   Does not support font-size changes.
- *
- * @param {boolean} [props.capitalize]
- *   Applies `text-transform: uppercase` to the first letter via CSS.
- *
- * @param {string|Array} [props.selectRange]
- *   Selects a portion of the text on mount. Forwarded to `useInitialTextSelection`.
- *
- * @param {*} [props.childrenOutsideFlow]
- *   Rendered after children but outside the text flow (useful for overlays
- *   like the skeleton container).
+ * @param {number} [maxLines]
+ *   Truncates overflowing text with an ellipsis. `maxLines={1}` produces a
+ *   single-line truncation; `maxLines={n}` (n > 1) uses `-webkit-line-clamp`
+ *   to allow up to n lines before clipping.
+ *
+ * @param {string|number} [spacing]
+ *   Separator injected between child nodes. Accepts a size token (`"s"`, `"m"`, …),
+ *   a CSS length string, a number (interpreted as px), or `"pre"` / `0` to
+ *   disable spacing entirely. Defaults to a regular space character.
+ *
+ * @param {boolean} [loading]
+ *   Renders a shimmer skeleton animation in place of the text content.
+ *
+ * @param {boolean} [skeleton]
+ *   Same as `loading` but without the shimmer animation — a static grey bar.
+ *
+ * @param {boolean} [preventSpaceUnderlines]
+ *   Replaces real space characters between children with padding-based spaces.
+ *   Useful inside `<a>` elements where browsers draw an underline under spaces.
+ *
+ * @param {import("ignore:preact").JSX.CSSProperties} [holdSpaceForStyle]
+ *   Prevents layout shifts when text styles change (e.g. font-weight, font-size).
+ *   Pass the CSS properties representing the "largest" visual state of the text.
+ *   An invisible placeholder rendered with those styles reserves the space; the
+ *   real visible text is layered on top via `position: absolute`.
+ *   Best combined with `noWrap` — does not work reliably on multi-line text.
+ *
+ * @param {boolean} [boldStable]
+ *   Alternative to `holdSpaceForStyle` for multi-line text. Keeps a consistent
+ *   visual width across bold/normal transitions by painting normal-weight text
+ *   over a bold background using `background-clip: text`. Does not handle
+ *   font-size changes.
+ *
+ * @param {boolean} [shrinkWrap]
+ *   Forces the element width to match its longest visual line, preventing the
+ *   text block from being wider than its content when inside a flex/grid container.
+ *
+ * @param {boolean} [capitalize]
+ *   Uppercases the first letter of the text content via CSS.
+ *
+ * @param {string|[number,number]} [selectRange]
+ *   Selects a portion of the text on mount. Pass a substring to search for, or
+ *   a `[start, end]` character-offset tuple.
+ *
+ * @param {import("ignore:preact").ComponentChildren} [childrenOutsideFlow]
+ *   Rendered after children but outside the text spacing/flow logic. Used
+ *   internally for overlays such as the skeleton container.
  */
 const Text = props => {
   const defaultRef = useRef();
@@ -34374,21 +34435,13 @@ const Unit = ({
   let unitText = unit;
   if (label) {
     unitText = label;
-  } else {
+  } else if (naviI18n.has(unit, {
+    lang
+  })) {
     const singularText = naviI18n(unit, undefined, {
       lang
     });
-    if (singularText === unit) {
-      // naviI18n has no translation — try Intl.NumberFormat with style:"unit"
-      const intlText = formatIntlUnit(unit, {
-        plural,
-        lang,
-        format
-      });
-      if (intlText !== null) {
-        unitText = intlText;
-      }
-    } else if (format === "short" || format === "narrow") {
+    if (format === "short" || format === "narrow") {
       const shortKey = `${unit}__short`;
       const shortText = naviI18n(shortKey, undefined, {
         lang
@@ -34404,6 +34457,18 @@ const Unit = ({
     } else {
       unitText = singularText;
     }
+  } else {
+    // naviI18n has no translation — try Intl.NumberFormat with style:"unit"
+    const intlText = formatIntlUnit(unit, {
+      plural,
+      lang,
+      format
+    });
+    if (intlText === null) {
+      unitText = unit;
+    } else {
+      unitText = intlText;
+    }
   }
   return jsx(Text, {
     baseClassName: "navi_unit",
@@ -35510,7 +35575,7 @@ const Dialog = props => {
       focusedBeforeOpen
     });
   };
-  const close = e => {
+  const close = (e, detail = {}) => {
     debugPopup(`"${e.type}" on ${getElementSignature(e.target)} -> closeDialog`);
     const dialogEl = ref.current;
     markAutofocusRestoreOnClose(dialogEl);
@@ -35518,7 +35583,8 @@ const Dialog = props => {
     cleanup();
     openedRef.current = false;
     dispatchCustomEvent(dialogEl, "navi_close", {
-      event: e
+      event: e,
+      ...detail
     });
   };
   const onRequestOpen = (e, {
@@ -35535,7 +35601,7 @@ const Dialog = props => {
       anchor
     });
   };
-  const onRequestClose = e => {
+  const onRequestClose = (e, detail = {}) => {
     const dialogEl = ref.current;
     if (!dialogEl) {
       return;
@@ -35553,15 +35619,15 @@ const Dialog = props => {
           denied = false;
         }
       };
-      closeRequestHandler(e, closePermission);
+      closeRequestHandler(e, closePermission, detail);
       if (denied) {
         closePermission.allow = () => {
-          close(e);
+          close(e, detail);
         };
         return;
       }
     }
-    close(e);
+    close(e, detail);
   };
   return jsx(Box, {
     ...rest,
@@ -35575,7 +35641,9 @@ const Dialog = props => {
       // The <dialog> element covers the full viewport; clicking the backdrop
       // hits the dialog itself (not any child). Close when that happens.
       if (!pointerTrap && e.button === 0 && e.target === ref.current) {
-        onRequestClose(e);
+        onRequestClose(e, {
+          isClickOutside: true
+        });
       }
     },
     onCancel: e => {
@@ -35735,7 +35803,7 @@ const Popover = props => {
       focusedBeforeOpen
     });
   };
-  const close = e => {
+  const close = (e, detail = {}) => {
     debugPopup(e, `closePopover()`);
     const popoverEl = ref.current;
     markAutofocusRestoreOnClose(popoverEl);
@@ -35744,7 +35812,8 @@ const Popover = props => {
     openedRef.current = false;
     setOpened(false);
     dispatchCustomEvent(popoverEl, "navi_close", {
-      event: e
+      event: e,
+      ...detail
     });
   };
   const onRequestOpen = (e, {
@@ -35761,7 +35830,7 @@ const Popover = props => {
       anchor
     });
   };
-  const onRequestClose = e => {
+  const onRequestClose = (e, detail = {}) => {
     const popoverEl = ref.current;
     if (!popoverEl) {
       return;
@@ -35779,15 +35848,15 @@ const Popover = props => {
           denied = false;
         }
       };
-      closeRequestHandler(e, closePermission);
+      closeRequestHandler(e, closePermission, detail);
       if (denied) {
         closePermission.allow = () => {
-          close(e);
+          close(e, detail);
         };
         return;
       }
     }
-    close(e);
+    close(e, detail);
   };
   return jsxs(Box, {
     id: id,
@@ -35819,7 +35888,9 @@ const Popover = props => {
           e.preventDefault();
           return;
         }
-        onRequestClose(e);
+        onRequestClose(e, {
+          isClickOutside: true
+        });
       }
     }), children]
   });
@@ -35828,6 +35899,15 @@ const POPOVER_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible",
 
 installImportMetaCssBuild(import.meta);const css$p = /* css */`
   .navi_picker {
+    /* Shared by popover and dialog */
+    --picker-popup-background-color: var(--picker-background-color);
+    --picker-popup-border-radius: var(--picker-border-radius);
+    /* Popover */
+    --picker-popover-max-height: 300px;
+    /* Dialog */
+    --picker-dialog-max-width: 95dvw;
+    --picker-dialog-max-height: 95dvh;
+
     /* popover */
     &[aria-haspopup="listbox"] {
       .navi_picker_popover {
@@ -35836,14 +35916,17 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         min-width: var(--anchor-width, 0px);
         max-width: 95vw;
         /* max-height covers the placeholder + list; the list scrolls internally */
-        max-height: var(--space-available, 95dvh);
+        max-height: min(
+          var(--picker-popover-max-height),
+          var(--space-available, 95dvh)
+        );
         margin: 0;
         padding: 0;
-        background: var(--picker-background-color);
+        background: var(--picker-popup-background-color);
         border-width: var(--picker-border-width);
         border-style: solid;
         border-color: var(--x-picker-border-color);
-        border-radius: var(--picker-border-radius);
+        border-radius: var(--picker-popup-border-radius);
         outline-width: var(--picker-outline-width);
         outline-color: var(--picker-outline-color);
         outline-offset: 0px;
@@ -35851,7 +35934,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
           0 4px 8px rgba(0, 0, 0, 0.08),
           0 12px 40px rgba(0, 0, 0, 0.22);
         cursor: default; /* Reset pointer cursor within the select */
-        overflow: hidden;
+        overflow: auto;
         overscroll-behavior: none;
 
         /* The anchor placeholder is a non-interactive visual clone of the
@@ -35899,7 +35982,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
           width: 100%;
           border-radius: max(
             0px,
-            var(--picker-border-radius) - var(--picker-border-width)
+            var(--picker-popup-border-radius) - var(--picker-border-width)
           );
           overflow: auto;
           overscroll-behavior: none;
@@ -35929,11 +36012,12 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
     &[aria-haspopup="dialog"] {
       .navi_picker_dialog {
         min-width: var(--anchor-width, 0px);
-        max-height: 95dvh;
+        max-width: var(--picker-dialog-max-width);
+        max-height: var(--picker-dialog-max-height);
         padding: 0;
-        background: var(--picker-background-color);
+        background: var(--picker-popup-background-color);
         border: var(--picker-border-width) solid var(--x-picker-border-color);
-        border-radius: var(--picker-border-radius);
+        border-radius: var(--picker-popup-border-radius);
         outline-width: var(--picker-outline-width);
         outline-color: var(--picker-outline-color);
         outline-offset: 0;
@@ -35943,6 +36027,13 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         cursor: default; /* Reset pointer cursor within the select */
         /* overscroll-behavior: contain; */
 
+        &[data-expand-x] {
+          width: var(--picker-dialog-max-width);
+        }
+        &[data-expand-y] {
+          height: var(--picker-dialog-max-height);
+        }
+
         &[open] {
           display: flex;
           flex-direction: column;
@@ -35961,7 +36052,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         width: 100%;
         border-radius: max(
           0px,
-          var(--picker-border-radius) - var(--picker-border-width)
+          var(--picker-popup-border-radius) - var(--picker-border-width)
         );
         overflow: auto;
         overscroll-behavior: none;
@@ -36084,15 +36175,9 @@ const PickerCustom = props => {
     expandedRef.current = expanded;
     const valueAtOpenRef = useRef(null);
     const activeElementAtOpenRef = useRef(null);
-    // Tracks whether a uiAction has occurred since the last close denial.
-    // true  = no pending denial (initial state, or user has interacted since)
-    // false = close was denied and user hasn't interacted yet
-    // When false, a second close attempt is treated as cancel.
-    const uiActionSinceDeniedRef = useRef(true);
     const onOpen = e => {
       expandedRef.current = true;
       setExpanded(true);
-      uiActionSinceDeniedRef.current = true;
       const focusedBeforeOpen = e.detail.focusedBeforeOpen;
       activeElementAtOpenRef.current = focusedBeforeOpen;
       debugFocus(e, "picked opened, store element focused", focusedBeforeOpen);
@@ -36198,44 +36283,29 @@ const PickerCustom = props => {
           }
         });
       },
-      // Intercept uiAction to detect user interaction after a close denial.
       "uiAction": (v, e) => {
-        uiActionSinceDeniedRef.current = true;
         uiActionProp?.(v, e);
       },
       children
     });
     Object.assign(popupProps, {
-      closeRequestHandler: (requestCloseEvent, closePermission) => {
+      closeRequestHandler: (requestCloseEvent, closePermission, {
+        isClickOutside
+      } = {}) => {
         const cancelEvent = findEvent(requestCloseEvent, eInChain => eInChain.type === "navi_request_close" && eInChain.detail.isCancel);
-        const isCancel = Boolean(cancelEvent);
-        const pickerEl = ref.current;
-        const inputEl = getPickerInput(pickerEl);
-        const valueAtOpen = valueAtOpenRef.current;
+        const isCancel = isClickOutside || Boolean(cancelEvent);
         if (isCancel) {
-          uiActionSinceDeniedRef.current = true;
+          const pickerEl = ref.current;
+          const inputEl = getPickerInput(pickerEl);
+          const valueAtOpen = valueAtOpenRef.current;
+          debugPopup(requestCloseEvent, `picker cancel, restoring value at open ${JSON.stringify(valueAtOpen)}`);
           dispatchRequestSetUIState(inputEl, valueAtOpen, {
             event: requestCloseEvent
           });
           return;
         }
-
-        // If close was previously denied and the user hasn't interacted since,
-        // treat this re-attempt as a cancel so they are not trapped.
-        if (!uiActionSinceDeniedRef.current) {
-          debugPopup(requestCloseEvent, `picker close was denied and user did not interact, treating re-attempt as cancel (restoring ${JSON.stringify(valueAtOpen)})`);
-          uiActionSinceDeniedRef.current = true;
-          dispatchRequestSetUIState(inputEl, valueAtOpen, {
-            event: requestCloseEvent
-          });
-          return;
-        }
-        const valueAtClose = getPickerInputUIState(pickerEl);
-        if (compareTwoJsValues(valueAtClose, valueAtOpen)) {
-          debugPopup(requestCloseEvent, `picker closed with same value as when it opened (${JSON.stringify(valueAtClose)}), no action dispatched`);
-          return;
-        }
-        debugPopup(requestCloseEvent, `picker attempt to close with value (${JSON.stringify(valueAtClose)}) wait for picker action to close picker`);
+        const pickerEl = ref.current;
+        const inputEl = getPickerInput(pickerEl);
         dispatchRequestAction(inputEl, {
           event: requestCloseEvent,
           name: "picker close",
@@ -36246,10 +36316,8 @@ const PickerCustom = props => {
           // user sees what is wrong, even if the picker has no action prop.
           reportOnInvalid: true,
           onInvalid: () => {
-            uiActionSinceDeniedRef.current = false;
             closePermission.deny();
-          },
-          allowed: () => {}
+          }
         });
       },
       onnavi_open: e => {
@@ -36338,7 +36406,9 @@ const PickerCustom = props => {
             if (expandedRef.current) {
               return {
                 name: "mousedown to close picker",
-                allowed: () => requestClose(e)
+                allowed: () => requestClose(e, {
+                  isCancel: true
+                })
               };
             }
             return {
@@ -36431,7 +36501,8 @@ const PickerContentInsidePopover = props => {
         category: "interaction",
         allowed: () => {
           dispatchCustomEvent(popoverEl, "navi_request_close", {
-            event: e
+            event: e,
+            isCancel: true
           });
         }
       });
@@ -36457,7 +36528,8 @@ const PickerContentInsidePopover = props => {
           }
           const popupEl = popupProps.ref.current;
           dispatchCustomEvent(popupEl, "navi_request_close", {
-            event: e
+            event: e,
+            isCancel: true
           });
         },
         children: props.trigger
@@ -36472,8 +36544,13 @@ const PickerContentInsideDialog = props => {
     children,
     scrollTrap,
     pointerTrap,
+    dialogExpand,
+    dialogExpandX,
+    dialogExpandY,
     ...rest
   } = props;
+  const expandX = dialogExpand || dialogExpandX;
+  const expandY = dialogExpand || dialogExpandY;
   return jsx(Next, {
     "aria-haspopup": "dialog",
     ...rest,
@@ -36484,6 +36561,8 @@ const PickerContentInsideDialog = props => {
       pointerTrap: pointerTrap,
       centerInVisualViewport: true,
       autoFocus: "fallback",
+      "data-expand-x": expandX ? "" : undefined,
+      "data-expand-y": expandY ? "" : undefined,
       children: children
     })
   });
@@ -37600,10 +37679,6 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
     }
   }
 
-  fieldset.navi_list_container[navi-selectable] {
-    margin: 0; /* Reset margin that might come from fieldset */
-    padding: 0; /* Reset padding that might come from fieldset */
-  }
   .navi_list_container[navi-selectable] {
     &[data-callout] {
       --x-list-border-color: var(--callout-color);
@@ -37847,7 +37922,6 @@ const ListSelectable = props => {
     setCurrentId(initialEl.id);
   }, []);
   const listVnode = jsx(Next, {
-    as: "fieldset",
     "navi-selectable": "",
     "navi-has-selected-background": selectedIndicator === "backgroundColor" ? "" : undefined,
     ...listControlRootProps,
@@ -38256,9 +38330,10 @@ installImportMetaCssBuild(import.meta);const ListItemTrackerContext = createCont
 const GroupItemTrackerContext = createContext(null);
 const PendingScrollRefContext = createContext(null);
 // Controls how List.Item behaves when match=false (set via List searchNoMatchMode prop):
-//   "remove"    — remove from DOM (default)
+//   "remove"              — remove from DOM (default)
 //   "invisible_and_inert" — keep in DOM, invisible and non-interactive (preserves layout, no content visible)
 //   "muted"               — keep in DOM, visible but opacified and still interactive
+//   "below"               — keep in DOM, fully visible, pushed below matching items via CSS order
 const SearchNoMatchModeContext = createContext("remove");
 
 // When total rendered items exceeds renderBudget, a render window [start, end)
@@ -38285,7 +38360,6 @@ const css$m = /* css */`
       --list-border-width: 1px;
       --list-border-color: light-dark(#ccc, #555);
       --list-background-color: light-dark(#fff, #1e1e1e);
-      --list-max-height: 220px;
     }
     .navi_list_item {
       --list-item-padding-x-default: 0px;
@@ -38356,8 +38430,8 @@ const css$m = /* css */`
     .navi_list_scroll_container {
       width: inherit;
       min-width: inherit;
-      max-width: inherit;
-      max-height: var(--list-max-height);
+      max-width: var(--list-max-width, inherit);
+      max-height: var(--list-max-height, inherit);
       overflow: auto;
       overscroll-behavior: inherit; /* inherit select behavior */
     }
@@ -38365,6 +38439,12 @@ const css$m = /* css */`
     &[data-expand-x] {
       width: 100%;
     }
+    &[data-expand-y] {
+      --list-max-height: none;
+    }
+    &[navi-nothing-to-display] {
+      display: none;
+    }
     &[popover] {
       position: absolute;
       inset: unset;
@@ -38481,6 +38561,8 @@ const css$m = /* css */`
     /* background: pink; */
   }
   &[data-horizontal] {
+    --list-max-height: none;
+
     .navi_list_virtual_filler {
       width: var(--size-to-fill, 0px);
       height: 100%;
@@ -38630,8 +38712,8 @@ const ListUI = props => {
     children,
     popover,
     expandX,
+    expandY,
     expand,
-    maxHeight,
     onListVisibleItemsChange,
     virtualItemSize,
     lockSize,
@@ -38696,6 +38778,12 @@ const ListUI = props => {
   const getItemById = itemId => {
     return tracker.itemsSignal.peek().find(item => item.id === itemId);
   };
+  const noMatchCount = tracker.noMatchCountSignal.value;
+  const itemCount = tracker.countSignal.value;
+  const allNoMatch = noMatchCount > 0 && noMatchCount === itemCount;
+  const fallbackDisabled = fallback !== undefined && !fallback;
+  const searchFallbackDisabled = searchFallback !== undefined && !searchFallback;
+  const nothingToDisplay = allNoMatch && searchFallbackDisabled && searchNoMatchMode === "remove" || itemCount === 0 && fallbackDisabled;
   return jsx(Box, {
     ...rest,
     ref: ref,
@@ -38703,9 +38791,12 @@ const ListUI = props => {
     popover: popover,
     "data-horizontal": horizontal ? "" : undefined,
     "data-expand-x": expandX || expand ? "" : undefined,
+    "data-expand-y": expandY || expand ? "" : undefined,
     expandX: expandX,
+    expandY: expandY,
     expand: expand,
-    maxHeight: maxHeight,
+    "navi-zero-match": allNoMatch ? "" : undefined,
+    "navi-nothing-to-display": nothingToDisplay ? "" : undefined,
     styleCSSVars: LIST_STYLE_CSS_VARS,
     pseudoClasses: LIST_PSEUDO_CLASSES,
     hasChildUsingForwardedProps: true,
@@ -38730,6 +38821,7 @@ const ListUI = props => {
       searchNoMatchMode: searchNoMatchMode,
       separator: separator,
       expandX: expandX,
+      expandY: expandY,
       expand: expand,
       horizontal: horizontal,
       spacing: spacing,
@@ -38766,14 +38858,14 @@ const ListFirstResolver = props => {
  *   fallback?: import("ignore:preact").ComponentChildren,
  *   searchFallback?: import("ignore:preact").ComponentChildren,
  *   searchText?: string,
- *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
+ *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted" | "below",
  *   separator?: boolean | import("ignore:preact").ComponentChildren,
  *   lockSize?: boolean,
  *   horizontal?: boolean,
  *   spacing?: string,
  *   expandX?: boolean,
+ *   expandY?: boolean,
  *   expand?: boolean,
- *   maxHeight?: string | number,
  *   children?: import("ignore:preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
@@ -38786,6 +38878,7 @@ const ListContent = ({
   searchNoMatchMode,
   separator,
   expandX,
+  expandY,
   expand,
   horizontal,
   spacing,
@@ -38807,6 +38900,7 @@ const ListContent = ({
         margin: "0"
       }) : separator,
       expandX: expandX || expand,
+      expandY: expandY || expand,
       horizontal: horizontal,
       spacing: spacing,
       ...listProps,
@@ -38822,6 +38916,7 @@ const ListContent = ({
 };
 const LIST_STYLE_CSS_VARS = {
   maxHeight: "--list-max-height",
+  maxWidth: "--list-max-width",
   borderColor: "--list-border-color",
   borderRadius: "--list-border-radius",
   borderWidth: "--list-border-width"
@@ -39240,7 +39335,6 @@ const UnorderedList = ({
   return jsxs(Box, {
     as: "ul",
     flex: horizontal ? "x" : "y",
-    flexWrap: true,
     ...rest,
     spacing: spacing,
     baseClassName: "navi_list",
@@ -40672,38 +40766,6 @@ installImportMetaCssBuild(import.meta);const css$i = /* css */`
     }
   }
 `;
-
-/**
- * A button-like trigger that opens a picker when clicked.
- *
- * Use the `type` prop to choose what kind of picker to open:
- *   "date"      — calendar day
- *   "month"    — year + month
- *   "week"     — ISO week
- *   "time"     — hours + minutes
- *   "datetime" — date + time
- *   "color"    — color chooser
- *   "hour"     — fixed time slots (derived from min/max/step)
- *
- * When `children` are provided, the picker opens a popover or dialog instead
- * of the browser-native picker. On small screens a dialog is used automatically;
- * on larger screens a popover is used. Pass `mode="dialog"` or `mode="popover"`
- * to force one. The children are rendered inside the popup.
- *
- * Props:
- *   type        — picker variant (see above)
- *   value       — controlled value
- *   uiAction    — called with the new value when the user picks one
- *   name        — form field name
- *   placeholder — shown when no value is selected
- *   required    — marks the field as required
- *   min         — minimum allowed value; accepts a Date or a raw string
- *   max         — maximum allowed value; accepts a Date or a raw string
- *   step        — step interval
- *   disabled    — disables the picker
- *   children    — content to display inside the popup (enables popover/dialog mode)
- *   mode        — "popover" or "dialog"; auto-detected from screen size when omitted
- */
 const PickerButton = props => {
   import.meta.css = [css$i, "@jsenv/navi/src/control/picker/picker.jsx"];
   if (typeof props.maxLines === "string") {
@@ -40914,6 +40976,9 @@ const PickerStyleCSSVars = {
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
   "borderRadius": "--picker-border-radius",
+  "popoverMaxHeight": "--picker-popover-max-height",
+  "popupBackgroundColor": "--picker-popup-background-color",
+  "popupBorderRadius": "--picker-popup-border-radius",
   "padding": "--picker-padding",
   "paddingX": "--picker-padding-x",
   "paddingY": "--picker-padding-y",
@@ -40961,6 +41026,43 @@ const PickerFirstResolver = props => {
     ...props
   });
 };
+
+/**
+ * Button-like trigger that opens a picker (native or custom popup) when clicked.
+ *
+ * Without `children`, opens the browser-native picker for the given `type`.
+ * With `children`, opens a popover (desktop) or dialog (mobile) containing the children.
+ * Pass `mode="popover"` or `mode="dialog"` to override the automatic choice.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   type?: "date" | "month" | "week" | "time" | "datetime" | "color" | "hour" | "navi_time" | "navi_number" | "navi_percentage",
+ *   value?: any,
+ *   defaultValue?: any,
+ *   name?: string,
+ *   placeholder?: import("ignore:preact").ComponentChildren,
+ *   required?: boolean,
+ *   min?: Date | string | number,
+ *   max?: Date | string | number,
+ *   step?: string | number,
+ *   disabled?: boolean,
+ *   readOnly?: boolean,
+ *   uiAction?: (value: any, event: Event) => void,
+ *   action?: (value: any, event: Event) => void,
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   mode?: "popover" | "dialog",
+ *   variant?: "icon" | "headless",
+ *   icon?: import("ignore:preact").ComponentChildren,
+ *   maxLines?: number,
+ *   popoverMaxHeight?: number | string,
+ *   popupBackgroundColor?: string,
+ *   popupBorderRadius?: number | string,
+ *   dialogExpand?: boolean,
+ *   dialogExpandX?: boolean,
+ *   dialogExpandY?: boolean,
+ *   ref?: import("ignore:preact").RefObject<HTMLElement>,
+ *   [key: string]: any,
+ * }>}
+ */
 const Picker = createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
 Picker.UI = PickerDefaultUI;
 Picker.UI.Date = PickerDateUI;
@@ -45832,6 +45934,26 @@ installImportMetaCssBuild(import.meta);const css$7 = /* css */`
     }
   }
 `;
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   children?: number | string,
+ *   unit?: string,
+ *   unitPosition?: "right" | "bottom",
+ *   unitSize?: string,
+ *   unitSizeRatio?: number,
+ *   unitColor?: string,
+ *   label?: string,
+ *   size?: string,
+ *   lang?: string,
+ *   integer?: boolean,
+ *   loading?: boolean,
+ *   readOnly?: boolean,
+ *   disabled?: boolean,
+ *   bold?: boolean,
+ *   [key: string]: any,
+ * }>}
+ */
 const Quantity = ({
   children,
   unit,
@@ -45859,7 +45981,7 @@ const Quantity = ({
   return jsxs(Text, {
     baseClassName: "navi_quantity",
     "data-unit-bottom": unitBottom ? "" : undefined,
-    propsCSSVars: QuantityPropsCSSVars,
+    styleCSSVars: QuantityStyleCSSVars,
     basePseudoState: {
       ":read-only": readOnly,
       ":disabled": disabled,
@@ -45893,7 +46015,7 @@ const Quantity = ({
     })]
   });
 };
-const QuantityPropsCSSVars = {
+const QuantityStyleCSSVars = {
   unitColor: "--unit-color"
 };
 const QuantityPseudoClasses = [":hover", ":active", ":read-only", ":disabled", ":-navi-loading"];
@@ -46773,7 +46895,7 @@ const SidePanel = ({
     value: onClose,
     children: jsxs(Box, {
       baseClassName: "navi_side_panel",
-      propsCSSVars: SidePanelStyleCSSVars,
+      styleCSSVars: SidePanelStyleCSSVars,
       width: width,
       "data-opening": phase === "opening" ? "" : undefined,
       "data-closing": phase === "closing" ? "" : undefined,