@lumx/react 4.19.1-alpha.4 → 4.19.1-alpha.6

package/index.js

@@ -1,4 +1,4 @@
-import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
+import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Typography as Typography$1, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -9,7 +9,7 @@ import ReactDOM__default from 'react-dom';
 import { classNames, onEscapePressed, onEnterPressed as onEnterPressed$1, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/BvaFEHZn.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/CcLi-Wuu.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
 import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
@@ -558,7 +558,7 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1F = 'AlertDialog';
+const COMPONENT_NAME$1G = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
@@ -732,7 +732,7 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1F;
+AlertDialog.displayName = COMPONENT_NAME$1G;
 AlertDialog.className = CLASSNAME$1C;
 AlertDialog.defaultProps = DEFAULT_PROPS$1j;
 
@@ -826,7 +826,7 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1E = 'Autocomplete';
+const COMPONENT_NAME$1F = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
@@ -939,14 +939,14 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1E;
+Autocomplete.displayName = COMPONENT_NAME$1F;
 Autocomplete.className = CLASSNAME$1B;
 Autocomplete.defaultProps = DEFAULT_PROPS$1i;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1D = 'AutocompleteMultiple';
+const COMPONENT_NAME$1E = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
@@ -1065,14 +1065,14 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1D;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1E;
 AutocompleteMultiple.className = CLASSNAME$1A;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1h;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1C = 'Avatar';
+const COMPONENT_NAME$1D = 'Avatar';
 
 /**
  * Component default class name and class prefix.
@@ -1172,14 +1172,14 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1C;
+Avatar.displayName = COMPONENT_NAME$1D;
 Avatar.className = CLASSNAME$1z;
 Avatar.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1B = 'Badge';
+const COMPONENT_NAME$1C = 'Badge';
 
 /**
  * Component default class name and class prefix.
@@ -1219,7 +1219,7 @@ const Badge$1 = props => {
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1B;
+Badge$1.displayName = COMPONENT_NAME$1C;
 Badge$1.className = CLASSNAME$1y;
 Badge$1.defaultProps = DEFAULT_PROPS$1f;
 
@@ -1244,7 +1244,7 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1A = 'BadgeWrapper';
+const COMPONENT_NAME$1B = 'BadgeWrapper';
 const CLASSNAME$1x = 'lumx-badge-wrapper';
 const {
   block: block$18,
@@ -1275,7 +1275,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1A;
+BadgeWrapper.displayName = COMPONENT_NAME$1B;
 BadgeWrapper.className = CLASSNAME$1x;
 
 /**
@@ -1326,7 +1326,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1z = 'ButtonRoot';
+const COMPONENT_NAME$1A = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1424,7 +1424,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1z;
+ButtonRoot.displayName = COMPONENT_NAME$1A;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1434,7 +1434,7 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1y = 'Button';
+const COMPONENT_NAME$1z = 'Button';
 
 /**
  * Component default class name and class prefix.
@@ -1479,7 +1479,7 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1y;
+Button$1.displayName = COMPONENT_NAME$1z;
 Button$1.className = CLASSNAME$1w;
 Button$1.defaultProps = DEFAULT_PROPS$1e;
 
@@ -1554,11 +1554,11 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1y;
+Button.displayName = COMPONENT_NAME$1z;
 Button.className = CLASSNAME$1w;
 Button.defaultProps = DEFAULT_PROPS$1e;
 
-const COMPONENT_NAME$1x = 'Icon';
+const COMPONENT_NAME$1y = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
@@ -1651,14 +1651,14 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1x;
+Icon$1.displayName = COMPONENT_NAME$1y;
 Icon$1.className = CLASSNAME$1v;
 Icon$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'IconButton';
+const COMPONENT_NAME$1x = 'IconButton';
 
 /**
  * Component default class name and class prefix.
@@ -1704,7 +1704,7 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1w;
+IconButton$1.displayName = COMPONENT_NAME$1x;
 IconButton$1.className = CLASSNAME$1u;
 IconButton$1.defaultProps = DEFAULT_PROPS$1c;
 
@@ -1749,14 +1749,14 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1w;
+IconButton.displayName = COMPONENT_NAME$1x;
 IconButton.className = CLASSNAME$1u;
 IconButton.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1v = 'ButtonGroup';
+const COMPONENT_NAME$1w = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
@@ -1786,7 +1786,7 @@ const ButtonGroup$1 = props => {
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1v;
+ButtonGroup$1.displayName = COMPONENT_NAME$1w;
 ButtonGroup$1.className = CLASSNAME$1t;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$1b;
 
@@ -1803,11 +1803,11 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1v;
+ButtonGroup.displayName = COMPONENT_NAME$1w;
 ButtonGroup.className = CLASSNAME$1t;
 ButtonGroup.defaultProps = DEFAULT_PROPS$1b;
 
-const COMPONENT_NAME$1u = 'InputLabel';
+const COMPONENT_NAME$1v = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
 const CLASSNAME$1s = InputLabelClassName;
 const {
@@ -1843,7 +1843,7 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1u;
+InputLabel$1.displayName = COMPONENT_NAME$1v;
 InputLabel$1.className = CLASSNAME$1s;
 InputLabel$1.defaultProps = DEFAULT_PROPS$1a;
 
@@ -1859,7 +1859,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1t = 'InputHelper';
+const COMPONENT_NAME$1u = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
@@ -1903,7 +1903,7 @@ function InputHelper$1(props) {
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1t;
+InputHelper$1.displayName = COMPONENT_NAME$1u;
 InputHelper$1.className = CLASSNAME$1r;
 InputHelper$1.defaultProps = DEFAULT_PROPS$19;
 
@@ -1916,7 +1916,7 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1s = 'Checkbox';
+const COMPONENT_NAME$1t = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
@@ -2080,7 +2080,7 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1s;
+Checkbox.displayName = COMPONENT_NAME$1t;
 Checkbox.className = CLASSNAME$1q;
 Checkbox.defaultProps = DEFAULT_PROPS$18;
 
@@ -2103,7 +2103,7 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1r = 'Chip';
+const COMPONENT_NAME$1s = 'Chip';
 
 /**
  * Component default class name and class prefix.
@@ -2264,14 +2264,14 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1r;
+Chip.displayName = COMPONENT_NAME$1s;
 Chip.className = CLASSNAME$1p;
 Chip.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1q = 'ChipGroup';
+const COMPONENT_NAME$1r = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
@@ -2377,7 +2377,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1q;
+InternalChipGroup.displayName = COMPONENT_NAME$1r;
 InternalChipGroup.className = CLASSNAME$1o;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$16;
 const ChipGroup = Object.assign(InternalChipGroup, {
@@ -2387,7 +2387,7 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1p = 'SelectionChipGroup';
+const COMPONENT_NAME$1q = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
@@ -2709,7 +2709,7 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1o = 'Text';
+const COMPONENT_NAME$1p = 'Text';
 
 /**
  * Component default class name and class prefix.
@@ -2807,7 +2807,7 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1o;
+Text.displayName = COMPONENT_NAME$1p;
 Text.className = CLASSNAME$1m;
 Text.defaultProps = DEFAULT_PROPS$15;
 
@@ -4901,7 +4901,7 @@ const DEFAULT_PROPS$14 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'Tooltip';
+const COMPONENT_NAME$1o = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
@@ -4959,7 +4959,7 @@ const TooltipPopup = props => {
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1n;
+TooltipPopup.displayName = COMPONENT_NAME$1o;
 TooltipPopup.className = CLASSNAME$1l;
 
 /**
@@ -5322,7 +5322,7 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1n;
+Tooltip.displayName = COMPONENT_NAME$1o;
 Tooltip.className = CLASSNAME$1l;
 Tooltip.defaultProps = DEFAULT_PROPS$14;
 
@@ -6234,7 +6234,7 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1p;
+SelectionChipGroup.displayName = COMPONENT_NAME$1q;
 SelectionChipGroup.className = CLASSNAME$1n;
 
 /**
@@ -7199,7 +7199,7 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'ComboboxButton';
+const COMPONENT_NAME$1n = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
@@ -7388,7 +7388,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1m,
+  displayName: COMPONENT_NAME$1n,
   className: CLASSNAME$1k
 });
 
@@ -7553,7 +7553,7 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'ComboboxInput';
+const COMPONENT_NAME$1m = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
@@ -7621,7 +7621,7 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'TextField';
+const COMPONENT_NAME$1l = 'TextField';
 
 /**
  * Component default class name and class prefix.
@@ -8161,7 +8161,7 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1k;
+TextField.displayName = COMPONENT_NAME$1l;
 TextField.className = CLASSNAME$1i;
 TextField.defaultProps = DEFAULT_PROPS$10;
 
@@ -8250,13 +8250,13 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1l;
+ComboboxInput.displayName = COMPONENT_NAME$1m;
 ComboboxInput.className = CLASSNAME$1j;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'List';
+const COMPONENT_NAME$1k = 'List';
 
 /**
  * Component default class name and class prefix.
@@ -8294,7 +8294,7 @@ const List$1 = props => {
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1j;
+List$1.displayName = COMPONENT_NAME$1k;
 List$1.className = CLASSNAME$1h;
 List$1.defaultProps = DEFAULT_PROPS$$;
 
@@ -8311,7 +8311,7 @@ List$1.defaultProps = DEFAULT_PROPS$$;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'ComboboxList';
+const COMPONENT_NAME$1j = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
@@ -8428,13 +8428,13 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1i;
+ComboboxList.displayName = COMPONENT_NAME$1j;
 ComboboxList.className = CLASSNAME$1g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'ListItem';
+const COMPONENT_NAME$1i = 'ListItem';
 
 /**
  * Component default class name and class prefix.
@@ -8510,7 +8510,7 @@ const ListItem$1 = props => {
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$1h;
+ListItem$1.displayName = COMPONENT_NAME$1i;
 ListItem$1.className = CLASSNAME$1f;
 ListItem$1.defaultProps = DEFAULT_PROPS$_;
 
@@ -8521,7 +8521,7 @@ ListItem$1.defaultProps = DEFAULT_PROPS$_;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ListItemAction';
+const COMPONENT_NAME$1h = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
@@ -8560,7 +8560,7 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ComboboxOption';
+const COMPONENT_NAME$1g = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
@@ -8753,7 +8753,7 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$1f;
+ComboboxOption.displayName = COMPONENT_NAME$1g;
 ComboboxOption.className = CLASSNAME$1d;
 
 /**
@@ -8763,7 +8763,7 @@ ComboboxOption.className = CLASSNAME$1d;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ComboboxOptionAction';
+const COMPONENT_NAME$1f = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
@@ -8841,14 +8841,14 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1e,
+  displayName: COMPONENT_NAME$1f,
   className: CLASSNAME$1c
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$1e = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
@@ -9170,7 +9170,7 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'Popover';
+const COMPONENT_NAME$1d = 'Popover';
 
 /**
  * Component default class name and class prefix.
@@ -9705,7 +9705,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$1c;
+_InnerPopover.displayName = COMPONENT_NAME$1d;
 
 /**
  * Popover component.
@@ -9717,7 +9717,7 @@ _InnerPopover.displayName = COMPONENT_NAME$1c;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$1c;
+Popover.displayName = COMPONENT_NAME$1d;
 Popover.className = CLASSNAME$1a;
 Popover.defaultProps = DEFAULT_PROPS$Y;
 
@@ -9781,13 +9781,13 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$1d;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$1e;
 ComboboxOptionMoreInfo.className = CLASSNAME$1b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'SkeletonTypography';
+const COMPONENT_NAME$1c = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
@@ -9835,7 +9835,7 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$1b = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
@@ -9920,12 +9920,12 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1a;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1b;
 ComboboxOptionSkeleton.className = CLASSNAME$18;
 
 const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
 
-const COMPONENT_NAME$19 = 'ComboboxPopover';
+const COMPONENT_NAME$1a = 'ComboboxPopover';
 
 /**
  * Component default class name.
@@ -9999,7 +9999,7 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'FlexBox';
+const COMPONENT_NAME$19 = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
@@ -10063,7 +10063,7 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$18;
+FlexBox.displayName = COMPONENT_NAME$19;
 FlexBox.className = CLASSNAME$16;
 
 /**
@@ -10102,7 +10102,7 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$19;
+ComboboxPopover.displayName = COMPONENT_NAME$1a;
 ComboboxPopover.className = CLASSNAME$17;
 
 /**
@@ -10148,7 +10148,7 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'ComboboxSection';
+const COMPONENT_NAME$18 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
@@ -10192,7 +10192,7 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ListSection';
+const COMPONENT_NAME$17 = 'ListSection';
 
 /**
  * Component default class name and class prefix.
@@ -10248,7 +10248,7 @@ const ListSection$1 = props => {
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$16;
+ListSection$1.displayName = COMPONENT_NAME$17;
 ListSection$1.className = CLASSNAME$14;
 ListSection$1.defaultProps = DEFAULT_PROPS$X;
 
@@ -10272,7 +10272,7 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$16;
+ListSection.displayName = COMPONENT_NAME$17;
 ListSection.className = CLASSNAME$14;
 ListSection.defaultProps = DEFAULT_PROPS$X;
 
@@ -10322,13 +10322,13 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$17;
+ComboboxSection.displayName = COMPONENT_NAME$18;
 ComboboxSection.className = CLASSNAME$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'ComboboxState';
+const COMPONENT_NAME$16 = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
@@ -10509,7 +10509,7 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'GenericBlock';
+const COMPONENT_NAME$15 = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
@@ -10660,7 +10660,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$14;
+BaseGenericBlock.displayName = COMPONENT_NAME$15;
 BaseGenericBlock.className = CLASSNAME$12;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$W;
 const GenericBlock = Object.assign(BaseGenericBlock, {
@@ -10740,13 +10740,13 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$15;
+ComboboxState.displayName = COMPONENT_NAME$16;
 ComboboxState.className = CLASSNAME$13;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'ListDivider';
+const COMPONENT_NAME$14 = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
@@ -10778,7 +10778,7 @@ const ListDivider$1 = props => {
     className: classnames(className, CLASSNAME$11)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$13;
+ListDivider$1.displayName = COMPONENT_NAME$14;
 ListDivider$1.className = CLASSNAME$11;
 ListDivider$1.defaultProps = DEFAULT_PROPS$V;
 
@@ -10800,7 +10800,7 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$13;
+ListDivider.displayName = COMPONENT_NAME$14;
 ListDivider.className = CLASSNAME$11;
 ListDivider.defaultProps = DEFAULT_PROPS$V;
 
@@ -10851,7 +10851,7 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'CommentBlock';
+const COMPONENT_NAME$13 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
@@ -10962,7 +10962,7 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$12;
+CommentBlock.displayName = COMPONENT_NAME$13;
 CommentBlock.className = CLASSNAME$10;
 CommentBlock.defaultProps = DEFAULT_PROPS$U;
 
@@ -10984,7 +10984,7 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'DatePicker';
+const COMPONENT_NAME$12 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
@@ -11221,7 +11221,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'DatePickerControlled';
+const COMPONENT_NAME$11 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11411,7 +11411,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$10;
+DatePickerControlled.displayName = COMPONENT_NAME$11;
 DatePickerControlled.className = CLASSNAME$$;
 
 /**
@@ -11454,7 +11454,7 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$11;
+DatePicker.displayName = COMPONENT_NAME$12;
 DatePicker.className = CLASSNAME$$;
 
 const useBooleanState = defaultValue => {
@@ -11468,7 +11468,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'DatePickerField';
+const COMPONENT_NAME$10 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11557,7 +11557,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$$;
+DatePickerField.displayName = COMPONENT_NAME$10;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11850,13 +11850,23 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
+/**
+ * Dialog label id key in IdsRegistry
+ */
+const DIALOG_LABEL_KEY = 'dialog-label';
+
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'Dialog';
+const COMPONENT_NAME$$ = 'Dialog';
 
 /**
- * Component default class name and class prefix.
+ * `DialogHeading` component display name.
+ */
+const DIALOG_HEADING_COMPONENT_NAME = 'DialogHeading';
+
+/**
+ * Component default class name and class prefix. Shared by the shell and the container modules.
  */
 const CLASSNAME$_ = 'lumx-dialog';
 const {
@@ -11872,46 +11882,25 @@ const DEFAULT_PROPS$T = {
 };
 
 /**
- * Dialog component.
+ * Dialog shell: overlay + context providers (theme, heading level, ids registry).
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const Dialog$1 = props => {
+const DialogShell = props => {
   const {
     className,
     ref,
-    header,
-    forceFooterDivider,
-    forceHeaderDivider,
-    footer,
-    isLoading,
     isOpen,
-    handleClose,
-    contentRef,
+    isLoading,
+    isVisible,
     size = DEFAULT_PROPS$T.size,
     zIndex,
-    dialogProps,
-    headerChildContent,
-    isVisible,
+    children,
     Portal,
     HeadingLevelProvider,
     ThemeProvider,
-    ClickAwayProvider,
-    shouldPreventCloseOnClickAway,
-    clickAwayRefs,
-    rootRef,
-    wrapperRef,
-    hasTopIntersection,
-    headerChildProps,
-    setSentinelTop,
-    content,
-    setSentinelBottom,
-    footerChildContent,
-    footerChildProps,
-    ProgressCircular,
-    hasBottomIntersection,
+    IdsRegistryProvider,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Portal, {
@@ -11933,50 +11922,8 @@ const Dialog$1 = props => {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
-          children: /*#__PURE__*/jsx("div", {
-            className: element$B('container'),
-            role: "dialog",
-            "aria-modal": "true",
-            ...dialogProps,
-            children: /*#__PURE__*/jsx(ClickAwayProvider, {
-              callback: !shouldPreventCloseOnClickAway && handleClose,
-              childrenRefs: clickAwayRefs,
-              parentRef: rootRef,
-              children: /*#__PURE__*/jsxs("section", {
-                className: element$B('wrapper'),
-                ref: wrapperRef,
-                children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
-                  ...headerChildProps,
-                  className: classnames(element$B('header', {
-                    'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
-                  }), headerChildProps?.className),
-                  children: [header, headerChildContent]
-                }), /*#__PURE__*/jsxs("div", {
-                  ref: contentRef,
-                  className: element$B('content'),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: element$B('sentinel', {
-                      top: true
-                    }),
-                    ref: setSentinelTop
-                  }), content, /*#__PURE__*/jsx("div", {
-                    className: element$B('sentinel', {
-                      bottom: true
-                    }),
-                    ref: setSentinelBottom
-                  })]
-                }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
-                  ...footerChildProps,
-                  className: classnames(element$B('footer', {
-                    'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
-                  }), footerChildProps?.className),
-                  children: [footer, footerChildContent]
-                }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: element$B('progress-overlay'),
-                  children: /*#__PURE__*/jsx(ProgressCircular, {})
-                })]
-              })
-            })
+          children: /*#__PURE__*/jsx(IdsRegistryProvider, {
+            children: children
           })
         })
       })]
