@lumx/react 4.12.0-next.0 → 4.12.0-next.2

package/index.js

@@ -9,7 +9,7 @@ import ReactDOM__default from 'react-dom';
 import { classNames, onEscapePressed, onEnterPressed as onEnterPressed$1, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/Dpulze-1.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/BvaFEHZn.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
 import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
@@ -25,10 +25,11 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { mdiAlert } from '@lumx/icons/esm/alert.js';
-import { mdiInformation } from '@lumx/icons/esm/information.js';
+import { getWithSelector as getWithSelector$1 } from '@lumx/core/js/utils/selectors';
 import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
+import { mdiAlert } from '@lumx/icons/esm/alert.js';
+import { mdiInformation } from '@lumx/icons/esm/information.js';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
 import { mdiCheck } from '@lumx/icons/esm/check.js';
 import { mdiMinus } from '@lumx/icons/esm/minus.js';
@@ -528,6 +529,24 @@ const getWithSelector = (selector, object) => {
   return String(object);
 };
 
+/**
+ * Equivalent to `lodash/groupBy` but returns a `Map` of groups items (instead of an object)
+ * (has the major advantage to not forcing the keys to be string!)
+ */
+function groupBySelector(array, selector) {
+  const groups = new Map();
+  for (const item of array) {
+    const key = getWithSelector(selector, item);
+    let group = groups.get(key);
+    if (!group) {
+      group = [];
+      groups.set(key, group);
+    }
+    group.push(item);
+  }
+  return groups;
+}
+
 /**
  * Associative map from message kind to color and icon.
  */
@@ -553,15 +572,15 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'AlertDialog';
+const COMPONENT_NAME$1y = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1v = 'lumx-alert-dialog';
+const CLASSNAME$1w = 'lumx-alert-dialog';
 const {
   block: block$18
-} = bem(CLASSNAME$1v);
+} = bem(CLASSNAME$1w);
 
 /**
  * Component default props.
@@ -727,8 +746,8 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1x;
-AlertDialog.className = CLASSNAME$1v;
+AlertDialog.displayName = COMPONENT_NAME$1y;
+AlertDialog.className = CLASSNAME$1w;
 AlertDialog.defaultProps = DEFAULT_PROPS$1g;
 
 /**
@@ -821,12 +840,12 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'Autocomplete';
+const COMPONENT_NAME$1x = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-autocomplete';
+const CLASSNAME$1v = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -842,6 +861,7 @@ const DEFAULT_PROPS$1f = {
 /**
  * Autocomplete component.
  *
+ * @deprecated use `SelectTextField` instead
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -893,7 +913,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1u),
+    className: classNames.join(className, CLASSNAME$1v),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -933,19 +953,19 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1w;
-Autocomplete.className = CLASSNAME$1u;
+Autocomplete.displayName = COMPONENT_NAME$1x;
+Autocomplete.className = CLASSNAME$1v;
 Autocomplete.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1v = 'AutocompleteMultiple';
+const COMPONENT_NAME$1w = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1t = 'lumx-autocomplete-multiple';
+const CLASSNAME$1u = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -972,7 +992,8 @@ const DEFAULT_PROPS$1e = {
 
 /**
  * AutocompleteMultiple component.
- *
+
+ * @deprecated use `SelectTextField` instead
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -1025,7 +1046,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1t),
+    className: classNames.join(className, CLASSNAME$1u),
     name: name,
     value: value,
     onChange: onChange,
@@ -1058,23 +1079,23 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1v;
-AutocompleteMultiple.className = CLASSNAME$1t;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1w;
+AutocompleteMultiple.className = CLASSNAME$1u;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1u = 'Avatar';
+const COMPONENT_NAME$1v = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1s = 'lumx-avatar';
+const CLASSNAME$1t = 'lumx-avatar';
 const {
   block: block$17,
   element: element$Q
-} = bem(CLASSNAME$1s);
+} = bem(CLASSNAME$1t);
 
 /**
  * Component default props.
@@ -1165,22 +1186,22 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1u;
-Avatar.className = CLASSNAME$1s;
+Avatar.displayName = COMPONENT_NAME$1v;
+Avatar.className = CLASSNAME$1t;
 Avatar.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1t = 'Badge';
+const COMPONENT_NAME$1u = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1r = 'lumx-badge';
+const CLASSNAME$1s = 'lumx-badge';
 const {
   block: block$16
-} = bem(CLASSNAME$1r);
+} = bem(CLASSNAME$1s);
 
 /**
  * Component default props.
@@ -1212,8 +1233,8 @@ const Badge$1 = props => {
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1t;
-Badge$1.className = CLASSNAME$1r;
+Badge$1.displayName = COMPONENT_NAME$1u;
+Badge$1.className = CLASSNAME$1s;
 Badge$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
@@ -1237,12 +1258,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1s = 'BadgeWrapper';
-const CLASSNAME$1q = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1t = 'BadgeWrapper';
+const CLASSNAME$1r = 'lumx-badge-wrapper';
 const {
   block: block$15,
   element: element$P
-} = bem(CLASSNAME$1q);
+} = bem(CLASSNAME$1r);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1268,8 +1289,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1s;
-BadgeWrapper.className = CLASSNAME$1q;
+BadgeWrapper.displayName = COMPONENT_NAME$1t;
+BadgeWrapper.className = CLASSNAME$1r;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1319,7 +1340,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1r = 'ButtonRoot';
+const COMPONENT_NAME$1s = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1417,7 +1438,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1r;
+ButtonRoot.displayName = COMPONENT_NAME$1s;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1427,15 +1448,15 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1q = 'Button';
+const COMPONENT_NAME$1r = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1p = 'lumx-button';
+const CLASSNAME$1q = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1p);
+} = bem(CLASSNAME$1q);
 
 /**
  * Component default props.
@@ -1472,8 +1493,8 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1q;
-Button$1.className = CLASSNAME$1p;
+Button$1.displayName = COMPONENT_NAME$1r;
+Button$1.className = CLASSNAME$1q;
 Button$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
@@ -1547,21 +1568,21 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1q;
-Button.className = CLASSNAME$1p;
+Button.displayName = COMPONENT_NAME$1r;
+Button.className = CLASSNAME$1q;
 Button.defaultProps = DEFAULT_PROPS$1b;
 
-const COMPONENT_NAME$1p = 'Icon';
+const COMPONENT_NAME$1q = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1o = IconClassName;
+const CLASSNAME$1p = IconClassName;
 const {
   block: block$14
-} = bem(CLASSNAME$1o);
+} = bem(CLASSNAME$1p);
 
 /**
  * Component default props.
@@ -1644,19 +1665,19 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1p;
-Icon$1.className = CLASSNAME$1o;
+Icon$1.displayName = COMPONENT_NAME$1q;
+Icon$1.className = CLASSNAME$1p;
 Icon$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1o = 'IconButton';
+const COMPONENT_NAME$1p = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1n = 'lumx-icon-button';
+const CLASSNAME$1o = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1697,8 +1718,8 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1o;
-IconButton$1.className = CLASSNAME$1n;
+IconButton$1.displayName = COMPONENT_NAME$1p;
+IconButton$1.className = CLASSNAME$1o;
 IconButton$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -1742,19 +1763,19 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1o;
-IconButton.className = CLASSNAME$1n;
+IconButton.displayName = COMPONENT_NAME$1p;
+IconButton.className = CLASSNAME$1o;
 IconButton.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'ButtonGroup';
+const COMPONENT_NAME$1o = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1m = 'lumx-button-group';
+const CLASSNAME$1n = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1775,12 +1796,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1m),
+    className: classnames(className, CLASSNAME$1n),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1n;
-ButtonGroup$1.className = CLASSNAME$1m;
+ButtonGroup$1.displayName = COMPONENT_NAME$1o;
+ButtonGroup$1.className = CLASSNAME$1n;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
@@ -1796,16 +1817,16 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1n;
-ButtonGroup.className = CLASSNAME$1m;
+ButtonGroup.displayName = COMPONENT_NAME$1o;
+ButtonGroup.className = CLASSNAME$1n;
 ButtonGroup.defaultProps = DEFAULT_PROPS$18;
 
-const COMPONENT_NAME$1m = 'InputLabel';
+const COMPONENT_NAME$1n = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1l = InputLabelClassName;
+const CLASSNAME$1m = InputLabelClassName;
 const {
   block: block$13
-} = bem(CLASSNAME$1l);
+} = bem(CLASSNAME$1m);
 const DEFAULT_PROPS$17 = {};
 
 /**
@@ -1834,8 +1855,8 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1m;
-InputLabel$1.className = CLASSNAME$1l;
+InputLabel$1.displayName = COMPONENT_NAME$1n;
+InputLabel$1.className = CLASSNAME$1m;
 InputLabel$1.defaultProps = DEFAULT_PROPS$17;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1850,17 +1871,17 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1l = 'InputHelper';
+const COMPONENT_NAME$1m = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1k = InputHelperClassName;
+const CLASSNAME$1l = InputHelperClassName;
 const {
   block: block$12
-} = bem(CLASSNAME$1k);
+} = bem(CLASSNAME$1l);
 
 /**
  * Component default props.
@@ -1894,8 +1915,8 @@ function InputHelper$1(props) {
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1l;
-InputHelper$1.className = CLASSNAME$1k;
+InputHelper$1.displayName = COMPONENT_NAME$1m;
+InputHelper$1.className = CLASSNAME$1l;
 InputHelper$1.defaultProps = DEFAULT_PROPS$16;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1907,16 +1928,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Checkbox';
+const COMPONENT_NAME$1l = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-checkbox';
+const CLASSNAME$1k = 'lumx-checkbox';
 const {
   block: block$11,
   element: element$O
-} = bem(CLASSNAME$1j);
+} = bem(CLASSNAME$1k);
 
 /**
  * Checkbox component.
@@ -2071,8 +2092,8 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1k;
-Checkbox.className = CLASSNAME$1j;
+Checkbox.displayName = COMPONENT_NAME$1l;
+Checkbox.className = CLASSNAME$1k;
 Checkbox.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -2094,16 +2115,16 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Chip';
+const COMPONENT_NAME$1k = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-chip';
+const CLASSNAME$1j = 'lumx-chip';
 const {
   block: block$10,
   element: element$N
-} = bem(CLASSNAME$1i);
+} = bem(CLASSNAME$1j);
 
 /**
  * Component default props.
@@ -2255,19 +2276,19 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1j;
-Chip.className = CLASSNAME$1i;
+Chip.displayName = COMPONENT_NAME$1k;
+Chip.className = CLASSNAME$1j;
 Chip.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'ChipGroup';
+const COMPONENT_NAME$1j = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-chip-group';
+const CLASSNAME$1i = 'lumx-chip-group';
 
 /**
  * Component default props.
@@ -2290,7 +2311,7 @@ const ChipGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1h),
+    className: classnames(className, CLASSNAME$1i),
     children: children
   });
 };
@@ -2368,8 +2389,8 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1i;
-InternalChipGroup.className = CLASSNAME$1h;
+InternalChipGroup.displayName = COMPONENT_NAME$1j;
+InternalChipGroup.className = CLASSNAME$1i;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$13;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2378,16 +2399,16 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'SelectionChipGroup';
+const COMPONENT_NAME$1i = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-selection-chip-group';
+const CLASSNAME$1h = 'lumx-selection-chip-group';
 const {
   block: block$$,
   element: element$M
-} = bem(CLASSNAME$1g);
+} = bem(CLASSNAME$1h);
 
 /**
  * SelectionChipGroup component.
@@ -2483,10 +2504,10 @@ function createSelectorTreeWalker(container, selector) {
 }
 
 /** CSS selector for enabled chips (not aria-disabled). */
