@lumx/react 4.9.0-next.9 → 4.10.0-next.0

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment as Alignment$1, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant as ColorVariant$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Alignment as Alignment$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -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`. */
@@ -725,7 +725,7 @@ function resolveColorWithVariants(colorWithVariants, colorVariant) {
  * color('font', undefined); // undefined
  */
 function color(type, propColor, propColorVariant) {
-  const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  const [cColor, cColorVariant = ColorVariant$1.N] = resolveColorWithVariants(propColor, propColorVariant);
   return `lumx-color-${type}-${cColor}-${cColorVariant}`;
 }
 
@@ -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,
@@ -948,7 +948,10 @@ const AspectRatio = {
   /** Ratio 3:2 */
   horizontal: 'horizontal',
   /** Ratio 1:1 */
-  square: 'square'};
+  square: 'square',
+  /** Ratio constrained by the parent. */
+  free: 'free'
+};
 /**
  * Semantic info about the purpose of the component
  */
@@ -969,6 +972,12 @@ const ColorPalette = {
   yellow: 'yellow',
   red: 'red',
   light: 'light'};
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+  N: 'N'
+};
 
 /** ColorPalette with all possible color variant combination */
 
@@ -997,8 +1006,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);
 
 /**
@@ -1029,15 +1038,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
     })]
   });
@@ -1078,7 +1087,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,
@@ -1104,7 +1113,7 @@ const COMPONENT_NAME$1s = 'Badge';
  */
 const CLASSNAME$1r = 'lumx-badge';
 const {
-  block: block$15
+  block: block$16
 } = bem(CLASSNAME$1r);
 
 /**
@@ -1131,7 +1140,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
@@ -1165,8 +1174,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 {
@@ -1179,9 +1188,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
     })]
   });
@@ -1485,7 +1494,7 @@ const IconClassName = 'lumx-icon';
 
 const CLASSNAME$1o = IconClassName;
 const {
-  block: block$13
+  block: block$14
 } = bem(CLASSNAME$1o);
 
 /**
@@ -1540,7 +1549,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,
@@ -1729,7 +1738,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 = {};
 
@@ -1751,7 +1760,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)
@@ -1784,7 +1793,7 @@ const InputHelperClassName = 'lumx-input-helper';
 
 const CLASSNAME$1k = InputHelperClassName;
 const {
-  block: block$11
+  block: block$12
 } = bem(CLASSNAME$1k);
 
 /**
@@ -1812,7 +1821,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)
     })),
@@ -1839,8 +1848,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);
 
 /**
@@ -1877,7 +1886,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,
@@ -1885,12 +1894,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,
@@ -1902,26 +1911,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
       })]
@@ -2026,8 +2035,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);
 
 /**
@@ -2095,7 +2104,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,
@@ -2112,19 +2121,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,
@@ -2387,8 +2396,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);
 
 /**
@@ -2419,7 +2428,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);
@@ -2463,7 +2472,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,
@@ -2495,7 +2504,8 @@ function isOptionDisabled(option) {
 /** Returns true when the cell is NOT the first gridcell in its row (i.e., it's an action cell). */
 function isActionCell(cell) {
   const row = cell.closest('[role="row"]');
-  return row?.querySelector('[role="gridcell"]') !== cell;
+  if (!row) return false;
+  return row.querySelector('[role="gridcell"]') !== cell;
 }
 
 /** Predicate matching an option element that carries `aria-selected="true"`. */
@@ -3130,7 +3140,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'
       });
@@ -3344,7 +3356,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.
    */
@@ -3366,16 +3378,17 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       switch (event.key) {
         case 'Enter':
           if (handle.isOpen && nav?.hasActiveItem && nav.activeItem) {
-            if (!isOptionDisabled(nav.activeItem)) {
-              // Click the active item. For option cells, the delegated click handler
-              // on the listbox will call handle.select() and handle closing.
-              // For action cells and link options, the native click fires too.
-              nav.activeItem.click();
+            // Capture activeItem before click — the click handler may close
+            // the popover and clear the focus navigation state.
+            const {
+              activeItem
+            } = nav;
+            // "Click" on active option
+            if (!isOptionDisabled(activeItem)) {
+              activeItem.click();
             }
-            // Close for single-select. For option cells the delegated handler
-            // already closed, but setIsOpen(false) is idempotent. For action cells
-            // and disabled options, the delegated handler did NOT close, so this is needed.
-            if (!handle.isMultiSelect) {
+            // Only close when not in multi select and not in action cell
+            if (!handle.isMultiSelect && !isActionCell(activeItem)) {
               handle.setIsOpen(false);
             }
           } else if (!handle.isMultiSelect) {
@@ -3431,15 +3444,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);
@@ -3479,10 +3483,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);
@@ -3548,7 +3559,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
@@ -3566,7 +3577,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;
@@ -3824,6 +3835,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) {
@@ -6059,8 +6077,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);
 
 /**
@@ -6092,7 +6110,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: {
@@ -6101,9 +6119,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))
@@ -6620,6 +6638,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.).
@@ -6657,6 +6678,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);
@@ -6669,6 +6691,7 @@ function setupComboboxInput(input, options) {
 
     // Open on focus.
     input.addEventListener('focus', () => {
+      if (isDisabled()) return;
       combobox.focusNav?.clear();
       combobox.setIsOpen(true);
     }, {
@@ -6676,7 +6699,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
     });
 
@@ -6722,6 +6748,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.
  */
@@ -6758,7 +6801,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",
@@ -6767,11 +6815,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,
@@ -6799,8 +6847,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);
 
 /**
@@ -6870,7 +6918,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),
@@ -6886,16 +6934,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({
@@ -6904,44 +6952,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
@@ -6950,7 +6998,7 @@ const TextField$1 = props => {
 };
 
 const {
-  block: block$X
+  block: block$Y
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -6974,6 +7022,7 @@ const RawInputText$1 = props => {
     theme,
     value,
     handleChange,
+    handleInput,
     type = DEFAULT_PROPS$10.type,
     name,
     ref,
@@ -6982,16 +7031,20 @@ const RawInputText$1 = props => {
   const handleOnChange = evt => {
     handleChange?.(evt.target.value, name, evt);
   };
+  const handleOnInput = evt => {
+    handleInput?.(evt.target.value, name, evt);
+  };
   return /*#__PURE__*/jsx("input", {
     ...forwardedProps,
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$X({
+    className: classnames(className, block$Y({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
     onChange: handleOnChange,
+    onInput: handleOnInput,
     value: value
   });
 };
@@ -7016,7 +7069,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$W
+  block: block$X
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7040,6 +7093,7 @@ const RawInputTextarea$1 = props => {
     theme,
     value,
     handleChange,
+    handleInput,
     rows = DEFAULT_PROPS$$.rows,
     name,
     ref,
@@ -7048,15 +7102,19 @@ const RawInputTextarea$1 = props => {
   const handleOnChange = evt => {
     handleChange?.(evt.target.value, name, evt);
   };
+  const handleOnInput = evt => {
+    handleInput?.(evt.target.value, name, evt);
+  };
   return /*#__PURE__*/jsx("textarea", {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$W({
+    className: classnames(className, block$X({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
     onChange: handleOnChange,
+    onInput: handleOnInput,
     value: value,
     rows: rows
   });
@@ -7378,7 +7436,7 @@ const COMPONENT_NAME$1c = 'List';
  */
 const CLASSNAME$1b = 'lumx-list';
 const {
-  block: block$V
+  block: block$W
 } = bem(CLASSNAME$1b);
 
 /**
@@ -7402,7 +7460,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,
@@ -7551,8 +7609,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);
 
 /**
@@ -7590,7 +7648,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({
@@ -7598,7 +7656,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'
@@ -7607,13 +7665,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
         })]
       })
@@ -7681,7 +7739,7 @@ const COMPONENT_NAME$18 = 'Text';
  */
 const CLASSNAME$17 = 'lumx-text';
 const {
-  block: block$T
+  block: block$U
 } = bem(CLASSNAME$17);
 
 /**
@@ -7723,7 +7781,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
@@ -7746,8 +7804,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);
 
 /**
@@ -7792,7 +7850,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,
@@ -7810,7 +7868,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,
@@ -7818,7 +7876,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'
         }),
@@ -8027,8 +8085,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);
 
 /**
@@ -8063,7 +8121,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
@@ -8074,7 +8132,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",
@@ -8275,8 +8333,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);
 
 /**
@@ -8339,7 +8397,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),
@@ -8352,7 +8410,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",
@@ -8818,8 +8876,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);
 
 /**
@@ -8841,7 +8899,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)
@@ -8851,7 +8909,7 @@ const SkeletonTypography$1 = props => {
       width
     },
     children: /*#__PURE__*/jsx("div", {
-      className: element$E('inner')
+      className: element$F('inner')
     })
   });
 };
@@ -8883,9 +8941,10 @@ const ComboboxOptionSkeleton$1 = props => {
     children,
     className,
     ref,
+    count = 1,
     ...forwardedProps
   } = props;
-  return ListItem$1({
+  const itemProps = {
     ref,
     size: 'tiny',
     role: 'none',
@@ -8900,6 +8959,13 @@ const ComboboxOptionSkeleton$1 = props => {
         theme: "light"
       })]
     })
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/jsx(ListItem$1, {
+      ...itemProps
+    }, i))
   });
 };
 
@@ -8928,19 +8994,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;
@@ -8951,6 +9011,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.
@@ -8972,7 +9036,8 @@ const CLASSNAME$10 = 'lumx-combobox-popover';
  * @return JSX element.
  */
 const ComboboxPopover$1 = (props, {
-  Popover
+  Popover,
+  FlexBox
 }) => {
   const {
     children,
@@ -8990,17 +9055,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.
@@ -9033,7 +9176,8 @@ const ComboboxPopover = props => {
     anchorRef: anchorRef,
     handleClose: () => setIsOpen(false)
   }, {
-    Popover
+    Popover,
+    FlexBox
   });
 };
 ComboboxPopover.displayName = COMPONENT_NAME$11;
@@ -9071,12 +9215,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.
@@ -9103,7 +9247,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'
@@ -9112,365 +9256,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.
@@ -9495,7 +9298,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",
@@ -9514,7 +9317,7 @@ const ListSection$1 = props => {
 };
 ListSection$1.displayName = COMPONENT_NAME$_;
 ListSection$1.className = CLASSNAME$Z;
-ListSection$1.defaultProps = DEFAULT_PROPS$S;
+ListSection$1.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Defines the props of the component.
@@ -9538,41 +9341,7 @@ const ListSection = forwardRef((props, ref) => {
 });
 ListSection.displayName = COMPONENT_NAME$_;
 ListSection.className = CLASSNAME$Z;
-ListSection.defaultProps = DEFAULT_PROPS$S;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$Z = 'ListSubheader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$Y = '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$Y),
-    children: children
-  });
-});
-ListSubheader.displayName = COMPONENT_NAME$Z;
-ListSubheader.className = CLASSNAME$Y;
+ListSection.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Props for Combobox.Section component.
@@ -9620,21 +9389,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.
@@ -9689,7 +9458,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",
@@ -9796,21 +9565,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
 };
@@ -9834,17 +9603,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,
@@ -9947,9 +9716,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,
@@ -10107,8 +9876,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.
@@ -10164,7 +9994,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);
 
@@ -10207,7 +10037,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,
@@ -11166,7 +10996,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);
 
@@ -11282,7 +11112,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,
@@ -11363,7 +11193,7 @@ const COMPONENT_NAME$R = 'Divider';
  */
 const CLASSNAME$S = 'lumx-divider';
 const {
-  block: block$J
+  block: block$I
 } = bem(CLASSNAME$S);
 
 /**
@@ -11382,7 +11212,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)
     }))
   });
@@ -11420,77 +11250,276 @@ Divider.displayName = COMPONENT_NAME$R;
 Divider.className = CLASSNAME$S;
 Divider.defaultProps = DEFAULT_PROPS$O;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$Q = 'DragHandle';
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$Q = 'DragHandle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$R = 'lumx-drag-handle';
+const {
+  block: block$H
+} = bem(CLASSNAME$R);
+
+/**
+ * DragHandle component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const DragHandle$1 = props => {
+  const {
+    className,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$H({
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: Icon$1({
+      icon: mdiDragVertical,
+      color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
+      size: Size.xs
+    })
+  });
+};
+
+/**
+ * Defines the props of the 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();
+    }
+  };
 
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$R = 'lumx-drag-handle';
-const {
-  block: block$I
-} = bem(CLASSNAME$R);
+  /**
+   * 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);
+    }
+  };
 
-/**
- * DragHandle component.
- *
- * @param  props Component props.
- * @return JSX element.
- */
-const DragHandle$1 = props => {
-  const {
-    className,
-    theme,
-    ref,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classnames(className, block$I({
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    children: Icon$1({
-      icon: mdiDragVertical,
-      color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
-      size: Size.xs
-    })
+  /**
+   * 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 */
 /**
- * Component default props.
- */
-const DEFAULT_PROPS$N = {};
-
-/**
- * DragHandle component.
+ * 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;
@@ -11543,7 +11572,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);
 
@@ -11609,7 +11638,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,
@@ -11642,9 +11671,9 @@ const COMPONENT_NAME$O = 'ExpansionPanel';
  */
 const CLASSNAME$P = 'lumx-expansion-panel';
 const {
-  block: block$G,
+  block: block$F,
   element: element$x
-} = classNames.bem(CLASSNAME$P);
+} = bem(CLASSNAME$P);
 
 /**
  * Component default props.
@@ -11652,9 +11681,6 @@ const {
 const DEFAULT_PROPS$L = {
   closeMode: 'unmount'
 };
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -11663,48 +11689,45 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-const ExpansionPanel = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ExpansionPanel$1 = props => {
   const {
     className,
-    closeMode = DEFAULT_PROPS$L.closeMode,
     children: anyChildren,
     hasBackground,
+    ref,
     hasHeaderDivider,
     isOpen,
     label,
-    onClose,
-    onOpen,
-    onToggleOpen,
-    theme = defaultTheme,
+    handleClose,
+    handleOpen,
+    handleToggleOpen,
+    theme,
     toggleButtonProps,
+    headerProps,
+    headerContent,
+    dragHandle,
+    wrapperRef,
+    content,
+    isChildrenVisible,
+    IconButton,
+    footer,
+    closeMode,
     ...forwardedProps
   } = props;
-  const children = Children.toArray(anyChildren);
-
-  // Partition children by types.
-  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-  // Either take the header in children or create one with the label.
-  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: element$x('label'),
-    children: label
-  });
   const toggleOpen = event => {
     const shouldOpen = !isOpen;
-    if (onOpen && shouldOpen) {
-      onOpen(event);
+    if (handleOpen && shouldOpen) {
+      handleOpen(event);
     }
-    if (onClose && !shouldOpen) {
-      onClose(event);
+    if (handleClose && !shouldOpen) {
+      handleClose(event);
     }
-    if (onToggleOpen) {
-      onToggleOpen(shouldOpen, event);
+    if (handleToggleOpen) {
+      handleToggleOpen(shouldOpen, event);
     }
   };
-  const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$G({
+  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+  const rootClassName = classnames(className, block$F({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -11713,6 +11736,82 @@ const ExpansionPanel = forwardRef((props, ref) => {
     'is-open': isOpen,
     [`theme-${theme}`]: Boolean(theme)
   }));
+  return /*#__PURE__*/jsxs("section", {
+    ref: ref,
+    ...forwardedProps,
+    className: rootClassName,
+    children: [/*#__PURE__*/jsxs("header", {
+      className: element$x('header'),
+      onClick: toggleOpen,
+      children: [dragHandle && /*#__PURE__*/jsx("div", {
+        className: element$x('header-drag'),
+        children: dragHandle
+      }), /*#__PURE__*/jsx("div", {
+        ...headerProps,
+        className: element$x('header-content'),
+        children: headerContent
+      }), /*#__PURE__*/jsx("div", {
+        className: element$x('header-toggle'),
+        children: /*#__PURE__*/jsx(IconButton, {
+          ...toggleButtonProps,
+          color: color,
+          emphasis: Emphasis.low,
+          icon: isOpen ? mdiChevronUp : mdiChevronDown,
+          "aria-expanded": isOpen || 'false'
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: element$x('wrapper'),
+      ref: wrapperRef,
+      children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
+        className: element$x('container'),
+        children: [/*#__PURE__*/jsx("div", {
+          className: element$x('content'),
+          children: content
+        }), footer && /*#__PURE__*/jsx("div", {
+          className: element$x('footer'),
+          children: footer
+        })]
+      })
+    })]
+  });
+};
+
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ExpansionPanel = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    closeMode = DEFAULT_PROPS$L.closeMode,
+    children: anyChildren,
+    isOpen,
+    label,
+    onClose,
+    onOpen,
+    onToggleOpen,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const children = Children.toArray(anyChildren);
+
+  // Partition children by types.
+  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
+
+  // Either take the header in children or create one with the label.
+  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
+    className: element$x('label'),
+    children: label
+  });
   const wrapperRef = useRef(null);
 
   // Children stay visible while the open/close transition is running
@@ -11742,44 +11841,25 @@ const ExpansionPanel = forwardRef((props, ref) => {
     wrapper.addEventListener('transitionend', onTransitionEnd);
     return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
   }, [closeMode]);
-  return /*#__PURE__*/jsxs("section", {
-    ref: ref,
-    ...forwardedProps,
-    className: rootClassName,
-    children: [/*#__PURE__*/jsxs("header", {
-      className: element$x('header'),
-      onClick: toggleOpen,
-      children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: element$x('header-drag'),
-        children: dragHandle
-      }), /*#__PURE__*/jsx("div", {
-        ...headerProps,
-        className: element$x('header-content'),
-        children: headerContent
-      }), /*#__PURE__*/jsx("div", {
-        className: element$x('header-toggle'),
-        children: /*#__PURE__*/jsx(IconButton, {
-          ...toggleButtonProps,
-          color: color,
-          emphasis: Emphasis$1.low,
-          icon: isOpen ? mdiChevronUp : mdiChevronDown,
-          "aria-expanded": isOpen || 'false'
-        })
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: element$x('wrapper'),
-      ref: wrapperRef,
-      children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: element$x('container'),
-        children: [/*#__PURE__*/jsx("div", {
-          className: element$x('content'),
-          children: content
-        }), footer && /*#__PURE__*/jsx("div", {
-          className: element$x('footer'),
-          children: footer
-        })]
-      })
-    })]
+  return ExpansionPanel$1({
+    content,
+    dragHandle,
+    footer,
+    headerContent,
+    ref,
+    headerProps,
+    wrapperRef,
+    IconButton,
+    isOpen,
+    handleClose: onClose,
+    handleToggleOpen: onToggleOpen,
+    handleOpen: onOpen,
+    theme,
+    isChildrenVisible,
+    children,
+    closeMode,
+    label,
+    ...forwardedProps
   });
 });
 ExpansionPanel.displayName = COMPONENT_NAME$O;
@@ -11790,7 +11870,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);
 
@@ -11815,7 +11895,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
     })),
@@ -11854,80 +11934,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;
 
@@ -11954,12 +11960,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.
@@ -11984,7 +11990,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]
   };
 };
@@ -12022,8 +12028,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;
 
 /**
@@ -12062,15 +12068,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.
@@ -12101,7 +12107,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),
@@ -12111,22 +12117,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.
@@ -12155,18 +12161,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.
@@ -12196,7 +12202,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`,
@@ -12206,8 +12212,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;
 
 /**
@@ -12236,8 +12242,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;
 
 /**
@@ -12259,12 +12265,117 @@ Icon.displayName = Icon$1.displayName;
 Icon.className = Icon$1.className;
 Icon.defaultProps = Icon$1.defaultProps;
 
+/**
+ * Image block variants.
+ */
+const ImageBlockCaptionPosition = {
+  below: 'below',
+  over: 'over'
+};
+
+/**
+ *  Image block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$I = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$J = 'lumx-image-block';
+const {
+  block: block$B,
+  element: element$v
+} = bem(CLASSNAME$J);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$F = {
+  captionPosition: ImageBlockCaptionPosition.below,
+  align: Alignment.left
+};
+
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageBlock$1 = props => {
+  const {
+    actions,
+    align = DEFAULT_PROPS$F.align,
+    alt,
+    captionPosition = DEFAULT_PROPS$F.captionPosition,
+    captionStyle,
+    className,
+    description,
+    descriptionProps,
+    fillHeight,
+    image,
+    size,
+    tags,
+    ref,
+    theme,
+    thumbnailProps,
+    title,
+    titleProps,
+    Thumbnail,
+    ImageCaption,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("figure", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$B({
+      [`caption-position-${captionPosition}`]: Boolean(captionPosition),
+      [`align-${align}`]: Boolean(align),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      'fill-height': fillHeight
+    })),
+    children: [/*#__PURE__*/jsx(Thumbnail, {
+      ...thumbnailProps,
+      className: classnames(element$v('image'), thumbnailProps?.className),
+      fillHeight: fillHeight,
+      align: align,
+      image: image,
+      size: size,
+      theme: theme,
+      alt: alt || title
+    }), /*#__PURE__*/jsx(ImageCaption, {
+      as: "figcaption",
+      baseClassName: CLASSNAME$J,
+      theme: theme,
+      title: title,
+      titleProps: titleProps,
+      description: description,
+      descriptionProps: descriptionProps,
+      tags: tags,
+      captionStyle: captionStyle,
+      align: align,
+      truncate: captionPosition === 'over'
+    }), actions && /*#__PURE__*/jsx("div", {
+      className: element$v('actions'),
+      children: actions
+    })]
+  });
+};
+
 /** Internal component used to render image captions */
