@jsenv/navi 0.27.49 → 0.27.51

package/dist/jsenv_navi.js

@@ -8869,11 +8869,11 @@ import.meta.css = [/* css */`
     }
   }
   /*
-
-  It's very common to declare a display on component as follow
+  To set display on component, code usually do something like: 
   .component_class { display: component_display; }
 
-  This kill the default behavior of [hidden] attribute and we need to explicitly handle it with:
+  It overrides the default behavior of [hidden] attribute!
+  This needs to be explicitly handled with:
   .component_class[hidden] { display: none; }
 
   To avoid this extra work and potential mistakes we force the default behavior of [hidden] attribute.
@@ -19687,11 +19687,6 @@ const MIN_CONSTRAINT = {
   name: "min",
   messageAttribute: "data-min-message",
   check: (field) => {
-    // Sub-inputs inside a duration_group: min/max is validated at the group level, not per-field.
-    // Per-field min/max attributes are kept for arrow-key navigation bounds only.
-    if (field.parentUIStateController?.controlType === "duration_group") {
-      return null;
-    }
     if (field.controlType === "duration_group") {
       const min = field.controlHostProps.min;
       if (min === undefined || min === null) {
@@ -19795,11 +19790,6 @@ const MAX_CONSTRAINT = {
   name: "max",
   messageAttribute: "data-max-message",
   check: (field) => {
-    // Sub-inputs inside a duration_group: min/max is validated at the group level, not per-field.
-    // Per-field min/max attributes are kept for arrow-key navigation bounds only.
-    if (field.parentUIStateController?.controlType === "duration_group") {
-      return null;
-    }
     if (field.controlType === "duration_group") {
       const max = field.controlHostProps.max;
       if (max === undefined || max === null) {
@@ -20171,21 +20161,21 @@ const NAVI_VALIDITY_CHANGE_CUSTOM_EVENT = "navi_validity_change";
 
 const VALIDATION_TOKEN = createOpenToken();
 
+// the order matters here, the first constraint is picked first when multiple constraints fail
+// so it's better to keep the most complex constraints at the end of the list
+// so the more basic ones shows up first
 const STANDARD_CONSTRAINT_SET = new Set([
   REQUIRED_CONSTRAINT,
   PATTERN_CONSTRAINT,
   TYPE_EMAIL_CONSTRAINT,
   TYPE_NUMBER_CONSTRAINT,
-  MIN_LENGTH_CONSTRAINT,
-  MAX_LENGTH_CONSTRAINT,
   MIN_CONSTRAINT,
   MAX_CONSTRAINT,
   STEP_CONSTRAINT,
+  MIN_LENGTH_CONSTRAINT,
+  MAX_LENGTH_CONSTRAINT,
 ]);
 const NAVI_CONSTRAINT_SET = new Set([
-  // the order matters here, the last constraint is picked first when multiple constraints fail
-  // so it's better to keep the most complex constraints at the beginning of the list
-  // so the more basic ones shows up first
   MIN_SPECIAL_CHAR_CONSTRAINT,
   SINGLE_SPACE_CONSTRAINT,
   MIN_DIGIT_CONSTRAINT,
@@ -20483,10 +20473,10 @@ const createControlValidation = (
 const pickConstraintFailureInfo = (a, b) => {
   const aPrio = getConstraintFailureInfoPriority(a);
   const bPrio = getConstraintFailureInfoPriority(b);
-  if (aPrio > bPrio) {
-    return a;
+  if (bPrio > aPrio) {
+    return b;
   }
-  return b;
+  return a;
 };
 const getConstraintFailureInfoPriority = (failureInfo) => {
   if (failureInfo.status === "error") {
@@ -21972,36 +21962,30 @@ const FormContext = createContext();
  * Each value is a regex character class (including the [ ] delimiters).
  */
 const CHAR_CLASS_PRESETS = {
-  numeric:      "[0-9]",         // digits only
-  alpha:        "[A-Za-z]",      // letters only
-  alphanumeric: "[0-9A-Za-z]",   // letters and digits
-  uppercase:    "[A-Z]",         // uppercase letters only
-  tel:          "[-0-9+() ]",    // phone: digits, +, -, parens, space
-  card:         "[0-9 ]",        // credit card: digits and spaces
-  hex:          "[0-9A-Fa-f]",   // hexadecimal digits
-  pin:          "[0-9]",         // numeric PIN
-  postal:       "[0-9A-Za-z -]", // postal code (FR, UK, US)
-  iban:         "[0-9A-Z]",      // IBAN: uppercase and digits
-  slug:         "[a-z0-9-]",     // URL slug
-};
-
-// Presets that imply a specific mobile keyboard layout
-const INPUT_MODE_FROM_PRESET = {
-  numeric: "numeric",
-  pin:     "numeric",
-  card:    "numeric",
-  tel:     "tel",
+  numeric: "[0-9]", // digits only
+  alpha: "[A-Za-z]", // letters only
+  alphanumeric: "[0-9A-Za-z]", // letters and digits
+  decimal: "[-0-9.,]", // digits, minus, dot, comma
+  uppercase: "[A-Z]", // uppercase letters only
+  tel: "[-0-9+() ]", // phone: digits, +, -, parens, space
+  email: "[a-zA-Z0-9._%+@-]", // email characters
+  card: "[0-9 ]", // credit card: digits and spaces
+  hex: "[0-9A-Fa-f]", // hexadecimal digits
+  pin: "[0-9]", // numeric PIN
+  postal: "[0-9A-Za-z -]", // postal code (FR, UK, US)
+  iban: "[0-9A-Z]", // IBAN: uppercase and digits
+  slug: "[a-z0-9-]", // URL slug
 };
 
 // Specific i18n keys per preset — more informative than the generic fallback
 const MESSAGE_KEY_FROM_PRESET = {
-  numeric:      "constraint.guard.number",
-  pin:          "constraint.guard.number",
-  alpha:        "constraint.guard.alpha",
+  numeric: "constraint.guard.number",
+  pin: "constraint.guard.number",
+  alpha: "constraint.guard.alpha",
   alphanumeric: "constraint.guard.alphanumeric",
-  uppercase:    "constraint.guard.uppercase",
-  hex:          "constraint.guard.hex",
-  slug:         "constraint.guard.slug",
+  uppercase: "constraint.guard.uppercase",
+  hex: "constraint.guard.hex",
+  slug: "constraint.guard.slug",
   // tel, card, postal, iban, custom → generic fallback
 };
 
@@ -22014,13 +21998,6 @@ const resolveCharClass = (value) => {
   return CHAR_CLASS_PRESETS[value] ?? value;
 };
 
-/**
- * Returns the inputMode to auto-apply for the given preset, or null.
- */
-const resolveInputModeFromAllowedChars = (value) => {
-  return INPUT_MODE_FROM_PRESET[value] ?? null;
-};
-
 /**
  * Returns the i18n key for the char guard rejection message.
  * Falls back to the generic "constraint.guard.chars" for custom classes and
@@ -32213,20 +32190,99 @@ const resolveInputProps = (props) => {
   if (currentTypeStepFormatter) {
     props.step = currentTypeStepFormatter(props.step);
   }
+
+  // For navi_number: choose inputMode based on whether step/min/max suggest decimals.
+  // inputMode="numeric" (integer keyboard) vs "decimal" (keyboard with decimal separator).
+  if (currentType === "navi_number") {
+    if (props.inputMode === undefined) {
+      props.inputMode =
+        hasDecimalPlaces(props.step) ||
+        hasDecimalPlaces(props.min) ||
+        hasDecimalPlaces(props.max)
+          ? "decimal"
+          : "numeric";
+    }
+  }
+
+  const { charGuard } = props;
+  if (charGuard) {
+    if (charGuard === true || charGuard === "auto") {
+      // Auto-resolve charGuard from context.
+      let charGuardResolved;
+      const inputMode = props.inputMode;
+      if (inputMode === "numeric") {
+        charGuardResolved = "numeric";
+      } else if (inputMode === "decimal") {
+        charGuardResolved = "decimal";
+      } else if (currentType === "tel") {
+        charGuardResolved = "tel";
+      } else if (currentType === "email") {
+        charGuardResolved = "email";
+      }
+      if (charGuardResolved !== undefined) {
+        props.charGuard = charGuardResolved;
+      }
+    }
+    // charGuard is now resolved: derive inputMode from it if not already set.
+    if (props.inputMode === undefined && props.charGuard) {
+      const autoMode = INPUT_MODE_FROM_CHAR_GUARD[props.charGuard];
+      if (autoMode) {
+        props.inputMode = autoMode;
+      }
+    }
+    // Build pattern from the resolved charGuard (preset name → class, or raw class passthrough).
+    if (props.pattern === undefined && props.charGuard) {
+      const charClass = CHAR_CLASS_PRESETS[props.charGuard] ?? props.charGuard;
+      props.pattern = `${charClass}*`;
+    }
+  }
+
+  // Compute maxLength from max when inputMode is numeric/decimal.
+  // Done here (after inputMode is set) so controller.props has the resolved value.
+  if (props.maxLength === undefined) {
+    if (props.inputMode === "numeric") {
+      const { min, max } = props;
+      if (max === undefined) ; else {
+        const canBeNegative = min === undefined ? max < 0 : min < 0;
+        const signCharCount = canBeNegative ? 1 : 0;
+        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
+        props.maxLength = signCharCount + integerDigitCount;
+      }
+    } else if (props.inputMode === "decimal") {
+      const { min, max, step } = props;
+      if (max === undefined) ; else if (step === undefined) ; else {
+        const canBeNegative = min === undefined ? max < 0 : min < 0;
+        const signCharCount = canBeNegative ? 1 : 0;
+        const integerDigitCount = String(Math.floor(Math.abs(max))).length;
+        const stepStr = String(step);
+        const dotIndex = stepStr.indexOf(".");
+        // integer step + decimal inputMode is an unusual combo, but we stay consistent:
+        // no decimal part in maxLength since valid values are whole numbers anyway
+        const isIntegerStep = dotIndex === -1;
+        const decimalSignCharCount = isIntegerStep ? 0 : 1;
+        const decimalDigitCount = isIntegerStep
+          ? 0
+          : stepStr.length - dotIndex - 1;
+        props.maxLength =
+          signCharCount +
+          integerDigitCount +
+          decimalSignCharCount +
+          decimalDigitCount;
+      }
+    }
+  }
+
+  // Resolve maxLengthGuard boolean/auto → the computed maxLength number.
+  if (props.maxLengthGuard === true || props.maxLengthGuard === "auto") {
+    props.maxLengthGuard =
+      typeof props.maxLength === "number" ? props.maxLength : undefined;
+  }
+
   const currentTypeDefaults = NAVI_TYPE_DEFAULTS[currentType];
   if (!currentTypeDefaults) {
     return;
   }
-  // For navi_number: choose inputMode based on whether step/min/max suggest decimals.
-  // inputMode="numeric" (integer keyboard) vs "decimal" (keyboard with decimal separator).
-  if (currentType === "navi_number" && props.inputMode === undefined) {
-    props.inputMode =
-      hasDecimalPlaces(props.step) ||
-      hasDecimalPlaces(props.min) ||
-      hasDecimalPlaces(props.max)
-        ? "decimal"
-        : "numeric";
-  }
+
   for (const key of Object.keys(currentTypeDefaults)) {
     if (props[key] === undefined) {
       props[key] = currentTypeDefaults[key];
@@ -32237,6 +32293,15 @@ const resolveInputProps = (props) => {
   resolveInputProps(props);
 };
 
+// Presets that imply a specific mobile keyboard inputMode.
+const INPUT_MODE_FROM_CHAR_GUARD = {
+  numeric: "numeric",
+  pin: "numeric",
+  card: "numeric",
+  tel: "tel",
+  decimal: "decimal",
+};
+
 const normalizeToDate = (value) => {
   if (value === undefined || value === null) {
     return null;
@@ -32702,7 +32767,7 @@ const RangePseudoElements = ["::-navi-loader"];
 const InputModeResolver = props => {
   const Next = useNextResolver();
   if (props.inputMode === "numeric" || props.inputMode === "decimal") {
-    return jsx(InputModeNumeric, {
+    return jsx(InputModeNumericOrDecimal, {
       ...props
     });
   }
@@ -32710,37 +32775,26 @@ const InputModeResolver = props => {
     ...props
   });
 };
-const InputModeNumeric = props => {
+const InputModeNumericOrDecimal = props => {
   const Next = useNextResolver();
-  const {
-    min,
-    max,
-    step = 1
-  } = props;
-  let maxLength;
-  if (max !== undefined) {
-    const integerDigits = String(Math.floor(max)).length;
-    // If step has decimal places, the value can contain a separator + those digits
-    const stepStr = String(step);
-    const dotIndex = stepStr.indexOf(".");
-    const decimalDigits = dotIndex === -1 ? 0 : stepStr.length - dotIndex - 1;
-    // If min is negative (or unknown and max itself is negative), a "-" sign can appear
-    const canBeNegative = min !== undefined ? min < 0 : max < 0;
-    const signChar = canBeNegative ? 1 : 0;
-    maxLength = signChar + integerDigits + (decimalDigits > 0 ? 1 + decimalDigits : 0);
-  }
   return jsx(Next, {
-    maxLength: maxLength,
     ...props,
     onInput: e => {
       props.onInput?.(e);
       if (e.defaultPrevented) {
         return;
       }
-      if (maxLength === undefined) {
-        return;
-      }
       const input = e.currentTarget;
+      let maxLength;
+      const maxLengthProp = input.maxLength;
+      if (maxLengthProp === -1) {
+        const naviMaxLengthAttr = input.getAttribute("navi-max-length");
+        if (naviMaxLengthAttr === null) {
+          // no max length
+          return;
+        }
+        maxLength = Number(naviMaxLengthAttr);
+      }
       if (input.value.length < maxLength) {
         return;
       }
@@ -33705,18 +33759,6 @@ const InputTextualFirstResolver = props => {
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
   resolveInputProps(props);
-
-  // charGuard → auto inputMode + auto pattern for mobile keyboard hints
-  if (props.charGuard) {
-    if (props.inputMode === undefined) {
-      const autoMode = resolveInputModeFromAllowedChars(props.charGuard);
-      if (autoMode) props.inputMode = autoMode;
-    }
-    if (props.pattern === undefined) {
-      const charClass = resolveCharClass(props.charGuard);
-      props.pattern = `${charClass}*`;
-    }
-  }
   return jsx(Next, {
     ...props
   });
@@ -33732,6 +33774,10 @@ const RealInput = props => {
     // Never set native maxLength — our guard handles it. maxLength stays in
     // inputControlHostProps so form validation constraints still read it.
     maxLength: undefined
+    // But do expose it (needed by navi_input_full event)
+    ,
+
+    "navi-max-length": props.maxLength
   });
 };
 const InputStyleCSSVars = {
@@ -34671,7 +34717,9 @@ const InputDuration = props => {
     uiAction,
     action,
     unitHour,
-    textAlign = "auto"
+    textAlign = "auto",
+    maxLengthGuard,
+    charGuard
   } = props;
   const minDuration = parseDuration(props.min);
   const maxDuration = parseDuration(props.max);
@@ -34799,6 +34847,8 @@ const InputDuration = props => {
     className: "navi_input_duration",
     "data-callout-arrow-x": "center",
     width: "fit-content",
+    flex: true,
+    spacing: "xxs",
     ...groupRootProps,
     unit: undefined,
     unitHour: undefined,
@@ -34818,37 +34868,34 @@ const InputDuration = props => {
       } : {
         defaultValue: initialIsoString
       })
-    }), jsx(Box, {
-      flex: true,
-      spacing: "xxs",
-      width: "fit-content",
-      children: jsx(ControlgroupChildrenWrapper, {
-        ...childrenWrapperProps,
-        name: undefined,
-        children: jsx(InputDurationFields, {
-          showHours: showHours,
-          showMinutes: showMinutes,
-          showSeconds: showSeconds,
-          showMilliseconds: showMilliseconds,
-          minutesReadOnly: minutesReadOnly,
-          secondsReadOnly: secondsReadOnly,
-          millisecondsReadOnly: millisecondsReadOnly,
-          stepHasMilliseconds: stepHasMilliseconds,
-          controlled: hasValue,
-          hourValue: hourValue,
-          minuteValue: minuteValue,
-          secondValue: secondValue,
-          millisecondValue: millisecondValue,
-          minSeconds: minSeconds,
-          maxSeconds: maxSeconds,
-          stepSeconds: stepSeconds,
-          unitHour: unitHour,
-          textAlign: textAlign,
-          required: required,
-          readOnly: readOnly,
-          disabled: disabled,
-          basePseudoState: basePseudoState
-        })
+    }), jsx(ControlgroupChildrenWrapper, {
+      ...childrenWrapperProps,
+      name: undefined,
+      children: jsx(InputDurationFields, {
+        showHours: showHours,
+        showMinutes: showMinutes,
+        showSeconds: showSeconds,
+        showMilliseconds: showMilliseconds,
+        minutesReadOnly: minutesReadOnly,
+        secondsReadOnly: secondsReadOnly,
+        millisecondsReadOnly: millisecondsReadOnly,
+        stepHasMilliseconds: stepHasMilliseconds,
+        controlled: hasValue,
+        hourValue: hourValue,
+        minuteValue: minuteValue,
+        secondValue: secondValue,
+        millisecondValue: millisecondValue,
+        minSeconds: minSeconds,
+        maxSeconds: maxSeconds,
+        stepSeconds: stepSeconds,
+        unitHour: unitHour,
+        textAlign: textAlign,
+        maxLengthGuard: maxLengthGuard,
+        charGuard: charGuard,
+        required: required,
+        readOnly: readOnly,
+        disabled: disabled,
+        basePseudoState: basePseudoState
       })
     })]
   });
@@ -34908,7 +34955,20 @@ const useClipboardProps = groupRef => {
     });
     e.preventDefault();
   };
+  const isFromDurationField = e => {
+    const target = e.target;
+    if (!target.matches) {
+      return false;
+    }
+    if (!target.matches(".navi_duration_part")) {
+      return false;
+    }
+    return true;
+  };
   const onCopy = e => {
+    if (!isFromDurationField(e)) {
+      return;
+    }
     const payload = getClipboardPayload();
     if (!payload) {
       return;
@@ -34918,6 +34978,9 @@ const useClipboardProps = groupRef => {
     e.preventDefault();
   };
   const onCut = e => {
+    if (!isFromDurationField(e)) {
+      return;
+    }
     const payload = getClipboardPayload();
     if (!payload) {
       return;
@@ -34927,6 +34990,9 @@ const useClipboardProps = groupRef => {
     applyToGroup("", e);
   };
   const onPaste = e => {
+    if (!isFromDurationField(e)) {
+      return;
+    }
     const naviData = e.clipboardData.getData("application/x-navi");
     const textData = e.clipboardData.getData("text/plain");
     let isoValue = null;
@@ -35119,10 +35185,12 @@ const InputDurationPart = ({
   return jsxs(Label, {
     flex: "y",
     "data-separator": separator || undefined,
-    children: [jsx(Input
-    // When autofocused this field should be selected
-    // this help to modify the value on mobile
-    , {
+    children: [jsx(Input, {
+      className: "navi_duration_part"
+      // When autofocused this field should be selected
+      // this help to modify the value on mobile
+      ,
+
       autoFocusSelect: true,
       type: "navi_number",
       "navi-input-type": unit,
@@ -35396,6 +35464,7 @@ const Dialog = props => {
         const topOffset = vv.offsetTop;
         const marginTop = availableHeight > dialogHeight ? topOffset + (availableHeight - dialogHeight) / 2 : topOffset;
         dialogEl.style.setProperty("--dialog-top-inset", `${snapToPixel(marginTop)}px`);
+        dispatchCustomEvent(dialogEl, "navi_position_change");
       };
       const onScroll = () => {
         updatePosition();
@@ -37188,7 +37257,7 @@ const createItemTracker = (onChange) => {
   const visibleItemsSignal = signal([]);
   const countSignal = signal(0);
   const visibleCountSignal = signal(0);
-  const matchCountSignal = signal(0);
+  const noMatchCountSignal = signal(0);
 
   let notifyScheduled = false;
   const runNotify = () => {
@@ -37210,7 +37279,7 @@ const createItemTracker = (onChange) => {
       let visibleItemsChanged = false;
       const allItems = [];
       const visibleItems = [];
-      let newMatchCount = 0;
+      let newNoMatchCount = 0;
       for (let i = 0; i < allOrderedKeys.length; i++) {
         const key = allOrderedKeys[i];
         const item = allRegistrations.get(key);
@@ -37219,12 +37288,12 @@ const createItemTracker = (onChange) => {
         if (!allItemsChanged && item !== prevAllItems[i]) {
           allItemsChanged = true;
         }
-        if (!item.filtered && !item.hidden) {
+        if (item.match === false) {
+          newNoMatchCount++;
+        }
+        if (!item.hidden) {
           const visibleIdx = visibleItems.length;
           visibleItems.push(item);
-          if (item.matchScore > 0) {
-            newMatchCount++;
-          }
           if (!visibleItemsChanged && item !== prevVisibleItems[visibleIdx]) {
             visibleItemsChanged = true;
           }
@@ -37246,9 +37315,9 @@ const createItemTracker = (onChange) => {
         visibleItemsSignal.value = visibleItems;
         someChange = true;
       }
-      const matchCountModified = matchCountSignal.peek() !== newMatchCount;
-      if (matchCountModified) {
-        matchCountSignal.value = newMatchCount;
+      const noMatchCountModified = noMatchCountSignal.peek() !== newNoMatchCount;
+      if (noMatchCountModified) {
+        noMatchCountSignal.value = newNoMatchCount;
         someChange = true;
       }
       if (someChange) {
@@ -37447,7 +37516,7 @@ const createItemTracker = (onChange) => {
     visibleItemsSignal,
     countSignal,
     visibleCountSignal,
-    matchCountSignal,
+    noMatchCountSignal,
     _flushSync,
   };
 };
@@ -37514,8 +37583,8 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
       --list-item-outline-color: var(--navi-focus-outline-color);
       /* Focus outline end */
       --list-item-border-color: var(--navi-control-border-color);
-      --list-item-padding-x-default: var(--navi-control-padding-x-default);
-      --list-item-padding-y-default: var(--navi-control-padding-y-default);
+      --list-item-padding-x-default: var(--navi-list-item-padding-x-default);
+      --list-item-padding-y-default: var(--navi-list-item-padding-y-default);
 
       /* Hover (mouse) */
       --list-item-background-color-hover: light-dark(#f5f5f5, #2a2a2a);
@@ -37564,6 +37633,14 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
     }
   }
 
+  .navi_list_container[navi-selectable] {
+    .navi_list_fallback,
+    .navi_list_no_match_fallback {
+      --list-item-padding-x-default: inherit;
+      --list-item-padding-y-default: inherit;
+    }
+  }
+
   .navi_list_item[navi-selectable] {
     --list-item-padding-x-default: inherit;
     --list-item-padding-y-default: inherit;
@@ -37573,6 +37650,13 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
     outline-offset: var(--list-item-outline-offset);
     cursor: var(--x-list-item-cursor);
 
+    .navi_checkbox {
+      --margin: 0;
+    }
+    .navi_radio {
+      --margin: 0;
+    }
+
     &[navi-selectable] {
       user-select: none;
     }
@@ -38184,6 +38268,11 @@ const applySearchHighlight = (el, highlight) => {
 installImportMetaCssBuild(import.meta);const ListItemTrackerContext = createContext(null);
 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)
+//   "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
+const SearchNoMatchModeContext = createContext("remove");
 
 // 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
@@ -38385,6 +38474,14 @@ const css$m = /* css */`
     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);
