@lumx/react 4.9.0-alpha.2 → 4.9.0-alpha.3

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment as Alignment$1, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -892,6 +892,8 @@ const TOOLTIP_LONG_PRESS_DELAY = {
 /**
  * Alignments.
  */
+const Alignment = {
+  left: 'left'};
 const Theme = {
   light: 'light',
   dark: 'dark'
@@ -946,7 +948,10 @@ const AspectRatio = {
   /** Ratio 3:2 */
   horizontal: 'horizontal',
   /** Ratio 1:1 */
-  square: 'square'};
+  square: 'square',
+  /** Ratio constrained by the parent. */
+  free: 'free'
+};
 /**
  * Semantic info about the purpose of the component
  */
@@ -3239,6 +3244,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Last notified isEmpty state, to avoid redundant `emptyChange` notifications. */
   let lastIsEmpty = true;
 
+  /** Last notified input value, to re-fire `emptyChange` when the user keeps typing while empty. */
+  let lastInputValue = '';
+
   /** Event subscribers managed by the handle. */
   const subscribers = {
     open: new Set(),
@@ -3254,7 +3262,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   }
 
   /**
-   * Notify all registered sections and fire `emptyChange` if the visible option count changed.
+   * Notify all registered sections and fire `emptyChange` if the visible option count changed
+   * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
+   * the updated query string).
    * Called whenever the set of visible options may have changed (option register/unregister, filter change).
    */
   function notifyVisibilityChange() {
@@ -3266,9 +3276,10 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       if (!reg.lastFiltered) visibleCount += 1;
     }
     const isEmpty = visibleCount === 0;
-    if (isEmpty !== lastIsEmpty) {
+    const inputValue = trigger?.value ?? '';
+    if (isEmpty !== lastIsEmpty || isEmpty && inputValue !== lastInputValue) {
       lastIsEmpty = isEmpty;
-      const inputValue = trigger?.value ?? '';
+      lastInputValue = inputValue;
       notify('emptyChange', {
         isEmpty,
         inputValue
@@ -3287,6 +3298,22 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   /** Timer for debounced loading announcement. */
   let loadingTimer;
 
+  /** Whether a loading announcement has been sent since the last open. */
+  let announcementSent = false;
+
+  /** Start or restart the debounced loading announcement timer if conditions are met. */
+  function startLoadingAnnouncementTimer() {
+    clearTimeout(loadingTimer);
+    if (skeletonCount > 0 && isOpenState) {
+      loadingTimer = setTimeout(() => {
+        if (skeletonCount > 0 && isOpenState) {
+          announcementSent = true;
+          notify('loadingAnnouncement', true);
+        }
+      }, LOADING_ANNOUNCEMENT_DELAY);
+    }
+  }
+
   /**
    * Called when the skeleton count transitions between 0 and >0 (or vice versa).
    * Fires `loadingChange` immediately and manages the debounced `loadingAnnouncement`.
@@ -3294,15 +3321,14 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   function onSkeletonCountChange() {
     const isLoading = skeletonCount > 0;
     notify('loadingChange', isLoading);
-    clearTimeout(loadingTimer);
     if (isLoading) {
-      loadingTimer = setTimeout(() => {
-        if (skeletonCount > 0) {
-          notify('loadingAnnouncement', true);
-        }
-      }, LOADING_ANNOUNCEMENT_DELAY);
+      startLoadingAnnouncementTimer();
     } else {
-      notify('loadingAnnouncement', false);
+      clearTimeout(loadingTimer);
+      if (announcementSent) {
+        announcementSent = false;
+        notify('loadingAnnouncement', false);
+      }
     }
   }
 
@@ -3489,11 +3515,33 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       isOpenState = isOpen;
       if (!isOpen) {
         focusNav?.clear();
+        // Reset announcement state so it retriggers on next open
+        clearTimeout(loadingTimer);
+        if (announcementSent) {
+          announcementSent = false;
+          notify('loadingAnnouncement', false);
+        }
+      } else if (skeletonCount > 0) {
+        // Opening while already loading — start the announcement timer
+        startLoadingAnnouncementTimer();
       }
 
       // Update aria-expanded on trigger
       trigger?.setAttribute('aria-expanded', String(isOpen));
       notify('open', isOpen);
+
+      // When opening, always notify the current empty state so that
+      // subscribers (ComboboxState) get the correct initial value.
+      // Without this, a list that starts empty never fires `emptyChange`
+      // because `lastIsEmpty` is initialized to `true` and `notifyVisibilityChange`
+      // only fires on *changes*.
+      if (isOpen) {
+        const inputValue = trigger?.value ?? '';
+        notify('emptyChange', {
+          isEmpty: lastIsEmpty,
+          inputValue
+        });
+      }
     },
     select(option) {
       callbacks.onSelect({
@@ -3610,10 +3658,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       listbox = null;
       filterValue = '';
       lastIsEmpty = true;
+      lastInputValue = '';
       optionRegistrations.clear();
       sectionRegistrations.clear();
       skeletonCount = 0;
       clearTimeout(loadingTimer);
+      announcementSent = false;
       // Clear all subscribers
       for (const set of Object.values(subscribers)) {
         set.clear();
@@ -8013,9 +8063,10 @@ const ComboboxOptionMoreInfo$1 = (props, {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(IconButton, {
       ref: ref,
-      className: block$R([className]),
       icon: mdiInformationOutline,
       size: "s",
+      ...buttonProps,
+      className: block$R([className, buttonProps?.className]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -8023,8 +8074,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       // Keyboard accessibility is handled via combobox keyboard highlighting.
       ,
       "aria-hidden": true,
-      label: "",
-      ...buttonProps
+      label: ""
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
       className: element$G('popover'),
@@ -8034,6 +8084,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       closeOnEscape: true,
       closeOnClickAway: true,
       placement: "bottom-end",
+      hasArrow: true,
       children: children
     })]
   });
@@ -8835,9 +8886,10 @@ const ComboboxOptionSkeleton$1 = props => {
     children,
     className,
     ref,
+    count = 1,
     ...forwardedProps
   } = props;
-  return ListItem$1({
+  const itemProps = {
     ref,
     size: 'tiny',
     role: 'none',
@@ -8852,6 +8904,13 @@ const ComboboxOptionSkeleton$1 = props => {
         theme: "light"
       })]
     })
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/jsx(ListItem$1, {
+      ...itemProps
+    }, i))
   });
 };
 
@@ -8880,19 +8939,13 @@ const ComboboxOptionSkeleton$1 = props => {
  * @return React element(s).
  */
 const ComboboxOptionSkeleton = props => {
-  const {
-    count = 1,
-    ...itemProps
-  } = props;
   const {
     handle
   } = useComboboxContext();
   useEffect(() => handle?.registerSkeleton(), [handle]);
-  return Array.from({
-    length: count
-  }, (_, i) => /*#__PURE__*/jsx(ComboboxOptionSkeleton$1, {
-    ...itemProps
-  }, i));
+  return /*#__PURE__*/jsx(ComboboxOptionSkeleton$1, {
+    ...props
+  });
 };
 ComboboxOptionSkeleton.displayName = COMPONENT_NAME$12;
 ComboboxOptionSkeleton.className = CLASSNAME$11;
@@ -9443,11 +9496,12 @@ const ListSection$1 = props => {
     ...forwardedProps
   } = props;
   const labelId = `${id}-label`;
+  const hasHeader = !!label;
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
     className: classnames(className, block$O()),
-    children: [label && /*#__PURE__*/jsxs(Text, {
+    children: [hasHeader && /*#__PURE__*/jsxs(Text, {
       as: "p",
       typography: "overline",
       className: element$D('title'),
@@ -9458,7 +9512,7 @@ const ListSection$1 = props => {
     }), /*#__PURE__*/jsx("ul", {
       ...itemsWrapperProps,
       className: element$D('items'),
-      "aria-labelledby": label ? labelId : undefined,
+      "aria-labelledby": hasHeader ? labelId : undefined,
       children: children
     })]
   });
@@ -9619,6 +9673,7 @@ const ComboboxState$1 = (props, {
     loadingMessage,
     state
   } = props;
+  const isOpen = state?.isOpen ?? true;
   const showError = !!errorMessage;
   const resolvedEmptyMessage = typeof emptyMessage === 'function' ? emptyMessage(state?.inputValue || '') : emptyMessage;
   // Suppress empty while loading (immediate flag prevents false "no results" before data arrives)
@@ -9632,6 +9687,12 @@ const ComboboxState$1 = (props, {
     hAlign: 'center',
     vAlign: 'center'
   };
+
+  // Gate message content behind isOpen so that content is *inserted* into the
+  // aria-live region when the popover opens, triggering screen reader announcements.
+  // Without this gate, content is already present (just hidden via display:none from
+  // 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')),
     orientation: "vertical",
@@ -9639,17 +9700,17 @@ const ComboboxState$1 = (props, {
     role: "status",
     "aria-live": "polite",
     "aria-atomic": true,
-    children: [showEmpty && /*#__PURE__*/jsx(Text, {
+    children: [renderContent && showEmpty && /*#__PURE__*/jsx(Text, {
       as: "p",
       typography: "body1",
       color: "dark-L2",
       children: resolvedEmptyMessage
-    }), showLoading && /*#__PURE__*/jsx(Text, {
+    }), renderContent && showLoading && /*#__PURE__*/jsx(Text, {
       as: "p",
       typography: "body1",
       color: "dark-L2",
       children: loadingMessage
-    }), !!errorMessage && /*#__PURE__*/jsxs(Fragment, {
+    }), renderContent && !!errorMessage && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Text, {
         as: "p",
         typography: "subtitle2",
@@ -9664,6 +9725,62 @@ const ComboboxState$1 = (props, {
   });
 };
 
+/**
+ * Delay before inserting content into the aria-live region after the popover opens (ms).
+ *
+ * The popover uses `closeMode="hide"` (`display:none` when closed), so the live region
+ * container is not in the accessibility tree until the popover becomes visible.
+ * Screen readers only detect content *changes* in live regions that are already visible.
+ * This delay ensures the popover's `display:none` is removed and the accessibility tree
+ * is updated before content is inserted, so screen readers reliably announce it.
+ */
+const OPEN_ANNOUNCEMENT_DELAY = 100;
+
+/** Setters invoked by `subscribeComboboxState` when handle events fire. */
+
+/**
+ * Subscribe to the combobox handle events needed by `ComboboxState`.
+ *
+ * Manages three subscriptions:
+ * - `loadingChange` → `setIsLoading` (+ synchronous initial read of `handle.isLoading`)
+ * - `loadingAnnouncement` → `setShouldAnnounce`
+ * - `open` → `setIsOpen` (deferred by {@link OPEN_ANNOUNCEMENT_DELAY}ms on open, immediate on close)
+ *
+ * @param handle  The combobox handle to subscribe to.
+ * @param setters Framework-specific state setters.
+ * @returns A cleanup function that unsubscribes all events and clears timers.
+ */
+function subscribeComboboxState(handle, setters) {
+  const {
+    setIsLoading,
+    setShouldAnnounce,
+    setIsOpen
+  } = setters;
+
+  // Read current loading state synchronously
+  setIsLoading(handle.isLoading);
+  const unsubLoadingChange = handle.subscribe('loadingChange', setIsLoading);
+  const unsubLoadingAnnouncement = handle.subscribe('loadingAnnouncement', setShouldAnnounce);
+  let openTimer;
+  const unsubOpen = handle.subscribe('open', open => {
+    clearTimeout(openTimer);
+    if (open) {
+      // Delay content insertion so the popover is visible in the
+      // accessibility tree before the live region content changes.
+      openTimer = setTimeout(() => setIsOpen(true), OPEN_ANNOUNCEMENT_DELAY);
+    } else {
+      // Reset immediately on close
+      setIsOpen(false);
+    }
+  });
+  return () => {
+    unsubLoadingChange();
+    unsubLoadingAnnouncement();
+    unsubOpen();
+    clearTimeout(openTimer);
+  };
+}
+
 /**
  * Similar to lodash `partition` function but working with multiple predicates.
  *
@@ -9967,25 +10084,21 @@ const ComboboxState = props => {
     handle
   } = useComboboxContext();
   const emptyState = useComboboxEvent('emptyChange', undefined);
-
-  // Track loading state with both initial read and event subscription
-  // (same pattern as ComboboxList for aria-busy)
   const [isLoading, setIsLoading] = useState(false);
   const [shouldAnnounce, setShouldAnnounce] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   useEffect(() => {
     if (!handle) return undefined;
-    // Read current state synchronously
-    setIsLoading(handle.isLoading);
-    const unsub1 = handle.subscribe('loadingChange', setIsLoading);
-    const unsub2 = handle.subscribe('loadingAnnouncement', setShouldAnnounce);
-    return () => {
-      unsub1();
-      unsub2();
-    };
+    return subscribeComboboxState(handle, {
+      setIsLoading,
+      setShouldAnnounce,
+      setIsOpen
+    });
   }, [handle]);
   const state = {
     ...emptyState,
-    isLoading
+    isLoading,
+    isOpen
   };
 
   // Only pass loadingMessage to core after the 500ms debounce threshold
@@ -10006,16 +10119,27 @@ ComboboxState.className = CLASSNAME$X;
  * Combobox compound component namespace.
  */
 const Combobox = {
+  /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
   Provider: ComboboxProvider,
+  /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
   Button: ComboboxButton,
+  /** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
   Input: ComboboxInput,
+  /** Listbox container that registers with the combobox handle and tracks loading state. */
   List: ComboboxList,
+  /** Selectable option item with filtering and keyboard navigation support. */
   Option: ComboboxOption,
+  /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
   OptionAction: ComboboxOptionAction,
+  /** Info button on an option that shows a popover on hover or keyboard highlight. */
   OptionMoreInfo: ComboboxOptionMoreInfo,
+  /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
   OptionSkeleton: ComboboxOptionSkeleton,
+  /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
   Popover: ComboboxPopover,
+  /** Labelled group of options that auto-hides when all its child options are filtered out. */
   Section: ComboboxSection,
+  /** Displays empty, error, and loading state messages for the combobox list. */
   State: ComboboxState,
   /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
   Divider: ListDivider,
@@ -11525,7 +11649,7 @@ const CLASSNAME$P = 'lumx-expansion-panel';
 const {
   block: block$G,
   element: element$x
-} = classNames.bem(CLASSNAME$P);
+} = bem(CLASSNAME$P);
 
 /**
  * Component default props.
@@ -11533,9 +11657,6 @@ const {
 const DEFAULT_PROPS$L = {
   closeMode: 'unmount'
 };
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -11544,48 +11665,45 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-const ExpansionPanel = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ExpansionPanel$1 = props => {
   const {
     className,
-    closeMode = DEFAULT_PROPS$L.closeMode,
     children: anyChildren,
     hasBackground,
+    ref,
     hasHeaderDivider,
     isOpen,
     label,
-    onClose,
-    onOpen,
-    onToggleOpen,
-    theme = defaultTheme,
+    handleClose,
+    handleOpen,
+    handleToggleOpen,
+    theme,
     toggleButtonProps,
+    headerProps,
+    headerContent,
+    dragHandle,
+    wrapperRef,
+    content,
+    isChildrenVisible,
+    IconButton,
+    footer,
+    closeMode,
     ...forwardedProps
   } = props;
-  const children = Children.toArray(anyChildren);
-
-  // Partition children by types.
-  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-  // Either take the header in children or create one with the label.
-  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: element$x('label'),
-    children: label
-  });
   const toggleOpen = event => {
     const shouldOpen = !isOpen;
-    if (onOpen && shouldOpen) {
-      onOpen(event);
+    if (handleOpen && shouldOpen) {
+      handleOpen(event);
     }
-    if (onClose && !shouldOpen) {
-      onClose(event);
+    if (handleClose && !shouldOpen) {
+      handleClose(event);
     }
-    if (onToggleOpen) {
-      onToggleOpen(shouldOpen, event);
+    if (handleToggleOpen) {
+      handleToggleOpen(shouldOpen, event);
     }
   };
-  const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$G({
+  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+  const rootClassName = classnames(className, block$G({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -11594,35 +11712,6 @@ const ExpansionPanel = forwardRef((props, ref) => {
     'is-open': isOpen,
     [`theme-${theme}`]: Boolean(theme)
   }));
-  const wrapperRef = useRef(null);
-
-  // Children stay visible while the open/close transition is running
-  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
-  const isOpenRef = React__default.useRef(isOpen);
-  React__default.useEffect(() => {
-    if (isOpen || closeMode === 'hide') {
-      setChildrenVisible(true);
-    } else if (!IS_BROWSER$1) {
-      // Outside a browser we can't wait for the transition
-      setChildrenVisible(false);
-    }
-    isOpenRef.current = isOpen;
-  }, [closeMode, isOpen]);
-
-  // Change children's visibility on the transition end
-  React__default.useEffect(() => {
-    const {
-      current: wrapper
-    } = wrapperRef;
-    if (!IS_BROWSER$1 || !wrapper) {
-      return undefined;
-    }
-    const onTransitionEnd = () => {
-      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
-    };
-    wrapper.addEventListener('transitionend', onTransitionEnd);
-    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-  }, [closeMode]);
   return /*#__PURE__*/jsxs("section", {
     ref: ref,
     ...forwardedProps,
@@ -11642,7 +11731,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
-          emphasis: Emphasis$1.low,
+          emphasis: Emphasis.low,
           icon: isOpen ? mdiChevronUp : mdiChevronDown,
           "aria-expanded": isOpen || 'false'
         })
@@ -11662,6 +11751,92 @@ const ExpansionPanel = forwardRef((props, ref) => {
       })
     })]
   });
+};
+
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ExpansionPanel = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    closeMode = DEFAULT_PROPS$L.closeMode,
+    children: anyChildren,
+    isOpen,
+    label,
+    onClose,
+    onOpen,
+    onToggleOpen,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const children = Children.toArray(anyChildren);
+
+  // Partition children by types.
+  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
+
+  // Either take the header in children or create one with the label.
+  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
+    className: element$x('label'),
+    children: label
+  });
+  const wrapperRef = useRef(null);
+
+  // Children stay visible while the open/close transition is running
+  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
+  const isOpenRef = React__default.useRef(isOpen);
+  React__default.useEffect(() => {
+    if (isOpen || closeMode === 'hide') {
+      setChildrenVisible(true);
+    } else if (!IS_BROWSER$1) {
+      // Outside a browser we can't wait for the transition
+      setChildrenVisible(false);
+    }
+    isOpenRef.current = isOpen;
+  }, [closeMode, isOpen]);
+
+  // Change children's visibility on the transition end
+  React__default.useEffect(() => {
+    const {
+      current: wrapper
+    } = wrapperRef;
+    if (!IS_BROWSER$1 || !wrapper) {
+      return undefined;
+    }
+    const onTransitionEnd = () => {
+      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
+    };
+    wrapper.addEventListener('transitionend', onTransitionEnd);
+    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
+  }, [closeMode]);
+  return ExpansionPanel$1({
+    content,
+    dragHandle,
+    footer,
+    headerContent,
+    ref,
+    headerProps,
+    wrapperRef,
+    IconButton,
+    isOpen,
+    handleClose: onClose,
+    handleToggleOpen: onToggleOpen,
+    handleOpen: onOpen,
+    theme,
+    isChildrenVisible,
+    children,
+    closeMode,
+    label,
+    ...forwardedProps
+  });
 });
 ExpansionPanel.displayName = COMPONENT_NAME$O;
 ExpansionPanel.className = CLASSNAME$P;
@@ -12239,7 +12414,7 @@ const {
  */
 const DEFAULT_PROPS$F = {
   captionPosition: ImageBlockCaptionPosition.below,
-  align: Alignment.left
+  align: Alignment$1.left
 };
 
 /**
@@ -13653,7 +13828,7 @@ const CLASSNAME$B = 'lumx-mosaic';
 const {
   block: block$v,
   element: element$n
-} = classNames.bem(CLASSNAME$B);
+} = bem(CLASSNAME$B);
 
 /**
  * Component default props.
@@ -13667,26 +13842,27 @@ const DEFAULT_PROPS$C = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Mosaic = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const Mosaic$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     thumbnails,
-    onImageClick,
+    handleClick,
+    Thumbnail,
+    ref,
     ...forwardedProps
   } = props;
-  const handleImageClick = useMemo(() => {
-    if (!onImageClick) return undefined;
+  const onImageClick = () => {
+    if (!handleClick) return undefined;
     return (index, onClick) => event => {
       onClick?.(event);
-      onImageClick?.(index);
+      handleClick?.(index);
     };
-  }, [onImageClick]);
+  };
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$v({
+    className: classnames(className, block$v({
       [`theme-${theme}`]: Boolean(theme),
       'has-1-thumbnail': thumbnails?.length === 1,
       'has-2-thumbnails': thumbnails?.length === 2,
@@ -13709,9 +13885,9 @@ const Mosaic = forwardRef((props, ref) => {
             align: align || Alignment.left,
             image: image,
             theme: theme,
-            aspectRatio: AspectRatio$1.free,
+            aspectRatio: AspectRatio.free,
             fillHeight: true,
-            onClick: handleImageClick?.(index, onClick) || onClick
+            onClick: onImageClick()?.(index, onClick) || onClick
           }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
             className: element$n('overlay'),
             children: /*#__PURE__*/jsxs("span", {
@@ -13722,6 +13898,33 @@ const Mosaic = forwardRef((props, ref) => {
       })
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Mosaic = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    onImageClick,
+    ...forwardedProps
+  } = props;
+  return Mosaic$1({
+    ref,
+    theme,
+    Thumbnail,
+    handleClick: onImageClick,
+    ...forwardedProps
+  });
 });
 Mosaic.displayName = COMPONENT_NAME$A;
 Mosaic.className = CLASSNAME$B;
@@ -14521,7 +14724,6 @@ const reducer = (state, action) => {
         if (state.activeTabIndex === action.payload) {
           return state;
         }
-        // Change active tab index.
         return {
           ...state,
           activeTabIndex: action.payload
@@ -14533,7 +14735,6 @@ const reducer = (state, action) => {
           type,
           id
         } = action.payload;
-        // Append tab/tabPanel id in state.
         return {
           ...state,
           ids: {
@@ -14550,7 +14751,6 @@ const reducer = (state, action) => {
         } = action.payload;
         const index = state.ids[type].indexOf(id);
         if (index === -1) return state;
-        // Remove tab & tab panel at index.
         const tabIds = [...state.ids.tab];
         tabIds.splice(index, 1);
         const tabPanelIds = [...state.ids.tabPanel];
@@ -14567,7 +14767,9 @@ const reducer = (state, action) => {
       return state;
   }
 };
+
 const TabProviderContext = /*#__PURE__*/createContext(null);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const useTabProviderContext = (type, originalId) => {
   const context = useContext(TabProviderContext);
@@ -17380,7 +17582,7 @@ const Switch$1 = props => {
  * Component default props.
  */
 const DEFAULT_PROPS$c = {
-  position: Alignment.left
+  position: Alignment$1.left
 };
 
 /**
@@ -17939,7 +18141,7 @@ const TABS_CLASSNAME = `lumx-tabs`;
 const {
   block: block$6,
   element: element$4
-} = classNames.bem(TABS_CLASSNAME);
+} = bem(TABS_CLASSNAME);
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
   TabListLayout["fixed"] = "fixed";
@@ -17972,26 +18174,21 @@ const DEFAULT_PROPS$6 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabList = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const TabList$1 = props => {
   const {
     'aria-label': ariaLabel,
     children,
     className,
     layout = DEFAULT_PROPS$6.layout,
     position = DEFAULT_PROPS$6.position,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
-  const tabListRef = React__default.useRef(null);
-  useRovingTabIndexContainer({
-    containerRef: tabListRef,
-    itemSelector: '[role="tab"]'
-  });
   return /*#__PURE__*/jsx("div", {
-    ref: mergeRefs(ref, tabListRef),
+    ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$6({
+    className: classnames(className, block$6({
       [`layout-${layout}`]: Boolean(layout),
       [`position-${position}`]: Boolean(position),
       [`theme-${theme}`]: Boolean(theme)
@@ -18003,6 +18200,33 @@ const TabList = forwardRef((props, ref) => {
       children: children
     })
   });
+};
+
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TabList = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const tabListRef = React__default.useRef(null);
+  useRovingTabIndexContainer({
+    containerRef: tabListRef,
+    itemSelector: '[role="tab"]'
+  });
+  return TabList$1({
+    theme,
+    ref: mergeRefs(ref, tabListRef),
+    ...forwardedProps
+  });
 });
 TabList.displayName = COMPONENT_NAME$5;
 TabList.className = TABS_CLASSNAME;
@@ -18041,12 +18265,15 @@ const Tab$1 = props => {
     icon,
     iconProps = {},
     isAnyDisabled,
+    isDisabled,
     id,
     isActive,
     label,
     handleFocus,
     handleKeyPress,
     tabIndex = -1,
+    tabIndexProp = 'tabIndex',
+    keyPressProp = 'onKeyPress',
     changeToTab,
     tabPanelId,
     shouldActivateOnFocus,
@@ -18085,10 +18312,10 @@ const Tab$1 = props => {
       'is-disabled': isAnyDisabled
     })),
     onClick: changeToCurrentTab,
-    onKeyPress: onKeyPress,
+    [keyPressProp]: onKeyPress,
     onFocus: onFocus,
     role: "tab",
-    tabIndex: isActive ? 0 : tabIndex,
+    [tabIndexProp]: isActive ? 0 : tabIndex,
     "aria-disabled": isAnyDisabled,
     "aria-selected": isActive,
     "aria-controls": tabPanelId,
@@ -18159,7 +18386,7 @@ const COMPONENT_NAME$3 = 'TabPanel';
 const CLASSNAME$4 = `lumx-tab-panel`;
 const {
   block: block$4
-} = classNames.bem(CLASSNAME$4);
+} = bem(CLASSNAME$4);
 
 /**
  * Component default props.
@@ -18175,27 +18402,60 @@ const DEFAULT_PROPS$4 = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabPanel = forwardRef((props, ref) => {
+const TabPanel$1 = props => {
   const {
     children,
-    id,
     className,
-    isActive: propIsActive,
+    isActive,
+    id,
+    tabId,
+    isLazy,
+    tabIndexProp = 'tabIndex',
+    ref,
     ...forwardedProps
   } = props;
-  const state = useTabProviderContext('tabPanel', id);
-  const isActive = propIsActive || state?.isActive;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    id: state?.tabPanelId,
-    className: classNames.join(className, block$4({
+    id: id,
+    className: classnames(className, block$4({
       'is-active': isActive
     })),
     role: "tabpanel",
-    tabIndex: isActive ? 0 : -1,
-    "aria-labelledby": state?.tabId,
-    children: (!state?.isLazy || isActive) && children
+    [tabIndexProp]: isActive ? 0 : -1,
+    "aria-labelledby": tabId,
+    children: (!isLazy || isActive) && children
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TabPanel = forwardRef((props, ref) => {
+  const {
+    id,
+    isActive: propIsActive,
+    ...forwardedProps
+  } = props;
+  const state = useTabProviderContext('tabPanel', id);
+  const isActive = propIsActive || state?.isActive;
+  return TabPanel$1({
+    ref,
+    isActive,
+    id: state?.tabPanelId,
+    isLazy: state?.isLazy,
+    tabId: state?.tabId,
+    ...forwardedProps
   });
 });
 TabPanel.displayName = COMPONENT_NAME$3;