-const ImageCaption = props => {
-  const defaultTheme = useTheme();
+const ImageCaption$1 = props => {
   const {
     baseClassName,
-    theme = defaultTheme,
+    theme,
     as = 'figcaption',
     title,
     titleProps,
@@ -12273,7 +12384,13 @@ const ImageCaption = props => {
     tags,
     captionStyle,
     align,
-    truncate
+    truncate,
+    FlexBox,
+    Text,
+    wrapperProps = {
+      vAlign: align,
+      hAlign: align === 'center' ? align : undefined
+    }
   } = props;
   if (!title && !description && !tags) return null;
   const titleColor = {
@@ -12283,42 +12400,40 @@ const ImageCaption = props => {
     color: theme === 'dark' ? 'light' : 'dark',
     colorVariant: 'L2'
   };
-
-  // Display description as string or HTML
-  const descriptionContent = typeof description === 'string' ? {
-    children: description
-  } : {
-    dangerouslySetInnerHTML: description
-  };
   return /*#__PURE__*/jsxs(FlexBox, {
     as: as,
-    className: classNames.join(baseClassName && `${baseClassName}__wrapper`),
+    className: classnames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
-    vAlign: align,
-    hAlign: align === 'center' ? align : undefined,
     gap: "regular",
+    ...wrapperProps,
     children: [(title || description) && /*#__PURE__*/jsxs(Text, {
       as: "p",
-      className: classNames.join(baseClassName && `${baseClassName}__caption`),
+      className: classnames(baseClassName && `${baseClassName}__caption`),
       truncate: truncate,
       ...baseColor,
       children: [title && /*#__PURE__*/jsx(Text, {
         ...titleProps,
         as: "span",
-        className: classNames.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
+        className: classnames(titleProps?.className, baseClassName && `${baseClassName}__title`),
         typography: "subtitle1",
         ...titleColor,
         children: title
-      }), ' ', description && /*#__PURE__*/jsx(Text, {
+      }), ' ', description && (typeof description === 'object' && '__html' in description ? /*#__PURE__*/jsx(Text, {
         ...descriptionProps,
         as: "span",
-        className: classNames.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        className: classnames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
         typography: "body1",
-        ...descriptionContent
-      })]
+        dangerouslySetInnerHTML: description
+      }) : /*#__PURE__*/jsx(Text, {
+        ...descriptionProps,
+        as: "span",
+        className: classnames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        typography: "body1",
+        children: description
+      }))]
     }), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: classNames.join(baseClassName && `${baseClassName}__tags`),
+      className: classnames(baseClassName && `${baseClassName}__tags`),
       orientation: "horizontal",
       vAlign: align,
       children: tags
@@ -12326,11 +12441,21 @@ const ImageCaption = props => {
   });
 };
 
-const ImageBlockCaptionPosition = {
-  below: 'below',
-  over: 'over'
-};
-
+/** Internal component used to render image captions */
+const ImageCaption = props => {
+  const defaultTheme = useTheme();
+  const {
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return ImageCaption$1({
+    FlexBox,
+    Text,
+    theme,
+    ...forwardedProps
+  });
+};
+
 /**
  *  Image block sizes.
  */
@@ -12339,28 +12464,6 @@ const ImageBlockCaptionPosition = {
  * Defines the props of the component.
  */
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$H = 'ImageBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$I = 'lumx-image-block';
-const {
-  block: block$B,
-  element: element$v
-} = classNames.bem(CLASSNAME$I);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$F = {
-  captionPosition: ImageBlockCaptionPosition.below,
-  align: Alignment$1.left
-};
-
 /**
  * ImageBlock component.
  *
@@ -12371,74 +12474,30 @@ const DEFAULT_PROPS$F = {
 const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    actions,
-    align = DEFAULT_PROPS$F.align,
-    alt,
-    captionPosition = DEFAULT_PROPS$F.captionPosition,
-    captionStyle,
-    className,
-    description,
-    descriptionProps,
-    fillHeight,
-    image,
-    size,
-    tags,
     theme = defaultTheme,
-    thumbnailProps,
-    title,
-    titleProps,
     ...forwardedProps
   } = props;
-  return /*#__PURE__*/jsxs("figure", {
-    ref: ref,
+  return ImageBlock$1({
+    ref,
+    theme,
     ...forwardedProps,
-    className: classNames.join(className, block$B({
-      [`caption-position-${captionPosition}`]: Boolean(captionPosition),
-      [`align-${align}`]: Boolean(align),
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme),
-      'fill-height': fillHeight
-    })),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      ...thumbnailProps,
-      className: classNames.join(element$v('image'), thumbnailProps?.className),
-      fillHeight: fillHeight,
-      align: align,
-      image: image,
-      size: size,
-      theme: theme,
-      alt: alt || title
-    }), /*#__PURE__*/jsx(ImageCaption, {
-      as: "figcaption",
-      baseClassName: CLASSNAME$I,
-      theme: theme,
-      title: title,
-      titleProps: titleProps,
-      description: description,
-      descriptionProps: descriptionProps,
-      tags: tags,
-      captionStyle: captionStyle,
-      align: align,
-      truncate: captionPosition === 'over'
-    }), actions && /*#__PURE__*/jsx("div", {
-      className: element$v('actions'),
-      children: actions
-    })]
+    Thumbnail,
+    ImageCaption
   });
 });