+
+    &[aria-hidden="true"] {
+      opacity: 0;
+    }
+
+    &[navi-muted] {
+      opacity: 0.35;
+    }
   }
 
   /* Virtual scroll fillers — must remain invisible.
@@ -38410,10 +38507,10 @@ const css$m = /* css */`
      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):
+     still displayed (non-matching items remain in DOM, invisible_and_inert or muted):
        1. Input (sticky header, order: -2)
-       2. matchFallback (order: -1)
-       3. hidden items (regular order, after DOM flow)
+       2. searchFallback (order: -1)
+       3. invisible/dim items (regular order, after DOM flow)
        4. HOT FIX OF THE DEAD for bottom filler + preact issue: order: 1
        5. sticky footer (order: 2)
   */
@@ -38427,12 +38524,39 @@ const css$m = /* css */`
     order: -2;
   }
   .navi_list_fallback,
-  .navi_list_no_match_fallback {
+  .navi_list_search_fallback {
     order: -1;
     color: light-dark(#888, #aaa);
     &[navi-default] {
       display: inline;
-      padding: var(--list-item-padding);
+      padding-top: var(
+        --list-item-padding-top,
+        var(
+          --list-item-padding-y,
+          var(--list-item-padding, var(--list-item-padding-y-default))
+        )
+      );
+      padding-right: var(
+        --list-item-padding-right,
+        var(
+          --list-item-padding-x,
+          var(--list-item-padding, var(--list-item-padding-x-default))
+        )
+      );
+      padding-bottom: var(
+        --list-item-padding-bottom,
+        var(
+          --list-item-padding-y,
+          var(--list-item-padding, var(--list-item-padding-y-default))
+        )
+      );
+      padding-left: var(
+        --list-item-padding-left,
+        var(
+          --list-item-padding-x,
+          var(--list-item-padding, var(--list-item-padding-x-default))
+        )
+      );
       text-align: center;
       user-select: none;
     }
@@ -38506,37 +38630,6 @@ const css$m = /* css */`
     }
   }
 `;
-
-/**
- * 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)
- *   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 ListUI = props => {
   import.meta.css = [css$m, "@jsenv/navi/src/control/list/list.jsx"];
   const {
@@ -38545,7 +38638,7 @@ const ListUI = props => {
     renderBudgetSkipCheck,
     role,
     fallback,
-    noMatchFallback,
+    searchFallback,
     separator,
     children,
     popover,
@@ -38556,6 +38649,7 @@ const ListUI = props => {
     virtualItemSize,
     lockSize,
     searchText,
+    searchNoMatchMode = "remove",
     horizontal,
     spacing,
     ...rest
@@ -38645,8 +38739,8 @@ const ListUI = props => {
     children: jsx(ListContent, {
       role: role,
       fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
+      searchFallback: searchFallback,
+      searchNoMatchMode: searchNoMatchMode,
       separator: separator,
       expandX: expandX,
       expand: expand,
@@ -38670,12 +38764,48 @@ const ListFirstResolver = props => {
     ...props
   });
 };
+/**
+ * List — generic virtualized scroll container.
+ *
+ * Renders children inside a scrollable container with an optional render budget
+ * for virtual scrolling. Items must use <List.Item> to participate in tracking.
+ *
+ * Props:
+ *   selectable           — enables selection: items get aria roles, action/uiAction callbacks,
+ *                          and keyboard navigation (arrow keys, enter, escape).
+ *   action               — called with the selected value when the user confirms a selection.
+ *   uiAction             — called on every interaction (hover, keyboard navigation, confirm).
+ *                          When provided the list tracks hovered/pointed state 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).
+ *                          Enables precise virtual-scroll filler sizing without a DOM
+ *                          measurement pass. Useful when renderBudget is active and
+ *                          all items have the same known height.
+ *   fallback             — content shown when the list has no items at all.
+ *   searchFallback       — content shown when every matchable item (those with a match prop)
+ *                          has match=false. Defaults to a "no results" message.
+ *                          Pass false/null/'' to disable.
+ *   searchText           — current search string, used to trigger scroll-to-top when
+ *                          search becomes active and to drive search highlight.
+ *   searchNoMatchMode    — controls how List.Item behaves when match=false (default "remove"):
+ *                            "remove"              — remove from DOM
+ *                            "invisible_and_inert" — keep in DOM, invisible and non-interactive (preserves layout)
+ *                            "muted"               — keep in DOM, visible but opacified and still interactive
+ *   separator            — element or function(index, { previousItem, currentItem }) inserted between visible items.
+ *   lockSize             — captures the container's dimensions on first render so filtering
+ *                          cannot collapse the layout (sets min-width/min-height).
+ *   horizontal           — lays items out in a row instead of a column.
+ *   spacing              — gap between items (forwarded to Box spacing prop).
+ *   ...rest              — forwarded to the outer container <Box>.
+ */
 const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
 const ListContent = ({
   role,
   fallback,
-  noMatchFallback,
-  searchText,
+  searchFallback,
+  searchNoMatchMode,
   separator,
   expandX,
   expand,
@@ -38693,8 +38823,8 @@ const ListContent = ({
     children: jsx(UnorderedList, {
       role: role,
       fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
+      searchFallback: searchFallback,
+      searchNoMatchMode: searchNoMatchMode,
       separator: separator === true ? jsx(Separator, {
         margin: "0"
       }) : separator,
@@ -39121,8 +39251,8 @@ const UnorderedList = ({
   renderWindow,
   virtualItemSizeSignal,
   fallback,
-  noMatchFallback,
-  searchText,
+  searchFallback,
+  searchNoMatchMode,
   separator,
   horizontal,
   spacing,
@@ -39139,20 +39269,22 @@ const UnorderedList = ({
     children: [jsx(BeforeFiller, {
       virtualItemSizeSignal: virtualItemSizeSignal,
       renderWindowStart: renderWindow.start
-    }), jsx(NoMatchFallback, {
-      noMatchFallback: noMatchFallback,
-      tracker: tracker,
-      searchText: searchText
+    }), jsx(SearchFallback, {
+      searchFallback: searchFallback,
+      tracker: tracker
     }), 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(SearchNoMatchModeContext.Provider, {
+      value: searchNoMatchMode,
+      children: jsx(RenderWindowContext.Provider, {
+        value: renderWindow,
+        children: jsx(SeparatorContext.Provider, {
+          value: separator ?? null,
+          children: jsx(ListItemTrackerContext.Provider, {
+            value: tracker,
+            children: children
+          })
         })
       })
     }), jsx(AfterFiller, {
@@ -39162,31 +39294,33 @@ const UnorderedList = ({
     })]
   });
 };
-const NoMatchFallback = ({
+
+// Show when all matchable items (those with a match prop) are non-matching.
+// The match prop on List.Item signals participation in a matching system
+// (search, filter, etc.). searchFallback appears when every such item has match=false.
+const SearchFallback = ({
   tracker,
-  noMatchFallback,
-  searchText
+  searchFallback
 }) => {
   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");
+  const noMatchCount = tracker.noMatchCountSignal.value;
+  const showMatchFallback = noMatchCount > 0 && noMatchCount === itemCount;
+  if (searchFallback === undefined) {
+    searchFallback = naviI18n("list.no_match");
+  }
+  if (!searchFallback) {
+    // explicitely disabled by user (<List searchFallback={false|null|''}>)
+    return null;
   }
   if (!showMatchFallback) {
     return null;
   }
   return jsx(ListItem, {
     role: "presentation",
-    className: "navi_list_item navi_list_no_match_fallback",
+    className: "navi_list_item navi_list_search_fallback",
     hidden: !showMatchFallback,
-    "navi-default": typeof noMatchFallback === "string" ? "" : undefined,
-    children: noMatchFallback
+    "navi-default": typeof searchFallback === "string" ? "" : undefined,
+    children: searchFallback
   });
 };
 const Fallback = ({
@@ -39291,6 +39425,18 @@ const ListItemUI = props => {
   props.id = props.id || idDefault;
   const renderWindow = useContext(RenderWindowContext);
   const tracker = useContext(ListItemTrackerContext);
+  const searchNoMatchMode = useContext(SearchNoMatchModeContext);
+  // Derive filtered/hidden/nonMatching from the `match` prop + searchNoMatchMode context.
+  // The `match` prop replaces the older `filtered`/`hidden` per-item props.
+  if (props.match === false) {
+    if (searchNoMatchMode === "remove") {
+      props.filtered = true;
+    } else if (searchNoMatchMode === "invisible_and_inert") {
+      props.hidden = true;
+    } else if (searchNoMatchMode === "muted") {
+      props.muted = true;
+    }
+  }
   const item = props;
   const visibleIndex = tracker.useTrackItem(item);
   const groupTracker = useContext(GroupItemTrackerContext);
@@ -39350,6 +39496,7 @@ const ListItemReal = props => {
     ref,
     id,
     hidden,
+    muted,
     highlight,
     children,
     ...rest
@@ -39382,7 +39529,15 @@ const ListItemReal = props => {
     index: undefined,
     selected: undefined,
     matchScore: undefined,
-    hidden: hidden,
+    match: undefined
+    // We use aria-hidden and not hidden because hidden would be forced to
+    // display: none while here we want to keep it in the DOM to avoid layout shift
+    // but visually hidden
+    ,
+
+    "aria-hidden": hidden,
+    inert: hidden ? true : undefined,
+    "navi-muted": muted ? "" : undefined,
     ref: ref,
     children: children
   });
@@ -40454,6 +40609,7 @@ installImportMetaCssBuild(import.meta);const css$i = /* css */`
       outline: none;
       cursor: inherit;
       pointer-events: auto;
+      user-select: all;
 
       &::-webkit-calendar-picker-indicator {
         cursor: inherit;