@@ -11985,8 +11932,256 @@ const Dialog$1 = props => {
 };
 
 /**
- * Defines the props of the component.
+ * Picks the accessible-name prop (`aria-label` or `aria-labelledby`).
+ */
+function resolveAccessibleNameProps(ariaLabel, ariaLabelledBy) {
+  if (ariaLabel) {
+    return {
+      'aria-label': ariaLabel
+    };
+  }
+  if (ariaLabelledBy) {
+    return {
+      'aria-labelledby': ariaLabelledBy
+    };
+  }
+  return undefined;
+}
+
+/**
+ * Props of the dialog content: the `role="dialog"` element (which carries `aria-labelledby`) and
+ * everything inside it (header, body, footer). It is meant to be rendered by a framework component
+ * that has resolved `labelId` from the ids registry.
+ */
+
+/**
+ * Dialog content: the `role="dialog"` element + header/body/footer.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+const DialogContent$1 = props => {
+  const {
+    labelId,
+    dialogProps,
+    handleClose,
+    shouldPreventCloseOnClickAway,
+    clickAwayRefs,
+    rootRef,
+    wrapperRef,
+    contentRef,
+    header,
+    headerChildProps,
+    headerChildContent,
+    forceHeaderDivider,
+    hasTopIntersection,
+    content,
+    setSentinelTop,
+    setSentinelBottom,
+    footer,
+    footerChildProps,
+    footerChildContent,
+    forceFooterDivider,
+    hasBottomIntersection,
+    isLoading,
+    ProgressCircular,
+    ClickAwayProvider
+  } = props;
+
+  // Strip both out of `dialogProps` before spreading it: `resolveAccessibleNameProps` picks at most one, and
+  // leaving the other in place would let it survive underneath the spread below.
+  const {
+    'aria-label': dialogAriaLabel,
+    'aria-labelledby': dialogAriaLabelledBy,
+    ...restDialogProps
+  } = dialogProps ?? {};
+  return /*#__PURE__*/jsx("div", {
+    className: element$B('container'),
+    role: "dialog",
+    "aria-modal": "true",
+    ...restDialogProps,
+    ...resolveAccessibleNameProps(dialogAriaLabel, dialogAriaLabelledBy || labelId),
+    children: /*#__PURE__*/jsx(ClickAwayProvider, {
+      callback: !shouldPreventCloseOnClickAway && handleClose,
+      childrenRefs: clickAwayRefs,
+      parentRef: rootRef,
+      children: /*#__PURE__*/jsxs("section", {
+        className: element$B('wrapper'),
+        ref: wrapperRef,
+        children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
+          ...headerChildProps,
+          className: classnames(element$B('header', {
+            'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
+          }), headerChildProps?.className),
+          children: [header, headerChildContent]
+        }), /*#__PURE__*/jsxs("div", {
+          ref: contentRef,
+          className: element$B('content'),
+          children: [/*#__PURE__*/jsx("div", {
+            className: element$B('sentinel', {
+              top: true
+            }),
+            ref: setSentinelTop
+          }), content, /*#__PURE__*/jsx("div", {
+            className: element$B('sentinel', {
+              bottom: true
+            }),
+            ref: setSentinelBottom
+          })]
+        }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
+          ...footerChildProps,
+          className: classnames(element$B('footer', {
+            'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
+          }), footerChildProps?.className),
+          children: [footer, footerChildContent]
+        }), isLoading && /*#__PURE__*/jsx("div", {
+          className: element$B('progress-overlay'),
+          children: /*#__PURE__*/jsx(ProgressCircular, {})
+        })]
+      })
+    })
+  });
+};
+
+/**
+ * Internal "ids registry" contract shared between framework wrappers (`@lumx/react`, `@lumx/vue`).
+ */
+
+/**
+ * Create a standalone ids registry.
+ *
+ * Can be used to store ids for 'aria-labelledby' or 'aria-describedby'. Registrations under the same key are
+ * kept as a stack (most recently registered wins); a registrant clearing itself only affects the top of the
+ * stack if it put itself there, so an older still-registered registrant is restored instead of the key going
+ * empty.
+ */
+function createIdsRegistry() {
+  const stacks = new Map();
+  const listeners = new Map();
+  const topId = key => {
+    const stack = stacks.get(key);
+    return stack?.[stack.length - 1]?.id;
+  };
+  return {
+    getId: topId,
+    setId(key, token, id) {
+      const previousTopId = topId(key);
+      const stack = stacks.get(key) ?? [];
+      const index = stack.findIndex(entry => entry.token === token);
+      if (index !== -1) stack.splice(index, 1);
+      if (id !== undefined) stack.push({
+        token,
+        id
+      });
+      if (stack.length) {
+        stacks.set(key, stack);
+      } else {
+        stacks.delete(key);
+      }
+      if (topId(key) === previousTopId) return;
+      const set = listeners.get(key);
+      if (set) {
+        // Copy: a listener may unsubscribe (e.g. on unmount) during this loop.
+        const frozenListeners = [...set];
+        for (const listener of frozenListeners) {
+          listener(key);
+        }
+      }
+    },
+    subscribe(key, listener) {
+      let set = listeners.get(key);
+      if (!set) {
+        set = new Set();
+        listeners.set(key, set);
+      }
+      set.add(listener);
+      return () => {
+        set.delete(listener);
+        if (set.size === 0) listeners.delete(key);
+      };
+    }
+  };
+}
+
+/**
+ * Internal "ids registry" context.
+ *
+ * Not exported from the package barrel - lets a container expose ids registered by its descendants
+ * under well-known names, without either side knowing about the other upfront (e.g. to wire up
+ * `aria-labelledby`/`aria-describedby` between components that don't know about each other).
+ *
+ * `undefined` outside of any provider - `useRegisterId`/`useRegisteredId` are no-ops in that case.
+ *
+ * See `IdsRegistry` in `@lumx/core` for the shared contract.
+ */
+const IdsRegistryContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Provides a fresh ids registry to its subtree. The registry instance is stable for the lifetime of
+ * the provider, so registering/reading an id never re-renders the whole subtree - only the
+ * components subscribed (via `useRegisteredId`) to the name that changed.
  */
