@lumx/react 4.9.0-next.13 → 4.9.0-next.14

package/index.js

@@ -12,19 +12,19 @@ import pull from 'lodash/pull.js';
 import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/Dpulze-1.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
-import { getDisabledState } from '@lumx/core/js/utils/disabledState';
+import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
 import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
 import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
+import castArray from 'lodash/castArray.js';
 import noop$1 from 'lodash/noop.js';
 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 castArray from 'lodash/castArray.js';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiInformation } from '@lumx/icons/esm/information.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
@@ -105,7 +105,7 @@ const COMPONENT_NAME$1w = 'AlertDialog';
  */
 const CLASSNAME$1v = 'lumx-alert-dialog';
 const {
-  block: block$18
+  block: block$19
 } = classNames.bem(CLASSNAME$1v);
 
 /**
@@ -174,7 +174,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$18({
+    className: classNames.join(className, block$19({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -293,7 +293,7 @@ function useDisableStateProps(props) {
     ...otherProps
   } = props;
   const disabledStateContext = useDisabledStateContext();
-  const disabledStateProps = getDisabledState(disabledStateContext, {
+  const disabledStateProps = getDisabledState$1(disabledStateContext, {
     disabled,
     isDisabled,
     'aria-disabled': ariaDisabled
@@ -664,7 +664,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$17(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$18(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -699,7 +699,7 @@ const ACTION_ELEMENT = `${PREFIX}__action`;
 const actionArea = Object.assign(/** Action area container class. Sets `position: relative`. */
 () => PREFIX, {
   /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
-  action: modifiers => block$17(ACTION_ELEMENT, modifiers)
+  action: modifiers => block$18(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -821,11 +821,11 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$Q(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$17(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$17(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$18(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -834,15 +834,15 @@ function element$Q(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$17(baseName, modifiersOrAdditionalClasses);
+      return block$18(baseName, modifiersOrAdditionalClasses);
     }
-    return block$17(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$18(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$Q(baseName, elem, modifiersOrAdditionalClasses);
+      return element$R(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$Q(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -1000,8 +1000,8 @@ const COMPONENT_NAME$1t = 'Avatar';
  */
 const CLASSNAME$1s = 'lumx-avatar';
 const {
-  block: block$16,
-  element: element$P
+  block: block$17,
+  element: element$Q
 } = bem(CLASSNAME$1s);
 
 /**
@@ -1032,15 +1032,15 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$16({
+    className: classnames(className, block$17({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [image, actions && /*#__PURE__*/jsx("div", {
-      className: element$P('actions'),
+      className: element$Q('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$P('badge'),
+      className: element$Q('badge'),
       children: badge
     })]
   });
@@ -1081,7 +1081,7 @@ const Avatar = forwardRef((props, ref) => {
     image: /*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$P('thumbnail'),
+      className: element$Q('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -1107,7 +1107,7 @@ const COMPONENT_NAME$1s = 'Badge';
  */
 const CLASSNAME$1r = 'lumx-badge';
 const {
-  block: block$15
+  block: block$16
 } = bem(CLASSNAME$1r);
 
 /**
@@ -1134,7 +1134,7 @@ const Badge$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$15({
+    className: classnames(className, block$16({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
@@ -1168,8 +1168,8 @@ Badge.defaultProps = Badge$1.defaultProps;
 const COMPONENT_NAME$1r = 'BadgeWrapper';
 const CLASSNAME$1q = 'lumx-badge-wrapper';
 const {
-  block: block$14,
-  element: element$O
+  block: block$15,
+  element: element$P
 } = bem(CLASSNAME$1q);
 const BadgeWrapper$1 = props => {
   const {
@@ -1182,9 +1182,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$14()),
+    className: classnames(className, block$15()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$O('badge'),
+      className: element$P('badge'),
       children: badge
     })]
   });
@@ -1488,7 +1488,7 @@ const IconClassName = 'lumx-icon';
 
 const CLASSNAME$1o = IconClassName;
 const {
-  block: block$13
+  block: block$14
 } = bem(CLASSNAME$1o);
 
 /**
@@ -1543,7 +1543,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$13({
+    className: classnames(className, block$14({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1732,7 +1732,7 @@ const COMPONENT_NAME$1l = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
 const CLASSNAME$1l = InputLabelClassName;
 const {
-  block: block$12
+  block: block$13
 } = bem(CLASSNAME$1l);
 const DEFAULT_PROPS$16 = {};
 
@@ -1754,7 +1754,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$12({
+    className: classnames(className, block$13({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1787,7 +1787,7 @@ const InputHelperClassName = 'lumx-input-helper';
 
 const CLASSNAME$1k = InputHelperClassName;
 const {
-  block: block$11
+  block: block$12
 } = bem(CLASSNAME$1k);
 
 /**
@@ -1815,7 +1815,7 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$12({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1842,8 +1842,8 @@ const COMPONENT_NAME$1j = 'Checkbox';
  */
 const CLASSNAME$1j = 'lumx-checkbox';
 const {
-  block: block$10,
-  element: element$N
+  block: block$11,
+  element: element$O
 } = bem(CLASSNAME$1j);
 
 /**
@@ -1880,7 +1880,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$10({
+    className: classnames(className, block$11({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1888,12 +1888,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$N('input-wrapper'),
+      className: element$O('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$N('input-native'),
+        className: element$O('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1905,26 +1905,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$N('input-placeholder'),
+        className: element$O('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$N('input-background')
+          className: element$O('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$N('input-indicator'),
+          className: element$O('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$N('content'),
+      className: element$O('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$N('label'),
+        className: element$O('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$N('helper'),
+        className: element$O('helper'),
         theme,
         children: helper
       })]
@@ -2029,8 +2029,8 @@ const COMPONENT_NAME$1i = 'Chip';
  */
 const CLASSNAME$1i = 'lumx-chip';
 const {
-  block: block$$,
-  element: element$M
+  block: block$10,
+  element: element$N
 } = bem(CLASSNAME$1i);
 
 /**
@@ -2098,7 +2098,7 @@ const Chip$1 = props => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classnames(className, block$$({
+      className: classnames(className, block$10({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -2115,19 +2115,19 @@ const Chip$1 = props => {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$M('before', {
+        className: element$N('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$M('label'),
+        className: element$N('label'),
         children: children
       }), after &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$M('after', {
+        className: element$N('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleAfterClick,
@@ -2390,8 +2390,8 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
  */
 const CLASSNAME$1g = 'lumx-selection-chip-group';
 const {
-  block: block$_,
-  element: element$L
+  block: block$$,
+  element: element$M
 } = classNames.bem(CLASSNAME$1g);
 
 /**
@@ -2422,7 +2422,7 @@ const SelectionChipGroup = ({
   return /*#__PURE__*/jsx(ChipGroup, {
     role: "group",
     "aria-label": label,
-    className: block$_(),
+    className: block$$(),
     ...forwardedProps,
     children: value?.map((v, index) => {
       const name = getWithSelector(getOptionName, v);
@@ -2466,7 +2466,7 @@ const SelectionChipGroup = ({
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$L('chip', [props?.className]),
+          className: element$M('chip', [props?.className]),
           size: "s",
           ref: ref,
           onClick: onClick,
@@ -3133,7 +3133,9 @@ function setupListbox(handle, signal, notify) {
     onActivate: item => {
       item.setAttribute('data-focus-visible-added', 'true');
       trigger.setAttribute('aria-activedescendant', item.id);
-      item.scrollIntoView({
+      // Scroll to the element in listbox or else the item
+      const toScrollTo = item.closest('[role=listbox] > *') || item;
+      toScrollTo.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest'
       });
@@ -3347,7 +3349,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /**
    * Attach the shared keydown listener to the trigger.
    *
-   * Handles: Enter, ArrowDown, ArrowUp, Escape (2-tier), Tab, PageUp, PageDown.
+   * Handles: Enter, ArrowDown, ArrowUp, Escape (2-tier), PageUp, PageDown.
    * Mode-specific keys (Space, Home, End, ArrowLeft/Right, printable chars, etc.)
    * are delegated to the `onKeydown` hook provided by the mode controller.
    */
@@ -3434,15 +3436,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
           }
           flag = true;
           break;
-        case 'Tab':
-          // Click the active option (if any) and close. Let Tab propagate.
-          if (nav?.hasActiveItem && nav.activeItem && !isOptionDisabled(nav.activeItem)) {
-            nav.activeItem.click();
-          }
-          // The delegated click handler closes for single-select, but for multi-select
-          // or when no item is active, we still need to explicitly close.
-          handle.setIsOpen(false);
-          break;
         case 'PageUp':
           if (handle.isOpen && nav?.hasActiveItem) {
             nav.goToOffset(-10);
@@ -3482,10 +3475,17 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     }
     trigger.setAttribute('aria-expanded', String(isOpenState));
 
-    // On first attach, wire up the mode-specific controller and shared keydown handler.
+    // On first attach, wire up the mode-specific controller, shared keydown, and focusout handlers.
     if (isNewController) {
       const onKeydown = onTriggerAttach?.(handle, abortController.signal) || undefined;
       attachTriggerKeydown(trigger, abortController.signal, onKeydown);
+
+      // Close the popup when the trigger loses focus
+      trigger.addEventListener('focusout', () => {
+        handle.setIsOpen(false);
+      }, {
+        signal: abortController.signal
+      });
     }
     if (listbox && !focusNav) {
       focusNav = setupListbox(handle, abortController.signal, notify);
@@ -3551,7 +3551,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     registerOption(element, callback) {
       const filterLower = filterValue.toLowerCase();
       const text = getOptionValue(element).toLowerCase();
-      const isFiltered = filterLower.length > 0 && !text.startsWith(filterLower);
+      const isFiltered = filterLower.length > 0 && !text.includes(filterLower);
       optionRegistrations.set(element, {
         callback,
         lastFiltered: isFiltered
@@ -3569,7 +3569,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       const filterLower = newFilter.toLowerCase();
       for (const [element, reg] of optionRegistrations) {
         const text = getOptionValue(element).toLowerCase();
-        const isFiltered = filterLower.length > 0 && !text.startsWith(filterLower);
+        const isFiltered = filterLower.length > 0 && !text.includes(filterLower);
         // Only notify when state actually changes to avoid unnecessary re-renders.
         if (isFiltered !== reg.lastFiltered) {
           reg.lastFiltered = isFiltered;
@@ -3827,6 +3827,13 @@ function setupComboboxButton(button, callbacks) {
     return event => {
       const nav = combobox.focusNav;
       switch (event.key) {
+        case 'Tab':
+          // Selects the focused option
+          if (combobox.isOpen && nav?.hasActiveItem && nav.activeItem) {
+            combobox.select(nav.activeItem);
+          }
+          // Return false to continue normal 'Tab' behavior (focus next).
+          return false;
         case ' ':
           // Space acts like Enter in button mode.
           if (combobox.isOpen && nav?.hasActiveItem && nav.activeItem) {
@@ -6062,8 +6069,8 @@ const COMPONENT_NAME$1f = 'Tooltip';
  */
 const CLASSNAME$1e = 'lumx-tooltip';
 const {
-  block: block$Z,
-  element: element$K
+  block: block$_,
+  element: element$L
 } = bem(CLASSNAME$1e);
 
 /**
@@ -6095,7 +6102,7 @@ const TooltipPopup = props => {
     ...forwardedProps,
     id: id,
     role: "tooltip",
-    className: classnames(className, block$Z({
+    className: classnames(className, block$_({
       [`position-${position}`]: Boolean(position)
     }), isHidden && visuallyHidden()),
     style: {
@@ -6104,9 +6111,9 @@ const TooltipPopup = props => {
     },
     "data-popper-placement": position,
     children: [/*#__PURE__*/jsx("div", {
-      className: element$K('arrow')
+      className: element$L('arrow')
     }), /*#__PURE__*/jsx("div", {
-      className: element$K('inner'),
+      className: element$L('inner'),
       children: labelLines.map((line, index) => /*#__PURE__*/jsx("p", {
         children: line
       }, index))
@@ -6623,6 +6630,9 @@ function setupComboboxInput(input, options) {
     onSelect: optionOnSelect
   } = options;
 
+  /** Check if the input is disabled (native `disabled` attribute or `aria-disabled="true"`). */
+  const isDisabled = () => input.disabled || input.getAttribute('aria-disabled') === 'true';
+
   /**
    * True when the current input value came from user typing (real InputEvent).
    * False when the value was set programmatically (select, clear, etc.).
@@ -6660,6 +6670,7 @@ function setupComboboxInput(input, options) {
     // Filter on real user typing (InputEvent with `inputType`).
     input.addEventListener('input', event => {
       if (!(event instanceof InputEvent)) return;
+      if (isDisabled()) return;
       combobox.focusNav?.clear();
       userHasTyped = true;
       combobox.setIsOpen(true);
@@ -6672,6 +6683,7 @@ function setupComboboxInput(input, options) {
 
     // Open on focus.
     input.addEventListener('focus', () => {
+      if (isDisabled()) return;
       combobox.focusNav?.clear();
       combobox.setIsOpen(true);
     }, {
@@ -6679,7 +6691,10 @@ function setupComboboxInput(input, options) {
     });
 
     // Open on click (handles the case where the input is already focused, so focus doesn't re-fire).
-    input.addEventListener('click', () => combobox.setIsOpen(true), {
+    input.addEventListener('click', () => {
+      if (isDisabled()) return;
+      combobox.setIsOpen(true);
+    }, {
       signal
     });
 
@@ -6725,6 +6740,23 @@ function setupComboboxInput(input, options) {
   return handle;
 }
 
+/** Disable state */
+
+/**
+ * Calculate the disabled state based on context and props.
+ */
+function getDisabledState(context, props) {
+  const {
+    disabled,
+    isDisabled = disabled,
+    'aria-disabled': ariaDisabled
+  } = props;
+  return {
+    disabled: !!isDisabled,
+    'aria-disabled': ariaDisabled === true || ariaDisabled === 'true'
+  };
+}
+
 /**
  * Component display name.
  */
@@ -6761,7 +6793,12 @@ const ComboboxInput$1 = (props, {
     theme,
     ...forwardedProps
   } = props;
+
+  // Compute whether the combobox is disabled (native or aria-disabled).
+  const disabledState = getDisabledState(undefined, props);
+  const isAnyDisabled = disabledState.disabled || disabledState['aria-disabled'] || undefined;
   return /*#__PURE__*/jsx(TextField, {
+    autoComplete: "off",
     ...forwardedProps,
     ref: ref,
     role: "combobox",
@@ -6770,11 +6807,11 @@ const ComboboxInput$1 = (props, {
     "aria-expanded": isOpen,
     inputRef: inputRef,
     textFieldRef: textFieldRef,
-    autoComplete: "off",
     theme: theme,
     afterElement: toggleButtonProps ? /*#__PURE__*/jsx(IconButton, {
       ...toggleButtonProps,
       theme: theme,
+      isDisabled: isAnyDisabled,
       emphasis: "low",
       size: "s",
       icon: isOpen ? mdiChevronUp : mdiChevronDown,
@@ -6802,8 +6839,8 @@ const CLASSNAME$1c = 'lumx-text-field';
 const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1c}__input-native`;
 
 const {
-  block: block$Y,
-  element: element$J
+  block: block$Z,
+  element: element$K
 } = bem(CLASSNAME$1c);
 
 /**
@@ -6873,7 +6910,7 @@ const TextField$1 = props => {
   const isNotEmpty = valueLength > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$Z({
       'has-chips': Boolean(chips),
       'has-error': !isValid && hasError,
       'has-icon': Boolean(icon),
@@ -6889,16 +6926,16 @@ const TextField$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
-      className: element$J('header'),
+      className: element$K('header'),
       children: [label && InputLabel$1({
         ...labelProps,
         htmlFor: textFieldId,
-        className: element$J('label'),
+        className: element$K('label'),
         isRequired,
         theme,
         children: label
       }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: element$J('char-counter'),
+        className: element$K('char-counter'),
         children: [/*#__PURE__*/jsx("span", {
           children: maxLength - valueLength
         }), maxLength - valueLength === 0 && Icon$1({
@@ -6907,44 +6944,44 @@ const TextField$1 = props => {
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$J('wrapper'),
+      className: element$K('wrapper'),
       ref: textFieldRef,
       children: [icon && Icon$1({
-        className: element$J('input-icon'),
+        className: element$K('input-icon'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon,
         size: Size.xs
       }), chips ? /*#__PURE__*/jsxs("div", {
-        className: element$J('chips'),
+        className: element$K('chips'),
         children: [chips, input]
       }) : /*#__PURE__*/jsx("div", {
-        className: element$J('input-wrapper'),
+        className: element$K('input-wrapper'),
         children: input
       }), (isValid || hasError) && Icon$1({
-        className: element$J('input-validity'),
+        className: element$K('input-validity'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
         ...clearButtonProps,
-        className: element$J('input-clear'),
+        className: element$K('input-clear'),
         icon: mdiCloseCircle,
         emphasis: Emphasis.low,
         size: Size.s,
         theme: theme,
         type: "button"
       }), afterElement && /*#__PURE__*/jsx("div", {
-        className: element$J('after-element'),
+        className: element$K('after-element'),
         children: afterElement
       })]
     }), hasError && error && InputHelper$1({
       children: error,
-      className: element$J('helper'),
+      className: element$K('helper'),
       kind: Kind.error,
       theme,
       id: errorId
     }), helper && InputHelper$1({
-      className: element$J('helper'),
+      className: element$K('helper'),
       theme,
       id: helperId,
       children: helper
@@ -6953,7 +6990,7 @@ const TextField$1 = props => {
 };
 
 const {
-  block: block$X
+  block: block$Y
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -6990,7 +7027,7 @@ const RawInputText$1 = props => {
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$X({
+    className: classnames(className, block$Y({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
@@ -7019,7 +7056,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$W
+  block: block$X
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7055,7 +7092,7 @@ const RawInputTextarea$1 = props => {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$W({
+    className: classnames(className, block$X({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
@@ -7381,7 +7418,7 @@ const COMPONENT_NAME$1c = 'List';
  */
 const CLASSNAME$1b = 'lumx-list';
 const {
-  block: block$V
+  block: block$W
 } = bem(CLASSNAME$1b);
 
 /**
@@ -7405,7 +7442,7 @@ const List$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classnames(className, block$V({
+    className: classnames(className, block$W({
       [`item-padding-${itemPadding}`]: Boolean(itemPadding)
     })),
     ref: ref,
@@ -7554,8 +7591,8 @@ const COMPONENT_NAME$1a = 'ListItem';
  */
 const CLASSNAME$19 = 'lumx-list-item';
 const {
-  block: block$U,
-  element: element$I
+  block: block$V,
+  element: element$J
 } = bem(CLASSNAME$19);
 
 /**
@@ -7593,7 +7630,7 @@ const ListItem$1 = props => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$U({
+    className: classnames(className, block$V({
       [`size-${size}`]: Boolean(size)
     })),
     children: RawClickable({
@@ -7601,7 +7638,7 @@ const ListItem$1 = props => {
       isDisabled,
       'aria-disabled': ariaDisabled,
       ...linkProps,
-      className: element$I(clickable ? 'link' : 'wrapper', {
+      className: element$J(clickable ? 'link' : 'wrapper', {
         'is-highlighted': isHighlighted,
         'is-selected': isSelected,
         'is-disabled': isDisabled || ariaDisabled === 'true'
@@ -7610,13 +7647,13 @@ const ListItem$1 = props => {
       ref: linkRef,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [before && /*#__PURE__*/jsx("div", {
-          className: element$I('before'),
+          className: element$J('before'),
           children: before
         }), /*#__PURE__*/jsx("div", {
-          className: element$I('content'),
+          className: element$J('content'),
           children: children
         }), after && /*#__PURE__*/jsx("div", {
-          className: element$I('after'),
+          className: element$J('after'),
           children: after
         })]
       })
@@ -7684,7 +7721,7 @@ const COMPONENT_NAME$18 = 'Text';
  */
 const CLASSNAME$17 = 'lumx-text';
 const {
-  block: block$T
+  block: block$U
 } = bem(CLASSNAME$17);
 
 /**
@@ -7726,7 +7763,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$T({
+    className: classnames(className, block$U({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -7749,8 +7786,8 @@ const COMPONENT_NAME$17 = 'ComboboxOption';
  */
 const CLASSNAME$16 = 'lumx-combobox-option';
 const {
-  block: block$S,
-  element: element$H
+  block: block$T,
+  element: element$I
 } = bem(CLASSNAME$16);
 
 /**
@@ -7795,7 +7832,7 @@ const ComboboxOption$1 = (props, {
     as: 'button',
     ...actionProps,
     id,
-    className: element$H('trigger'),
+    className: element$I('action'),
     handleClick,
     'aria-selected': isSelected ? 'true' : 'false',
     'data-value': value,
@@ -7813,7 +7850,7 @@ const ComboboxOption$1 = (props, {
     size: 'tiny',
     ...forwardedProps,
     hidden,
-    className: !hidden ? classnames(className, block$S()) : undefined,
+    className: !hidden ? classnames(className, block$T()) : undefined,
     before,
     after,
     role: itemRole,
@@ -7821,7 +7858,7 @@ const ComboboxOption$1 = (props, {
       children: [wrappedAction, description && /*#__PURE__*/jsx("p", {
         id: descriptionId,
         ...getTextProps({
-          className: element$H('description'),
+          className: element$I('description'),
           typography: 'caption',
           color: 'dark-L2'
         }),
@@ -8030,8 +8067,8 @@ const COMPONENT_NAME$15 = 'ComboboxOptionMoreInfo';
  */
 const CLASSNAME$14 = 'lumx-combobox-option-more-info';
 const {
-  block: block$R,
-  element: element$G
+  block: block$S,
+  element: element$H
 } = bem(CLASSNAME$14);
 
 /**
@@ -8066,7 +8103,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       icon: mdiInformationOutline,
       size: "s",
       ...buttonProps,
-      className: block$R([className, buttonProps?.className]),
+      className: block$S([className, buttonProps?.className]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -8077,7 +8114,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       label: ""
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
-      className: element$G('popover'),
+      className: element$H('popover'),
       anchorRef: ref,
       isOpen: isOpen,
       closeMode: "unmount",
@@ -8278,8 +8315,8 @@ const COMPONENT_NAME$14 = 'Popover';
  */
 const CLASSNAME$13 = 'lumx-popover';
 const {
-  block: block$Q,
-  element: element$F
+  block: block$R,
+  element: element$G
 } = bem(CLASSNAME$13);
 
 /**
@@ -8342,7 +8379,7 @@ const Popover$1 = (props, {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$Q({
+      className: classnames(className, block$R({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position),
@@ -8355,7 +8392,7 @@ const Popover$1 = (props, {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: arrowRef,
-          className: element$F('arrow'),
+          className: element$G('arrow'),
           style: isHidden ? undefined : arrowStyle,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -8821,8 +8858,8 @@ const COMPONENT_NAME$13 = 'SkeletonTypography';
  */
 const CLASSNAME$12 = 'lumx-skeleton-typography';
 const {
-  block: block$P,
-  element: element$E
+  block: block$Q,
+  element: element$F
 } = bem(CLASSNAME$12);
 
 /**
@@ -8844,7 +8881,7 @@ const SkeletonTypography$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$P({
+    className: classnames(className, block$Q({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -8854,7 +8891,7 @@ const SkeletonTypography$1 = props => {
       width
     },
     children: /*#__PURE__*/jsx("div", {
-      className: element$E('inner')
+      className: element$F('inner')
     })
   });
 };
@@ -8886,9 +8923,10 @@ const ComboboxOptionSkeleton$1 = props => {
     children,
     className,
     ref,
+    count = 1,
     ...forwardedProps
   } = props;
-  return ListItem$1({
+  const itemProps = {
     ref,
     size: 'tiny',
     role: 'none',
@@ -8903,6 +8941,13 @@ const ComboboxOptionSkeleton$1 = props => {
         theme: "light"
       })]
     })
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/jsx(ListItem$1, {
+      ...itemProps
+    }, i))
   });
 };
 
@@ -8931,19 +8976,13 @@ const ComboboxOptionSkeleton$1 = props => {
  * @return React element(s).
  */
 const ComboboxOptionSkeleton = props => {
-  const {
-    count = 1,
-    ...itemProps
-  } = props;
   const {
     handle
   } = useComboboxContext();
   useEffect(() => handle?.registerSkeleton(), [handle]);
-  return Array.from({
-    length: count
-  }, (_, i) => /*#__PURE__*/jsx(ComboboxOptionSkeleton$1, {
-    ...itemProps
-  }, i));
+  return /*#__PURE__*/jsx(ComboboxOptionSkeleton$1, {
+    ...props
+  });
 };
 ComboboxOptionSkeleton.displayName = COMPONENT_NAME$12;
 ComboboxOptionSkeleton.className = CLASSNAME$11;
@@ -8954,6 +8993,10 @@ const COMPONENT_NAME$11 = 'ComboboxPopover';
  * Component default class name.
  */
 const CLASSNAME$10 = 'lumx-combobox-popover';
+const {
+  block: block$P,
+  element: element$E
+} = bem(CLASSNAME$10);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -8975,7 +9018,8 @@ const CLASSNAME$10 = 'lumx-combobox-popover';
  * @return JSX element.
  */
 const ComboboxPopover$1 = (props, {
-  Popover
+  Popover,
+  FlexBox
 }) => {
   const {
     children,
@@ -8993,17 +9037,95 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
-    className: classnames(className, CLASSNAME$10),
+    className: block$P([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
     closeMode: "hide",
-    children: children
+    children: /*#__PURE__*/jsx(FlexBox, {
+      orientation: "vertical",
+      className: element$E('scroll'),
+      children: children
+    })
   });
 };
 
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$10 = 'FlexBox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$$ = 'lumx-flex-box';
+const {
+  block: block$O
+} = bem(CLASSNAME$$);
+
+/**
+ * Get FlexBox component props (className computation).
+ *
+ * @param  props Component props.
+ * @return Computed props with className.
+ */
+function getFlexBoxProps(props) {
+  const {
+    className,
+    fillSpace,
+    gap,
+    hAlign,
+    marginAuto,
+    noShrink,
+    vAlign,
+    wrap,
+    orientation,
+    ...forwardedProps
+  } = props;
+  const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
+  return {
+    ...forwardedProps,
+    className: classnames(className, block$O({
+      [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
+      [`v-align-${vAlign}`]: Boolean(vAlign),
+      [`h-align-${hAlign}`]: Boolean(hAlign),
+      [`gap-${gap}`]: Boolean(gap),
+      wrap: Boolean(wrap),
+      'fill-space': fillSpace,
+      'no-shrink': noShrink,
+      ...Object.fromEntries(castArray(marginAuto).filter(Boolean).map(align => [`margin-auto-${align}`, true]))
+    }))
+  };
+}
+
+/**
+ * FlexBox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const FlexBox = forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    children,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    ...getFlexBoxProps(forwardedProps),
+    children: children
+  });
+});
+FlexBox.displayName = COMPONENT_NAME$10;
+FlexBox.className = CLASSNAME$$;
+
 /**
  * Props for Popover that can be passed to Combobox.Popover.
  * Excludes isOpen, anchorRef, children, and onClose which are managed internally.
@@ -9036,7 +9158,8 @@ const ComboboxPopover = props => {
     anchorRef: anchorRef,
     handleClose: () => setIsOpen(false)
   }, {
-    Popover
+    Popover,
+    FlexBox
   });
 };
 ComboboxPopover.displayName = COMPONENT_NAME$11;
@@ -9074,12 +9197,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'ComboboxSection';
+const COMPONENT_NAME$$ = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-combobox-section';
+const CLASSNAME$_ = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -9106,7 +9229,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'
@@ -9115,365 +9238,24 @@ const ComboboxSection$1 = (props, {
   });
 };
 
-const INITIAL_INDEX = -1;
-
 /**
- * This custom hook provides the necessary set of functions and values to properly navigate
- * a list using the keyboard.
- *
- * @param  items                    the list of items that will be navigated using the keyboard.
- * @param  ref                      A reference to the element that is controlling the navigation.
- * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
- * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
- * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
- * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
- * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
- * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
- * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
- * @return useKeyboardListNavigation helpers.
+ * Component display name.
  */
-const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX, preventTabOnEnteredValue = true) => {
-  const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
-
-  /**
-   * This function calculates the next index in the list to be highlighted
-   * @param key - key code pressed
-   * @return next active index
-   */
-  const calculateActiveIndex = key => {
-    switch (key) {
-      case 'ArrowDown':
-        return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
-      case 'ArrowUp':
-        return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
-      default:
-        return initialIndex;
-    }
-  };
+const COMPONENT_NAME$_ = 'ListSection';
 
-  /**
-   * Resets the active index to the initial state
-   */
-  const resetActiveIndex = () => {
-    setActiveItemIndex(initialIndex);
-  };
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$Z = 'lumx-list-section';
+const {
+  block: block$N,
+  element: element$D
+} = bem(CLASSNAME$Z);
 
-  /**
-   * Prevents the default event and stops the propagation of said event
-   * @param evt - key pressed event
-   */
-  const preventDefaultAndStopPropagation = evt => {
-    evt.preventDefault();
-    evt.stopPropagation();
-  };
-
-  /**
-   * Handles navigation with the arrows using the keyboard
-   * @param evt - key pressed event
-   */
-  const onArrowPressed = evt => {
-    const {
-      key
-    } = evt;
-    const nextActiveIndex = calculateActiveIndex(key);
-    setActiveItemIndex(nextActiveIndex);
-    preventDefaultAndStopPropagation(evt);
-    if (onListItemNavigated) {
-      const selectedItem = items[nextActiveIndex];
-      onListItemNavigated(selectedItem);
-    }
-  };
-
-  /**
-   * Handles the event when the backspace key is pressed
-   * @param evt - key pressed event
-   */
-  const onBackspaceKeyPressed = evt => {
-    if (onBackspacePressed) {
-      onBackspacePressed(evt);
-    }
-  };
-
-  /**
-   * Handles when the ENTER key is pressed
-   * @param evt - key pressed event
-   */
-  const onEnterKeyPressed = evt => {
-    if (!onListItemSelected) {
-      return;
-    }
-    preventDefaultAndStopPropagation(evt);
-    if (!keepFocusAfterSelection) {
-      evt.currentTarget.blur();
-    }
-    const selectedItem = items[activeItemIndex];
-    if (selectedItem) {
-      onListItemSelected(selectedItem);
-      resetActiveIndex();
-    } else if (activeItemIndex === initialIndex && onEnterPressed) {
-      const value = get(evt, 'target.value');
-      onEnterPressed(value);
-      resetActiveIndex();
-    }
-  };
-
-  /**
-   * Handles when the TAB key is pressed
-   * @param evt - key pressed event
-   */
-  const onTabKeyPressed = evt => {
-    const value = get(evt, 'target.value');
-    if (preventTabOnEnteredValue && value && value.length > 0) {
-      preventDefaultAndStopPropagation(evt);
-    }
-  };
-
-  /**
-   * In order to make it easier in the future to add new events depending on the key
-   * a map was created to add these handlers. In the future, if there is another event
-   * that we need to manage depending on a specific key, we just need to add the key code
-   * here, and as a value, the handler for said key.
-   */
-  const eventsForKeyPressed = {
-    ArrowDown: onArrowPressed,
-    Tab: onTabKeyPressed,
-    ArrowUp: onArrowPressed,
-    Enter: onEnterKeyPressed,
-    Backspace: onBackspaceKeyPressed
-  };
-
-  /**
-   * Calculates the next active item index depending on the key pressed.
-   * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
-   * and resets the active index, since an item was selected.
-   * @param evt - key pressed or key down event
-   */
-  const onKeyboardNavigation = evt => {
-    const {
-      key
-    } = evt;
-    const handler = eventsForKeyPressed[key];
-    if (handler) {
-      handler(evt);
-    }
-  };
-  useEffect(() => {
-    const {
-      current: currentElement
-    } = ref;
-    if (!currentElement) {
-      return undefined;
-    }
-    currentElement.addEventListener('focus', resetActiveIndex);
-    currentElement.addEventListener('keydown', onKeyboardNavigation);
-    return () => {
-      currentElement.removeEventListener('focus', resetActiveIndex);
-      currentElement.removeEventListener('keydown', onKeyboardNavigation);
-    };
-  });
-  return {
-    activeItemIndex,
-    onKeyboardNavigation,
-    resetActiveIndex,
-    setActiveItemIndex
-  };
-};
-
-/**
- * Defines the props of the component.
- */
-
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/**
- * List component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalList = forwardRef((props, ref) => {
-  const {
-    children,
-    isClickable,
-    onListItemSelected,
-    itemPadding,
-    ...forwardedProps
-  } = props;
-  const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
-  return List$1({
-    ...forwardedProps,
-    ref,
-    children,
-    itemPadding: adjustedItemPadding
-  });
-});
-InternalList.displayName = COMPONENT_NAME$1c;
-InternalList.className = CLASSNAME$1b;
-InternalList.defaultProps = DEFAULT_PROPS$Y;
-const List = Object.assign(InternalList, {
-  useKeyboardListNavigation
-});
-
-/**
- * ListItem.Action props.
- */
-
-/**
- * ListItem.Action sub-component.
- *
- * Renders a button or link with action area classes.
- * When placed as a child of ListItem, it activates the action area pattern:
- * the entire list item becomes visually clickable, while other interactive
- * elements (in `before`/`after` slots) remain independently clickable.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
-  const {
-    children,
-    onClick,
-    ...forwardedProps
-  } = props;
-  return ListItemAction$1({
-    ...forwardedProps,
-    handleClick: onClick,
-    ref,
-    children
-  });
-}), {
-  displayName: COMPONENT_NAME$19,
-  className: CLASSNAME$18,
-  defaultProps: DEFAULT_PROPS$W
-});
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * ListItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const _ListItem = forwardRef((props, ref) => {
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    onItemSelected,
-    onClick,
-    linkRef,
-    ...forwardedProps
-  } = otherProps;
-  const handleClick = event => {
-    onItemSelected?.(event);
-    onClick?.(event);
-  };
-  return ListItem$1({
-    ...forwardedProps,
-    isDisabled: disabledStateProps.disabled,
-    'aria-disabled': disabledStateProps['aria-disabled'],
-    ref,
-    linkRef,
-    handleClick: onItemSelected || props.onClick ? handleClick : undefined
-  });
-});
-_ListItem.displayName = COMPONENT_NAME$1a;
-_ListItem.className = CLASSNAME$19;
-_ListItem.defaultProps = DEFAULT_PROPS$X;
-
-/**
- * ListItem component with Action sub-component.
- */
-const ListItem = Object.assign(_ListItem, {
-  /** Sub-component that renders the default action (button or link) for the action area pattern. */
-  Action: ListItemAction
-});
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$$ = 'ListDivider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$_ = 'lumx-list-divider';
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$T = {};
-
-/**
- * ListDivider component.
- * Purely decorative, consider a `ListSection` with label for a better list structure.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-const ListDivider$1 = props => {
-  const {
-    className,
-    ref,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("li", {
-    ref: ref,
-    role: "none",
-    ...forwardedProps,
-    className: classnames(className, CLASSNAME$_)
-  });
-};
-ListDivider$1.displayName = COMPONENT_NAME$$;
-ListDivider$1.className = CLASSNAME$_;
-ListDivider$1.defaultProps = DEFAULT_PROPS$T;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * ListDivider component.
- * Purely decorative, consider a `ListSection` with label for a better list structure.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ListDivider = forwardRef((props, ref) => {
-  return ListDivider$1({
-    ...props,
-    ref
-  });
-});
-ListDivider.displayName = COMPONENT_NAME$$;
-ListDivider.className = CLASSNAME$_;
-ListDivider.defaultProps = DEFAULT_PROPS$T;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$_ = 'ListSection';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$Z = 'lumx-list-section';
-const {
-  block: block$O,
-  element: element$D
-} = bem(CLASSNAME$Z);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$S = {};
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$T = {};
 
 /**
  * ListSection component.
@@ -9498,7 +9280,7 @@ const ListSection$1 = props => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$O()),
+    className: classnames(className, block$N()),
     children: [hasHeader && /*#__PURE__*/jsxs(Text, {
       as: "p",
       typography: "overline",
@@ -9513,69 +9295,35 @@ const ListSection$1 = props => {
       "aria-labelledby": hasHeader ? labelId : undefined,
       children: children
     })]
-  });
-};
-ListSection$1.displayName = COMPONENT_NAME$_;
-ListSection$1.className = CLASSNAME$Z;
-ListSection$1.defaultProps = DEFAULT_PROPS$S;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * ListSection component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ListSection = forwardRef((props, ref) => {
-  const id = useId();
-  return ListSection$1({
-    ...props,
-    ref,
-    id,
-    Text
-  });
-});
-ListSection.displayName = COMPONENT_NAME$_;
-ListSection.className = CLASSNAME$Z;
-ListSection.defaultProps = DEFAULT_PROPS$S;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$Z = 'ListSubheader';
+  });
+};
+ListSection$1.displayName = COMPONENT_NAME$_;
+ListSection$1.className = CLASSNAME$Z;
+ListSection$1.defaultProps = DEFAULT_PROPS$T;
 
 /**
- * Component default class name and class prefix.
+ * Defines the props of the component.
  */
-const CLASSNAME$Y = 'lumx-list-subheader';
 
 /**
- * ListSubheader component.
- * @deprecated ListSubheader produces improper list structure. use ListSection instead.
+ * ListSection component.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
  */
-const ListSubheader = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("li", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$Y),
-    children: children
+const ListSection = forwardRef((props, ref) => {
+  const id = useId();
+  return ListSection$1({
+    ...props,
+    ref,
+    id,
+    Text
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$Z;
-ListSubheader.className = CLASSNAME$Y;
+ListSection.displayName = COMPONENT_NAME$_;
+ListSection.className = CLASSNAME$Z;
+ListSection.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Props for Combobox.Section component.
@@ -9623,21 +9371,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$10;
-ComboboxSection.className = CLASSNAME$$;
+ComboboxSection.displayName = COMPONENT_NAME$$;
+ComboboxSection.className = CLASSNAME$_;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'ComboboxState';
+const COMPONENT_NAME$Z = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-combobox-state';
+const CLASSNAME$Y = 'lumx-combobox-state';
 const {
-  block: block$N
-} = bem(CLASSNAME$X);
+  block: block$M
+} = bem(CLASSNAME$Y);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -9692,7 +9440,7 @@ const ComboboxState$1 = (props, {
   // the popover's closeMode="hide") and revealing it doesn't trigger announcements.
   const renderContent = isOpen;
   return /*#__PURE__*/jsxs(GenericBlock, {
-    className: classnames(!show && visuallyHidden(), block$N(), padding('regular')),
+    className: classnames(!show && visuallyHidden(), block$M(), padding('regular')),
     orientation: "vertical",
     ...alignProps,
     role: "status",
@@ -9799,21 +9547,21 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'GenericBlock';
+const COMPONENT_NAME$Y = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-generic-block';
+const CLASSNAME$X = 'lumx-generic-block';
 const {
-  block: block$M,
+  block: block$L,
   element: element$C
-} = bem(CLASSNAME$W);
+} = bem(CLASSNAME$X);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -9837,17 +9585,17 @@ const GenericBlock$1 = props => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$R.gap,
+    gap = DEFAULT_PROPS$S.gap,
     ref,
     content,
-    orientation = DEFAULT_PROPS$R.orientation,
+    orientation = DEFAULT_PROPS$S.orientation,
     contentProps,
     FlexBox,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classnames(className, block$M()),
+    className: classnames(className, block$L()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -9950,9 +9698,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$X;
-BaseGenericBlock.className = CLASSNAME$W;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$R;
+BaseGenericBlock.displayName = COMPONENT_NAME$Y;
+BaseGenericBlock.className = CLASSNAME$X;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$S;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -10110,8 +9858,69 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$Y;
-ComboboxState.className = CLASSNAME$X;
+ComboboxState.displayName = COMPONENT_NAME$Z;
+ComboboxState.className = CLASSNAME$Y;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$X = 'ListDivider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$W = 'lumx-list-divider';
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$R = {};
+
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const ListDivider$1 = props => {
+  const {
+    className,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    role: "none",
+    ...forwardedProps,
+    className: classnames(className, CLASSNAME$W)
+  });
+};
+ListDivider$1.displayName = COMPONENT_NAME$X;
+ListDivider$1.className = CLASSNAME$W;
+ListDivider$1.defaultProps = DEFAULT_PROPS$R;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListDivider = forwardRef((props, ref) => {
+  return ListDivider$1({
+    ...props,
+    ref
+  });
+});
+ListDivider.displayName = COMPONENT_NAME$X;
+ListDivider.className = CLASSNAME$W;
+ListDivider.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Combobox compound component namespace.
@@ -10167,7 +9976,7 @@ const COMPONENT_NAME$W = 'CommentBlock';
  */
 const CLASSNAME$V = 'lumx-comment-block';
 const {
-  block: block$L,
+  block: block$K,
   element: element$B
 } = classNames.bem(CLASSNAME$V);
 
@@ -10210,7 +10019,7 @@ const CommentBlock = forwardRef((props, ref) => {
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$L({
+    className: classNames.join(className, block$K({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -11169,7 +10978,7 @@ const COMPONENT_NAME$S = 'Dialog';
  */
 const CLASSNAME$T = 'lumx-dialog';
 const {
-  block: block$K,
+  block: block$J,
   element: element$z
 } = classNames.bem(CLASSNAME$T);
 
@@ -11285,7 +11094,7 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
-      className: classNames.join(className, block$K({
+      className: classNames.join(className, block$J({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -11366,7 +11175,7 @@ const COMPONENT_NAME$R = 'Divider';
  */
 const CLASSNAME$S = 'lumx-divider';
 const {
-  block: block$J
+  block: block$I
 } = bem(CLASSNAME$S);
 
 /**
@@ -11385,7 +11194,7 @@ const Divider$1 = props => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$J({
+    className: classnames(className, block$I({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
@@ -11433,7 +11242,7 @@ const COMPONENT_NAME$Q = 'DragHandle';
  */
 const CLASSNAME$R = 'lumx-drag-handle';
 const {
-  block: block$I
+  block: block$H
 } = bem(CLASSNAME$R);
 
 /**
@@ -11452,7 +11261,7 @@ const DragHandle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$I({
+    className: classnames(className, block$H({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: Icon$1({
@@ -11468,32 +11277,231 @@ const DragHandle$1 = props => {
  */
 
 /**
- * Component default props.
- */
-const DEFAULT_PROPS$N = {};
-
-/**
- * DragHandle component.
+ * Component default props.
+ */
+const DEFAULT_PROPS$N = {};
+
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const DragHandle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    theme = defaultTheme,
+    ...otherProps
+  } = props;
+  return DragHandle$1({
+    ref,
+    theme,
+    ...otherProps
+  });
+});
+DragHandle.displayName = COMPONENT_NAME$Q;
+DragHandle.className = CLASSNAME$R;
+DragHandle.defaultProps = DEFAULT_PROPS$N;
+
+const INITIAL_INDEX = -1;
+
+/**
+ * This custom hook provides the necessary set of functions and values to properly navigate
+ * a list using the keyboard.
+ *
+ * @param  items                    the list of items that will be navigated using the keyboard.
+ * @param  ref                      A reference to the element that is controlling the navigation.
+ * @param  onListItemSelected       callback to be executed when the ENTER key is pressed on an item.
+ * @param  onListItemNavigated      callback to be executed when the Arrow keys are pressed.
+ * @param  onEnterPressed           callback to be executed when the ENTER key is pressed.
+ * @param  onBackspacePressed       callback to be executed when the BACKSPACE key is pressed.
+ * @param  keepFocusAfterSelection  determines whether after selecting an item, the focus should be maintained on the current target or not.
+ * @param  initialIndex             where should the navigation start from. it defaults to `-1`, so the first item navigated is the item on position `0`.
+ * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
+ * @return useKeyboardListNavigation helpers.
+ */
+const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX, preventTabOnEnteredValue = true) => {
+  const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
+
+  /**
+   * This function calculates the next index in the list to be highlighted
+   * @param key - key code pressed
+   * @return next active index
+   */
+  const calculateActiveIndex = key => {
+    switch (key) {
+      case 'ArrowDown':
+        return activeItemIndex + 1 < items.length ? activeItemIndex + 1 : 0;
+      case 'ArrowUp':
+        return activeItemIndex - 1 >= 0 ? activeItemIndex - 1 : items.length - 1;
+      default:
+        return initialIndex;
+    }
+  };
+
+  /**
+   * Resets the active index to the initial state
+   */
+  const resetActiveIndex = () => {
+    setActiveItemIndex(initialIndex);
+  };
+
+  /**
+   * Prevents the default event and stops the propagation of said event
+   * @param evt - key pressed event
+   */
+  const preventDefaultAndStopPropagation = evt => {
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  /**
+   * Handles navigation with the arrows using the keyboard
+   * @param evt - key pressed event
+   */
+  const onArrowPressed = evt => {
+    const {
+      key
+    } = evt;
+    const nextActiveIndex = calculateActiveIndex(key);
+    setActiveItemIndex(nextActiveIndex);
+    preventDefaultAndStopPropagation(evt);
+    if (onListItemNavigated) {
+      const selectedItem = items[nextActiveIndex];
+      onListItemNavigated(selectedItem);
+    }
+  };
+
+  /**
+   * Handles the event when the backspace key is pressed
+   * @param evt - key pressed event
+   */
+  const onBackspaceKeyPressed = evt => {
+    if (onBackspacePressed) {
+      onBackspacePressed(evt);
+    }
+  };
+
+  /**
+   * Handles when the ENTER key is pressed
+   * @param evt - key pressed event
+   */
+  const onEnterKeyPressed = evt => {
+    if (!onListItemSelected) {
+      return;
+    }
+    preventDefaultAndStopPropagation(evt);
+    if (!keepFocusAfterSelection) {
+      evt.currentTarget.blur();
+    }
+    const selectedItem = items[activeItemIndex];
+    if (selectedItem) {
+      onListItemSelected(selectedItem);
+      resetActiveIndex();
+    } else if (activeItemIndex === initialIndex && onEnterPressed) {
+      const value = get(evt, 'target.value');
+      onEnterPressed(value);
+      resetActiveIndex();
+    }
+  };
+
+  /**
+   * Handles when the TAB key is pressed
+   * @param evt - key pressed event
+   */
+  const onTabKeyPressed = evt => {
+    const value = get(evt, 'target.value');
+    if (preventTabOnEnteredValue && value && value.length > 0) {
+      preventDefaultAndStopPropagation(evt);
+    }
+  };
+
+  /**
+   * In order to make it easier in the future to add new events depending on the key
+   * a map was created to add these handlers. In the future, if there is another event
+   * that we need to manage depending on a specific key, we just need to add the key code
+   * here, and as a value, the handler for said key.
+   */
+  const eventsForKeyPressed = {
+    ArrowDown: onArrowPressed,
+    Tab: onTabKeyPressed,
+    ArrowUp: onArrowPressed,
+    Enter: onEnterKeyPressed,
+    Backspace: onBackspaceKeyPressed
+  };
+
+  /**
+   * Calculates the next active item index depending on the key pressed.
+   * If the key pressed was ENTER, the function executes the callback `onListItemSelected`
+   * and resets the active index, since an item was selected.
+   * @param evt - key pressed or key down event
+   */
+  const onKeyboardNavigation = evt => {
+    const {
+      key
+    } = evt;
+    const handler = eventsForKeyPressed[key];
+    if (handler) {
+      handler(evt);
+    }
+  };
+  useEffect(() => {
+    const {
+      current: currentElement
+    } = ref;
+    if (!currentElement) {
+      return undefined;
+    }
+    currentElement.addEventListener('focus', resetActiveIndex);
+    currentElement.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+      currentElement.removeEventListener('focus', resetActiveIndex);
+      currentElement.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  });
+  return {
+    activeItemIndex,
+    onKeyboardNavigation,
+    resetActiveIndex,
+    setActiveItemIndex
+  };
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/**
+ * List component.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
  */
-const DragHandle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
+const InternalList = forwardRef((props, ref) => {
   const {
-    theme = defaultTheme,
-    ...otherProps
+    children,
+    isClickable,
+    onListItemSelected,
+    itemPadding,
+    ...forwardedProps
   } = props;
-  return DragHandle$1({
+  const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
+  return List$1({
+    ...forwardedProps,
     ref,
-    theme,
-    ...otherProps
+    children,
+    itemPadding: adjustedItemPadding
   });
 });
-DragHandle.displayName = COMPONENT_NAME$Q;
-DragHandle.className = CLASSNAME$R;
-DragHandle.defaultProps = DEFAULT_PROPS$N;
+InternalList.displayName = COMPONENT_NAME$1c;
+InternalList.className = CLASSNAME$1b;
+InternalList.defaultProps = DEFAULT_PROPS$Y;
+const List = Object.assign(InternalList, {
+  useKeyboardListNavigation
+});
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -11546,7 +11554,7 @@ const COMPONENT_NAME$P = 'Dropdown';
  */
 const CLASSNAME$Q = 'lumx-dropdown';
 const {
-  block: block$H,
+  block: block$G,
   element: element$y
 } = classNames.bem(CLASSNAME$Q);
 
@@ -11612,7 +11620,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$H()),
+    className: classNames.join(className, block$G()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -11645,7 +11653,7 @@ const COMPONENT_NAME$O = 'ExpansionPanel';
  */
 const CLASSNAME$P = 'lumx-expansion-panel';
 const {
-  block: block$G,
+  block: block$F,
   element: element$x
 } = bem(CLASSNAME$P);
 
@@ -11701,7 +11709,7 @@ const ExpansionPanel$1 = props => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classnames(className, block$G({
+  const rootClassName = classnames(className, block$F({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -11844,7 +11852,7 @@ const COMPONENT_NAME$N = 'Flag';
 const CLASSNAME$O = 'lumx-flag';
 const DEFAULT_PROPS$K = {};
 const {
-  block: block$F,
+  block: block$E,
   element: element$w
 } = bem(CLASSNAME$O);
 
@@ -11869,7 +11877,7 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$F({
+    className: classnames(className, block$E({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
@@ -11908,80 +11916,6 @@ Flag.displayName = COMPONENT_NAME$N;
 Flag.className = CLASSNAME$O;
 Flag.defaultProps = DEFAULT_PROPS$K;
 
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$M = 'FlexBox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$N = 'lumx-flex-box';
-const {
-  block: block$E
-} = bem(CLASSNAME$N);
-
-/**
- * Get FlexBox component props (className computation).
- *
- * @param  props Component props.
- * @return Computed props with className.
- */
-function getFlexBoxProps(props) {
-  const {
-    className,
-    fillSpace,
-    gap,
-    hAlign,
-    marginAuto,
-    noShrink,
-    vAlign,
-    wrap,
-    orientation,
-    ...forwardedProps
-  } = props;
-  const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
-  return {
-    ...forwardedProps,
-    className: classnames(className, block$E({
-      [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
-      [`v-align-${vAlign}`]: Boolean(vAlign),
-      [`h-align-${hAlign}`]: Boolean(hAlign),
-      [`gap-${gap}`]: Boolean(gap),
-      wrap: Boolean(wrap),
-      'fill-space': fillSpace,
-      'no-shrink': noShrink,
-      ...Object.fromEntries(castArray(marginAuto).filter(Boolean).map(align => [`margin-auto-${align}`, true]))
-    }))
-  };
-}
-
-/**
- * FlexBox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const FlexBox = forwardRef((props, ref) => {
-  const {
-    as: Component = 'div',
-    children,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(Component, {
-    ref: ref,
-    ...getFlexBoxProps(forwardedProps),
-    children: children
-  });
-});
-FlexBox.displayName = COMPONENT_NAME$M;
-FlexBox.className = CLASSNAME$N;
-
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
 
@@ -12008,12 +11942,12 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Heading';
+const COMPONENT_NAME$M = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-heading';
+const CLASSNAME$N = 'lumx-heading';
 
 /**
  * Component default props.
@@ -12038,7 +11972,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$M),
+    className: classnames(className, CLASSNAME$N),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12076,8 +12010,8 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$L;
-Heading.className = CLASSNAME$M;
+Heading.displayName = COMPONENT_NAME$M;
+Heading.className = CLASSNAME$N;
 Heading.defaultProps = DEFAULT_PROPS$J;
 
 /**
@@ -12116,15 +12050,15 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Grid';
+const COMPONENT_NAME$L = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-grid';
+const CLASSNAME$M = 'lumx-grid';
 const {
   block: block$D
-} = classNames.bem(CLASSNAME$L);
+} = classNames.bem(CLASSNAME$M);
 
 /**
  * Component default props.
@@ -12155,7 +12089,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$L}-container`).block(), block$D({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$M}-container`).block(), block$D({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -12165,22 +12099,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$K;
-Grid.className = CLASSNAME$L;
+Grid.displayName = COMPONENT_NAME$L;
+Grid.className = CLASSNAME$M;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'GridItem';
+const COMPONENT_NAME$K = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-grid-item';
+const CLASSNAME$L = 'lumx-grid-item';
 const {
   block: block$C
-} = classNames.bem(CLASSNAME$K);
+} = classNames.bem(CLASSNAME$L);
 
 /**
  * GridItem component.
@@ -12209,18 +12143,18 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$J;
-GridItem.className = CLASSNAME$K;
+GridItem.displayName = COMPONENT_NAME$K;
+GridItem.className = CLASSNAME$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'GridColumn';
+const COMPONENT_NAME$J = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-grid-column';
+const CLASSNAME$K = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -12250,7 +12184,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$J),
+    className: classnames(className, CLASSNAME$K),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -12260,8 +12194,8 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$I;
-GridColumn$1.className = CLASSNAME$J;
+GridColumn$1.displayName = COMPONENT_NAME$J;
+GridColumn$1.className = CLASSNAME$K;
 GridColumn$1.defaultProps = DEFAULT_PROPS$H;
 
 /**
@@ -12290,8 +12224,8 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$I;
-GridColumn.className = CLASSNAME$J;
+GridColumn.displayName = COMPONENT_NAME$J;
+GridColumn.className = CLASSNAME$K;
 GridColumn.defaultProps = DEFAULT_PROPS$G;
 
 /**
@@ -12411,16 +12345,16 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ImageBlock';
+const COMPONENT_NAME$I = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-image-block';
+const CLASSNAME$J = 'lumx-image-block';
 const {
   block: block$B,
   element: element$v
-} = classNames.bem(CLASSNAME$I);
+} = classNames.bem(CLASSNAME$J);
 
 /**
  * Component default props.
@@ -12479,7 +12413,7 @@ const ImageBlock = forwardRef((props, ref) => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$I,
+      baseClassName: CLASSNAME$J,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -12495,19 +12429,19 @@ const ImageBlock = forwardRef((props, ref) => {
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$H;
-ImageBlock.className = CLASSNAME$I;
+ImageBlock.displayName = COMPONENT_NAME$I;
+ImageBlock.className = CLASSNAME$J;
 ImageBlock.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'ImageLightbox';
+const COMPONENT_NAME$H = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-image-lightbox';
+const CLASSNAME$I = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -12753,7 +12687,7 @@ function useAnimateScroll(scrollAreaRef) {
 
 const {
   element: element$u
-} = classNames.bem(CLASSNAME$H);
+} = classNames.bem(CLASSNAME$I);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -12845,7 +12779,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 
 const {
   element: element$t
-} = classNames.bem(CLASSNAME$H);
+} = classNames.bem(CLASSNAME$I);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -13091,7 +13025,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$H
+          name: CLASSNAME$I
         }
       });
     }
@@ -13143,7 +13077,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$H
+          name: CLASSNAME$I
         }
       });
     }
@@ -13197,7 +13131,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$H),
+    className: classNames.join(className, CLASSNAME$I),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -13226,8 +13160,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$G;
-Inner.className = CLASSNAME$H;
+Inner.displayName = COMPONENT_NAME$H;
+Inner.className = CLASSNAME$I;
 
 /**
  * ImageLightbox component.
@@ -13243,16 +13177,16 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'InlineList';
+const COMPONENT_NAME$G = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-inline-list';
+const CLASSNAME$H = 'lumx-inline-list';
 const {
   block: block$A,
   element: element$s
-} = bem(CLASSNAME$G);
+} = bem(CLASSNAME$H);
 
 /**
  * Component default props.
@@ -13304,8 +13238,8 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$F;
-InlineList$1.className = CLASSNAME$G;
+InlineList$1.displayName = COMPONENT_NAME$G;
+InlineList$1.className = CLASSNAME$H;
 InlineList$1.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -13330,8 +13264,8 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$F;
-InlineList.className = CLASSNAME$G;
+InlineList.displayName = COMPONENT_NAME$G;
+InlineList.className = CLASSNAME$H;
 InlineList.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -13375,16 +13309,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'Lightbox';
+const COMPONENT_NAME$F = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-lightbox';
+const CLASSNAME$G = 'lumx-lightbox';
 const {
   block: block$z,
   element: element$r
-} = classNames.bem(CLASSNAME$F);
+} = classNames.bem(CLASSNAME$G);
 
 /**
  * Lightbox component.
@@ -13507,8 +13441,8 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$E;
-Lightbox.className = CLASSNAME$F;
+Lightbox.displayName = COMPONENT_NAME$F;
+Lightbox.className = CLASSNAME$G;
 
 /**
  * Defines the props of the component.
@@ -13517,15 +13451,15 @@ Lightbox.className = CLASSNAME$F;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'Link';
+const COMPONENT_NAME$E = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-link';
+const CLASSNAME$F = 'lumx-link';
 const {
   block: block$y
-} = bem(CLASSNAME$E);
+} = bem(CLASSNAME$F);
 
 /**
  * Link component.
@@ -13564,7 +13498,7 @@ const Link$1 = props => {
 
 const {
   element: element$q
-} = classNames.bem(CLASSNAME$E);
+} = classNames.bem(CLASSNAME$F);
 
 /**
  * Defines the props of the component.
@@ -13610,22 +13544,22 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$D;
-Link.className = CLASSNAME$E;
+Link.displayName = COMPONENT_NAME$E;
+Link.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'LinkPreview';
+const COMPONENT_NAME$D = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-link-preview';
+const CLASSNAME$E = 'lumx-link-preview';
 const {
   block: block$x,
   element: element$p
-} = classNames.bem(CLASSNAME$D);
+} = classNames.bem(CLASSNAME$E);
 
 /**
  * Component default props.
@@ -13720,10 +13654,125 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$C;
-LinkPreview.className = CLASSNAME$D;
+LinkPreview.displayName = COMPONENT_NAME$D;
+LinkPreview.className = CLASSNAME$E;
 LinkPreview.defaultProps = DEFAULT_PROPS$D;
 
+/**
+ * ListItem.Action props.
+ */
+
+/**
+ * ListItem.Action sub-component.
+ *
+ * Renders a button or link with action area classes.
+ * When placed as a child of ListItem, it activates the action area pattern:
+ * the entire list item becomes visually clickable, while other interactive
+ * elements (in `before`/`after` slots) remain independently clickable.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    children,
+    onClick,
+    ...forwardedProps
+  } = props;
+  return ListItemAction$1({
+    ...forwardedProps,
+    handleClick: onClick,
+    ref,
+    children
+  });
+}), {
+  displayName: COMPONENT_NAME$19,
+  className: CLASSNAME$18,
+  defaultProps: DEFAULT_PROPS$W
+});
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const _ListItem = forwardRef((props, ref) => {
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    onItemSelected,
+    onClick,
+    linkRef,
+    ...forwardedProps
+  } = otherProps;
+  const handleClick = event => {
+    onItemSelected?.(event);
+    onClick?.(event);
+  };
+  return ListItem$1({
+    ...forwardedProps,
+    isDisabled: disabledStateProps.disabled,
+    'aria-disabled': disabledStateProps['aria-disabled'],
+    ref,
+    linkRef,
+    handleClick: onItemSelected || props.onClick ? handleClick : undefined
+  });
+});
+_ListItem.displayName = COMPONENT_NAME$1a;
+_ListItem.className = CLASSNAME$19;
+_ListItem.defaultProps = DEFAULT_PROPS$X;
+
+/**
+ * ListItem component with Action sub-component.
+ */
+const ListItem = Object.assign(_ListItem, {
+  /** Sub-component that renders the default action (button or link) for the action area pattern. */
+  Action: ListItemAction
+});
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$C = 'ListSubheader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$D = 'lumx-list-subheader';
+
+/**
+ * ListSubheader component.
+ * @deprecated ListSubheader produces improper list structure. use ListSection instead.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListSubheader = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames.join(className, CLASSNAME$D),
+    children: children
+  });
+});
+ListSubheader.displayName = COMPONENT_NAME$C;
+ListSubheader.className = CLASSNAME$D;
+
 /**
  * Component display name.
  */