-const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1i}:not([aria-disabled="true"])`;
+const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1j}:not([aria-disabled="true"])`;
 
 /** Find the closest chip element from an event target. */
-const getChip = target => target?.closest?.(`.${CLASSNAME$1i}`) || null;
+const getChip = target => target?.closest?.(`.${CLASSNAME$1j}`) || null;
 
 /**
  * Options for setting up selection chip group event handlers.
@@ -2684,15 +2705,15 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'Text';
+const COMPONENT_NAME$1h = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-text';
+const CLASSNAME$1g = 'lumx-text';
 const {
   block: block$_
-} = bem(CLASSNAME$1f);
+} = bem(CLASSNAME$1g);
 
 /**
  * Component default props.
@@ -2782,8 +2803,8 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1g;
-Text.className = CLASSNAME$1f;
+Text.displayName = COMPONENT_NAME$1h;
+Text.className = CLASSNAME$1g;
 Text.defaultProps = DEFAULT_PROPS$12;
 
 /**
@@ -4876,16 +4897,16 @@ const DEFAULT_PROPS$11 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'Tooltip';
+const COMPONENT_NAME$1g = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-tooltip';
+const CLASSNAME$1f = 'lumx-tooltip';
 const {
   block: block$Z,
   element: element$L
-} = bem(CLASSNAME$1e);
+} = bem(CLASSNAME$1f);
 
 /**
  * Props for the TooltipPopup rendering component.
@@ -4934,8 +4955,8 @@ const TooltipPopup = props => {
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1f;
-TooltipPopup.className = CLASSNAME$1e;
+TooltipPopup.displayName = COMPONENT_NAME$1g;
+TooltipPopup.className = CLASSNAME$1f;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -5297,8 +5318,8 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1f;
-Tooltip.className = CLASSNAME$1e;
+Tooltip.displayName = COMPONENT_NAME$1g;
+Tooltip.className = CLASSNAME$1f;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
 /**
@@ -6177,8 +6198,8 @@ const SelectionChipGroup = ({
   }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
     containerRef: container,
-    itemSelector: `.${CLASSNAME$1i}`,
-    itemDisabledSelector: `.${CLASSNAME$1i}[aria-disabled="true"]`
+    itemSelector: `.${CLASSNAME$1j}`,
+    itemDisabledSelector: `.${CLASSNAME$1j}[aria-disabled="true"]`
   });
 
   // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
@@ -6218,8 +6239,8 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1h;
-SelectionChipGroup.className = CLASSNAME$1g;
+SelectionChipGroup.displayName = COMPONENT_NAME$1i;
+SelectionChipGroup.className = CLASSNAME$1h;
 
 /**
  * Get the value for a combobox option element.
@@ -6442,17 +6463,17 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** AbortController for all structural event listeners. */
   let abortController = null;
 
-  /** Last notified isEmpty state, to avoid redundant `emptyChange` notifications. */
-  let lastIsEmpty = true;
+  /** Last notified visible option count, to avoid redundant `optionsChange` notifications. */
+  let lastOptionsLength = 0;
 
-  /** Last notified input value, to re-fire `emptyChange` when the user keeps typing while empty. */
+  /** Last notified input value, to re-fire `optionsChange` when the user keeps typing while empty. */
   let lastInputValue = '';
 
   /** Event subscribers managed by the handle. */
   const subscribers = {
     open: new Set(),
     activeDescendantChange: new Set(),
-    emptyChange: new Set(),
+    optionsChange: new Set(),
     loadingChange: new Set(),
     loadingAnnouncement: new Set()
   };
@@ -6463,7 +6484,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   }
 
   /**
-   * Notify all registered sections and fire `emptyChange` if the visible option count changed
+   * Notify all registered sections and fire `optionsChange` if the visible option count changed
    * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
    * the updated query string).
    * Called whenever the set of visible options may have changed (option register/unregister, filter change).
@@ -6476,13 +6497,13 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     for (const reg of optionRegistrations.values()) {
       if (!reg.lastFiltered) visibleCount += 1;
     }
-    const isEmpty = visibleCount === 0;
     const inputValue = trigger?.value ?? '';
-    if (isEmpty !== lastIsEmpty || isEmpty && inputValue !== lastInputValue) {
-      lastIsEmpty = isEmpty;
+    const isEmpty = visibleCount === 0;
+    if (visibleCount !== lastOptionsLength || isEmpty && inputValue !== lastInputValue) {
+      lastOptionsLength = visibleCount;
       lastInputValue = inputValue;
-      notify('emptyChange', {
-        isEmpty,
+      notify('optionsChange', {
+        optionsLength: visibleCount,
         inputValue
       });
     }
@@ -6730,15 +6751,15 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       trigger?.setAttribute('aria-expanded', String(isOpen));
       notify('open', isOpen);
 
-      // When opening, always notify the current empty state so that
+      // When opening, always notify the current options state so that
       // subscribers (ComboboxState) get the correct initial value.
-      // Without this, a list that starts empty never fires `emptyChange`
-      // because `lastIsEmpty` is initialized to `true` and `notifyVisibilityChange`
+      // Without this, a list that starts empty never fires `optionsChange`
+      // because `lastOptionsLength` is initialized to `0` and `notifyVisibilityChange`
       // only fires on *changes*.
       if (isOpen) {
         const inputValue = trigger?.value ?? '';
-        notify('emptyChange', {
-          isEmpty: lastIsEmpty,
+        notify('optionsChange', {
+          optionsLength: lastOptionsLength,
           inputValue
         });
       }
@@ -6778,6 +6799,18 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       }
       notifyVisibilityChange();
     },
+    refilterOption(element) {
+      const reg = optionRegistrations.get(element);
+      if (!reg) return;
+      const filterLower = filterValue.toLowerCase();
+      const text = getOptionValue(element).toLowerCase();
+      const isFiltered = filterLower.length > 0 && !text.includes(filterLower);
+      if (isFiltered !== reg.lastFiltered) {
+        reg.lastFiltered = isFiltered;
+        reg.callback(isFiltered);
+        notifyVisibilityChange();
+      }
+    },
     registerSection(element, callback) {
       sectionRegistrations.set(element, {
         callback,
@@ -6857,7 +6890,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       trigger = null;
       listbox = null;
       filterValue = '';
-      lastIsEmpty = true;
+      lastOptionsLength = 0;
       lastInputValue = '';
       optionRegistrations.clear();
       sectionRegistrations.clear();
@@ -7095,12 +7128,12 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ComboboxButton';
+const COMPONENT_NAME$1f = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-combobox-button';
+const CLASSNAME$1e = 'lumx-combobox-button';
 
 /**
  * ComboboxButton core template.
@@ -7144,7 +7177,7 @@ const ComboboxButton$1 = (props, {
     children: /*#__PURE__*/jsx(Button, {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, CLASSNAME$1d),
+      className: classnames(className, CLASSNAME$1e),
       role: "combobox",
       "aria-controls": listboxId,
       "aria-haspopup": "listbox",
@@ -7275,8 +7308,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1e,
-  className: CLASSNAME$1d
+  displayName: COMPONENT_NAME$1f,
+  className: CLASSNAME$1e
 });
 
 /** Options for configuring the input-mode combobox controller. */
@@ -7435,12 +7468,12 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'ComboboxInput';
+const COMPONENT_NAME$1e = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-combobox-input';
+const CLASSNAME$1d = 'lumx-combobox-input';
 
 /**
  * ComboboxInput core template.
@@ -7503,22 +7536,22 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'TextField';
+const COMPONENT_NAME$1d = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-text-field';
+const CLASSNAME$1c = 'lumx-text-field';
 
 /**
  * Input native element class name.
  */