-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).
@@ -12684,7 +12743,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 {
@@ -12776,7 +12835,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,
@@ -13022,7 +13081,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$H
+          name: CLASSNAME$I
         }
       });
     }
@@ -13074,7 +13133,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$H
+          name: CLASSNAME$I
         }
       });
     }
@@ -13128,7 +13187,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,
@@ -13157,8 +13216,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.
@@ -13174,16 +13233,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.
@@ -13235,8 +13294,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;
 
 /**
@@ -13261,8 +13320,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;
 
 /**
@@ -13306,16 +13365,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.
@@ -13438,8 +13497,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.
@@ -13448,15 +13507,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.
@@ -13495,7 +13554,7 @@ const Link$1 = props => {
 
 const {
   element: element$q
-} = classNames.bem(CLASSNAME$E);
+} = classNames.bem(CLASSNAME$F);
 
 /**
  * Defines the props of the component.
@@ -13541,28 +13600,28 @@ 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);
+} = bem(CLASSNAME$E);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$D = {
-  size: Size$1.regular,
+  size: Size.regular,
   titleHeading: 'h2'
 };
 
@@ -13573,8 +13632,7 @@ const DEFAULT_PROPS$D = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const LinkPreview = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const LinkPreview$1 = props => {
   const {
     className,
     description,
@@ -13582,19 +13640,21 @@ const LinkPreview = forwardRef((props, ref) => {
     linkAs,
     linkProps,
     size = DEFAULT_PROPS$D.size,
-    theme = defaultTheme,
+    theme,
     thumbnailProps,
+    ref,
     title,
-    titleHeading = DEFAULT_PROPS$D.titleHeading,
+    TitleHeading,
+    Link,
+    Thumbnail,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
-  const TitleHeading = titleHeading;
-  const adjustedSize = size === Size$1.big && thumbnailProps ? Size$1.big : Size$1.regular;
+  const adjustedSize = size === Size.big && thumbnailProps ? Size.big : Size.regular;
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$x({
+    className: classnames(className, block$x({
       [`size-${adjustedSize}`]: Boolean(adjustedSize),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -13612,7 +13672,7 @@ const LinkPreview = forwardRef((props, ref) => {
             // Avoid redundant links in focus order
             tabIndex: -1
           },
-          aspectRatio: AspectRatio$1.free,
+          aspectRatio: AspectRatio.free,
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
@@ -13624,7 +13684,7 @@ const LinkPreview = forwardRef((props, ref) => {
             linkAs: linkAs,
             target: "_blank",
             href: link,
-            color: theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light,
+            color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
             colorVariant: ColorVariant.N,
             children: title
           })
@@ -13636,10 +13696,10 @@ const LinkPreview = forwardRef((props, ref) => {
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames.join(element$p('link'), linkProps?.className),
+            className: classnames(element$p('link'), linkProps?.className),
             target: "_blank",
             href: link,
-            color: theme === Theme$1.light ? ColorPalette$1.primary : ColorPalette$1.light,
+            color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
             colorVariant: ColorVariant.N
             // Avoid redundant links in focus order
             ,
@@ -13650,11 +13710,156 @@ const LinkPreview = forwardRef((props, ref) => {
       })]
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const LinkPreview = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    titleHeading = DEFAULT_PROPS$D.titleHeading,
+    ...forwardedProps
+  } = props;
+  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
+  const TitleHeading = titleHeading;
+  return LinkPreview$1({
+    theme,
+    TitleHeading,
+    ref,
+    Link,
+    Thumbnail,
+    ...forwardedProps
+  });
 });
-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.
  */