+const IdsRegistryProvider = ({
+  children
+}) => {
+  const [registry] = useState(createIdsRegistry);
+  return /*#__PURE__*/jsx(IdsRegistryContext.Provider, {
+    value: registry,
+    children: children
+  });
+};
+
+/**
+ * Register `id` under `key` in the enclosing ids registry on mount, and clear it on unmount.
+ * Last registered wins; if another registrant is still mounted under the same key, clearing this
+ * one falls back to it instead of leaving the key empty.
+ *
+ * @param key Registry key to store the id under.
+ * @param id  Id of the element to register.
+ */
+function useRegisterId(key, id) {
+  const registry = useContext(IdsRegistryContext);
+  const token = useRef({}).current;
+  useEffect(() => {
+    registry?.setId(key, token, id);
+    return () => registry?.setId(key, token, undefined);
+  }, [registry, key, id, token]);
+}
+
+/**
+ * Subscribe to the id currently registered under `key` in the enclosing ids registry. Re-renders
+ * the calling component only when that key's id changes.
+ *
+ * @param  key Registry key to read.
+ * @return The registered id, or `undefined` when none is registered / outside any provider.
+ */
+function useRegisteredId(key) {
+  const registry = useContext(IdsRegistryContext);
+  const [id, setId] = useState(() => registry?.getId(key));
+  useEffect(() => {
+    if (!registry) return undefined;
+    // Sync once in case the id was registered between render and this effect running.
+    setId(registry.getId(key));
+    return registry.subscribe(key, () => setId(registry.getId(key)));
+  }, [registry, key]);
+  return id;
+}
+
+/**
+ * Renders the core `DialogContent`, resolving its `aria-labelledby` from the ids registry.
+ *
+ * Must render as a descendant of the `IdsRegistryProvider` set up by the core `DialogShell` (which is
+ * why it is its own component: the subscription hook needs to run below the provider). Internal to the
+ * dialog family - not exported from the package barrel.
+ */
+const DialogContent = props => {
+  const labelId = useRegisteredId(DIALOG_LABEL_KEY);
+  return DialogContent$1({
+    ...props,
+    labelId
+  });
+};
+DialogContent.displayName = 'DialogContent';
 
 const isHeader$1 = isComponent('header');
 const isFooter$1 = isComponent('footer');