-const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1b}__input-native`;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1c}__input-native`;
 
 const {
   block: block$Y,
   element: element$K
-} = bem(CLASSNAME$1b);
+} = bem(CLASSNAME$1c);
 
 /**
  * Defines the props of the component.
@@ -8023,8 +8056,8 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1c;
-TextField.className = CLASSNAME$1b;
+TextField.displayName = COMPONENT_NAME$1d;
+TextField.className = CLASSNAME$1c;
 TextField.defaultProps = DEFAULT_PROPS$Z;
 
 /**
@@ -8102,21 +8135,21 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1d;
-ComboboxInput.className = CLASSNAME$1c;
+ComboboxInput.displayName = COMPONENT_NAME$1e;
+ComboboxInput.className = CLASSNAME$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'List';
+const COMPONENT_NAME$1c = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-list';
+const CLASSNAME$1b = 'lumx-list';
 const {
   block: block$V
-} = bem(CLASSNAME$1a);
+} = bem(CLASSNAME$1b);
 
 /**
  * Component default props.
@@ -8146,8 +8179,8 @@ const List$1 = props => {
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1b;
-List$1.className = CLASSNAME$1a;
+List$1.displayName = COMPONENT_NAME$1c;
+List$1.className = CLASSNAME$1b;
 List$1.defaultProps = DEFAULT_PROPS$Y;
 
 /**
@@ -8163,12 +8196,12 @@ List$1.defaultProps = DEFAULT_PROPS$Y;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ComboboxList';
+const COMPONENT_NAME$1b = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-combobox-list';
+const CLASSNAME$1a = 'lumx-combobox-list';
 
 /**
  * ComboboxList core template.
@@ -8190,7 +8223,7 @@ const ComboboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$19),
+    className: classnames(className, CLASSNAME$1a),
     ref,
     itemPadding: 'big',
     id,
@@ -8275,22 +8308,22 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1a;
-ComboboxList.className = CLASSNAME$19;
+ComboboxList.displayName = COMPONENT_NAME$1b;
+ComboboxList.className = CLASSNAME$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'ListItem';
+const COMPONENT_NAME$1a = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-list-item';
+const CLASSNAME$19 = 'lumx-list-item';
 const {
   block: block$U,
   element: element$J
-} = bem(CLASSNAME$18);
+} = bem(CLASSNAME$19);
 
 /**
  * Component default props.
@@ -8357,8 +8390,8 @@ const ListItem$1 = props => {
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$19;
-ListItem$1.className = CLASSNAME$18;
+ListItem$1.displayName = COMPONENT_NAME$1a;
+ListItem$1.className = CLASSNAME$19;
 ListItem$1.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -8368,12 +8401,12 @@ ListItem$1.defaultProps = DEFAULT_PROPS$X;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ListItemAction';
+const COMPONENT_NAME$19 = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$17 = 'lumx-action-area__action';
+const CLASSNAME$18 = 'lumx-action-area__action';
 const DEFAULT_PROPS$W = {};
 
 /**
@@ -8407,16 +8440,16 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'ComboboxOption';
+const COMPONENT_NAME$18 = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-combobox-option';
+const CLASSNAME$17 = 'lumx-combobox-option';
 const {
   block: block$T,
   element: element$I
-} = bem(CLASSNAME$16);
+} = bem(CLASSNAME$17);
 
 /**
  * ComboboxOption core template.
@@ -8563,6 +8596,13 @@ const ComboboxOption = forwardRef((props, ref) => {
     return handle.registerOption(element, setIsFiltered);
   }, [handle]);
 
+  // Re-evaluate filter state when the option value changes.
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element || !handle) return;
+    handle.refilterOption(element);
+  }, [handle, value]);
+
   // Wrap `after` content in an option context so sub-components (e.g. OptionMoreInfo)
   // can access the parent option's ID for keyboard highlight detection.
   const optionContextValue = useMemo(() => ({
@@ -8593,8 +8633,8 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$17;
-ComboboxOption.className = CLASSNAME$16;
+ComboboxOption.displayName = COMPONENT_NAME$18;
+ComboboxOption.className = CLASSNAME$17;
 
 /**
  * Defines the props for the core ComboboxOptionAction template.
@@ -8603,12 +8643,12 @@ ComboboxOption.className = CLASSNAME$16;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ComboboxOptionAction';
+const COMPONENT_NAME$17 = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-combobox-option-action';
+const CLASSNAME$16 = 'lumx-combobox-option-action';
 
 /**
  * ComboboxOptionAction core template.
@@ -8631,7 +8671,7 @@ const ComboboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$15),
+    className: classnames(className, CLASSNAME$16),
     handleClick,
     children
   });
@@ -8681,23 +8721,23 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$16,
-  className: CLASSNAME$15
+  displayName: COMPONENT_NAME$17,
+  className: CLASSNAME$16
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$16 = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-combobox-option-more-info';
+const CLASSNAME$15 = 'lumx-combobox-option-more-info';
 const {
   block: block$S,
   element: element$H
-} = bem(CLASSNAME$14);
+} = bem(CLASSNAME$15);
 
 /**
  * ComboboxOptionMoreInfo core template.
@@ -8936,16 +8976,16 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'Popover';
+const COMPONENT_NAME$15 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-popover';
+const CLASSNAME$14 = 'lumx-popover';
 const {
   block: block$R,
   element: element$G
-} = bem(CLASSNAME$13);
+} = bem(CLASSNAME$14);
 
 /**
  * Component default props (used by framework wrappers).
@@ -9397,7 +9437,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$14;
+_InnerPopover.displayName = COMPONENT_NAME$15;
 
 /**
  * Popover component.
@@ -9409,8 +9449,8 @@ _InnerPopover.displayName = COMPONENT_NAME$14;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$14;
-Popover.className = CLASSNAME$13;
+Popover.displayName = COMPONENT_NAME$15;
+Popover.className = CLASSNAME$14;
 Popover.defaultProps = DEFAULT_PROPS$V;
 
 /**
@@ -9473,22 +9513,22 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$15;
-ComboboxOptionMoreInfo.className = CLASSNAME$14;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$16;
+ComboboxOptionMoreInfo.className = CLASSNAME$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'SkeletonTypography';
+const COMPONENT_NAME$14 = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-skeleton-typography';
+const CLASSNAME$13 = 'lumx-skeleton-typography';
 const {
   block: block$Q,
   element: element$F
-} = bem(CLASSNAME$12);
+} = bem(CLASSNAME$13);
 
 /**
  * SkeletonTypography component.
@@ -9527,12 +9567,12 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$13 = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-combobox-option-skeleton';
+const CLASSNAME$12 = 'lumx-combobox-option-skeleton';
 
 /**
  * ComboboxOptionSkeleton core template.
@@ -9559,7 +9599,7 @@ const ComboboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$11),
+    className: classnames(className, CLASSNAME$12),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -9612,19 +9652,19 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$12;
-ComboboxOptionSkeleton.className = CLASSNAME$11;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$13;
+ComboboxOptionSkeleton.className = CLASSNAME$12;
 
-const COMPONENT_NAME$11 = 'ComboboxPopover';
+const COMPONENT_NAME$12 = 'ComboboxPopover';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$10 = 'lumx-combobox-popover';
+const CLASSNAME$11 = 'lumx-combobox-popover';
 const {
   block: block$P,
   element: element$E
-} = bem(CLASSNAME$10);
+} = bem(CLASSNAME$11);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -9687,15 +9727,15 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'FlexBox';
+const COMPONENT_NAME$11 = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-flex-box';
+const CLASSNAME$10 = 'lumx-flex-box';
 const {
   block: block$O
-} = bem(CLASSNAME$$);
+} = bem(CLASSNAME$10);
 
 /**
  * Get FlexBox component props (className computation).
@@ -9751,8 +9791,8 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$10;
-FlexBox.className = CLASSNAME$$;
+FlexBox.displayName = COMPONENT_NAME$11;
+FlexBox.className = CLASSNAME$10;
 
 /**
  * Props for Popover that can be passed to Combobox.Popover.
@@ -9790,8 +9830,8 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$11;
-ComboboxPopover.className = CLASSNAME$10;
+ComboboxPopover.displayName = COMPONENT_NAME$12;
+ComboboxPopover.className = CLASSNAME$11;
 
 /**
  * Combobox.Provider component.
@@ -9804,7 +9844,8 @@ ComboboxPopover.className = CLASSNAME$10;
  */
 function ComboboxProvider(props) {
   const {
-    children
+    children,
+    onOpen
   } = props;
   const listboxId = useId();
   const anchorRef = useRef(null);
@@ -9815,6 +9856,16 @@ function ComboboxProvider(props) {
     listboxId,
     anchorRef
   }), [handle, listboxId]);
