@lumx/react 4.16.1-alpha.2 → 4.17.0-next.1

package/index.js

@@ -308,7 +308,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$1a(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$1c(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (typeof modifiersOrAdditionalClasses === 'string' || Array.isArray(modifiersOrAdditionalClasses)) {
@@ -343,7 +343,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$1a(ACTION_ELEMENT, modifiers)
+  action: modifiers => block$1c(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -465,8 +465,8 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-  return block$1a(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+function element$T(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+  return block$1c(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -474,10 +474,10 @@ function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
  */
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
-    return block$1a(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$1c(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
-    return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$T(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -557,15 +557,15 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1A = 'AlertDialog';
+const COMPONENT_NAME$1F = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1y = 'lumx-alert-dialog';
+const CLASSNAME$1C = 'lumx-alert-dialog';
 const {
-  block: block$19
-} = bem(CLASSNAME$1y);
+  block: block$1b
+} = bem(CLASSNAME$1C);
 
 /**
  * Component default props.
@@ -633,7 +633,7 @@ const AlertDialog$1 = props => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classnames(className, block$19({
+    className: classnames(className, block$1b({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -731,8 +731,8 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1A;
-AlertDialog.className = CLASSNAME$1y;
+AlertDialog.displayName = COMPONENT_NAME$1F;
+AlertDialog.className = CLASSNAME$1C;
 AlertDialog.defaultProps = DEFAULT_PROPS$1h;
 
 /**
@@ -825,12 +825,12 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1z = 'Autocomplete';
+const COMPONENT_NAME$1E = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1x = 'lumx-autocomplete';
+const CLASSNAME$1B = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -898,7 +898,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1x),
+    className: classNames.join(className, CLASSNAME$1B),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -938,19 +938,19 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1z;
-Autocomplete.className = CLASSNAME$1x;
+Autocomplete.displayName = COMPONENT_NAME$1E;
+Autocomplete.className = CLASSNAME$1B;
 Autocomplete.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1y = 'AutocompleteMultiple';
+const COMPONENT_NAME$1D = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1w = 'lumx-autocomplete-multiple';
+const CLASSNAME$1A = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -1031,7 +1031,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1w),
+    className: classNames.join(className, CLASSNAME$1A),
     name: name,
     value: value,
     onChange: onChange,
@@ -1064,23 +1064,23 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1y;
-AutocompleteMultiple.className = CLASSNAME$1w;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1D;
+AutocompleteMultiple.className = CLASSNAME$1A;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'Avatar';
+const COMPONENT_NAME$1C = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1v = 'lumx-avatar';
+const CLASSNAME$1z = 'lumx-avatar';
 const {
-  block: block$18,
-  element: element$Q
-} = bem(CLASSNAME$1v);
+  block: block$1a,
+  element: element$S
+} = bem(CLASSNAME$1z);
 
 /**
  * Component default props.
@@ -1110,15 +1110,15 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$18({
+    className: classnames(className, block$1a({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [image, actions && /*#__PURE__*/jsx("div", {
-      className: element$Q('actions'),
+      className: element$S('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$Q('badge'),
+      className: element$S('badge'),
       children: badge
     })]
   });
@@ -1159,7 +1159,7 @@ const Avatar = forwardRef((props, ref) => {
     image: /*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$Q('thumbnail'),
+      className: element$S('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -1171,22 +1171,22 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1x;
-Avatar.className = CLASSNAME$1v;
+Avatar.displayName = COMPONENT_NAME$1C;
+Avatar.className = CLASSNAME$1z;
 Avatar.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'Badge';
+const COMPONENT_NAME$1B = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-badge';
+const CLASSNAME$1y = 'lumx-badge';
 const {
-  block: block$17
-} = bem(CLASSNAME$1u);
+  block: block$19
+} = bem(CLASSNAME$1y);
 
 /**
  * Component default props.
@@ -1212,14 +1212,14 @@ const Badge$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$17({
+    className: classnames(className, block$19({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1w;
-Badge$1.className = CLASSNAME$1u;
+Badge$1.displayName = COMPONENT_NAME$1B;
+Badge$1.className = CLASSNAME$1y;
 Badge$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
@@ -1243,12 +1243,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1v = 'BadgeWrapper';
-const CLASSNAME$1t = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1A = 'BadgeWrapper';
+const CLASSNAME$1x = 'lumx-badge-wrapper';
 const {
-  block: block$16,
-  element: element$P
-} = bem(CLASSNAME$1t);
+  block: block$18,
+  element: element$R
+} = bem(CLASSNAME$1x);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1260,9 +1260,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$16()),
+    className: classnames(className, block$18()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$P('badge'),
+      className: element$R('badge'),
       children: badge
     })]
   });
@@ -1274,8 +1274,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1v;
-BadgeWrapper.className = CLASSNAME$1t;
+BadgeWrapper.displayName = COMPONENT_NAME$1A;
+BadgeWrapper.className = CLASSNAME$1x;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1325,7 +1325,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1u = 'ButtonRoot';
+const COMPONENT_NAME$1z = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1423,7 +1423,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1u;
+ButtonRoot.displayName = COMPONENT_NAME$1z;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1433,15 +1433,15 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1t = 'Button';
+const COMPONENT_NAME$1y = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1s = 'lumx-button';
+const CLASSNAME$1w = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1s);
+} = bem(CLASSNAME$1w);
 
 /**
  * Component default props.
@@ -1478,8 +1478,8 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1t;
-Button$1.className = CLASSNAME$1s;
+Button$1.displayName = COMPONENT_NAME$1y;
+Button$1.className = CLASSNAME$1w;
 Button$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
@@ -1553,21 +1553,21 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1t;
-Button.className = CLASSNAME$1s;
+Button.displayName = COMPONENT_NAME$1y;
+Button.className = CLASSNAME$1w;
 Button.defaultProps = DEFAULT_PROPS$1c;
 
-const COMPONENT_NAME$1s = 'Icon';
+const COMPONENT_NAME$1x = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1r = IconClassName;
+const CLASSNAME$1v = IconClassName;
 const {
-  block: block$15
-} = bem(CLASSNAME$1r);
+  block: block$17
+} = bem(CLASSNAME$1v);
 
 /**
  * Component default props.
@@ -1621,7 +1621,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$15({
+    className: classnames(className, block$17({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1650,19 +1650,19 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1s;
-Icon$1.className = CLASSNAME$1r;
+Icon$1.displayName = COMPONENT_NAME$1x;
+Icon$1.className = CLASSNAME$1v;
 Icon$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1r = 'IconButton';
+const COMPONENT_NAME$1w = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1q = 'lumx-icon-button';
+const CLASSNAME$1u = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1703,8 +1703,8 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1r;
-IconButton$1.className = CLASSNAME$1q;
+IconButton$1.displayName = COMPONENT_NAME$1w;
+IconButton$1.className = CLASSNAME$1u;
 IconButton$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
@@ -1748,19 +1748,19 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1r;
-IconButton.className = CLASSNAME$1q;
+IconButton.displayName = COMPONENT_NAME$1w;
+IconButton.className = CLASSNAME$1u;
 IconButton.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1q = 'ButtonGroup';
+const COMPONENT_NAME$1v = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1p = 'lumx-button-group';
+const CLASSNAME$1t = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1781,12 +1781,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1p),
+    className: classnames(className, CLASSNAME$1t),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1q;
-ButtonGroup$1.className = CLASSNAME$1p;
+ButtonGroup$1.displayName = COMPONENT_NAME$1v;
+ButtonGroup$1.className = CLASSNAME$1t;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -1802,16 +1802,16 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1q;
-ButtonGroup.className = CLASSNAME$1p;
+ButtonGroup.displayName = COMPONENT_NAME$1v;
+ButtonGroup.className = CLASSNAME$1t;
 ButtonGroup.defaultProps = DEFAULT_PROPS$19;
 
-const COMPONENT_NAME$1p = 'InputLabel';
+const COMPONENT_NAME$1u = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1o = InputLabelClassName;
+const CLASSNAME$1s = InputLabelClassName;
 const {
-  block: block$14
-} = bem(CLASSNAME$1o);
+  block: block$16
+} = bem(CLASSNAME$1s);
 const DEFAULT_PROPS$18 = {};
 
 /**
@@ -1834,7 +1834,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$14({
+    className: classnames(className, block$16({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1842,8 +1842,8 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1p;
-InputLabel$1.className = CLASSNAME$1o;
+InputLabel$1.displayName = COMPONENT_NAME$1u;
+InputLabel$1.className = CLASSNAME$1s;
 InputLabel$1.defaultProps = DEFAULT_PROPS$18;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1858,17 +1858,17 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1o = 'InputHelper';
+const COMPONENT_NAME$1t = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1n = InputHelperClassName;
+const CLASSNAME$1r = InputHelperClassName;
 const {
-  block: block$13
-} = bem(CLASSNAME$1n);
+  block: block$15
+} = bem(CLASSNAME$1r);
 
 /**
  * Component default props.
@@ -1895,15 +1895,15 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$13({
+    className: classnames(className, block$15({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1o;
-InputHelper$1.className = CLASSNAME$1n;
+InputHelper$1.displayName = COMPONENT_NAME$1t;
+InputHelper$1.className = CLASSNAME$1r;
 InputHelper$1.defaultProps = DEFAULT_PROPS$17;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1915,16 +1915,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'Checkbox';
+const COMPONENT_NAME$1s = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1m = 'lumx-checkbox';
+const CLASSNAME$1q = 'lumx-checkbox';
 const {
-  block: block$12,
-  element: element$O
-} = bem(CLASSNAME$1m);
+  block: block$14,
+  element: element$Q
+} = bem(CLASSNAME$1q);
 
 /**
  * Checkbox component.
@@ -1960,7 +1960,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$12({
+    className: classnames(className, block$14({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1968,12 +1968,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$O('input-wrapper'),
+      className: element$Q('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$O('input-native'),
+        className: element$Q('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1985,26 +1985,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$O('input-placeholder'),
+        className: element$Q('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$O('input-background')
+          className: element$Q('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$O('input-indicator'),
+          className: element$Q('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$O('content'),
+      className: element$Q('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$O('label'),
+        className: element$Q('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$O('helper'),
+        className: element$Q('helper'),
         theme,
         children: helper
       })]
@@ -2079,8 +2079,8 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1n;
-Checkbox.className = CLASSNAME$1m;
+Checkbox.displayName = COMPONENT_NAME$1s;
+Checkbox.className = CLASSNAME$1q;
 Checkbox.defaultProps = DEFAULT_PROPS$16;
 
 /**
@@ -2102,16 +2102,16 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'Chip';
+const COMPONENT_NAME$1r = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1l = 'lumx-chip';
+const CLASSNAME$1p = 'lumx-chip';
 const {
-  block: block$11,
-  element: element$N
-} = bem(CLASSNAME$1l);
+  block: block$13,
+  element: element$P
+} = bem(CLASSNAME$1p);
 
 /**
  * Component default props.
@@ -2178,7 +2178,7 @@ const Chip$1 = props => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classnames(className, block$11({
+      className: classnames(className, block$13({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -2195,19 +2195,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$N('before', {
+        className: element$P('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$N('label'),
+        className: element$P('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$N('after', {
+        className: element$P('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleAfterClick,
@@ -2263,19 +2263,19 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1m;
-Chip.className = CLASSNAME$1l;
+Chip.displayName = COMPONENT_NAME$1r;
+Chip.className = CLASSNAME$1p;
 Chip.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'ChipGroup';
+const COMPONENT_NAME$1q = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-chip-group';
+const CLASSNAME$1o = 'lumx-chip-group';
 
 /**
  * Component default props.
@@ -2298,7 +2298,7 @@ const ChipGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1k),
+    className: classnames(className, CLASSNAME$1o),
     children: children
   });
 };
@@ -2376,8 +2376,8 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1l;
-InternalChipGroup.className = CLASSNAME$1k;
+InternalChipGroup.displayName = COMPONENT_NAME$1q;
+InternalChipGroup.className = CLASSNAME$1o;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$14;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2386,16 +2386,16 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'SelectionChipGroup';
+const COMPONENT_NAME$1p = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-selection-chip-group';
+const CLASSNAME$1n = 'lumx-selection-chip-group';
 const {
-  block: block$10,
-  element: element$M
-} = bem(CLASSNAME$1j);
+  block: block$12,
+  element: element$O
+} = bem(CLASSNAME$1n);
 
 /**
  * SelectionChipGroup component.
@@ -2433,7 +2433,7 @@ const SelectionChipGroup$1 = (props, {
     "aria-label": label,
     "aria-multiselectable": "true",
     "aria-orientation": "horizontal",
-    className: block$10([className]),
+    className: block$12([className]),
     children: value.map(v => {
       const name = getOptionName && getWithSelector(getOptionName, v) || getWithSelector(getOptionId, v);
       const id = getWithSelector(getOptionId, v);
@@ -2452,7 +2452,7 @@ const SelectionChipGroup$1 = (props, {
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$M('chip', [customProps.className]),
+          className: element$O('chip', [customProps.className]),
           "data-option-id": id,
           isClickable: true,
           role: "option",
@@ -2491,10 +2491,10 @@ function createSelectorTreeWalker(container, selector) {
 }
 
 /** CSS selector for enabled chips (not aria-disabled). */
-const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1l}:not([aria-disabled="true"])`;
+const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1p}:not([aria-disabled="true"])`;
 
 /** Find the closest chip element from an event target. */
-const getChip = target => target?.closest?.(`.${CLASSNAME$1l}`) || null;
+const getChip = target => target?.closest?.(`.${CLASSNAME$1p}`) || null;
 
 /** Whether the chip is marked as disabled via aria-disabled. */
 const isChipDisabled = chip => chip?.getAttribute('aria-disabled') === 'true';
@@ -2708,15 +2708,15 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Text';
+const COMPONENT_NAME$1o = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-text';
+const CLASSNAME$1m = 'lumx-text';
 const {
-  block: block$$
-} = bem(CLASSNAME$1i);
+  block: block$11
+} = bem(CLASSNAME$1m);
 
 /**
  * Component default props.
@@ -2757,7 +2757,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$$({
+    className: classnames(className, block$11({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -2806,8 +2806,8 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1j;
-Text.className = CLASSNAME$1i;
+Text.displayName = COMPONENT_NAME$1o;
+Text.className = CLASSNAME$1m;
 Text.defaultProps = DEFAULT_PROPS$13;
 
 /**
@@ -4900,16 +4900,16 @@ const DEFAULT_PROPS$12 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Tooltip';
+const COMPONENT_NAME$1n = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-tooltip';
+const CLASSNAME$1l = 'lumx-tooltip';
 const {
-  block: block$_,
-  element: element$L
-} = bem(CLASSNAME$1h);
+  block: block$10,
+  element: element$N
+} = bem(CLASSNAME$1l);
 
 /**
  * Props for the TooltipPopup rendering component.
@@ -4940,7 +4940,7 @@ const TooltipPopup = props => {
     ...forwardedProps,
     id: id,
     role: "tooltip",
-    className: classnames(className, block$_({
+    className: classnames(className, block$10({
       [`position-${position}`]: Boolean(position)
     }), isHidden && visuallyHidden()),
     style: {
@@ -4949,17 +4949,17 @@ const TooltipPopup = props => {
     },
     "data-popper-placement": position,
     children: [/*#__PURE__*/jsx("div", {
-      className: element$L('arrow')
+      className: element$N('arrow')
     }), /*#__PURE__*/jsx("div", {
-      className: element$L('inner'),
+      className: element$N('inner'),
       children: labelLines.map((line, index) => /*#__PURE__*/jsx("p", {
         children: line
       }, index))
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1i;
-TooltipPopup.className = CLASSNAME$1h;
+TooltipPopup.displayName = COMPONENT_NAME$1n;
+TooltipPopup.className = CLASSNAME$1l;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -5321,8 +5321,8 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1i;
-Tooltip.className = CLASSNAME$1h;
+Tooltip.displayName = COMPONENT_NAME$1n;
+Tooltip.className = CLASSNAME$1l;
 Tooltip.defaultProps = DEFAULT_PROPS$12;
 
 /** Create a pending navigation store; discards intent on abort. */
@@ -6192,8 +6192,8 @@ const SelectionChipGroup = ({
   }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
     containerRef: container,
-    itemSelector: `.${CLASSNAME$1l}`,
-    itemDisabledSelector: `.${CLASSNAME$1l}[aria-disabled="true"]`
+    itemSelector: `.${CLASSNAME$1p}`,
+    itemDisabledSelector: `.${CLASSNAME$1p}[aria-disabled="true"]`
   });
 
   // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
@@ -6233,8 +6233,8 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1k;
-SelectionChipGroup.className = CLASSNAME$1j;
+SelectionChipGroup.displayName = COMPONENT_NAME$1p;
+SelectionChipGroup.className = CLASSNAME$1n;
 
 /**
  * Get the value for a combobox option element.
@@ -6377,7 +6377,7 @@ function setupListbox(handle, signal, notify, options) {
       wrap: options?.wrapNavigation,
       getActiveItem: () => {
         const id = trigger.getAttribute('aria-activedescendant');
-        return id ? document.getElementById(id) : null;
+        return id && listbox.querySelector(`#${CSS.escape(id)}`) || null;
       }
     }, focusCallbacks, signal);
   }
@@ -6399,11 +6399,6 @@ function setupListbox(handle, signal, notify, options) {
     }
     handle.select(cell);
     trigger.focus();
-
-    // In multi-select mode, keep visual focus on the selected option
-    if (!handle.isMultiSelect) {
-      handle.setIsOpen(false);
-    }
   }, {
     signal
   });
@@ -6593,10 +6588,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
             if (!isOptionDisabled(activeItem)) {
               activeItem.click();
             }
-            // Only close when not in multi select and not in action cell
-            if (!handle.isMultiSelect && !isActionCell(activeItem)) {
-              handle.setIsOpen(false);
-            }
             flag = true;
           } else if (handle.isOpen && !handle.isMultiSelect) {
             // Open with no active item (single select) => close the popup,
@@ -6751,6 +6742,15 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       callbacks.onSelect?.({
         value: option ? getOptionValue(option) : ''
       });
+
+      // Close on selection (when not multiselectable)
+      if (option && !handle.isMultiSelect) {
+        handle.focusNav?.clear();
+        // Defer the close to the next frame (to make sure all other click handler resolve).
+        requestAnimationFrame(() => {
+          handle.setIsOpen(false);
+        });
+      }
     },
     flushPendingNavigation() {
       // Do navigations actions we could not do because the combobox items were not mounted yet
@@ -7020,7 +7020,12 @@ function createTypeahead(getWalker, getItemValue, signal) {
   };
 }
 
-/** Is the key a single printable character (not Space, no modifier keys)? */
+/**
+ * Is the key a single printable character (not Space, no modifier keys)?
+ *
+ * Used by typeahead-style keyboard handlers (menu, combobox) to detect when a
+ * keypress should start/continue a type-to-search rather than trigger navigation.
+ */
 function isPrintableKey({
   key,
   altKey,
@@ -7135,12 +7140,12 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'ComboboxButton';
+const COMPONENT_NAME$1m = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-combobox-button';
+const CLASSNAME$1k = 'lumx-combobox-button';
 
 /**
  * ComboboxButton core template.
@@ -7180,7 +7185,7 @@ const ComboboxButton$1 = (props, {
   const componentProps = {
     ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1g),
+    className: classnames(className, CLASSNAME$1k),
     role: 'combobox',
     'aria-controls': listboxId,
     'aria-haspopup': 'listbox',
@@ -7320,8 +7325,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1h,
-  className: CLASSNAME$1g
+  displayName: COMPONENT_NAME$1m,
+  className: CLASSNAME$1k
 });
 
 /** Options for configuring the input-mode combobox controller. */
@@ -7344,7 +7349,8 @@ function setupComboboxInput(input, options) {
   let handle;
   const {
     filter = 'auto',
-    onSelect: optionOnSelect
+    onSelect: optionOnSelect,
+    onInput: onInputCallback
   } = options;
   const openOnFocus = options.openOnFocus ?? filter === 'off';
   const autoFilter = filter === 'auto';
@@ -7361,18 +7367,11 @@ function setupComboboxInput(input, options) {
 
   /**
    * Wraps the consumer's onSelect to perform input-mode side effects after selection:
-   * clears the active descendant, resets the filter, and re-opens the popup.
+   * resets the filter and typing state.
    */
   const onSelect = option => {
     optionOnSelect?.(option);
-
-    // Clear the active item. In multi-select, keep visual focus so the
-    // user can continue navigating after selection.
-    if (!handle.isMultiSelect) {
-      handle.focusNav?.clear();
-    }
     userHasTyped = false;
-    handle.setIsOpen(true);
     if (autoFilter) {
       handle.setFilter('');
     }
@@ -7392,6 +7391,9 @@ function setupComboboxInput(input, options) {
       if (isDisabled()) return;
       combobox.focusNav?.clear();
       userHasTyped = true;
+
+      // Notify the framework wrapper of the new input value synchronously.
+      onInputCallback?.(input.value);
       combobox.setIsOpen(true);
       if (autoFilter) {
         combobox.setFilter(input.value);
@@ -7481,12 +7483,12 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ComboboxInput';
+const COMPONENT_NAME$1l = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-combobox-input';
+const CLASSNAME$1j = 'lumx-combobox-input';
 
 /**
  * ComboboxInput core template.
@@ -7549,22 +7551,22 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'TextField';
+const COMPONENT_NAME$1k = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-text-field';
+const CLASSNAME$1i = 'lumx-text-field';
 
 /**
  * Input native element class name.
  */
-const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1e}__input-native`;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1i}__input-native`;
 
 const {
-  block: block$Z,
-  element: element$K
-} = bem(CLASSNAME$1e);
+  block: block$$,
+  element: element$M
+} = bem(CLASSNAME$1i);
 
 /**
  * Defines the props of the component.
@@ -7636,7 +7638,7 @@ const TextField$1 = props => {
   const isNotEmpty = valueLength > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classnames(className, block$Z({
+    className: classnames(className, block$$({
       'has-chips': Boolean(chips),
       'has-error': !isValid && hasError,
       'has-icon': Boolean(icon),
@@ -7652,17 +7654,17 @@ const TextField$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
-      className: element$K('header'),
+      className: element$M('header'),
       children: [label && InputLabel$1({
         ...labelProps,
         id: labelId,
         htmlFor: textFieldId,
-        className: element$K('label'),
+        className: element$M('label'),
         isRequired,
         theme,
         children: label
       }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: element$K('char-counter'),
+        className: element$M('char-counter'),
         children: [/*#__PURE__*/jsx("span", {
           children: maxLength - valueLength
         }), maxLength - valueLength === 0 && Icon$1({
@@ -7671,45 +7673,45 @@ const TextField$1 = props => {
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$K('wrapper'),
+      className: element$M('wrapper'),
       ref: textFieldRef,
       children: [icon && Icon$1({
-        className: element$K('input-icon'),
+        className: element$M('input-icon'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon,
         size: Size.xs
       }), chips ? /*#__PURE__*/jsxs("div", {
-        className: element$K('chips'),
+        className: element$M('chips'),
         children: [chips, input]
       }) : /*#__PURE__*/jsx("div", {
-        className: element$K('input-wrapper'),
+        className: element$M('input-wrapper'),
         children: input
       }), (isValid || hasError) && Icon$1({
-        className: element$K('input-validity'),
+        className: element$M('input-validity'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
         "aria-describedby": labelId,
         ...clearButtonProps,
-        className: element$K('input-clear'),
+        className: element$M('input-clear'),
         icon: mdiCloseCircle,
         emphasis: Emphasis.low,
         size: Size.s,
         theme: theme,
         type: "button"
       }), afterElement && /*#__PURE__*/jsx("div", {
-        className: element$K('after-element'),
+        className: element$M('after-element'),
         children: afterElement
       })]
     }), hasError && error && InputHelper$1({
       children: error,
-      className: element$K('helper'),
+      className: element$M('helper'),
       kind: Kind.error,
       theme,
       id: errorId
     }), helper && InputHelper$1({
-      className: element$K('helper'),
+      className: element$M('helper'),
       theme,
       id: helperId,
       children: helper
@@ -7718,7 +7720,7 @@ const TextField$1 = props => {
 };
 
 const {
-  block: block$Y
+  block: block$_
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7761,7 +7763,7 @@ const RawInputText$1 = props => {
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$_({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
@@ -7797,7 +7799,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$X
+  block: block$Z
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7839,7 +7841,7 @@ const RawInputTextarea$1 = props => {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$X({
+    className: classnames(className, block$Z({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
@@ -8085,8 +8087,8 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1f;
-TextField.className = CLASSNAME$1e;
+TextField.displayName = COMPONENT_NAME$1k;
+TextField.className = CLASSNAME$1i;
 TextField.defaultProps = DEFAULT_PROPS$_;
 
 /**
@@ -8136,6 +8138,10 @@ const ComboboxInput = forwardRef((props, ref) => {
         onChangeRef.current?.(option.value);
         onSelectRef.current?.(option);
       },
+      onInput(value) {
+        // Keep controlled value in sync.
+        onChangeRef.current?.(value);
+      },
       filter,
       openOnFocus
     });
@@ -8164,21 +8170,21 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1g;
-ComboboxInput.className = CLASSNAME$1f;
+ComboboxInput.displayName = COMPONENT_NAME$1l;
+ComboboxInput.className = CLASSNAME$1j;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'List';
+const COMPONENT_NAME$1j = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-list';
+const CLASSNAME$1h = 'lumx-list';
 const {
-  block: block$W
-} = bem(CLASSNAME$1d);
+  block: block$Y
+} = bem(CLASSNAME$1h);
 
 /**
  * Component default props.
@@ -8201,15 +8207,15 @@ const List$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classnames(className, block$W({
+    className: classnames(className, block$Y({
       [`item-padding-${itemPadding}`]: Boolean(itemPadding)
     })),
     ref: ref,
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1e;
-List$1.className = CLASSNAME$1d;
+List$1.displayName = COMPONENT_NAME$1j;
+List$1.className = CLASSNAME$1h;
 List$1.defaultProps = DEFAULT_PROPS$Z;
 
 /**
@@ -8225,12 +8231,12 @@ List$1.defaultProps = DEFAULT_PROPS$Z;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'ComboboxList';
+const COMPONENT_NAME$1i = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-combobox-list';
+const CLASSNAME$1g = 'lumx-combobox-list';
 
 /**
  * ComboboxList core template.
@@ -8252,7 +8258,7 @@ const ComboboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1c),
+    className: classnames(className, CLASSNAME$1g),
     ref,
     itemPadding: 'big',
     id,
@@ -8342,22 +8348,22 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1d;
-ComboboxList.className = CLASSNAME$1c;
+ComboboxList.displayName = COMPONENT_NAME$1i;
+ComboboxList.className = CLASSNAME$1g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'ListItem';
+const COMPONENT_NAME$1h = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-list-item';
+const CLASSNAME$1f = 'lumx-list-item';
 const {
-  block: block$V,
-  element: element$J
-} = bem(CLASSNAME$1b);
+  block: block$X,
+  element: element$L
+} = bem(CLASSNAME$1f);
 
 /**
  * Component default props.
@@ -8394,7 +8400,7 @@ const ListItem$1 = props => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$V({
+    className: classnames(className, block$X({
       [`size-${size}`]: Boolean(size)
     })),
     children: RawClickable({
@@ -8402,7 +8408,7 @@ const ListItem$1 = props => {
       isDisabled,
       'aria-disabled': ariaDisabled,
       ...linkProps,
-      className: element$J(clickable ? 'link' : 'wrapper', {
+      className: element$L(clickable ? 'link' : 'wrapper', {
         'is-highlighted': isHighlighted,
         'is-selected': isSelected,
         'is-disabled': isDisabled || ariaDisabled === 'true'
@@ -8411,21 +8417,21 @@ const ListItem$1 = props => {
       ref: linkRef,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [before && /*#__PURE__*/jsx("div", {
-          className: element$J('before'),
+          className: element$L('before'),
           children: before
         }), /*#__PURE__*/jsx("div", {
-          className: element$J('content'),
+          className: element$L('content'),
           children: children
         }), after && /*#__PURE__*/jsx("div", {
-          className: element$J('after'),
+          className: element$L('after'),
           children: after
         })]
       })
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$1c;
-ListItem$1.className = CLASSNAME$1b;
+ListItem$1.displayName = COMPONENT_NAME$1h;
+ListItem$1.className = CLASSNAME$1f;
 ListItem$1.defaultProps = DEFAULT_PROPS$Y;
 
 /**
@@ -8435,12 +8441,12 @@ ListItem$1.defaultProps = DEFAULT_PROPS$Y;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ListItemAction';
+const COMPONENT_NAME$1g = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$1a = 'lumx-action-area__action';
+const CLASSNAME$1e = 'lumx-action-area__action';
 const DEFAULT_PROPS$X = {};
 
 /**
@@ -8474,16 +8480,16 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ComboboxOption';
+const COMPONENT_NAME$1f = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-combobox-option';
+const CLASSNAME$1d = 'lumx-combobox-option';
 const {
-  block: block$U,
-  element: element$I
-} = bem(CLASSNAME$19);
+  block: block$W,
+  element: element$K
+} = bem(CLASSNAME$1d);
 
 /**
  * ComboboxOption core template.
@@ -8527,7 +8533,7 @@ const ComboboxOption$1 = (props, {
     as: 'button',
     ...actionProps,
     id,
-    className: element$I('action'),
+    className: element$K('action'),
     handleClick,
     'aria-selected': isSelected ? 'true' : 'false',
     'data-value': value,
@@ -8545,7 +8551,7 @@ const ComboboxOption$1 = (props, {
     size: 'tiny',
     ...forwardedProps,
     hidden,
-    className: !hidden ? classnames(className, block$U()) : undefined,
+    className: !hidden ? classnames(className, block$W()) : undefined,
     before,
     after,
     role: itemRole,
@@ -8553,7 +8559,7 @@ const ComboboxOption$1 = (props, {
       children: [wrappedAction, description && /*#__PURE__*/jsx("p", {
         id: descriptionId,
         ...getTextProps({
-          className: element$I('description'),
+          className: element$K('description'),
           typography: 'caption',
           color: 'dark-L2'
         }),
@@ -8667,8 +8673,8 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$1a;
-ComboboxOption.className = CLASSNAME$19;
+ComboboxOption.displayName = COMPONENT_NAME$1f;
+ComboboxOption.className = CLASSNAME$1d;
 
 /**
  * Defines the props for the core ComboboxOptionAction template.
@@ -8677,12 +8683,12 @@ ComboboxOption.className = CLASSNAME$19;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'ComboboxOptionAction';
+const COMPONENT_NAME$1e = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-combobox-option-action';
+const CLASSNAME$1c = 'lumx-combobox-option-action';
 
 /**
  * ComboboxOptionAction core template.
@@ -8705,7 +8711,7 @@ const ComboboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$18),
+    className: classnames(className, CLASSNAME$1c),
     handleClick,
     children
   });
@@ -8755,23 +8761,23 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$19,
-  className: CLASSNAME$18
+  displayName: COMPONENT_NAME$1e,
+  className: CLASSNAME$1c
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$1d = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-combobox-option-more-info';
+const CLASSNAME$1b = 'lumx-combobox-option-more-info';
 const {
-  block: block$T,
-  element: element$H
-} = bem(CLASSNAME$17);
+  block: block$V,
+  element: element$J
+} = bem(CLASSNAME$1b);
 
 /**
  * ComboboxOptionMoreInfo core template.
@@ -8805,7 +8811,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       icon: mdiInformationOutline,
       size: "s",
       ...buttonProps,
-      className: block$T([className, buttonProps?.className]),
+      className: block$V([className, buttonProps?.className]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -8816,7 +8822,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       label: ""
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
-      className: element$H('popover'),
+      className: element$J('popover'),
       anchorRef: ref,
       isOpen: isOpen,
       closeMode: "unmount",
@@ -9088,16 +9094,16 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Popover';
+const COMPONENT_NAME$1c = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-popover';
+const CLASSNAME$1a = 'lumx-popover';
 const {
-  block: block$S,
-  element: element$G
-} = bem(CLASSNAME$16);
+  block: block$U,
+  element: element$I
+} = bem(CLASSNAME$1a);
 
 /**
  * Component default props (used by framework wrappers).
@@ -9159,7 +9165,7 @@ const Popover$1 = (props, {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$S({
+      className: classnames(className, block$U({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position),
@@ -9173,7 +9179,7 @@ const Popover$1 = (props, {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: arrowRef,
-          className: element$G('arrow'),
+          className: element$I('arrow'),
           style: isHidden ? undefined : arrowStyle,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -9224,11 +9230,17 @@ function useRestoreFocusOnClose({
   const prevIsOpenRef = React__default.useRef(isOpen);
   const tryRestoreFocus = React__default.useCallback(() => {
     if (!popoverElement || !focusAnchorOnClose) return;
-    const isFocusWithin = popoverElement.contains(document.activeElement);
+    const focusedAtClose = document.activeElement;
+    const isFocusWithin = popoverElement.contains(focusedAtClose);
     if (!isFocusWithin) return;
 
-    // On next render
+    // Defer restore: browser may still move focus after close (e.g. click-away on mousedown).
     setTimeout(() => {
+      // Skip if focus moved to a real element (user intent). Restore if focus stayed
+      // (closeMode="hide") or fell back to body (element removed on unmount).
+      const active = document.activeElement;
+      const focusMovedAway = active && active !== focusedAtClose && active !== document.body && active !== document.documentElement;
+      if (focusMovedAway) return;
       const anchor = anchorRef.current;
       const elementToFocus =
       // Provided parent element
@@ -9550,7 +9562,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$17;
+_InnerPopover.displayName = COMPONENT_NAME$1c;
 
 /**
  * Popover component.
@@ -9562,8 +9574,8 @@ _InnerPopover.displayName = COMPONENT_NAME$17;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$17;
-Popover.className = CLASSNAME$16;
+Popover.displayName = COMPONENT_NAME$1c;
+Popover.className = CLASSNAME$1a;
 Popover.defaultProps = DEFAULT_PROPS$W;
 
 /**
@@ -9626,22 +9638,22 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$18;
-ComboboxOptionMoreInfo.className = CLASSNAME$17;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$1d;
+ComboboxOptionMoreInfo.className = CLASSNAME$1b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'SkeletonTypography';
+const COMPONENT_NAME$1b = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-skeleton-typography';
+const CLASSNAME$19 = 'lumx-skeleton-typography';
 const {
-  block: block$R,
-  element: element$F
-} = bem(CLASSNAME$15);
+  block: block$T,
+  element: element$H
+} = bem(CLASSNAME$19);
 
 /**
  * SkeletonTypography component.
@@ -9662,7 +9674,7 @@ const SkeletonTypography$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$R({
+    className: classnames(className, block$T({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -9672,7 +9684,7 @@ const SkeletonTypography$1 = props => {
       width
     },
     children: /*#__PURE__*/jsx("div", {
-      className: element$F('inner')
+      className: element$H('inner')
     })
   });
 };
@@ -9680,12 +9692,12 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$1a = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-combobox-option-skeleton';
+const CLASSNAME$18 = 'lumx-combobox-option-skeleton';
 
 /**
  * ComboboxOptionSkeleton core template.
@@ -9712,7 +9724,7 @@ const ComboboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$14),
+    className: classnames(className, CLASSNAME$18),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -9765,19 +9777,19 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$15;
-ComboboxOptionSkeleton.className = CLASSNAME$14;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1a;
+ComboboxOptionSkeleton.className = CLASSNAME$18;
 
-const COMPONENT_NAME$14 = 'ComboboxPopover';
+const COMPONENT_NAME$19 = 'ComboboxPopover';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$13 = 'lumx-combobox-popover';
+const CLASSNAME$17 = 'lumx-combobox-popover';
 const {
-  block: block$Q,
-  element: element$E
-} = bem(CLASSNAME$13);
+  block: block$S,
+  element: element$G
+} = bem(CLASSNAME$17);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -9818,7 +9830,7 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
-    className: block$Q([className]),
+    className: block$S([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
@@ -9827,7 +9839,7 @@ const ComboboxPopover$1 = (props, {
     closeMode: "hide",
     children: /*#__PURE__*/jsx(FlexBox, {
       orientation: "vertical",
-      className: element$E('scroll'),
+      className: element$G('scroll'),
       children: children
     })
   });
@@ -9840,15 +9852,15 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'FlexBox';
+const COMPONENT_NAME$18 = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-flex-box';
+const CLASSNAME$16 = 'lumx-flex-box';
 const {
-  block: block$P
-} = bem(CLASSNAME$12);
+  block: block$R
+} = bem(CLASSNAME$16);
 
 /**
  * Get FlexBox component props (className computation).
@@ -9872,7 +9884,7 @@ function getFlexBoxProps(props) {
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return {
     ...forwardedProps,
-    className: classnames(className, block$P({
+    className: classnames(className, block$R({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -9904,8 +9916,8 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$13;
-FlexBox.className = CLASSNAME$12;
+FlexBox.displayName = COMPONENT_NAME$18;
+FlexBox.className = CLASSNAME$16;
 
 /**
  * Props for Popover that can be passed to Combobox.Popover.
@@ -9943,8 +9955,8 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$14;
-ComboboxPopover.className = CLASSNAME$13;
+ComboboxPopover.displayName = COMPONENT_NAME$19;
+ComboboxPopover.className = CLASSNAME$17;
 
 /**
  * Combobox.Provider component.
@@ -9989,12 +10001,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'ComboboxSection';
+const COMPONENT_NAME$17 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-combobox-section';
+const CLASSNAME$15 = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -10021,7 +10033,7 @@ const ComboboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$11) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$15) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -10033,16 +10045,16 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'ListSection';
+const COMPONENT_NAME$16 = 'ListSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-list-section';
+const CLASSNAME$14 = 'lumx-list-section';
 const {
-  block: block$O,
-  element: element$D
-} = bem(CLASSNAME$10);
+  block: block$Q,
+  element: element$F
+} = bem(CLASSNAME$14);
 
 /**
  * Component default props.
@@ -10072,25 +10084,25 @@ const ListSection$1 = props => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$O()),
+    className: classnames(className, block$Q()),
     children: [hasHeader && /*#__PURE__*/jsxs(Text, {
       as: "p",
       typography: "overline",
-      className: element$D('title'),
+      className: element$F('title'),
       id: labelId,
       children: [icon && Icon$1({
         icon
       }), label]
     }), /*#__PURE__*/jsx("ul", {
       ...itemsWrapperProps,
-      className: element$D('items'),
+      className: element$F('items'),
       "aria-labelledby": hasHeader ? labelId : undefined,
       children: children
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$11;
-ListSection$1.className = CLASSNAME$10;
+ListSection$1.displayName = COMPONENT_NAME$16;
+ListSection$1.className = CLASSNAME$14;
 ListSection$1.defaultProps = DEFAULT_PROPS$V;
 
 /**
@@ -10113,8 +10125,8 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$11;
-ListSection.className = CLASSNAME$10;
+ListSection.displayName = COMPONENT_NAME$16;
+ListSection.className = CLASSNAME$14;
 ListSection.defaultProps = DEFAULT_PROPS$V;
 
 /**
@@ -10163,21 +10175,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$12;
-ComboboxSection.className = CLASSNAME$11;
+ComboboxSection.displayName = COMPONENT_NAME$17;
+ComboboxSection.className = CLASSNAME$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'ComboboxState';
+const COMPONENT_NAME$15 = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-combobox-state';
+const CLASSNAME$13 = 'lumx-combobox-state';
 const {
-  block: block$N
-} = bem(CLASSNAME$$);
+  block: block$P
+} = bem(CLASSNAME$13);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -10238,7 +10250,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$P(), padding('regular')),
     orientation: "vertical",
     ...alignProps,
     role: "status",
@@ -10350,16 +10362,16 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'GenericBlock';
+const COMPONENT_NAME$14 = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-generic-block';
+const CLASSNAME$12 = 'lumx-generic-block';
 const {
-  block: block$M,
-  element: element$C
-} = bem(CLASSNAME$_);
+  block: block$O,
+  element: element$E
+} = bem(CLASSNAME$12);
 
 /**
  * Component default props.
@@ -10398,23 +10410,23 @@ const GenericBlock$1 = props => {
   } = props;
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classnames(className, block$M()),
+    className: classnames(className, block$O()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
     children: [figure && /*#__PURE__*/jsx(FlexBox, {
       ...figureProps,
-      className: classnames(figureProps?.className, element$C('figure')),
+      className: classnames(figureProps?.className, element$E('figure')),
       children: figure
     }), content && /*#__PURE__*/jsx(FlexBox, {
       orientation: Orientation.vertical,
       fillSpace: true,
       ...contentProps,
-      className: classnames(contentProps?.className, element$C('content')),
+      className: classnames(contentProps?.className, element$E('content')),
       children: content
     }), actions && /*#__PURE__*/jsx(FlexBox, {
       ...actionsProps,
-      className: classnames(actionsProps?.className, element$C('actions')),
+      className: classnames(actionsProps?.className, element$E('actions')),
       children: actions
     })]
   });
@@ -10501,8 +10513,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$$;
-BaseGenericBlock.className = CLASSNAME$_;
+BaseGenericBlock.displayName = COMPONENT_NAME$14;
+BaseGenericBlock.className = CLASSNAME$12;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$U;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
@@ -10581,18 +10593,18 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$10;
-ComboboxState.className = CLASSNAME$$;
+ComboboxState.displayName = COMPONENT_NAME$15;
+ComboboxState.className = CLASSNAME$13;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'ListDivider';
+const COMPONENT_NAME$13 = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-list-divider';
+const CLASSNAME$11 = 'lumx-list-divider';
 
 /**
  * Component default props.
@@ -10616,11 +10628,11 @@ const ListDivider$1 = props => {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$Z)
+    className: classnames(className, CLASSNAME$11)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$_;
-ListDivider$1.className = CLASSNAME$Z;
+ListDivider$1.displayName = COMPONENT_NAME$13;
+ListDivider$1.className = CLASSNAME$11;
 ListDivider$1.defaultProps = DEFAULT_PROPS$T;
 
 /**
@@ -10641,8 +10653,8 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$_;
-ListDivider.className = CLASSNAME$Z;
+ListDivider.displayName = COMPONENT_NAME$13;
+ListDivider.className = CLASSNAME$11;
 ListDivider.defaultProps = DEFAULT_PROPS$T;
 
 /**
@@ -10692,16 +10704,16 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'CommentBlock';
+const COMPONENT_NAME$12 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-comment-block';
+const CLASSNAME$10 = 'lumx-comment-block';
 const {
-  block: block$L,
-  element: element$B
-} = classNames.bem(CLASSNAME$Y);
+  block: block$N,
+  element: element$D
+} = classNames.bem(CLASSNAME$10);
 
 /**
  * Component default props.
@@ -10742,7 +10754,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$N({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -10751,60 +10763,60 @@ const CommentBlock = forwardRef((props, ref) => {
     })),
     ...forwardedProps,
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$B('wrapper'),
+      className: element$D('wrapper'),
       children: [/*#__PURE__*/jsx("div", {
-        className: element$B('avatar'),
+        className: element$D('avatar'),
         children: /*#__PURE__*/jsx(Avatar, {
           ...avatarProps,
           size: Size$1.m,
           onClick: onClick
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: element$B('container'),
+        className: element$D('container'),
         children: [/*#__PURE__*/jsxs("div", {
-          className: element$B('content'),
+          className: element$D('content'),
           children: [/*#__PURE__*/jsxs("div", {
-            className: element$B('meta'),
+            className: element$D('meta'),
             children: [name &&
             /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             jsx("span", {
-              className: element$B('name'),
+              className: element$D('name'),
               onClick: onClick,
               onMouseEnter: onMouseEnter,
               onMouseLeave: onMouseLeave,
               children: name
             }), headerActions && /*#__PURE__*/jsx("span", {
-              className: element$B('header-actions'),
+              className: element$D('header-actions'),
               children: headerActions
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: element$B('text'),
+            className: element$D('text'),
             children: text
           }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
             label: fullDate,
             placement: "top",
             children: /*#__PURE__*/jsx("span", {
-              className: element$B('date'),
+              className: element$D('date'),
               children: date
             })
           }) : /*#__PURE__*/jsx("span", {
-            className: element$B('date'),
+            className: element$D('date'),
             children: date
           }))]
         }), hasActions && /*#__PURE__*/jsx("div", {
-          className: element$B('actions'),
+          className: element$D('actions'),
           children: actions
         })]
       })]
     }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: element$B('children'),
+      className: element$D('children'),
       children: children
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$Z;
-CommentBlock.className = CLASSNAME$Y;
+CommentBlock.displayName = COMPONENT_NAME$12;
+CommentBlock.className = CLASSNAME$10;
 CommentBlock.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10825,12 +10837,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'DatePicker';
+const COMPONENT_NAME$11 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-date-picker';
+const CLASSNAME$$ = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -11052,8 +11064,8 @@ function formatDayNumber(locale, date) {
 }
 
 const {
-  element: element$A
-} = classNames.bem(CLASSNAME$X);
+  element: element$C
+} = classNames.bem(CLASSNAME$$);
 
 /**
  * Defines the props of the component.
@@ -11062,7 +11074,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'DatePickerControlled';
+const COMPONENT_NAME$10 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11147,10 +11159,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$X}`,
+    className: `${CLASSNAME$$}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
-      className: element$A('toolbar'),
+      className: element$C('toolbar'),
       after: /*#__PURE__*/jsx(IconButton, {
         ...nextButtonProps,
         emphasis: Emphasis$1.low,
@@ -11170,7 +11182,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: element$A('month'),
+          className: element$C('month'),
           orientation: "horizontal",
           hAlign: "center",
           gap: "regular",
@@ -11185,7 +11197,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             min: 0,
             onBlur: updateYear,
             onKeyPress: updateYearOnEnterPressed,
-            className: element$A('year')
+            className: element$C('year')
           }, "year") : /*#__PURE__*/jsx(Text, {
             as: "p",
             children: part
@@ -11193,17 +11205,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
         })]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: element$A('calendar'),
+      className: element$C('calendar'),
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames.join(element$A('week-days'), element$A('days-wrapper')),
+        className: classNames.join(element$C('week-days'), element$C('days-wrapper')),
         children: weekDays.map(({
           letter,
           number,
           long
         }) => /*#__PURE__*/jsxs("div", {
-          className: element$A('day-wrapper'),
+          className: element$C('day-wrapper'),
           children: [/*#__PURE__*/jsx("span", {
-            className: element$A('week-day'),
+            className: element$C('week-day'),
             "aria-hidden": true,
             children: letter.toLocaleUpperCase()
           }), /*#__PURE__*/jsx("span", {
@@ -11212,7 +11224,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           })]
         }, number))
       }), /*#__PURE__*/jsx("div", {
-        className: classNames.join(element$A('month-days'), element$A('days-wrapper')),
+        className: classNames.join(element$C('month-days'), element$C('days-wrapper')),
         children: weeks.flatMap((week, weekIndex) => {
           return weekDays.map((weekDay, dayIndex) => {
             const {
@@ -11223,10 +11235,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
             const isToday = !isOutOfRange && date && isSameDay(date, new Date());
             const isSelected = date && value && isSameDay(value, date);
             return /*#__PURE__*/jsx("div", {
-              className: element$A('day-wrapper'),
+              className: element$C('day-wrapper'),
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: element$A('month-day', {
+                className: element$C('month-day', {
                   'is-today': isToday
                 }),
                 disabled: isOutOfRange,
@@ -11252,8 +11264,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$X;
-DatePickerControlled.className = CLASSNAME$X;
+DatePickerControlled.displayName = COMPONENT_NAME$10;
+DatePickerControlled.className = CLASSNAME$$;
 
 /**
  * DatePicker component.
@@ -11295,8 +11307,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$Y;
-DatePicker.className = CLASSNAME$X;
+DatePicker.displayName = COMPONENT_NAME$11;
+DatePicker.className = CLASSNAME$$;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -11309,7 +11321,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'DatePickerField';
+const COMPONENT_NAME$$ = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11398,7 +11410,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$W;
+DatePickerField.displayName = COMPONENT_NAME$$;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11694,16 +11706,16 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Dialog';
+const COMPONENT_NAME$_ = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-dialog';
+const CLASSNAME$_ = 'lumx-dialog';
 const {
-  block: block$K,
-  element: element$z
-} = bem(CLASSNAME$W);
+  block: block$M,
+  element: element$B
+} = bem(CLASSNAME$_);
 
 /**
  * Component default props.
@@ -11759,7 +11771,7 @@ const Dialog$1 = props => {
     children: /*#__PURE__*/jsxs("div", {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, block$K({
+      className: classnames(className, block$M({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -11769,13 +11781,13 @@ const Dialog$1 = props => {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: element$z('overlay')
+        className: element$B('overlay')
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx("div", {
-            className: element$z('container'),
+            className: element$B('container'),
             role: "dialog",
             "aria-modal": "true",
             ...dialogProps,
@@ -11784,36 +11796,36 @@ const Dialog$1 = props => {
               childrenRefs: clickAwayRefs,
               parentRef: rootRef,
               children: /*#__PURE__*/jsxs("section", {
-                className: element$z('wrapper'),
+                className: element$B('wrapper'),
                 ref: wrapperRef,
                 children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
                   ...headerChildProps,
-                  className: classnames(element$z('header', {
+                  className: classnames(element$B('header', {
                     'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
                   }), headerChildProps?.className),
                   children: [header, headerChildContent]
                 }), /*#__PURE__*/jsxs("div", {
                   ref: contentRef,
-                  className: element$z('content'),
+                  className: element$B('content'),
                   children: [/*#__PURE__*/jsx("div", {
-                    className: element$z('sentinel', {
+                    className: element$B('sentinel', {
                       top: true
                     }),
                     ref: setSentinelTop
                   }), content, /*#__PURE__*/jsx("div", {
-                    className: element$z('sentinel', {
+                    className: element$B('sentinel', {
                       bottom: true
                     }),
                     ref: setSentinelBottom
                   })]
                 }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
                   ...footerChildProps,
-                  className: classnames(element$z('footer', {
+                  className: classnames(element$B('footer', {
                     'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
                   }), footerChildProps?.className),
                   children: [footer, footerChildContent]
                 }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: element$z('progress-overlay'),
+                  className: element$B('progress-overlay'),
                   children: /*#__PURE__*/jsx(ProgressCircular, {})
                 })]
               })
@@ -11976,22 +11988,22 @@ const Dialog = forwardRef((props, ref) => {
     ...forwardedProps
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$V;
-Dialog.className = CLASSNAME$W;
+Dialog.displayName = COMPONENT_NAME$_;
+Dialog.className = CLASSNAME$_;
 Dialog.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'Divider';
+const COMPONENT_NAME$Z = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-divider';
+const CLASSNAME$Z = 'lumx-divider';
 const {
-  block: block$J
-} = bem(CLASSNAME$V);
+  block: block$L
+} = bem(CLASSNAME$Z);
 
 /**
  * Divider component.
@@ -12009,7 +12021,7 @@ const Divider$1 = props => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$J({
+    className: classnames(className, block$L({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
@@ -12043,22 +12055,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$U;
-Divider.className = CLASSNAME$V;
+Divider.displayName = COMPONENT_NAME$Z;
+Divider.className = CLASSNAME$Z;
 Divider.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'DragHandle';
+const COMPONENT_NAME$Y = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-drag-handle';
+const CLASSNAME$Y = 'lumx-drag-handle';
 const {
-  block: block$I
-} = bem(CLASSNAME$U);
+  block: block$K
+} = bem(CLASSNAME$Y);
 
 /**
  * DragHandle component.
@@ -12076,7 +12088,7 @@ const DragHandle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$I({
+    className: classnames(className, block$K({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: Icon$1({
@@ -12115,8 +12127,8 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$T;
-DragHandle.className = CLASSNAME$U;
+DragHandle.displayName = COMPONENT_NAME$Y;
+DragHandle.className = CLASSNAME$Y;
 DragHandle.defaultProps = DEFAULT_PROPS$O;
 
 const INITIAL_INDEX = -1;
@@ -12311,8 +12323,8 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1e;
-InternalList.className = CLASSNAME$1d;
+InternalList.displayName = COMPONENT_NAME$1j;
+InternalList.className = CLASSNAME$1h;
 InternalList.defaultProps = DEFAULT_PROPS$Z;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
@@ -12362,16 +12374,16 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Dropdown';
+const COMPONENT_NAME$X = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-dropdown';
+const CLASSNAME$X = 'lumx-dropdown';
 const {
-  block: block$H,
-  element: element$y
-} = classNames.bem(CLASSNAME$T);
+  block: block$J,
+  element: element$A
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * Component default props.
@@ -12435,7 +12447,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$H()),
+    className: classNames.join(className, block$J()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -12448,29 +12460,29 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: element$y('menu'),
+      className: element$A('menu'),
       ref: innerRef,
       children: popperElement
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$S;
-Dropdown.className = CLASSNAME$T;
+Dropdown.displayName = COMPONENT_NAME$X;
+Dropdown.className = CLASSNAME$X;
 Dropdown.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'ExpansionPanel';
+const COMPONENT_NAME$W = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-expansion-panel';
+const CLASSNAME$W = 'lumx-expansion-panel';
 const {
-  block: block$G,
-  element: element$x
-} = bem(CLASSNAME$S);
+  block: block$I,
+  element: element$z
+} = bem(CLASSNAME$W);
 
 /**
  * Component default props.
@@ -12524,7 +12536,7 @@ const ExpansionPanel$1 = props => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classnames(className, block$G({
+  const rootClassName = classnames(className, block$I({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -12538,17 +12550,17 @@ const ExpansionPanel$1 = props => {
     ...forwardedProps,
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: element$x('header'),
+      className: element$z('header'),
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: element$x('header-drag'),
+        className: element$z('header-drag'),
         children: dragHandle
       }), /*#__PURE__*/jsx("div", {
         ...headerProps,
-        className: element$x('header-content'),
+        className: element$z('header-content'),
         children: headerContent
       }), /*#__PURE__*/jsx("div", {
-        className: element$x('header-toggle'),
+        className: element$z('header-toggle'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
@@ -12558,15 +12570,15 @@ const ExpansionPanel$1 = props => {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: element$x('wrapper'),
+      className: element$z('wrapper'),
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: element$x('container'),
+        className: element$z('container'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$x('content'),
+          className: element$z('content'),
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: element$x('footer'),
+          className: element$z('footer'),
           children: footer
         })]
       })
@@ -12606,7 +12618,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   // 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'),
+    className: element$z('label'),
     children: label
   });
   const wrapperRef = useRef(null);
@@ -12659,17 +12671,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$R;
-ExpansionPanel.className = CLASSNAME$S;
+ExpansionPanel.displayName = COMPONENT_NAME$W;
+ExpansionPanel.className = CLASSNAME$W;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$M;
 
-const COMPONENT_NAME$Q = 'Flag';
-const CLASSNAME$R = 'lumx-flag';
+const COMPONENT_NAME$V = 'Flag';
+const CLASSNAME$V = 'lumx-flag';
 const DEFAULT_PROPS$L = {};
 const {
-  block: block$F,
-  element: element$w
-} = bem(CLASSNAME$R);
+  block: block$H,
+  element: element$y
+} = bem(CLASSNAME$V);
 
 /**
  * Flag component.
@@ -12692,19 +12704,19 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$F({
+    className: classnames(className, block$H({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
     children: [icon && Icon$1({
       icon,
       size: Size.xxs,
-      className: element$w('icon')
+      className: element$y('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
       truncate: !!truncate,
       typography: "overline",
-      className: element$w('label'),
+      className: element$y('label'),
       children: children
     })]
   });
@@ -12727,8 +12739,8 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$Q;
-Flag.className = CLASSNAME$R;
+Flag.displayName = COMPONENT_NAME$V;
+Flag.className = CLASSNAME$V;
 Flag.defaultProps = DEFAULT_PROPS$L;
 
 /** The maximum authorized heading level. */
@@ -12757,12 +12769,12 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'Heading';
+const COMPONENT_NAME$U = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-heading';
+const CLASSNAME$U = 'lumx-heading';
 
 /**
  * Component default props.
@@ -12787,7 +12799,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$Q),
+    className: classnames(className, CLASSNAME$U),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12825,8 +12837,8 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$P;
-Heading.className = CLASSNAME$Q;
+Heading.displayName = COMPONENT_NAME$U;
+Heading.className = CLASSNAME$U;
 Heading.defaultProps = DEFAULT_PROPS$K;
 
 /**
@@ -12865,15 +12877,15 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'Grid';
+const COMPONENT_NAME$T = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-grid';
+const CLASSNAME$T = 'lumx-grid';
 const {
-  block: block$E
-} = classNames.bem(CLASSNAME$P);
+  block: block$G
+} = classNames.bem(CLASSNAME$T);
 
 /**
  * Component default props.
@@ -12904,7 +12916,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$P}-container`).block(), block$E({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$G({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -12914,22 +12926,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$O;
-Grid.className = CLASSNAME$P;
+Grid.displayName = COMPONENT_NAME$T;
+Grid.className = CLASSNAME$T;
 Grid.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'GridItem';
+const COMPONENT_NAME$S = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-grid-item';
+const CLASSNAME$S = 'lumx-grid-item';
 const {
-  block: block$D
-} = classNames.bem(CLASSNAME$O);
+  block: block$F
+} = classNames.bem(CLASSNAME$S);
 
 /**
  * GridItem component.
@@ -12950,7 +12962,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$D({
+    className: classNames.join(className, block$F({
       [`width-${width}`]: Boolean(width),
       [`order-${order}`]: Boolean(order),
       [`align-${align}`]: Boolean(align)
@@ -12958,18 +12970,18 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$N;
-GridItem.className = CLASSNAME$O;
+GridItem.displayName = COMPONENT_NAME$S;
+GridItem.className = CLASSNAME$S;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'GridColumn';
+const COMPONENT_NAME$R = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-grid-column';
+const CLASSNAME$R = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -12999,7 +13011,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$N),
+    className: classnames(className, CLASSNAME$R),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -13009,8 +13021,8 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$M;
-GridColumn$1.className = CLASSNAME$N;
+GridColumn$1.displayName = COMPONENT_NAME$R;
+GridColumn$1.className = CLASSNAME$R;
 GridColumn$1.defaultProps = DEFAULT_PROPS$I;
 
 /**
@@ -13039,8 +13051,8 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$M;
-GridColumn.className = CLASSNAME$N;
+GridColumn.displayName = COMPONENT_NAME$R;
+GridColumn.className = CLASSNAME$R;
 GridColumn.defaultProps = DEFAULT_PROPS$H;
 
 /**
@@ -13062,16 +13074,16 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'ImageBlock';
+const COMPONENT_NAME$Q = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-image-block';
+const CLASSNAME$Q = 'lumx-image-block';
 const {
-  block: block$C,
-  element: element$v
-} = bem(CLASSNAME$M);
+  block: block$E,
+  element: element$x
+} = bem(CLASSNAME$Q);
 
 /**
  * Component default props.
@@ -13114,7 +13126,7 @@ const ImageBlock$1 = props => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$C({
+    className: classnames(className, block$E({
       [`caption-position-${captionPosition}`]: Boolean(captionPosition),
       [`align-${align}`]: Boolean(align),
       [`size-${size}`]: Boolean(size),
@@ -13123,7 +13135,7 @@ const ImageBlock$1 = props => {
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classnames(element$v('image'), thumbnailProps?.className),
+      className: classnames(element$x('image'), thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -13132,7 +13144,7 @@ const ImageBlock$1 = props => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$M,
+      baseClassName: CLASSNAME$Q,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -13143,7 +13155,7 @@ const ImageBlock$1 = props => {
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$v('actions'),
+      className: element$x('actions'),
       children: actions
     })]
   });
@@ -13263,19 +13275,19 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$L;
-ImageBlock.className = CLASSNAME$M;
+ImageBlock.displayName = COMPONENT_NAME$Q;
+ImageBlock.className = CLASSNAME$Q;
 ImageBlock.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'ImageLightbox';
+const COMPONENT_NAME$P = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-image-lightbox';
+const CLASSNAME$P = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13520,8 +13532,8 @@ function useAnimateScroll(scrollAreaRef) {
 }
 
 const {
-  element: element$u
-} = classNames.bem(CLASSNAME$L);
+  element: element$w
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -13588,12 +13600,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
     // Make it accessible to keyboard nav when the zone is scrollable
     ,
     tabIndex: isScrollable ? 0 : undefined,
-    className: element$u('image-slide'),
+    className: element$w('image-slide'),
     children: /*#__PURE__*/jsx(Thumbnail, {
       imgRef: useMergeRefs(imgRef, propImgRef),
       image: image,
       alt: alt,
-      className: element$u('thumbnail'),
+      className: element$w('thumbnail'),
       imgProps: {
         ...imgProps,
         style: {
@@ -13612,8 +13624,8 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 }, isEqual);
 
 const {
-  element: element$t
-} = classNames.bem(CLASSNAME$L);
+  element: element$v
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -13734,12 +13746,12 @@ const ImageSlideshow = ({
       })
     }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
       ref: footerRef,
-      className: element$t('footer'),
+      className: element$v('footer'),
       orientation: "vertical",
       vAlign: "center",
       gap: "big",
       children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
-        className: element$t('footer-actions'),
+        className: element$v('footer-actions'),
         orientation: "horizontal",
         gap: "regular",
         children: [slideShowControls, zoomControls]
@@ -13853,7 +13865,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$L
+          name: CLASSNAME$P
         }
       });
     }
@@ -13905,7 +13917,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$L
+          name: CLASSNAME$P
         }
       });
     }
@@ -13959,7 +13971,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$L),
+    className: classNames.join(className, CLASSNAME$P),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -13988,8 +14000,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$K;
-Inner.className = CLASSNAME$L;
+Inner.displayName = COMPONENT_NAME$P;
+Inner.className = CLASSNAME$P;
 
 /**
  * ImageLightbox component.
@@ -14005,16 +14017,16 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'InlineList';
+const COMPONENT_NAME$O = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-inline-list';
+const CLASSNAME$O = 'lumx-inline-list';
 const {
-  block: block$B,
-  element: element$s
-} = bem(CLASSNAME$K);
+  block: block$D,
+  element: element$u
+} = bem(CLASSNAME$O);
 
 /**
  * Component default props.
@@ -14044,7 +14056,7 @@ const InlineList$1 = props => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$B({
+      className: classnames(className, block$D({
         wrap: Boolean(wrap)
       }), color && font(color, colorVariant), typography$1 && typography(typography$1))
       // Lists with removed bullet style can lose their a11y list role on some browsers
@@ -14056,9 +14068,9 @@ const InlineList$1 = props => {
       // eslint-disable-next-line jsx-a11y/no-redundant-roles
       jsxs("li", {
         role: "listitem",
-        className: element$s('item'),
+        className: element$u('item'),
         children: [index !== 0 && /*#__PURE__*/jsx("span", {
-          className: element$s('item-separator'),
+          className: element$u('item-separator'),
           "aria-hidden": "true",
           children: '\u00A0•\u00A0'
         }), item]
@@ -14066,8 +14078,8 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$J;
-InlineList$1.className = CLASSNAME$K;
+InlineList$1.displayName = COMPONENT_NAME$O;
+InlineList$1.className = CLASSNAME$O;
 InlineList$1.defaultProps = DEFAULT_PROPS$F;
 
 /**
@@ -14092,8 +14104,8 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$J;
-InlineList.className = CLASSNAME$K;
+InlineList.displayName = COMPONENT_NAME$O;
+InlineList.className = CLASSNAME$O;
 InlineList.defaultProps = DEFAULT_PROPS$F;
 
 /**
@@ -14137,16 +14149,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'Lightbox';
+const COMPONENT_NAME$N = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-lightbox';
+const CLASSNAME$N = 'lumx-lightbox';
 const {
-  block: block$A,
-  element: element$r
-} = bem(CLASSNAME$J);
+  block: block$C,
+  element: element$t
+} = bem(CLASSNAME$N);
 
 /**
  * Lightbox component.
@@ -14193,7 +14205,7 @@ const Lightbox$1 = props => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classnames(className, block$A({
+      className: classnames(className, block$C({
         'is-hidden': !isOpen,
         'is-shown': isOpen || isVisible,
         [`theme-${theme}`]: Boolean(theme)
@@ -14202,7 +14214,7 @@ const Lightbox$1 = props => {
         zIndex
       },
       children: [closeButtonProps && /*#__PURE__*/jsx("div", {
-        className: element$r('close'),
+        className: element$t('close'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...closeButtonProps,
           ref: closeButtonRef,
@@ -14222,7 +14234,7 @@ const Lightbox$1 = props => {
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,
-              className: element$r('wrapper'),
+              className: element$t('wrapper'),
               role: "presentation",
               children: children
             })
@@ -14330,8 +14342,8 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Lightbox.displayName = COMPONENT_NAME$I;
-Lightbox.className = CLASSNAME$J;
+Lightbox.displayName = COMPONENT_NAME$N;
+Lightbox.className = CLASSNAME$N;
 
 /**
  * Defines the props of the component.
@@ -14340,15 +14352,15 @@ Lightbox.className = CLASSNAME$J;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'Link';
+const COMPONENT_NAME$M = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-link';
+const CLASSNAME$M = 'lumx-link';
 const {
-  block: block$z
-} = bem(CLASSNAME$I);
+  block: block$B
+} = bem(CLASSNAME$M);
 
 /**
  * Link component.
@@ -14377,7 +14389,7 @@ const Link$1 = props => {
     ...forwardedProps,
     handleClick,
     children,
-    className: classnames(className, block$z({
+    className: classnames(className, block$B({
       [`color-${color}`]: Boolean(color),
       [`color-variant-${colorVariant}`]: Boolean(colorVariant),
       'has-typography': !!typography$1
@@ -14386,8 +14398,8 @@ const Link$1 = props => {
 };
 
 const {
-  element: element$q
-} = classNames.bem(CLASSNAME$I);
+  element: element$s
+} = classNames.bem(CLASSNAME$M);
 
 /**
  * Defines the props of the component.
@@ -14422,33 +14434,33 @@ const Link = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && /*#__PURE__*/jsx(Icon, {
         icon: leftIcon,
-        className: element$q('left-icon')
+        className: element$s('left-icon')
       }), children && /*#__PURE__*/jsx("span", {
-        className: element$q('content'),
+        className: element$s('content'),
         children: children
       }), rightIcon && /*#__PURE__*/jsx(Icon, {
         icon: rightIcon,
-        className: element$q('right-icon')
+        className: element$s('right-icon')
       })]
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$H;
-Link.className = CLASSNAME$I;
+Link.displayName = COMPONENT_NAME$M;
+Link.className = CLASSNAME$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'LinkPreview';
+const COMPONENT_NAME$L = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-link-preview';
+const CLASSNAME$L = 'lumx-link-preview';
 const {
-  block: block$y,
-  element: element$p
-} = bem(CLASSNAME$H);
+  block: block$A,
+  element: element$r
+} = bem(CLASSNAME$L);
 
 /**
  * Component default props.
@@ -14487,14 +14499,14 @@ const LinkPreview$1 = props => {
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$y({
+    className: classnames(className, block$A({
       [`size-${adjustedSize}`]: Boolean(adjustedSize),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsxs("div", {
-      className: element$p('wrapper'),
+      className: element$r('wrapper'),
       children: [thumbnailProps && /*#__PURE__*/jsx("div", {
-        className: element$p('thumbnail'),
+        className: element$r('thumbnail'),
         children: /*#__PURE__*/jsx(Thumbnail, {
           ...thumbnailProps,
           linkAs: linkAs,
@@ -14509,9 +14521,9 @@ const LinkPreview$1 = props => {
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: element$p('container'),
+        className: element$r('container'),
         children: [title && /*#__PURE__*/jsx(TitleHeading, {
-          className: element$p('title'),
+          className: element$r('title'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
@@ -14522,14 +14534,14 @@ const LinkPreview$1 = props => {
             children: title
           })
         }), description && /*#__PURE__*/jsx("p", {
-          className: element$p('description'),
+          className: element$r('description'),
           children: description
         }), /*#__PURE__*/jsx("div", {
-          className: element$p('link'),
+          className: element$r('link'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classnames(element$p('link'), linkProps?.className),
+            className: classnames(element$r('link'), linkProps?.className),
             target: "_blank",
             href: link,
             color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -14574,8 +14586,8 @@ const LinkPreview = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$G;
-LinkPreview.className = CLASSNAME$H;
+LinkPreview.displayName = COMPONENT_NAME$L;
+LinkPreview.className = CLASSNAME$L;
 LinkPreview.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -14607,8 +14619,8 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1b,
-  className: CLASSNAME$1a,
+  displayName: COMPONENT_NAME$1g,
+  className: CLASSNAME$1e,
   defaultProps: DEFAULT_PROPS$X
 });
 
@@ -14647,8 +14659,8 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$1c;
-_ListItem.className = CLASSNAME$1b;
+_ListItem.displayName = COMPONENT_NAME$1h;
+_ListItem.className = CLASSNAME$1f;
 _ListItem.defaultProps = DEFAULT_PROPS$Y;
 
 /**
@@ -14662,12 +14674,12 @@ const ListItem = Object.assign(_ListItem, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'ListSubheader';
+const COMPONENT_NAME$K = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-list-subheader';
+const CLASSNAME$K = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -14686,12 +14698,835 @@ const ListSubheader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$G),
+    className: classNames.join(className, CLASSNAME$K),
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$F;
-ListSubheader.className = CLASSNAME$G;
+ListSubheader.displayName = COMPONENT_NAME$K;
+ListSubheader.className = CLASSNAME$K;
+
+const COMPONENT_NAME$J = 'MenuButton';
+
+/** Menu button core template (composition of menu provider, trigger, popover and list) */
+const MenuButton$1 = (props, {
+  Menu
+}) => {
+  const {
+    label,
+    children,
+    triggerProps,
+    popoverProps,
+    onOpen
+  } = props;
+  return /*#__PURE__*/jsxs(Menu.Provider, {
+    onOpen: onOpen,
+    children: [/*#__PURE__*/jsx(Menu.Trigger, {
+      ...triggerProps,
+      children: label
+    }), /*#__PURE__*/jsx(Menu.Popover, {
+      ...popoverProps,
+      children: /*#__PURE__*/jsx(Menu.List, {
+        children: children
+      })
+    })]
+  });
+};
+
+/**
+ * CSS selector for menu items (inner focusable element). Includes disabled items: per
+ * WAI-ARIA APG they stay focusable so AT announces them; click is no-op'd via `aria-disabled`.
+ */
+const MENU_ITEM_SELECTOR = '[data-menu-item]';
+
+/** Get an item's text label (trimmed `textContent`) for typeahead matching. */
+function getItemText(item) {
+  return item.textContent?.trim() ?? '';
+}
+
+/** Get all item elements within a menu container, in DOM order (includes disabled). */
+function getItems(menu) {
+  return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR));
+}
+
+/**
+ * Find and focus the next sequential focusable element after the given trigger
+ * in document tab order. Used by Tab-at-last-item to move focus forward past
+ * the (now-closed) menu.
+ */
+function moveFocusAfterTrigger(trigger) {
+  const allFocusable = Array.from(document.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(el => !el.matches(DISABLED_SELECTOR) && el.tabIndex >= 0);
+  const triggerIdx = allFocusable.indexOf(trigger);
+  if (triggerIdx === -1) return;
+  const next = allFocusable[triggerIdx + 1];
+  next?.focus();
+}
+
+/**
+ * Set up a disclosure-pattern menu handle.
+ *
+ * The trigger is registered separately via {@link MenuHandle.registerTrigger}
+ * once the trigger mounts. The menu container is registered separately via
+ * {@link MenuHandle.registerMenu} once on mount — the popover uses
+ * `closeMode="hide"` so the `<ul>` stays in the DOM at all times.
+ *
+ * IMPORTANT: this is the **disclosure widget** pattern, NOT WAI-ARIA's
+ * `role="menu"`. Items are native `<button>` / `<a>` elements with `tabindex="0"`,
+ * so screen readers announce them naturally and Tab navigates between them in
+ * DOM order. There is no focus trap.
+ *
+ * @param options Options (menuId for `aria-controls`).
+ * @returns A {@link MenuHandle} for interacting with the menu.
+ */
+function setupMenu(options = {}) {
+  const {
+    menuId
+  } = options;
+  let trigger = null;
+  let menu = null;
+  let isOpenState = false;
+
+  /** Handle-lifetime abort controller (typeahead, etc.). */
+  const handleAbort = new AbortController();
+  /** Per-registration controller for trigger listeners. */
+  let triggerAbort = null;
+  /** Per-registration controller for menu list listeners. */
+  let menuAbort = null;
+  /** List focus nav controller */
+  let focusNav = null;
+  /** Menu handle */
+  let handle;
+
+  /**
+   * Shared typeahead controller (handle lifetime). Shared between the trigger and the
+   * menu list so a character typed on the closed trigger lands in the same buffer that
+   * in-menu typing reads.
+   */
+  const typeahead = createTypeahead(() => menu ? createSelectorTreeWalker(menu, MENU_ITEM_SELECTOR) : null, getItemText, handleAbort.signal);
+  const subscribers = {
+    open: new Set()
+  };
+  function notify(event, value) {
+    subscribers[event].forEach(cb => cb(value));
+  }
+
+  /** Open the menu (if not already open), then navigate  */
+  function openAndGoTo(resolve) {
+    if (!isOpenState) handle.setOpen(true);
+    focusNav?.goTo(resolve);
+  }
+
+  /**
+   * Accumulate a printable key into the shared typeahead buffer, then navigate to the
+   * matching item using `goToItem` (immediate, for use inside the open menu).
+   * Returns the matched item, or `null` when nothing matches.
+   */
+  function handleTypeaheadInMenu(key, currentItem) {
+    const match = typeahead.handle(key, currentItem);
+    if (match) focusNav?.goTo(() => match);
+    return match;
+  }
+  handle = {
+    get trigger() {
+      return trigger;
+    },
+    setOpen(open) {
+      if (isOpenState === open) return;
+      isOpenState = open;
+      if (trigger) trigger.setAttribute('aria-expanded', String(open));
+      notify('open', open);
+    },
+    registerTrigger(el) {
+      if (trigger && trigger !== el) {
+        triggerAbort?.abort();
+        triggerAbort = null;
+      }
+      trigger = el;
+      triggerAbort = new AbortController();
+      const {
+        signal
+      } = triggerAbort;
+
+      // Set ARIA attributes.
+      trigger.setAttribute('aria-haspopup', 'true');
+      trigger.setAttribute('aria-expanded', String(isOpenState));
+      if (menuId) trigger.setAttribute('aria-controls', menuId);
+
+      // Click toggles the menu. When opening via click, focus the first item.
+      trigger.addEventListener('click', () => {
+        if (!isOpenState) {
+          openAndGoTo(n => n.getFirst());
+        } else {
+          handle.setOpen(false);
+        }
+      }, {
+        signal
+      });
+
+      // Native `<button>` fires `click` on Enter/Space; other elements (Chip, role="button",
+      // href-less `<a>`, …) don't, so we fire it manually.
+      const needsManualActivation = trigger.tagName !== 'BUTTON';
+      trigger.addEventListener('keydown', event => {
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            event.stopPropagation();
+            openAndGoTo(n => n.getFirst());
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            event.stopPropagation();
+            openAndGoTo(n => n.getLast());
+            break;
+          case 'Enter':
+          case ' ':
+            // Native <button> already fires `click` on Enter/Space → skip to avoid double-toggle.
+            if (!needsManualActivation) break;
+            event.preventDefault();
+            event.stopPropagation();
+            el.click();
+            break;
+          default:
+            // Printable char on closed trigger → open menu, focus matching item.
+            // When open, the list-side handler owns typeahead (skip here to avoid
+            // double-buffering the char).
+            if (!isOpenState && isPrintableKey(event)) {
+              event.preventDefault();
+              event.stopPropagation();
+              // Buffer the char; items don't exist yet, matches on flushPendingNavigation
+              typeahead.handle(event.key, null);
+              focusNav?.goTo(n => typeahead.rematch(n.activeItem) ?? n.getFirst());
+              handle.setOpen(true);
+            }
+            break;
+        }
+      }, {
+        signal
+      });
+      return () => {
+        if (trigger === el) {
+          triggerAbort?.abort();
+          triggerAbort = null;
+          trigger = null;
+        }
+      };
+    },
+    registerMenu(el) {
+      if (menu && menu !== el) {
+        menuAbort?.abort();
+        menuAbort = null;
+      }
+      menu = el;
+      menuAbort = new AbortController();
+      const {
+        signal
+      } = menuAbort;
+
+      // ── Focus navigation ──────────────────────────────────
+      focusNav = createListFocusNavigation({
+        container: menu,
+        itemSelector: MENU_ITEM_SELECTOR,
+        wrap: true,
+        getActiveItem: () => {
+          const active = document.activeElement;
+          if (!active || !el.contains(active)) return null;
+          return active;
+        }
+      }, {
+        onActivate: item => {
+          item.focus({
+            preventScroll: false
+          });
+        },
+        onDeactivate: () => {
+          // No-op — focus moves naturally via item.focus().
+        },
+        onClear: () => {
+          // No-op.
+        }
+      }, signal);
+
+      // ── Keyboard handlers ─────────────────────────────────
+      menu.addEventListener('keydown', event => {
+        // Modifier+key combos other than Shift+Tab should pass through.
+        if (event.altKey || event.ctrlKey || event.metaKey) return;
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            event.stopPropagation();
+            focusNav?.goDown();
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            event.stopPropagation();
+            focusNav?.goUp();
+            break;
+          case 'Home':
+            event.preventDefault();
+            event.stopPropagation();
+            focusNav?.goTo(s => s.getFirst());
+            break;
+          case 'End':
+            event.preventDefault();
+            event.stopPropagation();
+            focusNav?.goTo(s => s.getLast());
+            break;
+          case 'Escape':
+            event.preventDefault();
+            event.stopPropagation();
+            // Focus trigger before closing: with closeMode="hide" items unmount,
+            // which would otherwise leave focus on body.
+            trigger?.focus();
+            handle.setOpen(false);
+            break;
+          case 'Tab':
+            {
+              // Tab-at-edge: close menu and move focus manually. The popover stays
+              // mounted (closeMode="hide") but items unmount on close, so the focused
+              // item disappears before the browser resolves the next tab stop. Blur the
+              // active item (so Popover skips focus-restore), close, then move focus
+              // forward (Tab) or to the trigger (Shift+Tab).
+              const items = getItems(el);
+              if (items.length === 0) return;
+              const idx = items.indexOf(document.activeElement);
+              if (idx === -1) return;
+              if (event.shiftKey && idx === 0) {
+                event.preventDefault();
+                // Focus trigger explicitly for deterministic timing.
+                trigger?.focus();
+                handle.setOpen(false);
+              } else if (!event.shiftKey && idx === items.length - 1) {
+                event.preventDefault();
+                // Blur active item so focusAnchorOnClose won't kick in.
+                document.activeElement?.blur();
+                handle.setOpen(false);
+                // After unmount, focus the next element after the trigger.
+                setTimeout(() => {
+                  if (trigger) moveFocusAfterTrigger(trigger);
+                }, 0);
+              }
+              break;
+            }
+          default:
+            // Printable characters → typeahead among visible items, navigate immediately.
+            if (isPrintableKey(event)) {
+              const active = document.activeElement;
+              const currentItem = active && el.contains(active) ? active : null;
+              const match = handleTypeaheadInMenu(event.key, currentItem);
+              if (match) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            }
+            break;
+        }
+      }, {
+        signal
+      });
+      return () => {
+        if (menu === el) {
+          menuAbort?.abort();
+          menuAbort = null;
+          menu = null;
+        }
+      };
+    },
+    flushPendingNavigation() {
+      focusNav?.flushPendingNavigation();
+    },
+    subscribe(event, listener) {
+      subscribers[event].add(listener);
+      return () => {
+        subscribers[event].delete(listener);
+      };
+    },
+    destroy() {
+      handleAbort.abort();
+      triggerAbort?.abort();
+      menuAbort?.abort();
+      triggerAbort = null;
+      menuAbort = null;
+      trigger = null;
+      menu = null;
+      isOpenState = false;
+      for (const set of Object.values(subscribers)) {
+        set.clear();
+      }
+    }
+  };
+  return handle;
+}
+
+/** Context value shared between Menu sub-components. */
+
+const MenuContext = /*#__PURE__*/createContext(undefined);
+
+/** Use Menu context. @throws if used outside `Menu.Provider`. */
+function useMenuContext() {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error('Menu sub-components must be used within a Menu.Provider');
+  }
+  return context;
+}
+
+/**
+ * MenuProvider component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+function MenuProvider(props) {
+  const {
+    children,
+    onOpen
+  } = props;
+  const menuId = useId();
+  const triggerId = useId();
+  const anchorRef = useRef(null);
+  const handle = useMemo(() => setupMenu({
+    menuId
+  }), [menuId]);
+
+  // Forward 'open' events to the consumer callback via a ref to avoid stale closures.
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  useEffect(() => {
+    const unsubscribe = handle.subscribe('open', isOpen => onOpenRef.current?.(isOpen));
+    // Cleanup
+    return () => {
+      unsubscribe();
+      handle.destroy();
+    };
+  }, [handle]);
+  const contextValue = useMemo(() => ({
+    handle,
+    menuId,
+    triggerId,
+    anchorRef
+  }), [handle, menuId, triggerId]);
+  return /*#__PURE__*/jsx(MenuContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+MenuProvider.displayName = 'Menu.Provider';
+
+const COMPONENT_NAME$I = 'MenuTrigger';
+const CLASSNAME$J = 'lumx-menu-trigger';
+
+/** MenuTrigger core template. Renders `Trigger` with disclosure ARIA attributes. */
+const MenuTrigger$1 = (props, {
+  Trigger
+}) => {
+  const {
+    children,
+    className,
+    menuId,
+    isOpen,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Trigger, {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, CLASSNAME$J),
+    "aria-haspopup": "true",
+    "aria-controls": menuId,
+    "aria-expanded": isOpen ? 'true' : 'false',
+    children: children
+  });
+};
+
+/**
+ * Subscribe to a menu event via the handle's subscriber system.
+ * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+ *
+ * @param event        Event name to subscribe to.
+ * @param initialValue Initial value used until the first event fires.
+ * @returns The latest event payload (or `initialValue`).
+ */
+function useMenuEvent(event, initialValue) {
+  const {
+    handle
+  } = useMenuContext();
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
+    return handle.subscribe(event, setValue);
+  }, [handle, event]);
+  return value;
+}
+
+/**
+ * Subscribe to the menu open state.
+ *
+ * @returns `[isOpen, setIsOpen]` — open state and a setter that proxies to `handle.setOpen`.
+ */
+function useMenuOpen() {
+  const {
+    handle
+  } = useMenuContext();
+  const isOpen = useMenuEvent('open', false);
+  const setIsOpen = useCallback(open => handle.setOpen(open), [handle]);
+  return [isOpen, setIsOpen];
+}
+
+/** MenuTrigger props. Polymorphic */
+
+/**
+ * MenuTrigger component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const MenuTrigger = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    menuId,
+    triggerId,
+    anchorRef,
+    handle
+  } = useMenuContext();
+  const [isOpen] = useMenuOpen();
+  const {
+    as,
+    children,
+    ...triggerProps
+  } = props;
+  const TriggerComp = as ?? Button;
+  const internalRef = useRef(null);
+  const mergedRef = useMergeRefs(ref, internalRef, anchorRef);
+
+  // Register trigger with the handle on mount; clean up on unmount.
+  useEffect(() => {
+    const triggerEl = internalRef.current;
+    if (!triggerEl) return undefined;
+    return handle.registerTrigger(triggerEl);
+  }, [handle]);
+  return MenuTrigger$1({
+    ...triggerProps,
+    id: triggerProps.id ?? triggerId,
+    menuId,
+    isOpen,
+    ref: mergedRef,
+    children
+  }, {
+    Trigger: TriggerComp
+  });
+}), {
+  displayName: COMPONENT_NAME$I,
+  className: CLASSNAME$J
+});
+
+const COMPONENT_NAME$H = 'MenuPopover';
+const CLASSNAME$I = 'lumx-menu-popover';
+const {
+  block: block$z,
+  element: element$q
+} = bem(CLASSNAME$I);
+
+/** MenuPopover core template. Renders a `Popover` with menu-friendly defaults. */
+const MenuPopover$1 = (props, {
+  Popover,
+  FlexBox
+}) => {
+  const {
+    children,
+    className,
+    isOpen,
+    placement = 'bottom-start',
+    anchorRef,
+    handleClose,
+    closeOnClickAway = true,
+    closeOnEscape = true,
+    usePortal = false,
+    focusAnchorOnClose = true,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Popover, {
+    ...forwardedProps,
+    placement: placement,
+    anchorRef: anchorRef,
+    isOpen: isOpen,
+    onClose: handleClose,
+    closeOnClickAway: closeOnClickAway,
+    closeOnEscape: closeOnEscape,
+    usePortal: usePortal,
+    focusAnchorOnClose: focusAnchorOnClose,
+    withFocusTrap: false,
+    closeMode: "hide",
+    fitToAnchorWidth: false,
+    className: block$z([className]),
+    children: /*#__PURE__*/jsx(FlexBox, {
+      orientation: "vertical",
+      className: element$q('scroll'),
+      children: children
+    })
+  });
+};
+
+/** Popover props forwarded to the inner Popover (minus managed props). */
+
+/** MenusPopover props. */
+
+/**
+ * MenuPopover component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const MenuPopover = props => {
+  const {
+    anchorRef
+  } = useMenuContext();
+  const [isOpen, setIsOpen] = useMenuOpen();
+  const {
+    children,
+    ...popoverProps
+  } = props;
+  return MenuPopover$1({
+    ...popoverProps,
+    children,
+    isOpen,
+    anchorRef,
+    handleClose: () => setIsOpen(false)
+  }, {
+    Popover,
+    FlexBox
+  });
+};
+MenuPopover.displayName = COMPONENT_NAME$H;
+MenuPopover.className = CLASSNAME$I;
+
+/** Menu list props. */
+
+const COMPONENT_NAME$G = 'Menu';
+const CLASSNAME$H = 'lumx-menu';
+
+/** MenuList core template. Wraps `List` with menu-specific class and ARIA labelling. */
+const MenuList$1 = props => {
+  const {
+    'aria-labelledby': ariaLabelledby,
+    children,
+    className,
+    id,
+    ref,
+    ...rest
+  } = props;
+  return List$1({
+    ...rest,
+    ref,
+    id,
+    className: classnames(className, CLASSNAME$H),
+    itemPadding: 'big',
+    'aria-labelledby': ariaLabelledby,
+    children
+  });
+};
+
+/**
+ * MenuList component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const MenuList = forwardRef((props, ref) => {
+  const {
+    menuId,
+    triggerId,
+    handle
+  } = useMenuContext();
+  const internalRef = useRef(null);
+  const mergedRef = useMergeRefs(ref, internalRef);
+  const {
+    children,
+    ...forwardedProps
+  } = props;
+  const [isOpen] = useMenuOpen();
+
+  // Register menu in context
+  useLayoutEffect(() => {
+    const menu = internalRef.current;
+    if (!menu) return undefined;
+    return handle.registerMenu(menu);
+  }, [handle]);
+
+  // Flush pending navigation (that could not be done when the menu was closed)
+  useLayoutEffect(() => {
+    if (isOpen) handle.flushPendingNavigation();
+  }, [handle, isOpen]);
+  return MenuList$1({
+    ...forwardedProps,
+    id: menuId,
+    'aria-labelledby': triggerId,
+    ref: mergedRef,
+    children: isOpen ? children : null
+  });
+});
+MenuList.displayName = COMPONENT_NAME$G;
+MenuList.className = CLASSNAME$H;
+
+const Menu = {
+  Provider: MenuProvider,
+  Trigger: MenuTrigger,
+  Popover: MenuPopover,
+  List: MenuList
+};
+
+/** Keys managed by MenuButton — omitted from the polymorphic trigger props. */
+
+/** Polymorphic trigger props with index signature stripped and managed keys removed. */
+
+/** Menu button props */
+
+/**
+ * MenuButton component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const MenuButton = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    label,
+    children,
+    popoverProps,
+    onOpen,
+    as,
+    ...triggerProps
+  } = props;
+  const isIconButton = as === IconButton;
+  const triggerLabel = isIconButton ? undefined : label;
+  const extraTriggerProps = isIconButton ? {
+    label
+  } : {};
+  return MenuButton$1({
+    label: triggerLabel,
+    children,
+    popoverProps,
+    onOpen,
+    triggerProps: {
+      ...triggerProps,
+      ...extraTriggerProps,
+      as,
+      ref
+    }
+  }, {
+    Menu
+  });
+}), {
+  displayName: COMPONENT_NAME$J
+});
+
+/** MenuItem props. */
+
+/** Props overridden by framework wrappers. */
+
+const COMPONENT_NAME$F = 'MenuItem';
+const CLASSNAME$G = 'lumx-menu-item';
+const {
+  block: block$y,
+  element: element$p
+} = bem(CLASSNAME$G);
+
+/** MenuItem core template. Renders a `ListItem` with a `ListItemAction`. */
+const MenuItem$1 = props => {
+  const {
+    children,
+    className,
+    before,
+    after,
+    isDisabled,
+    handleClick,
+    actionProps,
+    actionRef,
+    ref,
+    ...rest
+  } = props;
+  const actionElement = ListItemAction$1({
+    as: 'button',
+    type: 'button',
+    ...actionProps,
+    ref: actionRef,
+    className: element$p('action'),
+    handleClick,
+    'data-menu-item': '',
+    'aria-disabled': isDisabled ? 'true' : undefined,
+    children
+  });
+  return ListItem$1({
+    ref,
+    size: 'tiny',
+    ...rest,
+    className: classnames(className, block$y()),
+    before,
+    after,
+    children: actionElement
+  });
+};
+
+/**
+ * MenuItem component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const MenuItem = forwardRef((props, ref) => {
+  const {
+    handle
+  } = useMenuContext();
+  const {
+    children,
+    icon,
+    color,
+    before,
+    after,
+    isDisabled,
+    onClick,
+    actionProps,
+    ...rest
+  } = props;
+  const internalRef = useRef(null);
+  const actionRef = useRef(null);
+  const mergedRef = useMergeRefs(ref, internalRef);
+  const handleClick = event => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      // Focus the trigger before closing so focus restoration works with
+      // closeMode="hide" (items unmount on close, leaving focus on body).
+      handle.trigger?.focus();
+      handle.setOpen(false);
+    }
+  };
+
+  // Prepend the optional `icon` to the `before` slot — consumer-supplied `before`
+  // (if any) is rendered after the icon to preserve composability.
+  const mergedBefore = icon ? /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Icon, {
+      icon: icon,
+      size: "xs",
+      color: color
+    }), before]
+  }) : before;
+  return MenuItem$1({
+    ...rest,
+    ref: mergedRef,
+    actionRef,
+    before: mergedBefore,
+    after,
+    children: /*#__PURE__*/jsx(Text, {
+      as: "span",
+      color: color,
+      children: children
+    }),
+    isDisabled,
+    actionProps,
+    handleClick
+  });
+});
+MenuItem.displayName = COMPONENT_NAME$F;
+MenuItem.className = CLASSNAME$G;
 
 /**
  * Component display name.
@@ -17937,9 +18772,9 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$16;
+SkeletonTypography.displayName = COMPONENT_NAME$1b;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$j;
-SkeletonTypography.className = CLASSNAME$15;
+SkeletonTypography.className = CLASSNAME$19;
 
 /**
  * Clamp value in range.
@@ -21479,5 +22314,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1s as CLASSNAME, COMPONENT_NAME$1t as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1c as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$2 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1w as CLASSNAME, COMPONENT_NAME$1y as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1c as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$2 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map