@@ -12007,11 +12202,7 @@ const DEFAULT_PROPS$S = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Dialog = forwardRef((props, ref) => {
-  if (!DOCUMENT) {
-    // Can't render in SSR.
-    return null;
-  }
+const DialogBody = forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -12036,10 +12227,7 @@ const Dialog = forwardRef((props, ref) => {
     preventCloseOnEscape,
     ...forwardedProps
   } = props;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   React__default.useEffect(() => {
     if (isOpen !== previousOpen.current) {
       previousOpen.current = isOpen;
@@ -12051,30 +12239,18 @@ const Dialog = forwardRef((props, ref) => {
     }
   }, [isOpen, parentElement]);
   const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const wrapperRef = useRef(null);
   /**
    * Since the `contentRef` comes from the parent and is optional,
    * we need to create a stable contentRef that will always be available.
    */
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const localContentRef = useRef(null);
   // Handle focus trap.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [sentinelTop, setSentinelTop] = useState(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [sentinelBottom, setSentinelBottom] = useState(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {
     threshold: [0, 1]
   });
@@ -12082,62 +12258,239 @@ const Dialog = forwardRef((props, ref) => {
   const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);
 
   // Separate header, footer and dialog content from children.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [[headerChild], [footerChild], content] = useMemo(() => partitionMulti(Children.toArray(children), [isHeader$1, isFooter$1]), [children]);
   const headerChildProps = headerChild?.props;
   const headerChildContent = headerChildProps?.children;
   const footerChildProps = footerChild?.props;
   const footerChildContent = footerChildProps?.children;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const clickAwayRefs = useRef([wrapperRef]);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const rootRef = useRef(null);
+  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
+  const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
+  const isMounted = isOpen || isVisible || closeMode === 'hide';
+  if (!isMounted) return null;
+  return DialogShell({
+    Portal,
+    HeadingLevelProvider,
+    ThemeProvider,
+    IdsRegistryProvider,
+    className,
+    isLoading,
+    isOpen,
+    isVisible,
+    size,
+    zIndex,
+    ref: mergeRefs(rootRef, ref),
+    ...forwardedProps,
+    children: /*#__PURE__*/jsx(DialogContent, {
+      ClickAwayProvider: ClickAwayProvider,
+      ProgressCircular: ProgressCircular,
+      clickAwayRefs: clickAwayRefs,
+      content: content,
+      contentRef: mergeRefs(localContentRef, contentRef),
+      dialogProps: dialogProps,
+      footer: footer,
+      footerChildContent: footerChildContent,
+      footerChildProps: footerChildProps,
+      forceFooterDivider: forceFooterDivider,
+      forceHeaderDivider: forceHeaderDivider,
+      handleClose: onClose,
+      hasBottomIntersection: hasBottomIntersection,
+      hasTopIntersection: hasTopIntersection,
+      header: header,
+      headerChildContent: headerChildContent,
+      headerChildProps: headerChildProps,
+      isLoading: isLoading,
+      rootRef: rootRef,
+      setSentinelBottom: setSentinelBottom,
+      setSentinelTop: setSentinelTop,
+      shouldPreventCloseOnClickAway: shouldPreventCloseOnClickAway,
+      wrapperRef: wrapperRef
+    })
+  });
+});
+DialogBody.displayName = 'DialogBody';
+const Dialog = forwardRef((props, ref) => {
+  if (!DOCUMENT) {
+    // Can't render in SSR.
+    return null;
+  }
+  return /*#__PURE__*/jsx(DialogBody, {
+    ...props,
+    ref: ref
+  });
+});
+Dialog.displayName = COMPONENT_NAME$$;
+Dialog.className = CLASSNAME$_;
+Dialog.defaultProps = DEFAULT_PROPS$S;
+
+/** The maximum authorized heading level. */
+const MAX_HEADING_LEVEL = 6;
+
+/**
+ * Typography to use by default depending on the heading level.
+ */
+const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+  h1: Typography.display1,
+  h2: Typography.headline,
+  h3: Typography.title,
+  h4: Typography.subtitle2,
+  h5: Typography.subtitle1,
+  h6: Typography.body2
+};
+const defaultContext = {
+  level: 1,
+  headingElement: 'h1'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$_ = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$Z = 'lumx-heading';
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$R = {};
+
+/**
+ * Get Heading component common props
+ *
+ * @param props                 Component props.
+ * @param contextHeadingElement Heading element from context.
+ * @return Common Props
+ */
+const getHeadingProps = (props, contextHeadingElement) => {
+  const {
+    as,
+    className,
+    typography,
+    ...otherProps
+  } = props;
+  const computedHeadingElement = as || contextHeadingElement || 'h1';
+  return {
+    ...otherProps,
+    as: computedHeadingElement,
+    className: classnames(className, CLASSNAME$Z),
+    typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
+  };
+};
+
+const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
+
+const useHeadingLevel = () => {
+  const {
+    level = 1,
+    headingElement = 'h1'
+  } = React__default.useContext(HeadingLevelContext);
+  return {
+    level,
+    headingElement
+  };
+};
+
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+const Heading = forwardRef((props, ref) => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const {
+    headingElement
+  } = useHeadingLevel();
+  const headingProps = getHeadingProps(otherProps, headingElement);
+  return /*#__PURE__*/jsx(Text, {
+    ref: ref,
+    ...headingProps,
+    children: children
+  });
+});
+Heading.displayName = COMPONENT_NAME$_;
+Heading.className = CLASSNAME$Z;
+Heading.defaultProps = DEFAULT_PROPS$R;
+
+/**
+ * Computes the next heading level based on the optional prop level or the parent context level.
+ *
+ * @param levelProp - The explicit level provided via props (optional).
+ * @param parentLevel - The level from the parent context.
+ * @returns The calculated heading level, clamped to the maximum allowed level.
+ */
+const computeHeadingLevel = (levelProp, parentLevel) => {
+  const nextLevel = levelProp || parentLevel + 1;
+  return nextLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : nextLevel;
+};
+
+/**
+ * Provide a new heading level context.
+ */
+const HeadingLevelProvider = ({
+  children,
+  level
+}) => {
+  const {
+    level: contextLevel
+  } = useHeadingLevel();
+  const nextLevel = computeHeadingLevel(level, contextLevel);
+  const headingElement = `h${nextLevel}`;
+  return /*#__PURE__*/jsx(HeadingLevelContext.Provider, {
+    value: {
+      level: nextLevel,
+      headingElement
+    },
+    children: children
+  });
+};
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
-  const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
-  const isMounted = isOpen || isVisible || closeMode === 'hide';
-  return isMounted ? Dialog$1({
-    ClickAwayProvider,
-    HeadingLevelProvider,
-    Portal,
-    ThemeProvider,
-    className,
-    clickAwayRefs,
-    content,
-    contentRef: mergeRefs(localContentRef, contentRef),
-    dialogProps,
-    footer,
-    footerChildContent,
-    footerChildProps,
-    forceFooterDivider,
-    forceHeaderDivider,
-    handleClose: onClose,
-    hasBottomIntersection,
-    hasTopIntersection,
-    header,
-    headerChildContent,
-    ProgressCircular,
-    headerChildProps,
-    isLoading,
-    isOpen,
-    isVisible,
-    ref: mergeRefs(rootRef, ref),
-    rootRef,
-    setSentinelBottom,
-    setSentinelTop,
-    shouldPreventCloseOnClickAway,
-    size,
-    wrapperRef,
-    zIndex,
+/**
+ * Names the enclosing dialog-like container (`Dialog`, `Lightbox`, `PopoverDialog`, ...).
+ *
+ * Thin wrapper over `Heading` that generates its own id (or uses the consumer-supplied `id`),
+ * and registers it with the nearest ids registry on mount so the container can link itself to
+ * this heading via `aria-labelledby`. Deregisters on unmount.
+ *
+ * Defaults its typography to `Typography.title` (overridable via the `typography` prop).
+ *
+ * If two `DialogHeading`s are rendered within the same container, the last one registered wins.
+ *
+ * @example
+ * <Dialog isOpen={isOpen}>
+ *     <header>
+ *         <Toolbar label={<DialogHeading>My dialog</DialogHeading>} />
+ *     </header>
+ *     ...
+ * </Dialog>
+ */
+const DialogHeading = forwardRef((props, ref) => {
+  const {
+    id,
+    typography = Typography$1.title,
     ...forwardedProps
-  }) : null;
+  } = props;
+  const generatedId = useId();
+  const headingId = id || generatedId;
+  useRegisterId(DIALOG_LABEL_KEY, headingId);
+  return /*#__PURE__*/jsx(Heading, {
+    ref: ref,
+    id: headingId,
+    typography: typography,
+    ...forwardedProps
+  });
 });
-Dialog.displayName = COMPONENT_NAME$_;
-Dialog.className = CLASSNAME$_;
-Dialog.defaultProps = DEFAULT_PROPS$S;
+DialogHeading.displayName = DIALOG_HEADING_COMPONENT_NAME;
 
 /**
  * Component display name.
@@ -12147,10 +12500,10 @@ const COMPONENT_NAME$Z = 'Divider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-divider';
+const CLASSNAME$Y = 'lumx-divider';
 const {
   block: block$L
-} = bem(CLASSNAME$Z);
+} = bem(CLASSNAME$Y);
 
 /**
  * Divider component.
@@ -12181,7 +12534,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Divider component.
@@ -12203,8 +12556,8 @@ const Divider = forwardRef((props, ref) => {
   });
 });
 Divider.displayName = COMPONENT_NAME$Z;
-Divider.className = CLASSNAME$Z;
-Divider.defaultProps = DEFAULT_PROPS$R;
+Divider.className = CLASSNAME$Y;
+Divider.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
@@ -12214,10 +12567,10 @@ const COMPONENT_NAME$Y = 'DragHandle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-drag-handle';
+const CLASSNAME$X = 'lumx-drag-handle';
 const {
   block: block$K
-} = bem(CLASSNAME$Y);
+} = bem(CLASSNAME$X);
 
 /**
  * DragHandle component.
@@ -12253,7 +12606,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * DragHandle component.
@@ -12275,8 +12628,8 @@ const DragHandle = forwardRef((props, ref) => {
   });
 });
 DragHandle.displayName = COMPONENT_NAME$Y;
-DragHandle.className = CLASSNAME$Y;
-DragHandle.defaultProps = DEFAULT_PROPS$Q;
+DragHandle.className = CLASSNAME$X;
+DragHandle.defaultProps = DEFAULT_PROPS$P;
 
 const INITIAL_INDEX = -1;
 
@@ -12470,7 +12823,7 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1j;
+InternalList.displayName = COMPONENT_NAME$1k;
 InternalList.className = CLASSNAME$1h;
 InternalList.defaultProps = DEFAULT_PROPS$$;
 const List = Object.assign(InternalList, {
@@ -12526,16 +12879,16 @@ const COMPONENT_NAME$X = 'Dropdown';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-dropdown';
+const CLASSNAME$W = 'lumx-dropdown';
 const {
   block: block$J,
   element: element$A
-} = classNames.bem(CLASSNAME$X);
+} = classNames.bem(CLASSNAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {
+const DEFAULT_PROPS$O = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -12559,18 +12912,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    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,
+    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,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$P.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$O.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -12615,8 +12968,8 @@ const Dropdown = forwardRef((props, ref) => {
   }) : null;
 });
 Dropdown.displayName = COMPONENT_NAME$X;
-Dropdown.className = CLASSNAME$X;
-Dropdown.defaultProps = DEFAULT_PROPS$P;
+Dropdown.className = CLASSNAME$W;
+Dropdown.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
@@ -12626,16 +12979,16 @@ const COMPONENT_NAME$W = 'ExpansionPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-expansion-panel';
+const CLASSNAME$V = 'lumx-expansion-panel';
 const {
   block: block$I,
   element: element$z
-} = bem(CLASSNAME$W);
+} = bem(CLASSNAME$V);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$N = {
   closeMode: 'unmount'
 };
 
@@ -12748,7 +13101,7 @@ const isFooter = isComponent('footer');
 const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    closeMode = DEFAULT_PROPS$O.closeMode,
+    closeMode = DEFAULT_PROPS$N.closeMode,
     children: anyChildren,
     isOpen,
     label,
@@ -12820,16 +13173,16 @@ const ExpansionPanel = forwardRef((props, ref) => {
   });
 });
 ExpansionPanel.displayName = COMPONENT_NAME$W;
-ExpansionPanel.className = CLASSNAME$W;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
+ExpansionPanel.className = CLASSNAME$V;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
 
 const COMPONENT_NAME$V = 'Flag';
-const CLASSNAME$V = 'lumx-flag';
-const DEFAULT_PROPS$N = {};
+const CLASSNAME$U = 'lumx-flag';
+const DEFAULT_PROPS$M = {};
 const {
   block: block$H,
   element: element$y
-} = bem(CLASSNAME$V);
+} = bem(CLASSNAME$U);
 
 /**
  * Flag component.
@@ -12888,144 +13241,13 @@ const Flag = forwardRef((props, ref) => {
   });
 });
 Flag.displayName = COMPONENT_NAME$V;
-Flag.className = CLASSNAME$V;
-Flag.defaultProps = DEFAULT_PROPS$N;
-
-/** The maximum authorized heading level. */
-const MAX_HEADING_LEVEL = 6;
-
-/**
- * Typography to use by default depending on the heading level.
- */
-const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
-  h1: Typography.display1,
-  h2: Typography.headline,
-  h3: Typography.title,
-  h4: Typography.subtitle2,
-  h5: Typography.subtitle1,
-  h6: Typography.body2
-};
-const defaultContext = {
-  level: 1,
-  headingElement: 'h1'
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$U = 'Heading';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$U = 'lumx-heading';
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$M = {};
-
-/**
- * Get Heading component common props
- *
- * @param props                 Component props.
- * @param contextHeadingElement Heading element from context.
- * @return Common Props
- */
-const getHeadingProps = (props, contextHeadingElement) => {
-  const {
-    as,
-    className,
-    typography,
-    ...otherProps
-  } = props;
-  const computedHeadingElement = as || contextHeadingElement || 'h1';
-  return {
-    ...otherProps,
-    as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$U),
-    typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
-  };
-};
-
-const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
-
-const useHeadingLevel = () => {
-  const {
-    level = 1,
-    headingElement = 'h1'
-  } = React__default.useContext(HeadingLevelContext);
-  return {
-    level,
-    headingElement
-  };
-};
-
-/**
- * Renders a heading component.
- * Extends the `Text` Component with the heading level automatically computed based on
- * the current level provided by the context.
- */
-const Heading = forwardRef((props, ref) => {
-  const {
-    children,
-    ...otherProps
-  } = props;
-  const {
-    headingElement
-  } = useHeadingLevel();
-  const headingProps = getHeadingProps(otherProps, headingElement);
-  return /*#__PURE__*/jsx(Text, {
-    ref: ref,
-    ...headingProps,
-    children: children
-  });
-});
-Heading.displayName = COMPONENT_NAME$U;
-Heading.className = CLASSNAME$U;
-Heading.defaultProps = DEFAULT_PROPS$M;
-
-/**
- * Computes the next heading level based on the optional prop level or the parent context level.
- *
- * @param levelProp - The explicit level provided via props (optional).
- * @param parentLevel - The level from the parent context.
- * @returns The calculated heading level, clamped to the maximum allowed level.
- */
-const computeHeadingLevel = (levelProp, parentLevel) => {
-  const nextLevel = levelProp || parentLevel + 1;
-  return nextLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : nextLevel;
-};
-
-/**
- * Provide a new heading level context.
- */
-const HeadingLevelProvider = ({
-  children,
-  level
-}) => {
-  const {
-    level: contextLevel
-  } = useHeadingLevel();
-  const nextLevel = computeHeadingLevel(level, contextLevel);
-  const headingElement = `h${nextLevel}`;
-  return /*#__PURE__*/jsx(HeadingLevelContext.Provider, {
-    value: {
-      level: nextLevel,
-      headingElement
-    },
-    children: children
-  });
-};
+Flag.className = CLASSNAME$U;
+Flag.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Grid';
+const COMPONENT_NAME$U = 'Grid';
 
 /**
  * Component default class name and class prefix.
@@ -13074,14 +13296,14 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$T;
+Grid.displayName = COMPONENT_NAME$U;
 Grid.className = CLASSNAME$T;
 Grid.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'GridItem';
+const COMPONENT_NAME$T = 'GridItem';
 
 /**
  * Component default class name and class prefix.
@@ -13118,13 +13340,13 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$S;
+GridItem.displayName = COMPONENT_NAME$T;
 GridItem.className = CLASSNAME$S;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'GridColumn';
+const COMPONENT_NAME$S = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
@@ -13169,7 +13391,7 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$R;
+GridColumn$1.displayName = COMPONENT_NAME$S;
 GridColumn$1.className = CLASSNAME$R;
 GridColumn$1.defaultProps = DEFAULT_PROPS$K;
 
@@ -13199,7 +13421,7 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$R;
+GridColumn.displayName = COMPONENT_NAME$S;
 GridColumn.className = CLASSNAME$R;
 GridColumn.defaultProps = DEFAULT_PROPS$J;
 
@@ -13222,7 +13444,7 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ImageBlock';
+const COMPONENT_NAME$R = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
@@ -13423,14 +13645,14 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$Q;
+ImageBlock.displayName = COMPONENT_NAME$R;
 ImageBlock.className = CLASSNAME$Q;
 ImageBlock.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'ImageLightbox';
+const COMPONENT_NAME$Q = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
@@ -14148,7 +14370,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$P;
+Inner.displayName = COMPONENT_NAME$Q;
 Inner.className = CLASSNAME$P;
 
 /**
@@ -14165,7 +14387,7 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'InlineList';
+const COMPONENT_NAME$P = 'InlineList';
 
 /**
  * Component default class name and class prefix.
@@ -14226,7 +14448,7 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$O;
+InlineList$1.displayName = COMPONENT_NAME$P;
 InlineList$1.className = CLASSNAME$O;
 InlineList$1.defaultProps = DEFAULT_PROPS$H;
 
@@ -14252,7 +14474,7 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$O;
+InlineList.displayName = COMPONENT_NAME$P;
 InlineList.className = CLASSNAME$O;
 InlineList.defaultProps = DEFAULT_PROPS$H;
 
@@ -14297,7 +14519,7 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'Lightbox';
+const COMPONENT_NAME$O = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
@@ -14328,6 +14550,7 @@ const Lightbox$1 = props => {
     handleClose,
     parentElement,
     focusElement,
+    labelId,
     preventAutoClose,
     theme,
     zIndex,
@@ -14348,8 +14571,7 @@ const Lightbox$1 = props => {
     children: /*#__PURE__*/jsxs("div", {
       ref: ref,
       ...forwardedProps,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
+      ...resolveAccessibleNameProps(ariaLabel, ariaLabelledBy || labelId),
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
@@ -14398,13 +14620,13 @@ const Lightbox$1 = props => {
  */
 
 /**
- * Lightbox component.
+ * Renders the core Lightbox UI, resolving its `aria-labelledby` from the ids registry.
  *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * Must render as a descendant of the `IdsRegistryProvider` set up by `Lightbox` (which is why it is
+ * its own component: the subscription hook needs to run below the provider). Internal to the
+ * lightbox family - not exported from the package barrel.
  */
-const Lightbox = forwardRef((props, ref) => {
+const LightboxContent = forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -14418,36 +14640,19 @@ const Lightbox = forwardRef((props, ref) => {
     zIndex,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT) {
-    // Can't render in SSR.
-    return null;
-  }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const childrenRef = useRef(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const wrapperRef = useRef(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const closeButtonRef = useRef(null);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useDisableBodyScroll(isOpen && wrapperRef.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
 
   // Handle focus trap.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useFocusTrap(
   // Focus trap zone
   isOpen && wrapperRef.current,
   // Focus element (fallback on close button and then on the dialog)
   focusElement?.current || closeButtonRef.current || wrapperRef.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = useRef(isOpen);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (isOpen !== previousOpen.current) {
       previousOpen.current = isOpen;
@@ -14460,11 +14665,9 @@ const Lightbox = forwardRef((props, ref) => {
   }, [isOpen, parentElement]);
 
   // Close lightbox on escape key pressed.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useCallbackOnEscape(onClose);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallbackOnEscape(onClose, isOpen && !preventAutoClose);
   const clickAwayRefs = useRef([wrapperRef]);
+  const labelId = useRegisteredId(DIALOG_LABEL_KEY);
   if (!isOpen && !isVisible) return null;
   return Lightbox$1({
     ClickAwayProvider,
@@ -14482,6 +14685,7 @@ const Lightbox = forwardRef((props, ref) => {
     focusElement,
     isOpen,
     isVisible,
+    labelId,
     ref: mergeRefs(ref, wrapperRef),
     theme,
     zIndex,
@@ -14490,7 +14694,27 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Lightbox.displayName = COMPONENT_NAME$N;
+
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Lightbox = forwardRef((props, ref) => {
+  if (!DOCUMENT) {
+    // Can't render in SSR.
+    return null;
+  }
+  return /*#__PURE__*/jsx(IdsRegistryProvider, {
+    children: /*#__PURE__*/jsx(LightboxContent, {
+      ...props,
+      ref: ref
+    })
+  });
+});
+Lightbox.displayName = COMPONENT_NAME$O;
 Lightbox.className = CLASSNAME$N;
 
 /**
@@ -14500,7 +14724,7 @@ Lightbox.className = CLASSNAME$N;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'Link';
+const COMPONENT_NAME$N = 'Link';
 
 /**
  * Component default class name and class prefix.
@@ -14593,13 +14817,13 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$M;
+Link.displayName = COMPONENT_NAME$N;
 Link.className = CLASSNAME$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'LinkPreview';
+const COMPONENT_NAME$M = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
@@ -14734,7 +14958,7 @@ const LinkPreview = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$L;
+LinkPreview.displayName = COMPONENT_NAME$M;
 LinkPreview.className = CLASSNAME$L;
 LinkPreview.defaultProps = DEFAULT_PROPS$G;
 
@@ -14767,7 +14991,7 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1g,
+  displayName: COMPONENT_NAME$1h,
   className: CLASSNAME$1e,
   defaultProps: DEFAULT_PROPS$Z
 });
@@ -14807,7 +15031,7 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$1h;
+_ListItem.displayName = COMPONENT_NAME$1i;
 _ListItem.className = CLASSNAME$1f;
 _ListItem.defaultProps = DEFAULT_PROPS$_;
 
@@ -14822,7 +15046,7 @@ const ListItem = Object.assign(_ListItem, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'ListSubheader';
+const COMPONENT_NAME$L = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
@@ -14850,7 +15074,7 @@ const ListSubheader = forwardRef((props, ref) => {
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$K;
+ListSubheader.displayName = COMPONENT_NAME$L;
 ListSubheader.className = CLASSNAME$K;
 
 const DEFAULT_PROPS$F = {
@@ -14863,7 +15087,7 @@ const DEFAULT_PROPS$F = {
 
 /** Discriminated union of MenuButton props across all trigger variants. */
 
-const COMPONENT_NAME$J = 'MenuButton';
+const COMPONENT_NAME$K = 'MenuButton';
 
 /** Menu button core template (composition of menu provider, trigger, popover and list) */
 const MenuButton$1 = (props, {
@@ -15291,7 +15515,7 @@ function MenuProvider(props) {
 }
 MenuProvider.displayName = 'Menu.Provider';
 
-const COMPONENT_NAME$I = 'MenuTrigger';
+const COMPONENT_NAME$J = 'MenuTrigger';
 const CLASSNAME$J = 'lumx-menu-trigger';
 
 /** MenuTrigger core template. Renders `Trigger` with disclosure ARIA attributes. */
@@ -15392,11 +15616,11 @@ const MenuTrigger = Object.assign(forwardRefPolymorphic((props, ref) => {
     Trigger: TriggerComp
   });
 }), {
-  displayName: COMPONENT_NAME$I,
+  displayName: COMPONENT_NAME$J,
   className: CLASSNAME$J
 });
 
-const COMPONENT_NAME$H = 'MenuPopover';
+const COMPONENT_NAME$I = 'MenuPopover';
 const CLASSNAME$I = 'lumx-menu-popover';
 const {
   block: block$z,
@@ -15469,12 +15693,12 @@ const MenuPopover = props => {
     FlexBox
   });
 };
-MenuPopover.displayName = COMPONENT_NAME$H;
+MenuPopover.displayName = COMPONENT_NAME$I;
 MenuPopover.className = CLASSNAME$I;
 
 /** Menu list props. */
 
-const COMPONENT_NAME$G = 'Menu';
+const COMPONENT_NAME$H = 'Menu';
 const CLASSNAME$H = 'lumx-menu';
 
 /** MenuList core template. Wraps `List` with menu-specific class and ARIA labelling. */
@@ -15537,7 +15761,7 @@ const MenuList = forwardRef((props, ref) => {
     children: isOpen ? children : null
   });
 });
-MenuList.displayName = COMPONENT_NAME$G;
+MenuList.displayName = COMPONENT_NAME$H;
 MenuList.className = CLASSNAME$H;
 
 /** Props that MenuButton explicitly declares. */
@@ -15585,14 +15809,14 @@ const MenuButton = forwardRef((props, ref) => {
     MenuList
   });
 });
-MenuButton.displayName = COMPONENT_NAME$J;
+MenuButton.displayName = COMPONENT_NAME$K;
 MenuButton.defaultProps = DEFAULT_PROPS$F;
 
 /** MenuItem props. */
 
 /** Props overridden by framework wrappers. */
 
-const COMPONENT_NAME$F = 'MenuItem';
+const COMPONENT_NAME$G = 'MenuItem';
 const CLASSNAME$G = 'lumx-menu-item';
 const {
   block: block$y,
@@ -15708,13 +15932,13 @@ const MenuItem = forwardRef((props, ref) => {
     handleClick
   });
 });
-MenuItem.displayName = COMPONENT_NAME$F;
+MenuItem.displayName = COMPONENT_NAME$G;
 MenuItem.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'Message';
+const COMPONENT_NAME$F = 'Message';
 
 /**
  * Component default class name and class prefix.
@@ -15797,7 +16021,7 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$E;
+Message$1.displayName = COMPONENT_NAME$F;
 Message$1.className = CLASSNAME$F;
 
 /**
@@ -15813,13 +16037,13 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$E;
+Message.displayName = COMPONENT_NAME$F;
 Message.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'Mosaic';
+const COMPONENT_NAME$E = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
@@ -15926,7 +16150,7 @@ const Mosaic = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Mosaic.displayName = COMPONENT_NAME$D;
+Mosaic.displayName = COMPONENT_NAME$E;
 Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$E;
 
@@ -15947,7 +16171,7 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'NavigationSection';
+const COMPONENT_NAME$D = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
@@ -16042,7 +16266,7 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$C;
+NavigationSection.displayName = COMPONENT_NAME$D;
 NavigationSection.className = CLASSNAME$D;
 
 const {
@@ -16112,7 +16336,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Navigation';
+const COMPONENT_NAME$C = 'Navigation';
 
 /**
  * Component default class name and class prefix.
@@ -16159,7 +16383,7 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$B;
+Navigation.displayName = COMPONENT_NAME$C;
 Navigation.className = CLASSNAME$C;
 Navigation.defaultProps = DEFAULT_PROPS$D;
 
@@ -16192,7 +16416,7 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'Notification';
+const COMPONENT_NAME$B = 'Notification';
 
 /**
  * Component default class name and class prefix.
@@ -16294,19 +16518,22 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$A;
+Notification.displayName = COMPONENT_NAME$B;
 Notification.className = CLASSNAME$B;
 Notification.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * PopoverDialog props.
- * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ * The PopoverDialog has the same props as the Popover, plus optional accessible-name props.
+ * An accessible name can be provided via `label`, `aria-label`, `aria-labelledby`, or by
+ * rendering a `DialogHeading` inside the dialog (which names it via the internal label
+ * registry) - at least one of these should be used.
  */
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'PopoverDialog';
+const COMPONENT_NAME$A = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
@@ -16319,21 +16546,22 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 const DEFAULT_PROPS$B = {};
 
 /**
- * PopoverDialog component.
- * Defines a popover that acts like a dialog:
- * - Has a dialog aria role
- * - Sets a focus trap within the popover
- * - Closes on click away and escape
- * - Resets heading level context to 2
+ * Renders the core Popover as a dialog, resolving its `aria-labelledby` from the ids registry.
+ *
+ * Must render as a descendant of the `IdsRegistryProvider` set up by `PopoverDialog` (which is why it
+ * is its own component: the subscription hook needs to run below the provider). Internal to the
+ * popover-dialog family - not exported from the package barrel.
  */
-const PopoverDialog = forwardRef((props, ref) => {
+const PopoverDialogContent = forwardRef((props, ref) => {
   const {
     children,
-    'aria-label': ariaLabel,
-    label = ariaLabel,
+    'aria-label': ariaLabelAttr,
+    'aria-labelledby': ariaLabelledByAttr,
+    label = ariaLabelAttr,
     className,
     ...forwardedProps
   } = props;
+  const labelId = useRegisteredId(DIALOG_LABEL_KEY);
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
@@ -16342,9 +16570,10 @@ const PopoverDialog = forwardRef((props, ref) => {
     "aria-modal": "true"
     /**
      * If a label is set, set as aria-label.
-     * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+     * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props,
+     * or by rendering a `DialogHeading` inside the dialog (linked via the internal ids registry).
      */,
-    "aria-label": label,
+    ...resolveAccessibleNameProps(label, ariaLabelledByAttr || labelId),
     closeOnClickAway: true,
     closeOnEscape: true,
     withFocusTrap: true,
@@ -16354,14 +16583,29 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$z;
+
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog:
+ * - Has a dialog aria role
+ * - Sets a focus trap within the popover
+ * - Closes on click away and escape
+ * - Resets heading level context to 2
+ */
+const PopoverDialog = forwardRef((props, ref) => /*#__PURE__*/jsx(IdsRegistryProvider, {
+  children: /*#__PURE__*/jsx(PopoverDialogContent, {
+    ...props,
+    ref: ref
+  })
+}));
+PopoverDialog.displayName = COMPONENT_NAME$A;
 PopoverDialog.className = CLASSNAME$A;
 PopoverDialog.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'PostBlock';
+const COMPONENT_NAME$z = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
@@ -16455,14 +16699,14 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$y;
+PostBlock.displayName = COMPONENT_NAME$z;
 PostBlock.className = CLASSNAME$z;
 PostBlock.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'ProgressLinear';
+const COMPONENT_NAME$y = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
@@ -16528,7 +16772,7 @@ const ProgressLinear = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$x;
+ProgressLinear.displayName = COMPONENT_NAME$y;
 ProgressLinear.className = CLASSNAME$y;
 ProgressLinear.defaultProps = DEFAULT_PROPS$z;
 
@@ -16537,7 +16781,7 @@ ProgressLinear.defaultProps = DEFAULT_PROPS$z;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'ProgressCircular';
+const COMPONENT_NAME$x = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
@@ -16630,7 +16874,7 @@ const ProgressCircular = forwardRef((props, ref) => {
     }
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$w;
+ProgressCircular.displayName = COMPONENT_NAME$x;
 ProgressCircular.className = CLASSNAME$x;
 ProgressCircular.defaultProps = DEFAULT_PROPS$y;
 
@@ -16646,7 +16890,7 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'Progress';
+const COMPONENT_NAME$w = 'Progress';
 
 /**
  * Component default class name and class prefix.
@@ -16693,7 +16937,7 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$v;
+Progress.displayName = COMPONENT_NAME$w;
 Progress.className = CLASSNAME$w;
 Progress.defaultProps = DEFAULT_PROPS$x;
 
@@ -16878,7 +17122,7 @@ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$w;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'ProgressTracker';
+const COMPONENT_NAME$v = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
@@ -16944,14 +17188,14 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$u;
+ProgressTracker.displayName = COMPONENT_NAME$v;
 ProgressTracker.className = CLASSNAME$v;
 ProgressTracker.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'ProgressTrackerStep';
+const COMPONENT_NAME$u = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
@@ -17058,14 +17302,14 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$t;
+ProgressTrackerStep.displayName = COMPONENT_NAME$u;
 ProgressTrackerStep.className = CLASSNAME$u;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
@@ -17112,14 +17356,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'RadioButton';
+const COMPONENT_NAME$s = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
@@ -17271,14 +17515,14 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$r;
+RadioButton.displayName = COMPONENT_NAME$s;
 RadioButton.className = CLASSNAME$s;
 RadioButton.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$q = 'RadioGroup';
+const COMPONENT_NAME$r = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
@@ -17310,7 +17554,7 @@ const RadioGroup$1 = props => {
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$q;
+RadioGroup$1.displayName = COMPONENT_NAME$r;
 RadioGroup$1.className = CLASSNAME$r;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$r;
 
@@ -17338,7 +17582,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$q;
+RadioGroup.displayName = COMPONENT_NAME$r;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -17486,7 +17730,7 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$p = 'Select';
+const COMPONENT_NAME$q = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$p = 'lumx-select';
@@ -17630,13 +17874,13 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$p;
+Select.displayName = COMPONENT_NAME$q;
 Select.className = CLASSNAME$p;
 Select.defaultProps = DEFAULT_PROPS$q;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
-const COMPONENT_NAME$o = 'Select';
+const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$o = 'lumx-select';
@@ -17784,7 +18028,7 @@ const SelectMultiple = forwardRef((props, ref) => {
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$o;
+SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$o;
 SelectMultiple.defaultProps = DEFAULT_PROPS$p;
 
@@ -17937,7 +18181,7 @@ function renderSelectOptions(props, components) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$n = 'SelectButton';
+const COMPONENT_NAME$o = 'SelectButton';
 
 /**
  * Component default class name.
@@ -17991,6 +18235,8 @@ const SelectButton$2 = (props, {
   const isLoadingMore = listStatus === 'loadingMore';
   const isError = listStatus === 'error';
   const isMultiselectable = selectionType === 'multiple';
+  // Prevent firing during loading or error states to avoid duplicate fetches.
+  const isInfiniteScrollEnabled = !listStatus || listStatus === 'idle';
 
   /*
    * Display value: castArray normalizes single/multi value to an array, then resolve
@@ -18029,11 +18275,7 @@ const SelectButton$2 = (props, {
         }, {
           Combobox
         }), onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
-          callback: () => {
-            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
-            if (listStatus && listStatus !== 'idle') return;
-            onLoadMore();
-          },
+          callback: isInfiniteScrollEnabled ? onLoadMore : undefined,
           options: infiniteScrollOptions
         }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
           count: 1
@@ -18048,7 +18290,7 @@ const SelectButton$2 = (props, {
     })]
   });
 };
-SelectButton$2.displayName = COMPONENT_NAME$n;
+SelectButton$2.displayName = COMPONENT_NAME$o;
 SelectButton$2.className = CLASSNAME$n;
 
 /**
@@ -18177,7 +18419,13 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     as,
     ...buttonProps
   } = props;
-  const [listElement, setListElement] = useState(null);
+  // The list itself doesn't scroll — its ancestor `__scroll` wrapper does. The
+  // IntersectionObserver root must be the actual scrolling/clipping element, or the
+  // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
+  const [scrollContainer, setScrollContainer] = useState(null);
+  const setListElement = useCallback(listElement => {
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+  }, []);
   const isMultiple = selectionType === 'multiple';
 
   // Inject core-computed props into the consumer's renderOption result.
@@ -18218,7 +18466,7 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     translations,
     onLoadMore,
     infiniteScrollOptions: {
-      root: listElement,
+      root: scrollContainer,
       rootMargin: '100px'
     }
   }, {
@@ -18239,7 +18487,7 @@ const SelectButton = Object.assign(SelectButton$1, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$m = 'SelectTextField';
+const COMPONENT_NAME$n = 'SelectTextField';
 
 /**
  * Component default class name.
@@ -18291,6 +18539,8 @@ const SelectTextField$2 = (props, {
   const isFullLoading = listStatus === 'loading';
   const isLoadingMore = listStatus === 'loadingMore';
   const isError = listStatus === 'error';
+  // Prevent firing during loading or error states to avoid duplicate fetches.
+  const isInfiniteScrollEnabled = !listStatus || listStatus === 'idle';
   return /*#__PURE__*/jsxs(Combobox.Provider, {
     onOpen: onOpen,
     children: [/*#__PURE__*/jsx(Combobox.Input, {
@@ -18321,11 +18571,7 @@ const SelectTextField$2 = (props, {
         }, {
           Combobox
         }), afterOptions, onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
-          callback: () => {
-            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
-            if (listStatus && listStatus !== 'idle') return;
-            onLoadMore();
-          },
+          callback: isInfiniteScrollEnabled ? onLoadMore : undefined,
           options: infiniteScrollOptions
         }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
           count: 1
@@ -18340,7 +18586,7 @@ const SelectTextField$2 = (props, {
     })]
   });
 };
-SelectTextField$2.displayName = COMPONENT_NAME$m;
+SelectTextField$2.displayName = COMPONENT_NAME$n;
 SelectTextField$2.className = CLASSNAME$m;
 
 /**
@@ -18413,7 +18659,14 @@ const SelectTextField$1 = props => {
   // Wrap the consumer's renderOption to inject core-computed props
   // (`value`, `isSelected`, `description`, `key`) into the returned <Combobox.Option>.
   const wrappedRenderOption = wrapRenderOption(renderOption);
-  const [listElement, setListElement] = useState(null);
+
+  // The list itself doesn't scroll — its ancestor `__scroll` wrapper does. The
+  // IntersectionObserver root must be the actual scrolling/clipping element, or the
+  // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
+  const [scrollContainer, setScrollContainer] = useState(null);
+  const setListElement = useCallback(listElement => {
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+  }, []);
   const localInputRef = useRef(null);
   const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
 
@@ -18563,7 +18816,7 @@ const SelectTextField$1 = props => {
     beforeOptions,
     onLoadMore,
     infiniteScrollOptions: {
-      root: listElement,
+      root: scrollContainer,
       rootMargin: '100px'
     }
   }, {
@@ -18592,7 +18845,7 @@ const SelectTextField = Object.assign(SelectTextField$1, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$l = 'SideNavigation';
+const COMPONENT_NAME$m = 'SideNavigation';
 
 /**
  * Component default class name and class prefix.
@@ -18622,13 +18875,13 @@ const SideNavigation = forwardRef((props, ref) => {
     children: content
   });
 });
-SideNavigation.displayName = COMPONENT_NAME$l;
+SideNavigation.displayName = COMPONENT_NAME$m;
 SideNavigation.className = CLASSNAME$l;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$k = 'SideNavigationItem';
+const COMPONENT_NAME$l = 'SideNavigationItem';
 
 /**
  * Component default class name and class prefix.
@@ -18743,14 +18996,14 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })]
   });
 });
-SideNavigationItem.displayName = COMPONENT_NAME$k;
+SideNavigationItem.displayName = COMPONENT_NAME$l;
 SideNavigationItem.className = CLASSNAME$k;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$n;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$j = 'SkeletonCircle';
+const COMPONENT_NAME$k = 'SkeletonCircle';
 
 /**
  * Component default class name and class prefix.
@@ -18802,7 +19055,7 @@ const SkeletonRectangleVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$i = 'SkeletonRectangle';
+const COMPONENT_NAME$j = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
@@ -18886,7 +19139,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonCircle.displayName = COMPONENT_NAME$j;
+SkeletonCircle.displayName = COMPONENT_NAME$k;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$l;
 SkeletonCircle.className = CLASSNAME$j;
 
@@ -18927,7 +19180,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$i;
+SkeletonRectangle.displayName = COMPONENT_NAME$j;
 SkeletonRectangle.className = CLASSNAME$i;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$k;
 
@@ -18964,7 +19217,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$1b;
+SkeletonTypography.displayName = COMPONENT_NAME$1c;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$j;
 SkeletonTypography.className = CLASSNAME$19;
 
@@ -18990,7 +19243,7 @@ const clamp = (value, min, max) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$h = 'Slider';
+const COMPONENT_NAME$i = 'Slider';
 
 /**
  * Component default class name and class prefix.
@@ -19257,7 +19510,7 @@ const Slider = forwardRef((props, ref) => {
     })]
   });
 });
-Slider.displayName = COMPONENT_NAME$h;
+Slider.displayName = COMPONENT_NAME$i;
 Slider.className = CLASSNAME$h;
 Slider.defaultProps = DEFAULT_PROPS$i;
 
@@ -19592,7 +19845,7 @@ const useSlideFocusManagement = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$g = 'SlideshowItemGroup';
+const COMPONENT_NAME$h = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
@@ -19631,7 +19884,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$g;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$g;
 
 /**
@@ -19762,7 +20015,7 @@ Slideshow.defaultProps = DEFAULT_PROPS$h;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$f = 'SlideshowItem';
+const COMPONENT_NAME$g = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
@@ -19789,7 +20042,7 @@ const SlideshowItem = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItem.displayName = COMPONENT_NAME$f;
+SlideshowItem.displayName = COMPONENT_NAME$g;
 SlideshowItem.className = CLASSNAME$f;
 
 const isTouchDevice = () => 'ontouchstart' in window;
@@ -19852,7 +20105,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$e = 'SlideshowControls';
+const COMPONENT_NAME$f = 'SlideshowControls';
 
 /**
  * Component default class name and class prefix.
@@ -19992,7 +20245,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
     })]
   });
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$e;
+InternalSlideshowControls.displayName = COMPONENT_NAME$f;
 InternalSlideshowControls.className = CLASSNAME$e;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$g;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
@@ -20112,7 +20365,7 @@ const useSlideScroll = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$d = 'Slideshow';
+const COMPONENT_NAME$e = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
@@ -20220,13 +20473,13 @@ const Slides = forwardRef((props, ref) => {
     }), afterSlides]
   });
 });
-Slides.displayName = COMPONENT_NAME$d;
+Slides.displayName = COMPONENT_NAME$e;
 Slides.className = CLASSNAME$d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$c = 'Switch';
+const COMPONENT_NAME$d = 'Switch';
 
 /**
  * Component default class name and class prefix.
@@ -20394,14 +20647,14 @@ const Switch = forwardRef((props, ref) => {
     inputId
   });
 });
-Switch.displayName = COMPONENT_NAME$c;
+Switch.displayName = COMPONENT_NAME$d;
 Switch.className = CLASSNAME$c;
 Switch.defaultProps = DEFAULT_PROPS$d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$b = 'Table';
+const COMPONENT_NAME$c = 'Table';
 
 /**
  * Component default class name and class prefix.
@@ -20474,14 +20727,14 @@ const Table = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Table.displayName = COMPONENT_NAME$b;
+Table.displayName = COMPONENT_NAME$c;
 Table.className = CLASSNAME$b;
 Table.defaultProps = DEFAULT_PROPS$c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$a = 'TableBody';
+const COMPONENT_NAME$b = 'TableBody';
 
 /**
  * Component default class name and class prefix.
@@ -20531,7 +20784,7 @@ const TableBody = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableBody.displayName = COMPONENT_NAME$a;
+TableBody.displayName = COMPONENT_NAME$b;
 TableBody.className = CLASSNAME$a;
 
 const ThOrder = {
@@ -20553,7 +20806,7 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$9 = 'TableCell';
+const COMPONENT_NAME$a = 'TableCell';
 
 /**
  * Component default class name and class prefix.
@@ -20669,14 +20922,14 @@ const TableCell = forwardRef((props, ref) => {
     handleClick: onHeaderClick
   });
 });
-TableCell.displayName = COMPONENT_NAME$9;
+TableCell.displayName = COMPONENT_NAME$a;
 TableCell.className = CLASSNAME$9;
 TableCell.defaultProps = DEFAULT_PROPS$b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TableHeader';
+const COMPONENT_NAME$9 = 'TableHeader';
 
 /**
  * Component default class name and class prefix.
@@ -20731,14 +20984,14 @@ const TableHeader = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableHeader.displayName = COMPONENT_NAME$8;
+TableHeader.displayName = COMPONENT_NAME$9;
 TableHeader.className = CLASSNAME$8;
 TableHeader.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$7 = 'TableRow';
+const COMPONENT_NAME$8 = 'TableRow';
 
 /**
  * Component default class name and class prefix.
@@ -20821,7 +21074,7 @@ const TableRow = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TableRow.displayName = COMPONENT_NAME$7;
+TableRow.displayName = COMPONENT_NAME$8;
 TableRow.className = CLASSNAME$7;
 TableRow.defaultProps = DEFAULT_PROPS$9;
 
@@ -20909,7 +21162,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$6 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -20940,6 +21193,7 @@ const TabList$1 = props => {
     ref,
     ...forwardedProps
   } = props;
+  const LinkWrapper = role === 'navigation' ? 'nav' : 'div';
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -20948,7 +21202,7 @@ const TabList$1 = props => {
       [`position-${position}`]: Boolean(position),
       [`theme-${theme}`]: Boolean(theme)
     })),
-    children: /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsx(LinkWrapper, {
       className: element$4('links'),
       role: role,
       "aria-label": ariaLabel,
@@ -20990,14 +21244,14 @@ const TabList = forwardRef((props, ref) => {
     ref: mergeRefs(ref, tabListRef)
   });
 });
-TabList.displayName = COMPONENT_NAME$6;
+TabList.displayName = COMPONENT_NAME$7;
 TabList.className = TABS_CLASSNAME;
 TabList.defaultProps = DEFAULT_PROPS$7;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$5 = 'Tab';
+const COMPONENT_NAME$6 = 'Tab';
 
 /**
  * Component default props.
@@ -21032,8 +21286,7 @@ const Tab$1 = props => {
     isAnyDisabled,
     isDisabled,
     id,
-    isActive: isActiveProp,
-    'aria-current': ariaCurrent,
+    isActive,
     role,
     label,
     handleFocus,
@@ -21049,7 +21302,6 @@ const Tab$1 = props => {
     ref,
     ...forwardedProps
   } = props;
-  const isActive = isActiveProp ?? ariaCurrent === 'page';
   let rawClickableProps;
   if (role === 'tab') {
     // Mode: WAI-ARIA `tab` role (inside a TabProvider)
@@ -21180,7 +21432,7 @@ const Tab = Object.assign(forwardRefPolymorphic((props, ref) => {
     handleKeyPress: onKeyPress
   });
 }), {
-  displayName: COMPONENT_NAME$5,
+  displayName: COMPONENT_NAME$6,
   className: CLASSNAME$6,
   defaultProps: DEFAULT_PROPS$6
 });
@@ -21188,7 +21440,7 @@ const Tab = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'TabPanel';
+const COMPONENT_NAME$5 = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
@@ -21268,7 +21520,7 @@ const TabPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TabPanel.displayName = COMPONENT_NAME$4;
+TabPanel.displayName = COMPONENT_NAME$5;
 TabPanel.className = CLASSNAME$5;
 TabPanel.defaultProps = DEFAULT_PROPS$5;
 
@@ -21419,7 +21671,7 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Thumbnail';
+const COMPONENT_NAME$4 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
@@ -21709,7 +21961,7 @@ const Thumbnail = forwardRef((props, ref) => {
     })
   });
 });
-Thumbnail.displayName = COMPONENT_NAME$3;
+Thumbnail.displayName = COMPONENT_NAME$4;
 Thumbnail.className = CLASSNAME$4;
 Thumbnail.defaultProps = DEFAULT_PROPS$4;
 
@@ -21753,7 +22005,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$2 = 'TimePickerField';
+const COMPONENT_NAME$3 = 'TimePickerField';
 
 /**
  * Component default class name (BEM root).
@@ -21854,7 +22106,7 @@ const TimePickerField$1 = (props, {
     translations: translations
   });
 };
-TimePickerField$1.displayName = COMPONENT_NAME$2;
+TimePickerField$1.displayName = COMPONENT_NAME$3;
 TimePickerField$1.className = CLASSNAME$3;
 
 /**
@@ -22118,12 +22370,12 @@ const TimePickerField = props => {
     Option: SelectTextField.Option
   });
 };
-TimePickerField.displayName = COMPONENT_NAME$2;
+TimePickerField.displayName = COMPONENT_NAME$3;
 
 /**
  * Component display name.
  */
-const TOOLBAR_NAME = 'Toolbar';
+const COMPONENT_NAME$2 = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
@@ -22192,7 +22444,7 @@ const Toolbar = forwardRef((props, ref) => {
     ...props
   });
 });
-Toolbar.displayName = TOOLBAR_NAME;
+Toolbar.displayName = COMPONENT_NAME$2;
 Toolbar.className = CLASSNAME$2;
 Toolbar.defaultProps = DEFAULT_PROPS$2;
 
@@ -22591,5 +22843,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$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 };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1w as CLASSNAME, COMPONENT_NAME$1z as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1e as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, 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$3 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