+
+  // Subscribe to the combobox open event and forward to the onOpen callback.
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  useEffect(() => {
+    if (!handle) return undefined;
+    return handle.subscribe('open', isOpen => {
+      onOpenRef.current?.(isOpen);
+    });
+  }, [handle]);
   return /*#__PURE__*/jsx(ComboboxContext.Provider, {
     value: contextValue,
     children: children
@@ -9825,12 +9876,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ComboboxSection';
+const COMPONENT_NAME$10 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-combobox-section';
+const CLASSNAME$$ = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -9857,7 +9908,7 @@ const ComboboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$_) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$$) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -9869,16 +9920,16 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'ListSection';
+const COMPONENT_NAME$$ = 'ListSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-list-section';
+const CLASSNAME$_ = 'lumx-list-section';
 const {
   block: block$N,
   element: element$D
-} = bem(CLASSNAME$Z);
+} = bem(CLASSNAME$_);
 
 /**
  * Component default props.
@@ -9925,8 +9976,8 @@ const ListSection$1 = props => {
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$_;
-ListSection$1.className = CLASSNAME$Z;
+ListSection$1.displayName = COMPONENT_NAME$$;
+ListSection$1.className = CLASSNAME$_;
 ListSection$1.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -9949,8 +10000,8 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$_;
-ListSection.className = CLASSNAME$Z;
+ListSection.displayName = COMPONENT_NAME$$;
+ListSection.className = CLASSNAME$_;
 ListSection.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -9999,21 +10050,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$$;
-ComboboxSection.className = CLASSNAME$_;
+ComboboxSection.displayName = COMPONENT_NAME$10;
+ComboboxSection.className = CLASSNAME$$;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'ComboboxState';
+const COMPONENT_NAME$_ = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-combobox-state';
+const CLASSNAME$Z = 'lumx-combobox-state';
 const {
   block: block$M
-} = bem(CLASSNAME$Y);
+} = bem(CLASSNAME$Z);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -10025,12 +10076,13 @@ const {
 
 /**
  * ComboboxState core template.
- * Renders empty/error state messages inside the combobox popover.
+ * Renders empty/error/option-count state messages inside the combobox popover.
  * The block itself acts as a screen reader live region (`role="status" aria-live="polite"`).
  *
  * Activation rules:
  * - Error state: active when `errorMessage` is provided (presence-based).
- * - Empty state: active when `isEmpty` is true and `emptyMessage` is provided, and there is no error.
+ * - Empty state: active when `optionsLength` is 0 and `emptyMessage` is provided, and there is no error.
+ * - Option count: active when `nbOptionMessage` is provided, the list is not empty, not loading, and not in error.
  *
  * @param props Component props.
  * @param components Injected framework-specific components.
@@ -10042,20 +10094,25 @@ const ComboboxState$1 = (props, {
 }) => {
   const {
     emptyMessage,
+    nbOptionMessage,
     errorMessage,
     errorTryReloadMessage,
     loadingMessage,
     state
   } = props;
   const isOpen = state?.isOpen ?? true;
+  const optionsLength = state?.optionsLength ?? 0;
+  const isEmpty = optionsLength === 0;
   const showError = !!errorMessage;
   const resolvedEmptyMessage = typeof emptyMessage === 'function' ? emptyMessage(state?.inputValue || '') : emptyMessage;
   // Suppress empty while loading (immediate flag prevents false "no results" before data arrives)
-  const showEmpty = state?.isEmpty && !showError && !state?.isLoading && !!resolvedEmptyMessage;
+  const showEmpty = isEmpty && !showError && !state?.isLoading && !!resolvedEmptyMessage;
   // Show loading message when provided and not in error state.
   // The framework wrapper gates `loadingMessage` via the debounced `loadingAnnouncement` event,
   // passing `undefined` until the 500ms threshold is reached.
   const showLoading = !showError && !!loadingMessage;
+  // Show option count message when the list is open, not empty, not loading, and not in error.
+  const resolvedNbOptionMessage = !isEmpty && !showError && !state?.isLoading && nbOptionMessage ? nbOptionMessage(optionsLength) : undefined;
   const show = showEmpty || showError;
   const alignProps = {
     hAlign: 'center',
@@ -10084,6 +10141,11 @@ const ComboboxState$1 = (props, {
       typography: "body1",
       color: "dark-L2",
       children: loadingMessage
+    }), renderContent && !!resolvedNbOptionMessage && /*#__PURE__*/jsx(Text, {
+      as: "p",
+      typography: "body1",
+      color: "dark-L2",
+      children: resolvedNbOptionMessage
     }), renderContent && !!errorMessage && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Text, {
         as: "p",
@@ -10175,16 +10237,16 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'GenericBlock';
+const COMPONENT_NAME$Z = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-generic-block';
+const CLASSNAME$Y = 'lumx-generic-block';
 const {
   block: block$L,
   element: element$C
-} = bem(CLASSNAME$X);
+} = bem(CLASSNAME$Y);
 
 /**
  * Component default props.
@@ -10326,8 +10388,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$Y;
-BaseGenericBlock.className = CLASSNAME$X;
+BaseGenericBlock.displayName = COMPONENT_NAME$Z;
+BaseGenericBlock.className = CLASSNAME$Y;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$T;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
@@ -10367,6 +10429,8 @@ const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'hug
  *   mounted for at least 500ms. Suppresses the empty state while loading.
  * - **Empty state**: active when `emptyMessage` is provided and the list has no visible options
  *   and is not loading.
+ * - **Option count**: active when `nbOptionMessage` is provided and the list is not empty,
+ *   not loading, and not in error.
  *
  * @param props Component props.
  * @return React element.
@@ -10375,7 +10439,7 @@ const ComboboxState = props => {
   const {
     handle
   } = useComboboxContext();
-  const emptyState = useComboboxEvent('emptyChange', undefined);
+  const optionsState = useComboboxEvent('optionsChange', undefined);
   const [isLoading, setIsLoading] = useState(false);
   const [shouldAnnounce, setShouldAnnounce] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -10388,7 +10452,7 @@ const ComboboxState = props => {
     });
   }, [handle]);
   const state = {
-    ...emptyState,
+    ...optionsState,
     isLoading,
     isOpen
   };
@@ -10404,18 +10468,18 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$Z;
-ComboboxState.className = CLASSNAME$Y;
+ComboboxState.displayName = COMPONENT_NAME$_;
+ComboboxState.className = CLASSNAME$Z;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'ListDivider';
+const COMPONENT_NAME$Y = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-list-divider';
+const CLASSNAME$X = 'lumx-list-divider';
 
 /**
  * Component default props.
@@ -10439,11 +10503,11 @@ const ListDivider$1 = props => {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$W)
+    className: classnames(className, CLASSNAME$X)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$X;
-ListDivider$1.className = CLASSNAME$W;
+ListDivider$1.displayName = COMPONENT_NAME$Y;
+ListDivider$1.className = CLASSNAME$X;
 ListDivider$1.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10464,8 +10528,8 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$X;
-ListDivider.className = CLASSNAME$W;
+ListDivider.displayName = COMPONENT_NAME$Y;
+ListDivider.className = CLASSNAME$X;
 ListDivider.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10515,16 +10579,16 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'CommentBlock';
+const COMPONENT_NAME$X = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-comment-block';
+const CLASSNAME$W = 'lumx-comment-block';
 const {
   block: block$K,
   element: element$B
-} = classNames.bem(CLASSNAME$V);
+} = classNames.bem(CLASSNAME$W);
 
 /**
  * Component default props.
@@ -10626,8 +10690,8 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$W;
-CommentBlock.className = CLASSNAME$V;
+CommentBlock.displayName = COMPONENT_NAME$X;
+CommentBlock.className = CLASSNAME$W;
 CommentBlock.defaultProps = DEFAULT_PROPS$R;
 
 /**
@@ -10648,12 +10712,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'DatePicker';
+const COMPONENT_NAME$W = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-date-picker';
+const CLASSNAME$V = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -10873,7 +10937,7 @@ function formatDayNumber(locale, date) {
 
 const {
   element: element$A
-} = classNames.bem(CLASSNAME$U);
+} = classNames.bem(CLASSNAME$V);
 
 /**
  * Defines the props of the component.
@@ -10882,7 +10946,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'DatePickerControlled';
+const COMPONENT_NAME$V = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -10967,7 +11031,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$U}`,
+    className: `${CLASSNAME$V}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
       className: element$A('toolbar'),
@@ -11072,8 +11136,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$U;
-DatePickerControlled.className = CLASSNAME$U;
+DatePickerControlled.displayName = COMPONENT_NAME$V;
+DatePickerControlled.className = CLASSNAME$V;
 
 /**
  * DatePicker component.
@@ -11115,8 +11179,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$V;
-DatePicker.className = CLASSNAME$U;
+DatePicker.displayName = COMPONENT_NAME$W;
+DatePicker.className = CLASSNAME$V;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -11129,7 +11193,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'DatePickerField';
+const COMPONENT_NAME$U = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11218,7 +11282,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$T;
+DatePickerField.displayName = COMPONENT_NAME$U;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11514,16 +11578,16 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Dialog';
+const COMPONENT_NAME$T = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-dialog';
+const CLASSNAME$U = 'lumx-dialog';
 const {
   block: block$J,
   element: element$z
-} = bem(CLASSNAME$T);
+} = bem(CLASSNAME$U);
 
 /**
  * Component default props.
@@ -11796,22 +11860,22 @@ const Dialog = forwardRef((props, ref) => {
     ...forwardedProps
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$S;
-Dialog.className = CLASSNAME$T;
+Dialog.displayName = COMPONENT_NAME$T;
+Dialog.className = CLASSNAME$U;
 Dialog.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Divider';
+const COMPONENT_NAME$S = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-divider';
+const CLASSNAME$T = 'lumx-divider';
 const {
   block: block$I
-} = bem(CLASSNAME$S);
+} = bem(CLASSNAME$T);
 
 /**
  * Divider component.
@@ -11863,22 +11927,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$R;
-Divider.className = CLASSNAME$S;
+Divider.displayName = COMPONENT_NAME$S;
+Divider.className = CLASSNAME$T;
 Divider.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'DragHandle';
+const COMPONENT_NAME$R = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-drag-handle';
+const CLASSNAME$S = 'lumx-drag-handle';
 const {
   block: block$H
-} = bem(CLASSNAME$R);
+} = bem(CLASSNAME$S);
 
 /**
  * DragHandle component.
@@ -11935,8 +11999,8 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$Q;
-DragHandle.className = CLASSNAME$R;
+DragHandle.displayName = COMPONENT_NAME$R;
+DragHandle.className = CLASSNAME$S;
 DragHandle.defaultProps = DEFAULT_PROPS$N;
 
 const INITIAL_INDEX = -1;
@@ -12131,8 +12195,8 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1b;
-InternalList.className = CLASSNAME$1a;
+InternalList.displayName = COMPONENT_NAME$1c;
+InternalList.className = CLASSNAME$1b;
 InternalList.defaultProps = DEFAULT_PROPS$Y;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
@@ -12182,16 +12246,16 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'Dropdown';
+const COMPONENT_NAME$Q = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-dropdown';
+const CLASSNAME$R = 'lumx-dropdown';
 const {
   block: block$G,
   element: element$y
-} = classNames.bem(CLASSNAME$Q);
+} = classNames.bem(CLASSNAME$R);
 
 /**
  * Component default props.
@@ -12274,23 +12338,23 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$P;
-Dropdown.className = CLASSNAME$Q;
+Dropdown.displayName = COMPONENT_NAME$Q;
+Dropdown.className = CLASSNAME$R;
 Dropdown.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'ExpansionPanel';
+const COMPONENT_NAME$P = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-expansion-panel';
+const CLASSNAME$Q = 'lumx-expansion-panel';
 const {
   block: block$F,
   element: element$x
-} = bem(CLASSNAME$P);
+} = bem(CLASSNAME$Q);
 
 /**
  * Component default props.
@@ -12479,17 +12543,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$O;
-ExpansionPanel.className = CLASSNAME$P;
+ExpansionPanel.displayName = COMPONENT_NAME$P;
+ExpansionPanel.className = CLASSNAME$Q;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$L;
 
-const COMPONENT_NAME$N = 'Flag';
-const CLASSNAME$O = 'lumx-flag';
+const COMPONENT_NAME$O = 'Flag';
+const CLASSNAME$P = 'lumx-flag';
 const DEFAULT_PROPS$K = {};
 const {
   block: block$E,
   element: element$w
-} = bem(CLASSNAME$O);
+} = bem(CLASSNAME$P);
 
 /**
  * Flag component.
@@ -12547,8 +12611,8 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$N;
-Flag.className = CLASSNAME$O;
+Flag.displayName = COMPONENT_NAME$O;
+Flag.className = CLASSNAME$P;
 Flag.defaultProps = DEFAULT_PROPS$K;
 
 /** The maximum authorized heading level. */
