@lumx/react 4.17.0 → 4.17.1-alpha.0

package/index.js

@@ -571,7 +571,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1i = {
+const DEFAULT_PROPS$1j = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -593,8 +593,8 @@ const AlertDialog$1 = props => {
     cancelProps,
     confirmProps,
     ref,
-    kind = DEFAULT_PROPS$1i.kind,
-    size = DEFAULT_PROPS$1i.size,
+    kind = DEFAULT_PROPS$1j.kind,
+    size = DEFAULT_PROPS$1j.size,
     dialogProps,
     children,
     DescriptionElement,
@@ -734,7 +734,7 @@ const AlertDialog = forwardRef((props, ref) => {
 });
 AlertDialog.displayName = COMPONENT_NAME$1F;
 AlertDialog.className = CLASSNAME$1C;
-AlertDialog.defaultProps = DEFAULT_PROPS$1i;
+AlertDialog.defaultProps = DEFAULT_PROPS$1j;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -836,7 +836,7 @@ const CLASSNAME$1B = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1h = {
+const DEFAULT_PROPS$1i = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -859,13 +859,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1h.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1i.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1h.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1h.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1h.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1i.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1i.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1i.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -886,7 +886,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1h.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1i.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -941,7 +941,7 @@ const Autocomplete = forwardRef((props, ref) => {
 });
 Autocomplete.displayName = COMPONENT_NAME$1E;
 Autocomplete.className = CLASSNAME$1B;
-Autocomplete.defaultProps = DEFAULT_PROPS$1h;
+Autocomplete.defaultProps = DEFAULT_PROPS$1i;
 
 /**
  * Component display name.
@@ -956,7 +956,7 @@ const CLASSNAME$1A = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1g = {
+const DEFAULT_PROPS$1h = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -997,8 +997,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$1g.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1g.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1h.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1h.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -1020,12 +1020,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$1g.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1h.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1g.values,
+    values = DEFAULT_PROPS$1h.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -1067,7 +1067,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1D;
 AutocompleteMultiple.className = CLASSNAME$1A;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1g;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1h;
 
 /**
  * Component display name.
@@ -1086,7 +1086,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1f = {
+const DEFAULT_PROPS$1g = {
   size: Size.m
 };
 
@@ -1103,7 +1103,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1f.size,
+    size = DEFAULT_PROPS$1g.size,
     theme,
     ref,
     ...forwardedProps
@@ -1144,7 +1144,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1f.size,
+    size = DEFAULT_PROPS$1g.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1174,7 +1174,7 @@ const Avatar = forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1C;
 Avatar.className = CLASSNAME$1z;
-Avatar.defaultProps = DEFAULT_PROPS$1f;
+Avatar.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Component display name.
@@ -1192,7 +1192,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1e = {
+const DEFAULT_PROPS$1f = {
   color: ColorPalette.primary
 };
 
@@ -1206,7 +1206,7 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$1e.color,
+    color = DEFAULT_PROPS$1f.color,
     ref,
     ...forwardedProps
   } = props;
@@ -1221,7 +1221,7 @@ const Badge$1 = props => {
 };
 Badge$1.displayName = COMPONENT_NAME$1B;
 Badge$1.className = CLASSNAME$1y;
-Badge$1.defaultProps = DEFAULT_PROPS$1e;
+Badge$1.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Defines the props of the component.
@@ -1447,7 +1447,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1d = {
+const DEFAULT_PROPS$1e = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1461,10 +1461,10 @@ const DEFAULT_PROPS$1d = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$1d.emphasis,
+    emphasis = DEFAULT_PROPS$1e.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$1d.size,
+    size = DEFAULT_PROPS$1e.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1481,7 +1481,7 @@ const Button$1 = props => {
 };
 Button$1.displayName = COMPONENT_NAME$1y;
 Button$1.className = CLASSNAME$1w;
-Button$1.defaultProps = DEFAULT_PROPS$1d;
+Button$1.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1556,7 +1556,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1y;
 Button.className = CLASSNAME$1w;
-Button.defaultProps = DEFAULT_PROPS$1d;
+Button.defaultProps = DEFAULT_PROPS$1e;
 
 const COMPONENT_NAME$1x = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1573,7 +1573,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {};
+const DEFAULT_PROPS$1d = {};
 
 /**
  * Icon component.
@@ -1653,7 +1653,7 @@ const Icon$1 = props => {
 };
 Icon$1.displayName = COMPONENT_NAME$1x;
 Icon$1.className = CLASSNAME$1v;
-Icon$1.defaultProps = DEFAULT_PROPS$1c;
+Icon$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
@@ -1668,7 +1668,7 @@ const CLASSNAME$1u = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {
+const DEFAULT_PROPS$1c = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1681,11 +1681,11 @@ const DEFAULT_PROPS$1b = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$1b.emphasis,
+    emphasis = DEFAULT_PROPS$1c.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$1b.size,
+    size = DEFAULT_PROPS$1c.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1706,7 +1706,7 @@ const IconButton$1 = props => {
 };
 IconButton$1.displayName = COMPONENT_NAME$1w;
 IconButton$1.className = CLASSNAME$1u;
-IconButton$1.defaultProps = DEFAULT_PROPS$1b;
+IconButton$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * IconButton component.
@@ -1751,7 +1751,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1w;
 IconButton.className = CLASSNAME$1u;
-IconButton.defaultProps = DEFAULT_PROPS$1b;
+IconButton.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
@@ -1766,7 +1766,7 @@ const CLASSNAME$1t = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {};
+const DEFAULT_PROPS$1b = {};
 
 /**
  * ButtonGroup component.
@@ -1788,7 +1788,7 @@ const ButtonGroup$1 = props => {
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1v;
 ButtonGroup$1.className = CLASSNAME$1t;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$1a;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * ButtonGroup component.
@@ -1805,7 +1805,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1v;
 ButtonGroup.className = CLASSNAME$1t;
-ButtonGroup.defaultProps = DEFAULT_PROPS$1a;
+ButtonGroup.defaultProps = DEFAULT_PROPS$1b;
 
 const COMPONENT_NAME$1u = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -1813,7 +1813,7 @@ const CLASSNAME$1s = InputLabelClassName;
 const {
   block: block$16
 } = bem(CLASSNAME$1s);
-const DEFAULT_PROPS$19 = {};
+const DEFAULT_PROPS$1a = {};
 
 /**
  * InputLabel component.
@@ -1845,7 +1845,7 @@ function InputLabel$1(props) {
 }
 InputLabel$1.displayName = COMPONENT_NAME$1u;
 InputLabel$1.className = CLASSNAME$1s;
-InputLabel$1.defaultProps = DEFAULT_PROPS$19;
+InputLabel$1.defaultProps = DEFAULT_PROPS$1a;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1874,7 +1874,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$19 = {
   kind: Kind.info
 };
 
@@ -1885,7 +1885,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$18.kind,
+    kind = DEFAULT_PROPS$19.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1905,7 +1905,7 @@ function InputHelper$1(props) {
 }
 InputHelper$1.displayName = COMPONENT_NAME$1t;
 InputHelper$1.className = CLASSNAME$1r;
-InputHelper$1.defaultProps = DEFAULT_PROPS$18;
+InputHelper$1.defaultProps = DEFAULT_PROPS$19;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -2020,7 +2020,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {};
+const DEFAULT_PROPS$18 = {};
 
 /**
  * Checkbox component.
@@ -2082,7 +2082,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$1s;
 Checkbox.className = CLASSNAME$1q;
-Checkbox.defaultProps = DEFAULT_PROPS$17;
+Checkbox.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -2117,7 +2117,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$17 = {
   size: Size.m
 };
 
@@ -2144,7 +2144,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$16.size,
+    size = DEFAULT_PROPS$17.size,
     theme,
     ref,
     href,
@@ -2266,7 +2266,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$1r;
 Chip.className = CLASSNAME$1p;
-Chip.defaultProps = DEFAULT_PROPS$16;
+Chip.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Component display name.
@@ -2281,7 +2281,7 @@ const CLASSNAME$1o = 'lumx-chip-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {};
+const DEFAULT_PROPS$16 = {};
 
 /**
  * ChipGroup component.
@@ -2379,7 +2379,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$1q;
 InternalChipGroup.className = CLASSNAME$1o;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$15;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$16;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2722,7 +2722,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * Text component common props
@@ -2809,7 +2809,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$1o;
 Text.className = CLASSNAME$1m;
-Text.defaultProps = DEFAULT_PROPS$14;
+Text.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Custom positioning reference element.
@@ -4891,7 +4891,7 @@ const TOOLTIP_ZINDEX = 10000;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   placement: 'bottom',
   closeMode: 'unmount',
   ariaLinkMode: 'aria-describedby',
@@ -5255,11 +5255,11 @@ const Tooltip = forwardRef((props, ref) => {
     children,
     className,
     delay,
-    placement = DEFAULT_PROPS$13.placement,
+    placement = DEFAULT_PROPS$14.placement,
     forceOpen,
-    closeMode = DEFAULT_PROPS$13.closeMode,
-    ariaLinkMode = DEFAULT_PROPS$13.ariaLinkMode,
-    zIndex = DEFAULT_PROPS$13.zIndex,
+    closeMode = DEFAULT_PROPS$14.closeMode,
+    ariaLinkMode = DEFAULT_PROPS$14.ariaLinkMode,
+    zIndex = DEFAULT_PROPS$14.zIndex,
     ...forwardedProps
   } = props;
   // Disable in SSR.
@@ -5324,7 +5324,7 @@ const Tooltip = forwardRef((props, ref) => {
 });
 Tooltip.displayName = COMPONENT_NAME$1n;
 Tooltip.className = CLASSNAME$1l;
-Tooltip.defaultProps = DEFAULT_PROPS$13;
+Tooltip.defaultProps = DEFAULT_PROPS$14;
 
 /** Create a pending navigation store; discards intent on abort. */
 function createPendingNavigation(signal) {
@@ -6460,6 +6460,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Last notified input value, to re-fire `optionsChange` when the user keeps typing while empty. */
   let lastInputValue = '';
 
+  /** Last notified loading state, used to replay current state to late subscribers. */
+  let lastLoadingState = false;
+
+  /** Number of currently mounted skeleton placeholders. */
+  let skeletonCount = 0;
+
   /** Event subscribers managed by the handle. */
   const subscribers = {
     open: new Set(),
@@ -6474,6 +6480,20 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     subscribers[event].forEach(cb => cb(value));
   }
 
+  /** Count visible (non-filtered) options. */
+  function getVisibleOptionCount() {
+    let count = 0;
+    for (const reg of optionRegistrations.values()) {
+      if (!reg.lastFiltered) count += 1;
+    }
+    return count;
+  }
+
+  /** True when the popup has visible content (options or skeletons). */
+  function hasVisibleContent() {
+    return getVisibleOptionCount() > 0 || skeletonCount > 0;
+  }
+
   /**
    * Notify all registered sections and fire `optionsChange` if the visible option count changed
    * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
@@ -6484,10 +6504,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     for (const [sectionElement] of sectionRegistrations) {
       notifySection(sectionElement, sectionRegistrations, optionRegistrations);
     }
-    let visibleCount = 0;
-    for (const reg of optionRegistrations.values()) {
-      if (!reg.lastFiltered) visibleCount += 1;
-    }
+    const visibleCount = getVisibleOptionCount();
     const inputValue = trigger?.value ?? '';
     const isEmpty = visibleCount === 0;
     if (visibleCount !== lastOptionsLength || isEmpty && inputValue !== lastInputValue) {
@@ -6498,6 +6515,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         inputValue
       });
     }
+
+    // Re-evaluate aria-expanded when the combobox is open — visible content may have
+    // changed due to filtering, option register/unregister, or skeleton transitions.
+    if (isOpenState) {
+      trigger?.setAttribute('aria-expanded', String(hasVisibleContent()));
+    }
   }
 
   // ── Skeleton loading tracking ──────────────────────────────
@@ -6505,9 +6528,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Delay before announcing loading in the live region (ms). */
   const LOADING_ANNOUNCEMENT_DELAY = 500;
 
-  /** Number of currently mounted skeleton placeholders. */
-  let skeletonCount = 0;
-
   /** Timer for debounced loading announcement. */
   let loadingTimer;
 
@@ -6533,6 +6553,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
    */
   function onSkeletonCountChange() {
     const isLoading = skeletonCount > 0;
+    lastLoadingState = isLoading;
     notify('loadingChange', isLoading);
     if (isLoading) {
       startLoadingAnnouncementTimer();
@@ -6735,8 +6756,8 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         startLoadingAnnouncementTimer();
       }
 
-      // Update aria-expanded on trigger
-      trigger?.setAttribute('aria-expanded', String(isOpen));
+      // Update aria-expanded on trigger (false when no visible options or skeletons)
+      trigger?.setAttribute('aria-expanded', String(isOpen && hasVisibleContent()));
       notify('open', isOpen);
     },
     select(option) {
@@ -6871,6 +6892,17 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     },
     subscribe(event, callback) {
       subscribers[event].add(callback);
+      // Replay current loading state to late subscribers so that framework wrappers
+      // that subscribe after initial mount (e.g. async Vue watchers) don't miss the
+      // initial events fired during mount.
+      if (event === 'open' && isOpenState) {
+        callback(true);
+      }
+      if (event === 'loadingChange' && lastLoadingState) {
+        callback(true);
+      }
+
+      // Cleanup function
       return () => {
         subscribers[event].delete(callback);
       };
@@ -6882,6 +6914,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       filterValue = '';
       lastOptionsLength = 0;
       lastInputValue = '';
+      lastLoadingState = false;
       optionRegistrations.clear();
       sectionRegistrations.clear();
       skeletonCount = 0;
@@ -7278,6 +7311,10 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     setHandle
   } = useComboboxContext();
   const [isOpen] = useComboboxOpen();
+  const state = useComboboxEvent('optionsChange', {
+    optionsLength: 0
+  });
+  const isLoading = useComboboxEvent('loadingChange', false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const {
     as,
@@ -7319,7 +7356,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     value,
     labelDisplayMode,
     listboxId,
-    isOpen,
+    isOpen: isOpen && (!!state?.optionsLength || isLoading),
     ref: mergedRef
   }, {
     Button: ButtonComp,
@@ -7731,7 +7768,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   type: 'text'
 };
 
@@ -7748,7 +7785,7 @@ const RawInputText$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    type = DEFAULT_PROPS$12.type,
+    type = DEFAULT_PROPS$13.type,
     name,
     ref,
     ...forwardedProps
@@ -7810,7 +7847,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   rows: 2
 };
 
@@ -7827,7 +7864,7 @@ const RawInputTextarea$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    rows = DEFAULT_PROPS$11.rows,
+    rows = DEFAULT_PROPS$12.rows,
     name,
     ref,
     ...forwardedProps
@@ -7903,8 +7940,8 @@ function useFitRowsToContent(minimumRows, textareaRef, value) {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
-  minimumRows: DEFAULT_PROPS$11.rows
+const DEFAULT_PROPS$11 = {
+  minimumRows: DEFAULT_PROPS$12.rows
 };
 
 /**
@@ -7915,7 +7952,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     theme = defaultTheme,
-    minimumRows = DEFAULT_PROPS$10.minimumRows,
+    minimumRows = DEFAULT_PROPS$11.minimumRows,
     value,
     onChange,
     onFocus,
@@ -7939,7 +7976,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   type: 'text'
 };
 
@@ -7983,7 +8020,7 @@ const TextField = forwardRef((props, ref) => {
     placeholder,
     textFieldRef,
     theme = defaultTheme,
-    type = DEFAULT_PROPS$$.type,
+    type = DEFAULT_PROPS$10.type,
     value,
     afterElement,
     ...forwardedProps
@@ -8090,7 +8127,7 @@ const TextField = forwardRef((props, ref) => {
 });
 TextField.displayName = COMPONENT_NAME$1k;
 TextField.className = CLASSNAME$1i;
-TextField.defaultProps = DEFAULT_PROPS$$;
+TextField.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Props for Combobox.Input component.
@@ -8112,6 +8149,10 @@ const ComboboxInput = forwardRef((props, ref) => {
     setHandle
   } = useComboboxContext();
   const [isOpen, setIsOpen] = useComboboxOpen();
+  const state = useComboboxEvent('optionsChange', {
+    optionsLength: 0
+  });
+  const isLoading = useComboboxEvent('loadingChange', false);
   const {
     inputRef: externalInputRef,
     toggleButtonProps,
@@ -8160,7 +8201,7 @@ const ComboboxInput = forwardRef((props, ref) => {
     ...otherProps,
     ref,
     listboxId,
-    isOpen,
+    isOpen: isOpen && (!!state?.optionsLength || isLoading),
     filter,
     inputRef: mergedInputRef,
     textFieldRef: anchorRef,
@@ -8190,7 +8231,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * List component.
@@ -8217,7 +8258,7 @@ const List$1 = props => {
 };
 List$1.displayName = COMPONENT_NAME$1j;
 List$1.className = CLASSNAME$1h;
-List$1.defaultProps = DEFAULT_PROPS$_;
+List$1.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Popup type for the combobox listbox.
@@ -8369,7 +8410,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$_ = {
   size: Size.regular
 };
 
@@ -8393,7 +8434,7 @@ const ListItem$1 = props => {
     linkProps = {},
     linkRef,
     handleClick,
-    size = DEFAULT_PROPS$Z.size,
+    size = DEFAULT_PROPS$_.size,
     ref,
     ...forwardedProps
   } = props;
@@ -8433,7 +8474,7 @@ const ListItem$1 = props => {
 };
 ListItem$1.displayName = COMPONENT_NAME$1h;
 ListItem$1.className = CLASSNAME$1f;
-ListItem$1.defaultProps = DEFAULT_PROPS$Z;
+ListItem$1.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * ListItemAction props.
@@ -8448,7 +8489,7 @@ const COMPONENT_NAME$1g = 'ListItemAction';
  * Component classname (used by action area CSS pattern).
  */
 const CLASSNAME$1e = 'lumx-action-area__action';
-const DEFAULT_PROPS$Y = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * ListItemAction component.
@@ -9068,15 +9109,6 @@ const Placement = {
   LEFT_END: 'left-end',
   LEFT_START: 'left-start'
 };
-
-/**
- * Offset of the popover.
- */
-
-/**
- * Popover elevation index.
- */
-
 /**
  * Popover fit anchor width options.
  */
@@ -9092,6 +9124,11 @@ const ARROW_SIZE = 14;
  */
 const POPOVER_ZINDEX = 9999;
 
+/**
+ * Popover height/width sizes
+ */
+[Size.m, Size.l, Size.xl, Size.xxl];
+
 /**
  * Component display name.
  */
@@ -9109,7 +9146,7 @@ const {
 /**
  * Component default props (used by framework wrappers).
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   closeMode: 'unmount',
   elevation: 3,
   placement: Placement.AUTO,
@@ -9133,8 +9170,8 @@ const Popover$1 = (props, {
     as: asTag = 'div',
     children,
     className,
-    closeMode = DEFAULT_PROPS$X.closeMode,
-    elevation = DEFAULT_PROPS$X.elevation,
+    closeMode = DEFAULT_PROPS$Y.closeMode,
+    elevation = DEFAULT_PROPS$Y.elevation,
     hasArrow,
     isOpen,
     position,
@@ -9144,7 +9181,7 @@ const Popover$1 = (props, {
     // Framework-specific
     ref,
     arrowRef,
-    usePortal = DEFAULT_PROPS$X.usePortal,
+    usePortal = DEFAULT_PROPS$Y.usePortal,
     clickAwayCallback,
     clickAwayRefs,
     unmountSentinel,
@@ -9275,8 +9312,6 @@ function useRestoreFocusOnClose({
   });
 }
 
-/* eslint-disable no-param-reassign */
-
 /**
  * Parse a Popover placement into floating-ui placement or auto-placement config.
  */
@@ -9306,6 +9341,29 @@ function parseFitWidth(fitToAnchorWidth) {
   if (typeof fitToAnchorWidth === 'string') return fitToAnchorWidth;
   return FitAnchorWidth.MIN_WIDTH;
 }
+
+/** Resolve a t-shirt size token to its CSS custom property, or pass through as-is. */
+
+function resolveCssSize(value) {
+  if (value && value in Size) return `var(--lumx-size-${value})`;
+  return value;
+}
+
+/** Create a CSS min()/max() combiner function. */
+function combineSize(combinator) {
+  return (size1, size2) => {
+    if (size1 && size2) return `${combinator}(${size1}, ${size2})`;
+    return size1 || size2 || '';
+  };
+}
+
+/** Combine two CSS values with `min()`. */
+const cssMin = combineSize('min');
+
+/** Combine two CSS values with `max()`. */
+const cssMax = combineSize('max');
+
+/* eslint-disable no-param-reassign */
 /**
  * Build the floating-ui middleware array for popover positioning.
  *
@@ -9317,10 +9375,24 @@ function buildPopoverMiddleware(options) {
     hasArrow,
     fitWidth,
     fitWithinViewportHeight,
+    width: rawWidth,
+    minWidth: rawMinWidth,
+    maxWidth: rawMaxWidth,
+    height: rawHeight,
+    minHeight: rawMinHeight,
+    maxHeight: rawMaxHeight,
     boundary,
     parsedPlacement,
     arrowElement
   } = options;
+
+  // Resolve t-shirt sizes to CSS pixel strings for the apply callback.
+  const width = resolveCssSize(rawWidth);
+  const minWidth = resolveCssSize(rawMinWidth);
+  const maxWidth = resolveCssSize(rawMaxWidth);
+  const height = resolveCssSize(rawHeight);
+  const minHeight = resolveCssSize(rawMinHeight);
+  const maxHeight = resolveCssSize(rawMaxHeight);
   const middlewares = [];
 
   // Offset middleware
@@ -9348,8 +9420,9 @@ function buildPopoverMiddleware(options) {
     } : {}));
   }
 
-  // Size middleware
-  if (fitWidth || fitWithinViewportHeight) {
+  // Size middleware — always required when any sizing constraint is set
+  const anySizeConstraint = !!fitWidth || !!fitWithinViewportHeight || width || minWidth || maxWidth || height || minHeight || maxHeight;
+  if (anySizeConstraint) {
     middlewares.push(size({
       ...(boundary ? {
         boundary
@@ -9359,14 +9432,21 @@ function buildPopoverMiddleware(options) {
         rects,
         elements
       }) {
-        if (fitWidth) {
-          Object.assign(elements.floating.style, {
-            [fitWidth]: `${rects.reference.width}px`
-          });
-        }
-        if (fitWithinViewportHeight) {
-          elements.floating.style.maxHeight = `${Math.max(0, availableHeight - ARROW_SIZE)}px`;
-        }
+        const anchorWidth = `${rects.reference.width}px`;
+
+        // Width: explicit width wins, else fitToAnchorWidth.
+        elements.floating.style.width = width || (fitWidth === 'width' ? anchorWidth : '');
+        // Min-width: anchor constrained by explicit min-width.
+        elements.floating.style.minWidth = cssMax(minWidth, fitWidth === 'minWidth' ? anchorWidth : '');
+        // Max-width: anchor constrained by explicit max-width.
+        elements.floating.style.maxWidth = cssMin(maxWidth, fitWidth === 'maxWidth' ? anchorWidth : '');
+
+        // Height: explicit values only.
+        elements.floating.style.height = height || '';
+        elements.floating.style.minHeight = minHeight || '';
+        // Max-height: viewport combined with explicit max-height.
+        const adaptedAvailableHeight = `${Math.max(0, availableHeight - ARROW_SIZE)}px`;
+        elements.floating.style.maxHeight = cssMin(maxHeight, fitWithinViewportHeight ? adaptedAvailableHeight : '');
       }
     }));
   }
@@ -9405,6 +9485,12 @@ function usePopoverStyle({
   hasArrow,
   fitToAnchorWidth,
   fitWithinViewportHeight,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
   boundaryRef,
   anchorRef,
   placement,
@@ -9421,10 +9507,16 @@ function usePopoverStyle({
     hasArrow,
     fitWidth,
     fitWithinViewportHeight,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     boundary,
     parsedPlacement,
     arrowElement
-  }), [offset, hasArrow, fitWidth, fitWithinViewportHeight, boundary, parsedPlacement, arrowElement]);
+  }), [offset, hasArrow, fitWidth, fitWithinViewportHeight, width, minWidth, maxWidth, height, minHeight, maxHeight, boundary, parsedPlacement, arrowElement]);
   const anchorElement = anchorRef.current;
   const {
     floatingStyles,
@@ -9483,27 +9575,33 @@ const _InnerPopover = forwardRef((props, ref) => {
     as,
     children,
     className,
-    closeMode = DEFAULT_PROPS$X.closeMode,
+    closeMode = DEFAULT_PROPS$Y.closeMode,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$X.elevation,
+    elevation = DEFAULT_PROPS$Y.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$X.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$X.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Y.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Y.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     offset,
-    placement = DEFAULT_PROPS$X.placement,
+    placement = DEFAULT_PROPS$Y.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$X.zIndex,
+    zIndex = DEFAULT_PROPS$Y.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -9519,6 +9617,12 @@ const _InnerPopover = forwardRef((props, ref) => {
     hasArrow,
     fitToAnchorWidth,
     fitWithinViewportHeight,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
     boundaryRef,
     anchorRef,
     placement,
@@ -9577,7 +9681,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$1c;
 Popover.className = CLASSNAME$1a;
-Popover.defaultProps = DEFAULT_PROPS$X;
+Popover.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Props for Combobox.OptionMoreInfo component.
@@ -9781,6 +9885,8 @@ const ComboboxOptionSkeleton = props => {
 ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1a;
 ComboboxOptionSkeleton.className = CLASSNAME$18;
 
+const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
+
 const COMPONENT_NAME$19 = 'ComboboxPopover';
 
 /**
@@ -9822,6 +9928,7 @@ const ComboboxPopover$1 = (props, {
     closeOnEscape = false,
     fitToAnchorWidth = true,
     isOpen,
+    maxHeight = DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT,
     placement = 'bottom-start',
     anchorRef,
     handleClose,
@@ -9831,6 +9938,7 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
+    maxHeight: maxHeight,
     className: block$S([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,
@@ -10060,7 +10168,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * ListSection component.
@@ -10104,7 +10212,7 @@ const ListSection$1 = props => {
 };
 ListSection$1.displayName = COMPONENT_NAME$16;
 ListSection$1.className = CLASSNAME$14;
-ListSection$1.defaultProps = DEFAULT_PROPS$W;
+ListSection$1.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Defines the props of the component.
@@ -10128,7 +10236,7 @@ const ListSection = forwardRef((props, ref) => {
 });
 ListSection.displayName = COMPONENT_NAME$16;
 ListSection.className = CLASSNAME$14;
-ListSection.defaultProps = DEFAULT_PROPS$W;
+ListSection.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Props for Combobox.Section component.
@@ -10377,7 +10485,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -10401,10 +10509,10 @@ const GenericBlock$1 = props => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$V.gap,
+    gap = DEFAULT_PROPS$W.gap,
     ref,
     content,
-    orientation = DEFAULT_PROPS$V.orientation,
+    orientation = DEFAULT_PROPS$W.orientation,
     contentProps,
     FlexBox,
     ...forwardedProps
@@ -10516,7 +10624,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$14;
 BaseGenericBlock.className = CLASSNAME$12;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$V;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$W;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -10610,7 +10718,7 @@ const CLASSNAME$11 = 'lumx-list-divider';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$V = {};
 
 /**
  * ListDivider component.
@@ -10634,7 +10742,7 @@ const ListDivider$1 = props => {
 };
 ListDivider$1.displayName = COMPONENT_NAME$13;
 ListDivider$1.className = CLASSNAME$11;
-ListDivider$1.defaultProps = DEFAULT_PROPS$U;
+ListDivider$1.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Defines the props of the component.
@@ -10656,7 +10764,7 @@ const ListDivider = forwardRef((props, ref) => {
 });
 ListDivider.displayName = COMPONENT_NAME$13;
 ListDivider.className = CLASSNAME$11;
-ListDivider.defaultProps = DEFAULT_PROPS$U;
+ListDivider.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Combobox compound component namespace.
@@ -10719,7 +10827,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   variant: CommentBlockVariant.indented
 };
 
@@ -10749,7 +10857,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$T.variant,
+    variant = DEFAULT_PROPS$U.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -10818,7 +10926,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$12;
 CommentBlock.className = CLASSNAME$10;
-CommentBlock.defaultProps = DEFAULT_PROPS$T;
+CommentBlock.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -11721,7 +11829,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   size: Size.big
 };
 
@@ -11744,7 +11852,7 @@ const Dialog$1 = props => {
     isOpen,
     handleClose,
     contentRef,
-    size = DEFAULT_PROPS$S.size,
+    size = DEFAULT_PROPS$T.size,
     zIndex,
     dialogProps,
     headerChildContent,
@@ -11848,7 +11956,7 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -11869,7 +11977,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$R.closeMode,
+    closeMode = DEFAULT_PROPS$S.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -11881,11 +11989,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$R.size,
+    size = DEFAULT_PROPS$S.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$R.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$S.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -11991,7 +12099,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$_;
 Dialog.className = CLASSNAME$_;
-Dialog.defaultProps = DEFAULT_PROPS$R;
+Dialog.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Component display name.
@@ -12035,7 +12143,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$R = {};
 
 /**
  * Divider component.
@@ -12058,7 +12166,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$Z;
 Divider.className = CLASSNAME$Z;
-Divider.defaultProps = DEFAULT_PROPS$Q;
+Divider.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Component display name.
@@ -12107,7 +12215,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * DragHandle component.
@@ -12130,7 +12238,7 @@ const DragHandle = forwardRef((props, ref) => {
 });
 DragHandle.displayName = COMPONENT_NAME$Y;
 DragHandle.className = CLASSNAME$Y;
-DragHandle.defaultProps = DEFAULT_PROPS$P;
+DragHandle.defaultProps = DEFAULT_PROPS$Q;
 
 const INITIAL_INDEX = -1;
 
@@ -12326,7 +12434,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$1j;
 InternalList.className = CLASSNAME$1h;
-InternalList.defaultProps = DEFAULT_PROPS$_;
+InternalList.defaultProps = DEFAULT_PROPS$$;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -12389,7 +12497,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -12403,6 +12511,7 @@ const DEFAULT_PROPS$O = {
 /**
  * Dropdown component.
  *
+ * @deprecated Use `MenuButton` for action-based dropdowns, `SelectButton` for selection-based dropdowns, or `Popover` for lower-level control.
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -12412,18 +12521,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$O.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$O.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$O.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$O.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$O.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$O.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$P.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -12469,7 +12578,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$X;
 Dropdown.className = CLASSNAME$X;
-Dropdown.defaultProps = DEFAULT_PROPS$O;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
@@ -12488,7 +12597,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 
@@ -12601,7 +12710,7 @@ const isFooter = isComponent('footer');
 const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    closeMode = DEFAULT_PROPS$N.closeMode,
+    closeMode = DEFAULT_PROPS$O.closeMode,
     children: anyChildren,
     isOpen,
     label,
@@ -12674,11 +12783,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$W;
 ExpansionPanel.className = CLASSNAME$W;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
 const COMPONENT_NAME$V = 'Flag';
 const CLASSNAME$V = 'lumx-flag';
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 const {
   block: block$H,
   element: element$y
@@ -12742,7 +12851,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$V;
 Flag.className = CLASSNAME$V;
-Flag.defaultProps = DEFAULT_PROPS$M;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -12780,7 +12889,7 @@ const CLASSNAME$U = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * Get Heading component common props
@@ -12840,7 +12949,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$U;
 Heading.className = CLASSNAME$U;
-Heading.defaultProps = DEFAULT_PROPS$L;
+Heading.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -12891,7 +13000,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {
+const DEFAULT_PROPS$L = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -12909,9 +13018,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$K.orientation,
+    orientation = DEFAULT_PROPS$L.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$K.wrap,
+    wrap = DEFAULT_PROPS$L.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -12929,7 +13038,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$T;
 Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$K;
+Grid.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
@@ -12987,7 +13096,7 @@ const CLASSNAME$R = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13024,7 +13133,7 @@ const GridColumn$1 = props => {
 };
 GridColumn$1.displayName = COMPONENT_NAME$R;
 GridColumn$1.className = CLASSNAME$R;
-GridColumn$1.defaultProps = DEFAULT_PROPS$J;
+GridColumn$1.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Defines the props of the component.
@@ -13035,7 +13144,7 @@ GridColumn$1.defaultProps = DEFAULT_PROPS$J;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13054,7 +13163,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$R;
 GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$I;
+GridColumn.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Image block variants.
@@ -13089,7 +13198,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {
+const DEFAULT_PROPS$I = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -13104,9 +13213,9 @@ const DEFAULT_PROPS$H = {
 const ImageBlock$1 = props => {
   const {
     actions,
-    align = DEFAULT_PROPS$H.align,
+    align = DEFAULT_PROPS$I.align,
     alt,
-    captionPosition = DEFAULT_PROPS$H.captionPosition,
+    captionPosition = DEFAULT_PROPS$I.captionPosition,
     captionStyle,
     className,
     description,
@@ -13278,7 +13387,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$Q;
 ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$H;
+ImageBlock.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
@@ -14032,7 +14141,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {};
+const DEFAULT_PROPS$H = {};
 
 /**
  * InlineList component.
@@ -14081,7 +14190,7 @@ const InlineList$1 = props => {
 };
 InlineList$1.displayName = COMPONENT_NAME$O;
 InlineList$1.className = CLASSNAME$O;
-InlineList$1.defaultProps = DEFAULT_PROPS$G;
+InlineList$1.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Defines the props of the component.
@@ -14107,7 +14216,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$O;
 InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$G;
+InlineList.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * InputHelper component.
@@ -14466,7 +14575,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {
+const DEFAULT_PROPS$G = {
   size: Size.regular,
   titleHeading: 'h2'
 };
@@ -14485,7 +14594,7 @@ const LinkPreview$1 = props => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$F.size,
+    size = DEFAULT_PROPS$G.size,
     theme,
     thumbnailProps,
     ref,
@@ -14573,7 +14682,7 @@ const LinkPreview = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     theme = defaultTheme,
-    titleHeading = DEFAULT_PROPS$F.titleHeading,
+    titleHeading = DEFAULT_PROPS$G.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -14589,7 +14698,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$L;
 LinkPreview.className = CLASSNAME$L;
-LinkPreview.defaultProps = DEFAULT_PROPS$F;
+LinkPreview.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * ListItem.Action props.
@@ -14622,7 +14731,7 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
 }), {
   displayName: COMPONENT_NAME$1g,
   className: CLASSNAME$1e,
-  defaultProps: DEFAULT_PROPS$Y
+  defaultProps: DEFAULT_PROPS$Z
 });
 
 /**
@@ -14662,7 +14771,7 @@ const _ListItem = forwardRef((props, ref) => {
 });
 _ListItem.displayName = COMPONENT_NAME$1h;
 _ListItem.className = CLASSNAME$1f;
-_ListItem.defaultProps = DEFAULT_PROPS$Z;
+_ListItem.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * ListItem component with Action sub-component.
@@ -14706,7 +14815,7 @@ const ListSubheader = forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$K;
 ListSubheader.className = CLASSNAME$K;
 
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$F = {
   variant: 'button'
 };
 
@@ -15417,7 +15526,7 @@ const MenuButton = forwardRef((props, ref) => {
     children,
     popoverProps,
     onOpen,
-    variant = DEFAULT_PROPS$E.variant,
+    variant = DEFAULT_PROPS$F.variant,
     ...triggerProps
   } = props;
   return MenuButton$1({
@@ -15439,7 +15548,7 @@ const MenuButton = forwardRef((props, ref) => {
   });
 });
 MenuButton.displayName = COMPONENT_NAME$J;
-MenuButton.defaultProps = DEFAULT_PROPS$E;
+MenuButton.defaultProps = DEFAULT_PROPS$F;
 
 /** MenuItem props. */
 
@@ -15686,7 +15795,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {};
+const DEFAULT_PROPS$E = {};
 
 /**
  * Mosaic component.
@@ -15781,7 +15890,7 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$D;
+Mosaic.defaultProps = DEFAULT_PROPS$E;
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
@@ -15979,7 +16088,7 @@ const {
 /**
  * Component default props
  */
-const DEFAULT_PROPS$C = {
+const DEFAULT_PROPS$D = {
   orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -15988,7 +16097,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$C.orientation,
+    orientation = DEFAULT_PROPS$D.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -16014,7 +16123,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$B;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$C;
+Navigation.defaultProps = DEFAULT_PROPS$D;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -16059,7 +16168,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$C = {
   zIndex: 9999,
   usePortal: true
 };
@@ -16083,8 +16192,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$B.zIndex,
-    usePortal = DEFAULT_PROPS$B.usePortal,
+    zIndex = DEFAULT_PROPS$C.zIndex,
+    usePortal = DEFAULT_PROPS$C.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -16149,7 +16258,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$A;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$B;
+Notification.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * PopoverDialog props.
@@ -16169,7 +16278,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {};
+const DEFAULT_PROPS$B = {};
 
 /**
  * PopoverDialog component.
@@ -16209,7 +16318,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$z;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$A;
+PopoverDialog.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
@@ -16228,7 +16337,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$A = {
   orientation: Orientation$1.horizontal
 };
 
@@ -16248,7 +16357,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$z.orientation,
+    orientation = DEFAULT_PROPS$A.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -16310,7 +16419,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$y;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$z;
+PostBlock.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Component display name.
@@ -16329,7 +16438,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {};
+const DEFAULT_PROPS$z = {};
 
 /**
  * ProgressLinear component.
@@ -16383,7 +16492,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$x;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$y;
+ProgressLinear.defaultProps = DEFAULT_PROPS$z;
 
 /* eslint-disable react/no-unknown-property */
 
@@ -16404,7 +16513,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$x = {
+const DEFAULT_PROPS$y = {
   size: Size.m,
   display: 'block'
 };
@@ -16419,8 +16528,8 @@ const ProgressCircular$1 = props => {
   const {
     className,
     theme,
-    size = DEFAULT_PROPS$x.size,
-    display = DEFAULT_PROPS$x.display,
+    size = DEFAULT_PROPS$y.size,
+    display = DEFAULT_PROPS$y.display,
     ref,
     circleProps,
     svgProps,
@@ -16485,7 +16594,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$w;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$x;
+ProgressCircular.defaultProps = DEFAULT_PROPS$y;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -16512,7 +16621,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {
+const DEFAULT_PROPS$x = {
   variant: ProgressVariant.circular
 };
 
@@ -16529,7 +16638,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$w.variant,
+    variant = DEFAULT_PROPS$x.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -16548,7 +16657,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$v;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$w;
+Progress.defaultProps = DEFAULT_PROPS$x;
 
 const INIT_STATE = {
   isLazy: true,
@@ -16674,7 +16783,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$v = {
+const DEFAULT_PROPS$w = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -16703,7 +16812,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$v,
+        ...DEFAULT_PROPS$w,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -16726,7 +16835,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
@@ -16745,7 +16854,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {};
+const DEFAULT_PROPS$v = {};
 
 /**
  * ProgressTracker component.
@@ -16799,7 +16908,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$u;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$u;
+ProgressTracker.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
@@ -16818,7 +16927,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {};
+const DEFAULT_PROPS$u = {};
 
 /**
  * ProgressTrackerStep component.
@@ -16913,7 +17022,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$t;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
@@ -16931,7 +17040,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$s = {};
+const DEFAULT_PROPS$t = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -16967,7 +17076,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
@@ -17070,7 +17179,7 @@ const RadioButton$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$r = {};
+const DEFAULT_PROPS$s = {};
 
 /**
  * RadioButton component.
@@ -17126,7 +17235,7 @@ const RadioButton = forwardRef((props, ref) => {
 });
 RadioButton.displayName = COMPONENT_NAME$r;
 RadioButton.className = CLASSNAME$s;
-RadioButton.defaultProps = DEFAULT_PROPS$r;
+RadioButton.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
@@ -17141,7 +17250,7 @@ const CLASSNAME$r = 'lumx-radio-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$q = {};
+const DEFAULT_PROPS$r = {};
 
 /**
  * RadioGroup component.
@@ -17165,7 +17274,7 @@ const RadioGroup$1 = props => {
 };
 RadioGroup$1.displayName = COMPONENT_NAME$q;
 RadioGroup$1.className = CLASSNAME$r;
-RadioGroup$1.defaultProps = DEFAULT_PROPS$q;
+RadioGroup$1.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Defines the props of the component.
@@ -17349,7 +17458,7 @@ const {
 } = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$q = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -17473,7 +17582,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$p,
+    ...DEFAULT_PROPS$q,
     ...props,
     className: classNames.join(props.className, block$j({
       'has-input-clear': hasInputClear,
@@ -17485,7 +17594,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$p;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$p;
+Select.defaultProps = DEFAULT_PROPS$q;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -17499,7 +17608,7 @@ const {
 } = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
-const DEFAULT_PROPS$o = {
+const DEFAULT_PROPS$p = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -17628,7 +17737,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$o,
+    ...DEFAULT_PROPS$p,
     ...props,
     className: classNames.join(props.className, block$i({
       'has-multiple': !props.isEmpty
@@ -17639,7 +17748,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$o;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$o;
+SelectMultiple.defaultProps = DEFAULT_PROPS$p;
 
 /**
  * Find the option whose id matches the given value.
@@ -17797,6 +17906,13 @@ const COMPONENT_NAME$n = 'SelectButton';
  */
 const CLASSNAME$n = 'lumx-select-button';
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$o = {
+  selectionType: 'single'
+};
+
 /**
  * SelectButton core template.
  * Renders a Combobox with a button trigger and a dropdown list of options.
@@ -17820,7 +17936,7 @@ const SelectButton$2 = (props, {
     getSectionId,
     renderSectionTitle,
     value,
-    isMultiselectable,
+    selectionType = DEFAULT_PROPS$o.selectionType,
     label,
     labelDisplayMode,
     buttonProps,
@@ -17836,6 +17952,7 @@ const SelectButton$2 = (props, {
   const isFullLoading = listStatus === 'loading';
   const isLoadingMore = listStatus === 'loadingMore';
   const isError = listStatus === 'error';
+  const isMultiselectable = selectionType === 'multiple';
 
   /*
    * Display value: castArray normalizes single/multi value to an array, then resolve
@@ -18009,7 +18126,7 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     renderOption,
     getSectionId,
     renderSectionTitle,
-    selectionType,
+    selectionType = DEFAULT_PROPS$o.selectionType,
     value,
     onChange,
     onLoadMore,
@@ -18045,7 +18162,7 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     getSectionId,
     renderSectionTitle,
     value,
-    isMultiselectable: isMultiple,
+    selectionType,
     label,
     labelDisplayMode,
     buttonProps: {
@@ -21559,7 +21676,8 @@ const {
  * Default values for `TimePickerFieldWrapperProps`.
  */
 const DEFAULT_PROPS$3 = {
-  step: 30
+  step: 30,
+  boundsMode: 'on-blur'
 };
 
 /**
@@ -21817,9 +21935,11 @@ const TimePickerField = props => {
     step = DEFAULT_PROPS$3.step,
     minTime,
     maxTime,
+    boundsMode = DEFAULT_PROPS$3.boundsMode,
     className,
     theme,
     translations,
+    name,
     ...forwardedProps
   } = props;
 
@@ -21844,10 +21964,23 @@ const TimePickerField = props => {
       name: formatTime(value, locale)
     };
   }, [value, locale]);
+
+  // Clamp the current value to bounds whenever enforce mode is set and value/bounds change.
+  useEffect(() => {
+    if (boundsMode !== 'enforce' || !value) return;
+    const timeOfDay = {
+      hour: value.getHours(),
+      minute: value.getMinutes()
+    };
+    const clamped = snapTimeToBounds(timeOfDay, minTime, maxTime);
+    if (clamped.hour !== value.getHours() || clamped.minute !== value.getMinutes()) {
+      onChange(getDateAtTime(clamped, value), name);
+    }
+  }, [boundsMode, value, minTime, maxTime, onChange, name]);
   const handleChange = useCallback(next => {
     const date = next ? getDateAtTime(next, value) : undefined;
-    onChange(date, forwardedProps.name);
-  }, [forwardedProps.name, onChange, value]);
+    onChange(date, name);
+  }, [name, onChange, value]);
   const handleBlur = useCallback(() => {
     if (!searchValue) return;
     const parsed = parseTimeInput(searchValue);
@@ -21858,8 +21991,8 @@ const TimePickerField = props => {
     // Snap to bounds if needed, then dedup against the current value.
     const time = snapTimeToBounds(parsed, minTime, maxTime);
     if (value && isDateOnTime(value, time)) return;
-    onChange(getDateAtTime(time, value), forwardedProps.name);
-  }, [maxTime, minTime, forwardedProps.name, onChange, searchValue, value]);
+    onChange(getDateAtTime(time, value), name);
+  }, [maxTime, minTime, name, onChange, searchValue, value]);
   const searchInputValue = value ? formatTime(value, locale) : undefined;
   return TimePickerField$1({
     ...forwardedProps,
@@ -22350,5 +22483,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-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$1d 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 };
+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$1e 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