@@ -13772,7 +13977,7 @@ const CLASSNAME$B = 'lumx-mosaic';
 const {
   block: block$v,
   element: element$n
-} = classNames.bem(CLASSNAME$B);
+} = bem(CLASSNAME$B);
 
 /**
  * Component default props.
@@ -13786,26 +13991,27 @@ const DEFAULT_PROPS$C = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Mosaic = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const Mosaic$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     thumbnails,
-    onImageClick,
+    handleClick,
+    Thumbnail,
+    ref,
     ...forwardedProps
   } = props;
-  const handleImageClick = useMemo(() => {
-    if (!onImageClick) return undefined;
+  const onImageClick = () => {
+    if (!handleClick) return undefined;
     return (index, onClick) => event => {
       onClick?.(event);
-      onImageClick?.(index);
+      handleClick?.(index);
     };
-  }, [onImageClick]);
+  };
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$v({
+    className: classnames(className, block$v({
       [`theme-${theme}`]: Boolean(theme),
       'has-1-thumbnail': thumbnails?.length === 1,
       'has-2-thumbnails': thumbnails?.length === 2,
@@ -13825,12 +14031,12 @@ const Mosaic = forwardRef((props, ref) => {
           className: element$n('thumbnail'),
           children: [/*#__PURE__*/jsx(Thumbnail, {
             ...thumbnailProps,
-            align: align || Alignment$1.left,
+            align: align || Alignment.left,
             image: image,
             theme: theme,
-            aspectRatio: AspectRatio$1.free,
+            aspectRatio: AspectRatio.free,
             fillHeight: true,
-            onClick: handleImageClick?.(index, onClick) || onClick
+            onClick: onImageClick()?.(index, onClick) || onClick
           }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
             className: element$n('overlay'),
             children: /*#__PURE__*/jsxs("span", {
@@ -13841,6 +14047,33 @@ const Mosaic = forwardRef((props, ref) => {
       })
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Mosaic = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    onImageClick,
+    ...forwardedProps
+  } = props;
+  return Mosaic$1({
+    ref,
+    theme,
+    Thumbnail,
+    handleClick: onImageClick,
+    ...forwardedProps
+  });
 });
 Mosaic.displayName = COMPONENT_NAME$A;
 Mosaic.className = CLASSNAME$B;