@@ -12577,12 +12641,12 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'Heading';
+const COMPONENT_NAME$N = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-heading';
+const CLASSNAME$O = 'lumx-heading';
 
 /**
  * Component default props.
@@ -12607,7 +12671,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$N),
+    className: classnames(className, CLASSNAME$O),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12645,8 +12709,8 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$M;
-Heading.className = CLASSNAME$N;
+Heading.displayName = COMPONENT_NAME$N;
+Heading.className = CLASSNAME$O;
 Heading.defaultProps = DEFAULT_PROPS$J;
 
 /**
@@ -12685,15 +12749,15 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Grid';
+const COMPONENT_NAME$M = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-grid';
+const CLASSNAME$N = 'lumx-grid';
 const {
   block: block$D
-} = classNames.bem(CLASSNAME$M);
+} = classNames.bem(CLASSNAME$N);
 
 /**
  * Component default props.
@@ -12724,7 +12788,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$M}-container`).block(), block$D({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$N}-container`).block(), block$D({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -12734,22 +12798,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$L;
-Grid.className = CLASSNAME$M;
+Grid.displayName = COMPONENT_NAME$M;
+Grid.className = CLASSNAME$N;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'GridItem';
+const COMPONENT_NAME$L = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-grid-item';
+const CLASSNAME$M = 'lumx-grid-item';
 const {
   block: block$C
-} = classNames.bem(CLASSNAME$L);
+} = classNames.bem(CLASSNAME$M);
 
 /**
  * GridItem component.
@@ -12778,18 +12842,18 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$K;
-GridItem.className = CLASSNAME$L;
+GridItem.displayName = COMPONENT_NAME$L;
+GridItem.className = CLASSNAME$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'GridColumn';
+const COMPONENT_NAME$K = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-grid-column';
+const CLASSNAME$L = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -12819,7 +12883,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$K),
+    className: classnames(className, CLASSNAME$L),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -12829,8 +12893,8 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$J;
-GridColumn$1.className = CLASSNAME$K;
+GridColumn$1.displayName = COMPONENT_NAME$K;
+GridColumn$1.className = CLASSNAME$L;
 GridColumn$1.defaultProps = DEFAULT_PROPS$H;
 
 /**
@@ -12859,8 +12923,8 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$J;
-GridColumn.className = CLASSNAME$K;
+GridColumn.displayName = COMPONENT_NAME$K;
+GridColumn.className = CLASSNAME$L;
 GridColumn.defaultProps = DEFAULT_PROPS$G;
 
 /**
@@ -12882,16 +12946,16 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'ImageBlock';
+const COMPONENT_NAME$J = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-image-block';
+const CLASSNAME$K = 'lumx-image-block';
 const {
   block: block$B,
   element: element$v
-} = bem(CLASSNAME$J);
+} = bem(CLASSNAME$K);
 
 /**
  * Component default props.
@@ -12952,7 +13016,7 @@ const ImageBlock$1 = props => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$J,
+      baseClassName: CLASSNAME$K,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -13083,19 +13147,19 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$I;
-ImageBlock.className = CLASSNAME$J;
+ImageBlock.displayName = COMPONENT_NAME$J;
+ImageBlock.className = CLASSNAME$K;
 ImageBlock.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ImageLightbox';
+const COMPONENT_NAME$I = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-image-lightbox';
+const CLASSNAME$J = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13341,7 +13405,7 @@ function useAnimateScroll(scrollAreaRef) {
 
 const {
   element: element$u
-} = classNames.bem(CLASSNAME$I);
+} = classNames.bem(CLASSNAME$J);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -13433,7 +13497,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 
 const {
   element: element$t
-} = classNames.bem(CLASSNAME$I);
+} = classNames.bem(CLASSNAME$J);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -13673,7 +13737,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$I
+          name: CLASSNAME$J
         }
       });
     }
@@ -13725,7 +13789,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$I
+          name: CLASSNAME$J
         }
       });
     }
@@ -13779,7 +13843,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$I),
+    className: classNames.join(className, CLASSNAME$J),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -13808,8 +13872,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$H;
-Inner.className = CLASSNAME$I;
+Inner.displayName = COMPONENT_NAME$I;
+Inner.className = CLASSNAME$J;
 
 /**
  * ImageLightbox component.
@@ -13825,16 +13889,16 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'InlineList';
+const COMPONENT_NAME$H = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-inline-list';
+const CLASSNAME$I = 'lumx-inline-list';
 const {
   block: block$A,
   element: element$s
-} = bem(CLASSNAME$H);
+} = bem(CLASSNAME$I);
 
 /**
  * Component default props.
@@ -13886,8 +13950,8 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$G;
-InlineList$1.className = CLASSNAME$H;
+InlineList$1.displayName = COMPONENT_NAME$H;
+InlineList$1.className = CLASSNAME$I;
 InlineList$1.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -13912,8 +13976,8 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$G;
-InlineList.className = CLASSNAME$H;
+InlineList.displayName = COMPONENT_NAME$H;
+InlineList.className = CLASSNAME$I;
 InlineList.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -13957,16 +14021,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'Lightbox';
+const COMPONENT_NAME$G = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-lightbox';
+const CLASSNAME$H = 'lumx-lightbox';
 const {
   block: block$z,
   element: element$r
-} = bem(CLASSNAME$G);
+} = bem(CLASSNAME$H);
 
 /**
  * Lightbox component.
@@ -14150,8 +14214,8 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Lightbox.displayName = COMPONENT_NAME$F;
-Lightbox.className = CLASSNAME$G;
+Lightbox.displayName = COMPONENT_NAME$G;
+Lightbox.className = CLASSNAME$H;
 
 /**
  * Defines the props of the component.
@@ -14160,15 +14224,15 @@ Lightbox.className = CLASSNAME$G;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'Link';
+const COMPONENT_NAME$F = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-link';
+const CLASSNAME$G = 'lumx-link';
 const {
   block: block$y
-} = bem(CLASSNAME$F);
+} = bem(CLASSNAME$G);
 
 /**
  * Link component.
@@ -14207,7 +14271,7 @@ const Link$1 = props => {
 
 const {
   element: element$q
-} = classNames.bem(CLASSNAME$F);
+} = classNames.bem(CLASSNAME$G);
 
 /**
  * Defines the props of the component.
@@ -14253,22 +14317,22 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$E;
-Link.className = CLASSNAME$F;
+Link.displayName = COMPONENT_NAME$F;
+Link.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'LinkPreview';
+const COMPONENT_NAME$E = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-link-preview';
+const CLASSNAME$F = 'lumx-link-preview';
 const {
   block: block$x,
   element: element$p
-} = bem(CLASSNAME$E);
+} = bem(CLASSNAME$F);
 
 /**
  * Component default props.
@@ -14394,8 +14458,8 @@ const LinkPreview = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$D;
-LinkPreview.className = CLASSNAME$E;
+LinkPreview.displayName = COMPONENT_NAME$E;
+LinkPreview.className = CLASSNAME$F;
 LinkPreview.defaultProps = DEFAULT_PROPS$D;
 
 /**
@@ -14427,8 +14491,8 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$18,
-  className: CLASSNAME$17,
+  displayName: COMPONENT_NAME$19,
+  className: CLASSNAME$18,
   defaultProps: DEFAULT_PROPS$W
 });
 
@@ -14467,8 +14531,8 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$19;
-_ListItem.className = CLASSNAME$18;
+_ListItem.displayName = COMPONENT_NAME$1a;
+_ListItem.className = CLASSNAME$19;
 _ListItem.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -14482,12 +14546,12 @@ const ListItem = Object.assign(_ListItem, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'ListSubheader';
+const COMPONENT_NAME$D = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-list-subheader';
+const CLASSNAME$E = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -14506,26 +14570,26 @@ const ListSubheader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$D),
+    className: classNames.join(className, CLASSNAME$E),
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$C;
-ListSubheader.className = CLASSNAME$D;
+ListSubheader.displayName = COMPONENT_NAME$D;
+ListSubheader.className = CLASSNAME$E;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Message';
+const COMPONENT_NAME$C = 'Message';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = 'lumx-message';
+const CLASSNAME$D = 'lumx-message';
 const {
   block: block$w,
   element: element$o
-} = bem(CLASSNAME$C);
+} = bem(CLASSNAME$D);
 
 /**
  * Associative map from message kind to color and icon.
@@ -14599,8 +14663,8 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$B;
-Message$1.className = CLASSNAME$C;
+Message$1.displayName = COMPONENT_NAME$C;
+Message$1.className = CLASSNAME$D;
 
 /**
  * Message component.
@@ -14615,22 +14679,22 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$B;
-Message.className = CLASSNAME$C;
+Message.displayName = COMPONENT_NAME$C;
+Message.className = CLASSNAME$D;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'Mosaic';
+const COMPONENT_NAME$B = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = 'lumx-mosaic';
+const CLASSNAME$C = 'lumx-mosaic';
 const {
   block: block$v,
   element: element$n
-} = bem(CLASSNAME$B);
+} = bem(CLASSNAME$C);
 
 /**
  * Component default props.
@@ -14728,8 +14792,8 @@ const Mosaic = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Mosaic.displayName = COMPONENT_NAME$A;
-Mosaic.className = CLASSNAME$B;
+Mosaic.displayName = COMPONENT_NAME$B;
+Mosaic.className = CLASSNAME$C;
 Mosaic.defaultProps = DEFAULT_PROPS$C;
 
 const NavigationContext = /*#__PURE__*/createContext({
@@ -14749,16 +14813,16 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'NavigationSection';
+const COMPONENT_NAME$A = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = 'lumx-navigation-section';
+const CLASSNAME$B = 'lumx-navigation-section';
 const {
   block: sectionBlock,
   element: sectionElement
-} = classNames.bem(CLASSNAME$A);
+} = classNames.bem(CLASSNAME$B);
 const {
   block: itemBlock,
   element: itemElement
@@ -14844,8 +14908,8 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$z;
-NavigationSection.className = CLASSNAME$A;
+NavigationSection.displayName = COMPONENT_NAME$A;
+NavigationSection.className = CLASSNAME$B;
 
 const {
   block: block$u,
@@ -14914,16 +14978,16 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'Navigation';
+const COMPONENT_NAME$z = 'Navigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = 'lumx-navigation';
+const CLASSNAME$A = 'lumx-navigation';
 const {
   block: block$t,
   element: element$l
-} = classNames.bem(CLASSNAME$z);
+} = classNames.bem(CLASSNAME$A);
 
 /**
  * Component default props
@@ -14961,8 +15025,8 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$y;
-Navigation.className = CLASSNAME$z;
+Navigation.displayName = COMPONENT_NAME$z;
+Navigation.className = CLASSNAME$A;
 Navigation.defaultProps = DEFAULT_PROPS$B;
 
 // Sub components
@@ -14994,16 +15058,16 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'Notification';
+const COMPONENT_NAME$y = 'Notification';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = 'lumx-notification';
+const CLASSNAME$z = 'lumx-notification';
 const {
   block: block$s,
   element: element$k
-} = classNames.bem(CLASSNAME$y);
+} = classNames.bem(CLASSNAME$z);
 
 /**
  * Component default props.
@@ -15096,8 +15160,8 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$x;
-Notification.className = CLASSNAME$y;
+Notification.displayName = COMPONENT_NAME$y;
+Notification.className = CLASSNAME$z;
 Notification.defaultProps = DEFAULT_PROPS$A;
 
 /**
@@ -15108,12 +15172,12 @@ Notification.defaultProps = DEFAULT_PROPS$A;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'PopoverDialog';
+const COMPONENT_NAME$x = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = 'lumx-popover-dialog';
+const CLASSNAME$y = 'lumx-popover-dialog';
 
 /**
  * Component default props.
@@ -15139,7 +15203,7 @@ const PopoverDialog = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$x),
+    className: classNames.join(className, CLASSNAME$y),
     role: "dialog",
     "aria-modal": "true"
     /**
@@ -15156,23 +15220,23 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$w;
-PopoverDialog.className = CLASSNAME$x;
+PopoverDialog.displayName = COMPONENT_NAME$x;
+PopoverDialog.className = CLASSNAME$y;
 PopoverDialog.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'PostBlock';
+const COMPONENT_NAME$w = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = 'lumx-post-block';
+const CLASSNAME$x = 'lumx-post-block';
 const {
   block: block$r,
   element: element$j
-} = classNames.bem(CLASSNAME$w);
+} = classNames.bem(CLASSNAME$x);
 
 /**
  * Component default props.
@@ -15257,23 +15321,23 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$v;
-PostBlock.className = CLASSNAME$w;
+PostBlock.displayName = COMPONENT_NAME$w;
+PostBlock.className = CLASSNAME$x;
 PostBlock.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'ProgressLinear';
+const COMPONENT_NAME$v = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = 'lumx-progress-linear';
+const CLASSNAME$w = 'lumx-progress-linear';
 const {
   block: block$q,
   element: element$i
-} = bem(CLASSNAME$v);
+} = bem(CLASSNAME$w);
 
 /**
  * Component default props.
@@ -15330,8 +15394,8 @@ const ProgressLinear = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$u;
-ProgressLinear.className = CLASSNAME$v;
+ProgressLinear.displayName = COMPONENT_NAME$v;
+ProgressLinear.className = CLASSNAME$w;
 ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 
 /* eslint-disable react/no-unknown-property */
@@ -15339,16 +15403,16 @@ ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'ProgressCircular';
+const COMPONENT_NAME$u = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = 'lumx-progress-circular';
+const CLASSNAME$v = 'lumx-progress-circular';
 const {
   block: block$p,
   element: element$h
-} = bem(CLASSNAME$u);
+} = bem(CLASSNAME$v);
 
 /**
  * Component default props.
@@ -15432,8 +15496,8 @@ const ProgressCircular = forwardRef((props, ref) => {
     }
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$t;
-ProgressCircular.className = CLASSNAME$u;
+ProgressCircular.displayName = COMPONENT_NAME$u;
+ProgressCircular.className = CLASSNAME$v;
 ProgressCircular.defaultProps = DEFAULT_PROPS$w;
 
 const ProgressVariant = {
@@ -15448,15 +15512,15 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'Progress';
+const COMPONENT_NAME$t = 'Progress';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$t = 'lumx-progress';
+const CLASSNAME$u = 'lumx-progress';
 const {
   block: block$o
-} = classNames.bem(CLASSNAME$t);
+} = classNames.bem(CLASSNAME$u);
 
 /**
  * Component default props.
@@ -15495,8 +15559,8 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$s;
-Progress.className = CLASSNAME$t;
+Progress.displayName = COMPONENT_NAME$t;
+Progress.className = CLASSNAME$u;
 Progress.defaultProps = DEFAULT_PROPS$v;
 
 const INIT_STATE = {
@@ -15680,16 +15744,16 @@ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'ProgressTracker';
+const COMPONENT_NAME$s = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = 'lumx-progress-tracker';
+const CLASSNAME$t = 'lumx-progress-tracker';
 const {
   block: block$n,
   element: element$g
-} = classNames.bem(CLASSNAME$s);
+} = classNames.bem(CLASSNAME$t);
 
 /**
  * Component default props.
@@ -15746,23 +15810,23 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$r;
-ProgressTracker.className = CLASSNAME$s;
+ProgressTracker.displayName = COMPONENT_NAME$s;
+ProgressTracker.className = CLASSNAME$t;
 ProgressTracker.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$q = 'ProgressTrackerStep';
+const COMPONENT_NAME$r = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$r = 'lumx-progress-tracker-step';
+const CLASSNAME$s = 'lumx-progress-tracker-step';
 const {
   block: block$m,
   element: element$f
-} = classNames.bem(CLASSNAME$r);
+} = classNames.bem(CLASSNAME$s);
 
 /**
  * Component default props.
@@ -15860,22 +15924,22 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$q;
-ProgressTrackerStep.className = CLASSNAME$r;
+ProgressTrackerStep.displayName = COMPONENT_NAME$r;
+ProgressTrackerStep.className = CLASSNAME$s;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$p = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$q = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$q = `lumx-step-panel`;
+const CLASSNAME$r = `lumx-step-panel`;
 const {
   block: block$l
-} = classNames.bem(CLASSNAME$q);
+} = classNames.bem(CLASSNAME$r);
 
 /**
  * Component default props.
@@ -15914,23 +15978,23 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$p;
-ProgressTrackerStepPanel.className = CLASSNAME$q;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$q;
+ProgressTrackerStepPanel.className = CLASSNAME$r;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$o = 'RadioButton';
+const COMPONENT_NAME$p = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$p = 'lumx-radio-button';
+const CLASSNAME$q = 'lumx-radio-button';
 const {
   block: block$k,
   element: element$e
-} = bem(CLASSNAME$p);
+} = bem(CLASSNAME$q);
 
 /**
  * RadioButton component.
@@ -16073,19 +16137,19 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$o;
-RadioButton.className = CLASSNAME$p;
+RadioButton.displayName = COMPONENT_NAME$p;
+RadioButton.className = CLASSNAME$q;
 RadioButton.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$n = 'RadioGroup';
+const COMPONENT_NAME$o = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$o = 'lumx-radio-group';
+const CLASSNAME$p = 'lumx-radio-group';
 
 /**
  * Component default props.
@@ -16108,12 +16172,12 @@ const RadioGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$o),
+    className: classnames(className, CLASSNAME$p),
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$n;
-RadioGroup$1.className = CLASSNAME$o;
+RadioGroup$1.displayName = COMPONENT_NAME$o;
+RadioGroup$1.className = CLASSNAME$p;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$p;
 
 /**
@@ -16140,8 +16204,8 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$n;
-RadioGroup.className = CLASSNAME$o;
+RadioGroup.displayName = COMPONENT_NAME$o;
+RadioGroup.className = CLASSNAME$p;
 
 /**
  * Listen on element focus to store the focus status.
@@ -16168,11 +16232,11 @@ function useListenFocus(ref) {
 }
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$n = 'lumx-select';
+const CLASSNAME$o = 'lumx-select';
 const {
   block: block$j,
   element: element$d
-} = classNames.bem(CLASSNAME$n);
+} = classNames.bem(CLASSNAME$o);
 const WithSelectContext = (SelectElement, props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
@@ -16288,14 +16352,14 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$m = 'Select';
+const COMPONENT_NAME$n = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$m = 'lumx-select';
+const CLASSNAME$n = 'lumx-select';
 const {
   block: block$i,
   element: element$c
-} = classNames.bem(CLASSNAME$m);
+} = classNames.bem(CLASSNAME$n);
 
 /** The default value of props. */
 const DEFAULT_PROPS$o = {
@@ -16413,6 +16477,7 @@ const SelectField = props => {
 /**
  * Select component.
  *
+ * @deprecated use `SelectTextField` instead
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -16431,20 +16496,20 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$m;
-Select.className = CLASSNAME$m;
+Select.displayName = COMPONENT_NAME$n;
+Select.className = CLASSNAME$n;
 Select.defaultProps = DEFAULT_PROPS$o;
-Select.className = CLASSNAME$m;
+Select.className = CLASSNAME$n;
 
 /** The display name of the component. */
-const COMPONENT_NAME$l = 'Select';
+const COMPONENT_NAME$m = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$l = 'lumx-select';
+const CLASSNAME$m = 'lumx-select';
 const {
   block: block$h,
   element: element$b
-} = classNames.bem(CLASSNAME$l);
+} = classNames.bem(CLASSNAME$m);
 
 /** The default value of props. */
 const DEFAULT_PROPS$n = {
@@ -16528,13 +16593,13 @@ const SelectMultipleField = props => {
             children: placeholder
           })
         }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$l}__input-validity`,
+          className: `${CLASSNAME$m}__input-validity`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: isValid ? mdiCheckCircle : mdiAlertCircle,
             size: Size$1.xxs
           })
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$l}__input-indicator`,
+          className: `${CLASSNAME$m}__input-indicator`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: mdiMenuDown,
             size: Size$1.s
@@ -16569,6 +16634,7 @@ const SelectMultipleField = props => {
 /**
  * SelectMultiple component.
  *
+ * @deprecated use `SelectTextField` instead
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -16584,10 +16650,479 @@ const SelectMultiple = forwardRef((props, ref) => {
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$l;
-SelectMultiple.className = CLASSNAME$l;
+SelectMultiple.displayName = COMPONENT_NAME$m;
+SelectMultiple.className = CLASSNAME$m;
 SelectMultiple.defaultProps = DEFAULT_PROPS$n;
 
+/**
+ * Get the display name for a single option value.
+ *
+ * Resolves the option's display name by trying `getOptionName` first,
+ * then falling back to `getOptionId`, returning `''` for nullish values.
+ */
+function getOptionDisplayName(value, getOptionName, getOptionId) {
+  if (value === undefined || value === null) return '';
+  if (getOptionName) {
+    const name = getWithSelector(getOptionName, value);
+    if (name != null) return String(name);
+  }
+  if (getOptionId) {
+    return String(getWithSelector(getOptionId, value));
+  }
+  return '';
+}
+
+/**
+ * Render options as ComboboxOption elements.
+ * Framework-specific components are passed as a second argument.
+ */
+function renderSelectOptions(props, components) {
+  const {
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption,
+    selected,
+    getSectionId,
+    renderSectionTitle
+  } = props;
+  const {
+    Combobox
+  } = components;
+
+  // Render sections when getSectionId is provided.
+  if (getSectionId && options) {
+    const sections = groupBySelector(options, option => getWithSelector(getSectionId, option));
+    return Array.from(sections.entries()).map(([sectionId, sectionOptions]) => {
+      // When renderSectionTitle is provided, use the custom JSX as the label; otherwise fall back to sectionId.
+      const sectionLabel = renderSectionTitle ? renderSectionTitle(sectionId, sectionOptions) : sectionId;
+      return /*#__PURE__*/jsx(Combobox.Section, {
+        label: sectionLabel,
+        children: renderSelectOptions({
+          options: sectionOptions,
+          getOptionId,
+          getOptionName,
+          getOptionDescription,
+          renderOption,
+          selected
+          // getSectionId intentionally omitted to render flat options inside.
+        }, components)
+      }, sectionId);
+    });
+  }
+
+  // Build a Set of selected IDs (works for both single value and arrays).
+  const selectedIds = selected ? new Set((Array.isArray(selected) ? selected : [selected]).map(s => getWithSelector(getOptionId, s))) : undefined;
+  return options?.map((item, index) => {
+    const id = getWithSelector(getOptionId || getOptionName, item);
+    const name = getWithSelector(getOptionName || getOptionId, item);
+    const description = getOptionDescription && getWithSelector(getOptionDescription, item);
+    const isSelected = selectedIds?.has(id) ?? false;
+
+    // Delegate to the consumer's render function when provided.
+    // The consumer receives core-computed context and is responsible for rendering
+    // a <Combobox.Option> with those values forwarded.
+    if (renderOption) {
+      return renderOption(item, {
+        index,
+        value: id,
+        isSelected,
+        description
+      });
+    }
+    return /*#__PURE__*/jsx(Combobox.Option, {
+      value: id,
+      description: description,
+      isSelected: isSelected,
+      children: name
+    }, id);
+  });
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$l = 'SelectTextField';
+
+/**
+ * Component default class name.
+ */
+const CLASSNAME$l = 'lumx-select-text-field';
+
+/**
+ * SelectTextField core template.
+ * Renders a Combobox with a text input trigger and a dropdown list of options.
+ * Supports search/filter, single selection, and multiple selection with chips.
+ *
+ * Framework-specific components are passed as a second argument by the React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+const SelectTextField$2 = (props, {
+  Combobox,
+  InfiniteScroll
+}) => {
+  const {
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption,
+    getSectionId,
+    renderSectionTitle,
+    selected,
+    label,
+    isMultiselectable,
+    inputProps,
+    popoverProps,
+    listProps,
+    listStatus = 'idle',
+    loadingMessage,
+    emptyMessage,
+    nbOptionMessage,
+    errorMessage,
+    errorTryReloadMessage,
+    onOpen,
+    chips,
+    beforeOptions,
+    afterOptions,
+    onLoadMore,
+    infiniteScrollOptions
+  } = props;
+  const isFullLoading = listStatus === 'loading';
+  const isLoadingMore = listStatus === 'loadingMore';
+  const isError = listStatus === 'error';
+  return /*#__PURE__*/jsxs(Combobox.Provider, {
+    onOpen: onOpen,
+    children: [/*#__PURE__*/jsx(Combobox.Input, {
+      label: label,
+      ...inputProps,
+      chips: chips
+    }), /*#__PURE__*/jsxs(Combobox.Popover, {
+      fitToAnchorWidth: "minWidth",
+      fitWithinViewportHeight: true,
+      placement: "bottom-start",
+      ...popoverProps,
+      children: [/*#__PURE__*/jsxs(Combobox.List, {
+        ...listProps,
+        "aria-label": label,
+        "aria-multiselectable": isMultiselectable || undefined,
+        children: [beforeOptions, isFullLoading ? /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
+          count: 3
+        }) : renderSelectOptions({
+          options,
+          getOptionId,
+          getOptionName,
+          getOptionDescription,
+          renderOption,
+          getSectionId,
+          renderSectionTitle,
+          selected
+        }, {
+          Combobox
+        }), afterOptions, onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
+          callback: () => {
+            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
+            if (listStatus && listStatus !== 'idle') return;
+            onLoadMore();
+          },
+          options: infiniteScrollOptions
+        }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
+          count: 1
+        })]
+      }), /*#__PURE__*/jsx(Combobox.State, {
+        loadingMessage: loadingMessage,
+        emptyMessage: emptyMessage,
+        nbOptionMessage: nbOptionMessage,
+        errorMessage: isError ? errorMessage : undefined,
+        errorTryReloadMessage: isError ? errorTryReloadMessage : undefined
+      })]
+    })]
+  });
+};
+SelectTextField$2.displayName = COMPONENT_NAME$l;
+SelectTextField$2.className = CLASSNAME$l;
+
+/**
+ * A text field with a select dropdown to choose between a list of options.
+ * Supports search/filter, single selection, and multiple selection with chips.
+ */
+const SelectTextField$1 = props => {
+  const {
+    // Options
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption,
+    getSectionId,
+    renderSectionTitle,
+    // Selection
+    selectionType,
+    value,
+    onChange,
+    // Search / filter
+    filter,
+    openOnFocus,
+    onSearch,
+    searchInputValue: externalSearchValue,
+    // Clear
+    hasClearButton = true,
+    // Status
+    listStatus = 'idle',
+    // Text field
+    className,
+    label,
+    placeholder,
+    icon,
+    isDisabled,
+    'aria-disabled': ariaDisabled,
+    isRequired,
+    hasError,
+    error,
+    helper,
+    id,
+    name,
+    isValid,
+    maxLength,
+    ariaLabel,
+    inputRef: externalInputRef,
+    // Event callbacks
+    onBlur: externalOnBlur,
+    onFocus,
+    onKeyDown,
+    onClear: externalOnClear,
+    onOpen,
+    // Forwarding
+    inputProps: consumerInputProps,
+    // Load more
+    onLoadMore,
+    beforeOptions,
+    // Popover
+    popoverProps,
+    // Theme
+    theme,
+    // Translations
+    translations
+  } = props;
+  const isAnyDisabled = !!isDisabled || ariaDisabled === true || ariaDisabled === 'true';
+  const isMultiple = selectionType === 'multiple';
+  const renderChip = isMultiple ? props.renderChip : undefined;
+  const getChipProps = isMultiple ? props.getChipProps : undefined;
+
+  /* Wrap the consumer's renderOption to inject core-computed props.
+   * The consumer returns a <Combobox.Option> with custom children/props.
+   * This wrapper validates the element type, extracts the consumer's props, and
+   * re-renders a <Combobox.Option> merging them with core-computed value/isSelected/description/key. */
+  const wrappedRenderOption = renderOption ? (option, {
+    index,
+    value: optionValue,
+    isSelected,
+    description
+  }) => {
+    const node = renderOption(option, index);
+    if (!isComponentType(Combobox.Option)(node)) return null;
+    const {
+      children,
+      ...customProps
+    } = node.props;
+    return /*#__PURE__*/jsx(Combobox.Option, {
+      ...customProps,
+      value: optionValue,
+      isSelected: isSelected,
+      description: description,
+      children: children
+    }, optionValue);
+  } : undefined;
+  const [listElement, setListElement] = useState(null);
+  const localInputRef = useRef(null);
+  const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
+
+  // Track whether the user is actively typing a search.
+  const [isSearching, setIsSearching] = useState(() => Boolean(externalSearchValue));
+  const [searchText, setSearchText] = useState(() => externalSearchValue ?? '');
+
+  /* Sync external controlled search value into internal state when it changes.
+   * This allows the parent to seed or reset the visible search text
+   * (e.g., setting searchInputValue='' after creating an entry from beforeOptions). */
+  useEffect(() => {
+    if (externalSearchValue !== undefined) {
+      setSearchText(externalSearchValue);
+      setIsSearching(Boolean(externalSearchValue));
+    }
+  }, [externalSearchValue]);
+
+  // The displayed value shown in the input
+  let displayValue;
+  if (isMultiple || isSearching) {
+    displayValue = searchText;
+  } else if (!isMultiple) {
+    displayValue = getOptionDisplayName(value, getOptionName, getOptionId);
+  }
+
+  // Map option id selection to option object selection.
+  const handleSelect = useCallback(selectedOption => {
+    const selectedValue = selectedOption.value;
+    const newOption = selectedValue && options?.find(option => getWithSelector$1(getOptionId, option) === selectedValue);
+    if (!isMultiple) {
+      onChange?.(newOption);
+    } else {
+      const currentValue = value || [];
+      const existingIndex = currentValue.findIndex(item => getWithSelector$1(getOptionId, item) === selectedValue);
+      if (existingIndex === -1) {
+        // Skip if no matching option found (e.g. beforeOptions custom actions).
+        if (newOption) {
+          onChange?.([...currentValue, newOption]);
+        }
+      } else {
+        // Remove option (toggle off)
+        const updated = [...currentValue];
+        updated.splice(existingIndex, 1);
+        onChange?.(updated);
+      }
+    }
+
+    // Reset search state after selection.
+    setIsSearching(false);
+    setSearchText('');
+    onSearch?.('');
+  }, [getOptionId, isMultiple, onChange, onSearch, options, value]);
+
+  // Handle text input changes (search).
+  const handleInputChange = useCallback(inputValue => {
+    setIsSearching(true);
+    setSearchText(inputValue);
+    onSearch?.(inputValue);
+
+    // When the user clears the input (single mode only), clear the selection too.
+    if (!isMultiple && inputValue === '' && value !== undefined && value !== null) {
+      onChange?.(undefined);
+    }
+  }, [isMultiple, onChange, onSearch, value]);
+
+  // Handle clear button click (single mode only).
+  const handleClear = useCallback(event => {
+    // Prevent the clear event from being handled as a regular input change.
+    event?.stopPropagation();
+    onChange?.(undefined);
+    setIsSearching(false);
+    setSearchText('');
+    onSearch?.('');
+    externalOnClear?.(event);
+  }, [onChange, onSearch, externalOnClear]);
+
+  // Handle blur: reset input to selected value name, then call consumer's onBlur.
+  const handleBlur = useCallback(event => {
+    setIsSearching(false);
+    setSearchText('');
+    onSearch?.('');
+    externalOnBlur?.(event);
+  }, [externalOnBlur, onSearch]);
+  const showClear = !isMultiple && !isAnyDisabled && hasClearButton && value !== undefined && value !== null;
+  const chips = isMultiple ? /*#__PURE__*/jsx(SelectionChipGroup, {
+    value: value,
+    theme: theme,
+    getOptionId: getOptionId,
+    getOptionName: getOptionName,
+    onChange: onChange,
+    inputRef: localInputRef,
+    isDisabled: isAnyDisabled,
+    label: translations.chipGroupLabel ?? label,
+    chipRemoveLabel: translations.chipRemoveLabel,
+    renderChip: renderChip,
+    getChipProps: getChipProps
+  }) : undefined;
+
+  // The core template is not generic, so we cast selectors when forwarding to UI().
+  return SelectTextField$2({
+    options,
+    getOptionId: getOptionId,
+    getOptionName: getOptionName,
+    getOptionDescription: getOptionDescription,
+    renderOption: wrappedRenderOption,
+    getSectionId: getSectionId,
+    renderSectionTitle: renderSectionTitle,
+    selected: value,
+    label,
+    isMultiselectable: isMultiple,
+    listStatus,
+    onOpen,
+    loadingMessage: translations.loadingMessage,
+    emptyMessage: translations.emptyMessage,
+    nbOptionMessage: translations.nbOptionMessage,
+    errorMessage: translations.errorMessage,
+    errorTryReloadMessage: translations.errorTryReloadMessage,
+    inputProps: {
+      ...consumerInputProps,
+      placeholder,
+      icon,
+      value: displayValue,
+      onChange: handleInputChange,
+      onSelect: handleSelect,
+      onBlur: handleBlur,
+      onFocus,
+      onKeyDown,
+      inputRef: mergedInputRef,
+      isDisabled,
+      'aria-disabled': ariaDisabled,
+      isRequired,
+      hasError,
+      error,
+      helper,
+      id,
+      name,
+      isValid,
+      maxLength,
+      'aria-label': ariaLabel,
+      clearButtonProps: showClear ? {
+        label: translations.clearLabel
+      } : undefined,
+      onClear: handleClear,
+      toggleButtonProps: translations.showSuggestionsLabel ? {
+        label: translations.showSuggestionsLabel
+      } : undefined,
+      filter,
+      openOnFocus,
+      className,
+      theme
+    },
+    popoverProps,
+    listProps: {
+      ref: setListElement
+    },
+    chips,
+    beforeOptions,
+    onLoadMore,
+    infiniteScrollOptions: {
+      root: listElement,
+      rootMargin: '100px'
+    }
+  }, {
+    Combobox,
+    InfiniteScroll
+  });
+};
+SelectTextField$1.displayName = 'SelectTextField';
+
+/**
+ * SelectTextField compound component.
+ */
+const SelectTextField = Object.assign(SelectTextField$1, {
+  /** Selectable option within the dropdown list. */
+  Option: ComboboxOption,
+  /** Labelled group of options. */
+  Section: ComboboxSection,
+  /** Info icon on an option that reveals a popover with additional details. */
+  OptionMoreInfo: ComboboxOptionMoreInfo,
+  /** Skeleton loading placeholder for options being fetched. */
+  OptionSkeleton: ComboboxOptionSkeleton,
+  /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+  Divider: ListDivider
+});
+
 /**
  * Component display name.
  */
@@ -16963,9 +17498,9 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$13;
+SkeletonTypography.displayName = COMPONENT_NAME$14;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$i;
-SkeletonTypography.className = CLASSNAME$12;
+SkeletonTypography.className = CLASSNAME$13;
 
 /**
  * Clamp value in range.
@@ -20168,5 +20703,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1p as CLASSNAME, COMPONENT_NAME$1q as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1q as CLASSNAME, COMPONENT_NAME$1r as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map