@lumx/react 4.19.1-alpha.5 → 4.19.1-alpha.7

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';
@@ -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;
 
 /**
@@ -6498,8 +6498,22 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     loadingAnnouncement: new Set()
   };
 
+  /**
+   * Last value seen for each event, kept in sync so pull-based subscribers (React's
+   * `useSyncExternalStore` via `handle.getSnapshot`) can read the current value during their
+   * own render — without relying on a push landing inside a specific async boundary.
+   *
+   * `optionsChange` is special: its push is coalesced into a microtask (see
+   * `notifyVisibilityChange`), but its snapshot here is refreshed synchronously so React can
+   * pick up the change during the same commit that mounted the options, instead of via the
+   * later microtask (which would fire outside `act` in tests). All other events push
+   * synchronously, so caching in `notify` keeps their snapshot current.
+   */
+  const latestValues = {};
+
   /** Notify all subscribers for a given event. */
   function notify(event, value) {
+    latestValues[event] = value;
     subscribers[event].forEach(cb => cb(value));
   }
 
@@ -6518,26 +6532,48 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
   }
 
   /**
-   * Notify all registered sections and fire `optionsChange` if the visible option count changed
-   * or if the input value changed while the list is empty (so `emptyMessage` callbacks get
-   * the updated query string).
-   * Called whenever the set of visible options may have changed (option register/unregister, filter change).
-   * (debounced in a microtask)
+   * The current `optionsChange` snapshot. Refreshed synchronously by `refreshOptionsSnapshot`
+   * (so React can read it via `handle.getSnapshot` during the commit that mounts the options)
+   * and pushed to subscribers on a coalesced microtask by `flushVisibilityChange`
+   * (so Vue reacts once to the final state instead of hitting its recursive-update guard).
    */
-  const notifyVisibilityChange = debounceMicrotask(() => {
-    for (const [sectionElement] of sectionRegistrations) {
-      notifySection(sectionElement, sectionRegistrations, optionRegistrations);
-    }
+  let optionsSnapshot;
+  /** The last snapshot actually pushed to subscribers, to avoid redundant notifications. */
+  let pushedOptionsSnapshot;
+
+  /**
+   * Recompute the `optionsChange` snapshot when the visible option count changed, or when the
+   * input value changed while the list is empty (so `emptyMessage` callbacks get the updated
+   * query string). Runs synchronously; a new object is created only when the value actually
+   * changes, keeping the reference stable for pull-based subscribers.
+   */
+  function refreshOptionsSnapshot() {
     const visibleCount = getVisibleOptionCount();
     const inputValue = trigger?.value ?? '';
     const isEmpty = visibleCount === 0;
     if (visibleCount !== lastOptionsLength || isEmpty && inputValue !== lastInputValue) {
       lastOptionsLength = visibleCount;
       lastInputValue = inputValue;
-      notify('optionsChange', {
+      optionsSnapshot = {
         optionsLength: visibleCount,
         inputValue
-      });
+      };
+      latestValues.optionsChange = optionsSnapshot;
+    }
+  }
+
+  /**
+   * Notify all registered sections, push `optionsChange` when the snapshot changed since the last
+   * push, and re-evaluate `aria-expanded`. Coalesced into a microtask so many option
+   * registrations in one tick collapse into a single subscriber notification.
+   */
+  const flushVisibilityChange = debounceMicrotask(() => {
+    for (const [sectionElement] of sectionRegistrations) {
+      notifySection(sectionElement, sectionRegistrations, optionRegistrations);
+    }
+    if (optionsSnapshot !== pushedOptionsSnapshot) {
+      pushedOptionsSnapshot = optionsSnapshot;
+      notify('optionsChange', optionsSnapshot);
     }
 
     // Re-evaluate aria-expanded when the combobox is open — visible content may have
@@ -6547,6 +6583,16 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     }
   });
 
+  /**
+   * Called whenever the set of visible options may have changed (option register/unregister,
+   * filter change). Refreshes the snapshot synchronously (for pull-based/React subscribers) then
+   * schedules the coalesced push (for push-based/Vue subscribers).
+   */
+  function notifyVisibilityChange() {
+    refreshOptionsSnapshot();
+    flushVisibilityChange();
+  }
+
   // ── Skeleton loading tracking ──────────────────────────────
 
   /** Delay before announcing loading in the live region (ms). */
@@ -6931,6 +6977,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         subscribers[event].delete(callback);
       };
     },
+    getSnapshot(event) {
+      return latestValues[event];
+    },
     destroy() {
       detach();
       trigger = null;
@@ -6939,10 +6988,16 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       lastOptionsLength = 0;
       lastInputValue = '';
       lastLoadingState = false;
+      optionsSnapshot = undefined;
+      pushedOptionsSnapshot = undefined;
+      // Drop cached snapshots so `getSnapshot` doesn't return stale values after destroy.
+      for (const key of Object.keys(latestValues)) {
+        delete latestValues[key];
+      }
       optionRegistrations.clear();
       sectionRegistrations.clear();
       skeletonCount = 0;
-      notifyVisibilityChange.cancel();
+      flushVisibilityChange.cancel();
       clearTimeout(loadingTimer);
       announcementSent = false;
       // Clear all subscribers
@@ -7199,7 +7254,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.
@@ -7267,6 +7322,203 @@ const ComboboxButton$1 = (props, {
 /** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
 const forwardRefPolymorphic = React__default.forwardRef;
 
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production;
+
+function requireUseSyncExternalStoreShim_production () {
+	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+	hasRequiredUseSyncExternalStoreShim_production = 1;
+	var React = React__default;
+	function is(x, y) {
+	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is,
+	  useState = React.useState,
+	  useEffect = React.useEffect,
+	  useLayoutEffect = React.useLayoutEffect,
+	  useDebugValue = React.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+	  var value = getSnapshot(),
+	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+	    inst = _useState[0].inst,
+	    forceUpdate = _useState[1];
+	  useLayoutEffect(
+	    function () {
+	      inst.value = value;
+	      inst.getSnapshot = getSnapshot;
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	    },
+	    [subscribe, value, getSnapshot]
+	  );
+	  useEffect(
+	    function () {
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      return subscribe(function () {
+	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      });
+	    },
+	    [subscribe]
+	  );
+	  useDebugValue(value);
+	  return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  inst = inst.value;
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(inst, nextValue);
+	  } catch (error) {
+	    return true;
+	  }
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+	  return getSnapshot();
+	}
+	var shim =
+	  "undefined" === typeof window ||
+	  "undefined" === typeof window.document ||
+	  "undefined" === typeof window.document.createElement
+	    ? useSyncExternalStore$1
+	    : useSyncExternalStore$2;
+	useSyncExternalStoreShim_production.useSyncExternalStore =
+	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	return useSyncExternalStoreShim_production;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function is(x, y) {
+	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	    }
+	    function useSyncExternalStore$2(subscribe, getSnapshot) {
+	      didWarnOld18Alpha ||
+	        void 0 === React.startTransition ||
+	        ((didWarnOld18Alpha = true),
+	        console.error(
+	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+	        ));
+	      var value = getSnapshot();
+	      if (!didWarnUncachedGetSnapshot) {
+	        var cachedValue = getSnapshot();
+	        objectIs(value, cachedValue) ||
+	          (console.error(
+	            "The result of getSnapshot should be cached to avoid an infinite loop"
+	          ),
+	          (didWarnUncachedGetSnapshot = true));
+	      }
+	      cachedValue = useState({
+	        inst: { value: value, getSnapshot: getSnapshot }
+	      });
+	      var inst = cachedValue[0].inst,
+	        forceUpdate = cachedValue[1];
+	      useLayoutEffect(
+	        function () {
+	          inst.value = value;
+	          inst.getSnapshot = getSnapshot;
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	        },
+	        [subscribe, value, getSnapshot]
+	      );
+	      useEffect(
+	        function () {
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          return subscribe(function () {
+	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          });
+	        },
+	        [subscribe]
+	      );
+	      useDebugValue(value);
+	      return value;
+	    }
+	    function checkIfSnapshotChanged(inst) {
+	      var latestGetSnapshot = inst.getSnapshot;
+	      inst = inst.value;
+	      try {
+	        var nextValue = latestGetSnapshot();
+	        return !objectIs(inst, nextValue);
+	      } catch (error) {
+	        return true;
+	      }
+	    }
+	    function useSyncExternalStore$1(subscribe, getSnapshot) {
+	      return getSnapshot();
+	    }
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+	    var React = React__default,
+	      objectIs = "function" === typeof Object.is ? Object.is : is,
+	      useState = React.useState,
+	      useEffect = React.useEffect,
+	      useLayoutEffect = React.useLayoutEffect,
+	      useDebugValue = React.useDebugValue,
+	      didWarnOld18Alpha = false,
+	      didWarnUncachedGetSnapshot = false,
+	      shim =
+	        "undefined" === typeof window ||
+	        "undefined" === typeof window.document ||
+	        "undefined" === typeof window.document.createElement
+	          ? useSyncExternalStore$1
+	          : useSyncExternalStore$2;
+	    useSyncExternalStoreShim_development.useSyncExternalStore =
+	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	  })();
+	return useSyncExternalStoreShim_development;
+}
+
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
+}
+
+var shimExports = requireShim();
+
 /** Context value shared between Combobox sub-components. */
 
 const ComboboxContext = /*#__PURE__*/createContext(undefined);
@@ -7286,17 +7538,28 @@ function useComboboxContext() {
 
 /**
  * Hook to subscribe to a combobox event via the handle's subscriber system.
+ *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the handle's synchronous
+ * `getSnapshot`. This lets React pick up changes during its own commit — notably the
+ * `optionsChange` snapshot, which the handle refreshes synchronously while coalescing the actual
+ * subscriber push into a microtask. Reading the snapshot during commit avoids a state update
+ * landing in the microtask outside `act` (which unit tests report as an un-acted update).
+ *
  * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
  */
 function useComboboxEvent(event, initialValue) {
   const {
     handle
   } = useComboboxContext();
-  const [value, setValue] = useState(initialValue);
-  useEffect(() => {
-    return handle?.subscribe(event, setValue);
+
+  // Stable fallback used until the event has fired at least once (or while there is no handle).
+  const initialValueRef = useRef(initialValue);
+  const subscribe = useCallback(onStoreChange => handle?.subscribe(event, onStoreChange) ?? (() => undefined), [handle, event]);
+  const getSnapshot = useCallback(() => {
+    const value = handle?.getSnapshot(event);
+    return value === undefined ? initialValueRef.current : value;
   }, [handle, event]);
-  return value;
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
 /**
@@ -7388,7 +7651,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1m,
+  displayName: COMPONENT_NAME$1n,
   className: CLASSNAME$1k
 });
 
@@ -7553,7 +7816,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 +7884,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 +8424,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 +8513,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 +8557,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 +8574,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 +8691,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 +8773,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 +8784,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 +8823,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 +9016,7 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$1f;
+ComboboxOption.displayName = COMPONENT_NAME$1g;
 ComboboxOption.className = CLASSNAME$1d;
 
 /**
@@ -8763,7 +9026,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 +9104,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 +9433,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 +9968,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$1c;
+_InnerPopover.displayName = COMPONENT_NAME$1d;
 
 /**
  * Popover component.
@@ -9717,7 +9980,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 +10044,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 +10098,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 +10183,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 +10262,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 +10326,7 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$18;
+FlexBox.displayName = COMPONENT_NAME$19;
 FlexBox.className = CLASSNAME$16;
 
 /**
@@ -10102,7 +10365,7 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$19;
+ComboboxPopover.displayName = COMPONENT_NAME$1a;
 ComboboxPopover.className = CLASSNAME$17;
 
 /**
@@ -10148,7 +10411,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 +10455,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 +10511,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 +10535,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 +10585,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 +10772,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 +10923,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 +11003,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 +11041,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 +11063,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 +11114,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 +11225,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 +11247,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 +11484,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'DatePickerControlled';
+const COMPONENT_NAME$11 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11411,7 +11674,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$10;
+DatePickerControlled.displayName = COMPONENT_NAME$11;
 DatePickerControlled.className = CLASSNAME$$;
 
 /**
@@ -11454,7 +11717,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 +11731,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'DatePickerField';
+const COMPONENT_NAME$10 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11557,7 +11820,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$$;
+DatePickerField.displayName = COMPONENT_NAME$10;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11850,13 +12113,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 +12145,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 +12185,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,9 +12195,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.
+ *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the registry's synchronous
+ * `getId` snapshot: React re-reads it right after subscribing, so an id registered between render
+ * and commit is never missed - no manual re-sync needed.
+ *
+ * @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 subscribe = useCallback(onStoreChange => registry?.subscribe(key, onStoreChange) ?? (() => undefined), [registry, key]);
+  const getSnapshot = useCallback(() => registry?.getId(key), [registry, key]);
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+/**
+ * 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 +12464,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 +12489,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 +12501,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,63 +12520,240 @@ 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);
-
-  // 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,
+  if (!isMounted) return null;
+  return DialogShell({
     Portal,
+    HeadingLevelProvider,
     ThemeProvider,
+    IdsRegistryProvider,
     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,
-    ...forwardedProps
-  }) : null;
+    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
+    })
+  });
 });
-Dialog.displayName = COMPONENT_NAME$_;
+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
+  });
+};
+
+/**
+ * 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
+  } = props;
+  const generatedId = useId();
+  const headingId = id || generatedId;
+  useRegisterId(DIALOG_LABEL_KEY, headingId);
+  return /*#__PURE__*/jsx(Heading, {
+    ref: ref,
+    id: headingId,
+    typography: typography,
+    ...forwardedProps
+  });
+});
+DialogHeading.displayName = DIALOG_HEADING_COMPONENT_NAME;
+
 /**
  * Component display name.
  */
@@ -12147,10 +12762,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 +12796,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Divider component.
@@ -12203,8 +12818,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 +12829,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 +12868,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * DragHandle component.
@@ -12275,8 +12890,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 +13085,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 +13141,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 +13174,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 +13230,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 +13241,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 +13363,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 +13435,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 +13503,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 +13558,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 +13602,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 +13653,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 +13683,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 +13706,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 +13907,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.
@@ -14127,7 +14611,7 @@ const Inner = forwardRef((props, ref) => {
     focusElement: currentPaginationItemRef,
     ...forwardedProps,
     // Disable the close on click away as we want a custom one here
-    preventAutoClose: true,
+    preventCloseOnClick: true,
     children: /*#__PURE__*/jsx(ClickAwayProvider, {
       childrenRefs: clickAwayChildrenRefs,
       callback: onClickAway,
@@ -14148,7 +14632,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$P;
+Inner.displayName = COMPONENT_NAME$Q;
 Inner.className = CLASSNAME$P;
 
 /**
@@ -14165,7 +14649,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 +14710,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 +14736,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 +14781,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,7 +14812,9 @@ const Lightbox$1 = props => {
     handleClose,
     parentElement,
     focusElement,
+    labelId,
     preventAutoClose,
+    preventCloseOnClick,
     theme,
     zIndex,
     isVisible,
@@ -14348,8 +14834,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,
@@ -14378,7 +14863,7 @@ const Lightbox$1 = props => {
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx(ClickAwayProvider, {
-            callback: !preventAutoClose && handleClose,
+            callback: !preventAutoClose && !preventCloseOnClick && handleClose,
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,
@@ -14398,13 +14883,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 +14903,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 +14928,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 +14948,7 @@ const Lightbox = forwardRef((props, ref) => {
     focusElement,
     isOpen,
     isVisible,
+    labelId,
     ref: mergeRefs(ref, wrapperRef),
     theme,
     zIndex,
@@ -14490,7 +14957,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 +14987,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 +15080,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 +15221,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 +15254,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 +15294,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 +15309,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 +15337,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 +15350,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 +15778,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 +15879,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 +15956,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 +16024,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 +16072,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 +16195,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 +16284,7 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$E;
+Message$1.displayName = COMPONENT_NAME$F;
 Message$1.className = CLASSNAME$F;
 
 /**
@@ -15813,13 +16300,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 +16413,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 +16434,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 +16529,7 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$C;
+NavigationSection.displayName = COMPONENT_NAME$D;
 NavigationSection.className = CLASSNAME$D;
 
 const {
@@ -16112,7 +16599,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 +16646,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 +16679,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 +16781,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 +16809,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 +16833,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 +16846,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 +16962,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 +17035,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 +17044,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 +17137,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 +17153,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 +17200,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 +17385,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 +17451,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 +17565,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 +17619,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 +17778,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 +17817,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 +17845,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$q;
+RadioGroup.displayName = COMPONENT_NAME$r;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -17486,7 +17993,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 +18137,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 +18291,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 +18444,7 @@ function renderSelectOptions(props, components) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$n = 'SelectButton';
+const COMPONENT_NAME$o = 'SelectButton';
 
 /**
  * Component default class name.
@@ -18046,7 +18553,7 @@ const SelectButton$2 = (props, {
     })]
   });
 };
-SelectButton$2.displayName = COMPONENT_NAME$n;
+SelectButton$2.displayName = COMPONENT_NAME$o;
 SelectButton$2.className = CLASSNAME$n;
 
 /**
@@ -18243,7 +18750,7 @@ const SelectButton = Object.assign(SelectButton$1, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$m = 'SelectTextField';
+const COMPONENT_NAME$n = 'SelectTextField';
 
 /**
  * Component default class name.
@@ -18342,7 +18849,7 @@ const SelectTextField$2 = (props, {
     })]
   });
 };
-SelectTextField$2.displayName = COMPONENT_NAME$m;
+SelectTextField$2.displayName = COMPONENT_NAME$n;
 SelectTextField$2.className = CLASSNAME$m;
 
 /**
@@ -18601,7 +19108,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.
@@ -18631,13 +19138,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.
@@ -18752,14 +19259,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.
@@ -18811,7 +19318,7 @@ const SkeletonRectangleVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$i = 'SkeletonRectangle';
+const COMPONENT_NAME$j = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
@@ -18895,7 +19402,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;
 
@@ -18936,7 +19443,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;
 
@@ -18973,7 +19480,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;
 
@@ -18999,7 +19506,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.
@@ -19266,7 +19773,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;
 
@@ -19601,7 +20108,7 @@ const useSlideFocusManagement = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$g = 'SlideshowItemGroup';
+const COMPONENT_NAME$h = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
@@ -19640,7 +20147,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$g;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$g;
 
 /**
@@ -19771,7 +20278,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.
@@ -19798,7 +20305,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;
@@ -19861,7 +20368,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.
@@ -20001,7 +20508,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, {
@@ -20121,7 +20628,7 @@ const useSlideScroll = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$d = 'Slideshow';
+const COMPONENT_NAME$e = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
@@ -20229,13 +20736,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.
@@ -20403,14 +20910,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.
@@ -20483,14 +20990,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.
@@ -20540,7 +21047,7 @@ const TableBody = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableBody.displayName = COMPONENT_NAME$a;
+TableBody.displayName = COMPONENT_NAME$b;
 TableBody.className = CLASSNAME$a;
 
 const ThOrder = {
@@ -20562,7 +21069,7 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$9 = 'TableCell';
+const COMPONENT_NAME$a = 'TableCell';
 
 /**
  * Component default class name and class prefix.
@@ -20678,14 +21185,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.
@@ -20740,14 +21247,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.
@@ -20830,7 +21337,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;
 
@@ -20918,7 +21425,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$6 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -20944,10 +21451,12 @@ const TabList$1 = props => {
     className,
     layout = DEFAULT_PROPS$7.layout,
     position = DEFAULT_PROPS$7.position,
+    role = 'tablist',
     theme,
     ref,
     ...forwardedProps
   } = props;
+  const LinkWrapper = role === 'navigation' ? 'nav' : 'div';
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -20956,9 +21465,9 @@ 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: "tablist",
+      role: role,
       "aria-label": ariaLabel,
       children: children
     })
@@ -20970,6 +21479,8 @@ const TabList$1 = props => {
  *
  * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
  *
+ * Renders a `role="navigation"` landmark instead when used outside a `TabProvider` (nav-link mode).
+ *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -20981,24 +21492,29 @@ const TabList = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const tabListRef = React__default.useRef(null);
+  const role = useTabProviderContextState() === undefined ? 'navigation' : 'tablist';
+
+  // Classic roving tabindex (role="tab"). Disabled in nav-link mode: nav links keep their
+  // native per-link Tab stops, so this path is never engaged there.
   useRovingTabIndexContainer({
-    containerRef: tabListRef,
+    containerRef: role === 'navigation' ? null : tabListRef,
     itemSelector: '[role="tab"]'
   });
   return TabList$1({
+    ...forwardedProps,
     theme,
-    ref: mergeRefs(ref, tabListRef),
-    ...forwardedProps
+    role,
+    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.
@@ -21014,9 +21530,11 @@ const {
 } = bem(CLASSNAME$6);
 
 /**
- * Tab component.
- *
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * Tab component. Two modes keyed on `TabProvider` presence (via the wrapper-resolved `role`):
+ * tab mode (`role === 'tab'`, inside a provider) implements the WAI-ARIA `tab` role
+ * {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label};
+ * nav-link mode (no provider) renders plain link semantics (`aria-current`, no tab role/aria).
+ * `as` only selects the rendered element and applies in both modes.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -21024,6 +21542,7 @@ const {
  */
 const Tab$1 = props => {
   const {
+    as = 'button',
     className,
     icon,
     iconProps = {},
@@ -21031,6 +21550,7 @@ const Tab$1 = props => {
     isDisabled,
     id,
     isActive,
+    role,
     label,
     handleFocus,
     handleKeyPress,
@@ -21040,112 +21560,150 @@ const Tab$1 = props => {
     changeToTab,
     tabPanelId,
     shouldActivateOnFocus,
-    tabId,
     Icon,
     Text,
     ref,
     ...forwardedProps
   } = props;
-  const changeToCurrentTab = () => {
-    if (isAnyDisabled) {
-      return;
-    }
-    changeToTab?.();
-  };
-  const onFocus = event => {
-    handleFocus?.(event);
-    if (shouldActivateOnFocus) {
+  let rawClickableProps;
+  if (role === 'tab') {
+    // Mode: WAI-ARIA `tab` role (inside a TabProvider)
+    const changeToCurrentTab = () => {
+      if (isAnyDisabled) {
+        return;
+      }
+      changeToTab?.();
+    };
+    const onFocus = event => {
+      handleFocus?.(event);
+      if (shouldActivateOnFocus) {
+        changeToCurrentTab();
+      }
+    };
+    const onKeyPress = event => {
+      handleKeyPress?.(event);
+      if (event.key !== 'Enter' || isAnyDisabled) {
+        return;
+      }
       changeToCurrentTab();
-    }
-  };
-  const onKeyPress = event => {
-    handleKeyPress?.(event);
-    if (event.key !== 'Enter' || isAnyDisabled) {
-      return;
-    }
-    changeToCurrentTab();
-  };
-  return /*#__PURE__*/jsxs("button", {
-    ref: ref,
-    ...forwardedProps,
-    type: "button",
-    id: tabId,
+    };
+    rawClickableProps = {
+      ...forwardedProps,
+      'aria-disabled': isAnyDisabled ? 'true' : 'false',
+      handleClick: changeToCurrentTab,
+      onFocus,
+      role: 'tab',
+      'aria-selected': isActive,
+      'aria-controls': tabPanelId,
+      [keyPressProp]: onKeyPress,
+      [tabIndexProp]: isActive ? 0 : tabIndex
+    };
+  } else {
+    // Mode: nav link
+    const {
+      onClick,
+      ...rest
+    } = forwardedProps;
+    rawClickableProps = {
+      ...rest,
+      isDisabled,
+      handleClick: onClick,
+      'aria-current': isActive ? 'page' : undefined
+    };
+  }
+  return RawClickable({
+    ...rawClickableProps,
+    as,
+    id,
     className: classnames(className, block$6({
       'is-active': isActive,
       'is-disabled': isAnyDisabled
     })),
-    onClick: changeToCurrentTab,
-    [keyPressProp]: onKeyPress,
-    onFocus: onFocus,
-    role: "tab",
-    [tabIndexProp]: isActive ? 0 : tabIndex,
-    "aria-disabled": isAnyDisabled,
-    "aria-selected": isActive,
-    "aria-controls": tabPanelId,
-    children: [icon && /*#__PURE__*/jsx(Icon, {
-      icon: icon,
-      size: Size.xs,
-      ...iconProps
-    }), label && /*#__PURE__*/jsx(Text, {
-      as: "span",
-      truncate: true,
-      children: label
-    })]
+    ref: ref,
+    children: /*#__PURE__*/jsxs(Fragment, {
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        icon: icon,
+        size: Size.xs,
+        ...iconProps
+      }), label && /*#__PURE__*/jsx(Text, {
+        as: "span",
+        truncate: true,
+        children: label
+      })]
+    })
   });
 };
 
 /**
- * Defines the props of the component.
+ * Defines the props of the component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element (`as="a"` with required `href`, or `as={RouterLink}`), while the mode
+ * (`role="tab"` vs nav-link) is driven by `TabProvider` presence. The forwarded ref type follows `as`.
  */
 
 /**
  * Tab component.
  *
  * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * when rendered inside a `TabProvider`.
+ *
+ * Outside a `TabProvider` (nav-link mode): plain link, no `role="tab"`/roving tabindex/`changeToTab`
+ * dispatch — only `aria-current` marks the active item.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
+ * @param  ref   Component ref (type follows `as`).
  * @return React element.
  */
-const Tab = forwardRef((props, ref) => {
+const Tab = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
     isAnyDisabled,
     otherProps
   } = useDisableStateProps(props);
   const {
+    as = 'button',
     isActive: propIsActive,
     id,
     onFocus,
     onKeyPress,
     ...forwardedProps
   } = otherProps;
+
+  // Register into the provider (if any) so it can track this tab's index / active state.
   const tabState = useTabProviderContext('tab', id);
+  // In a provider => tab mode (role="tab"); outside => nav-link mode. Mirrors TabList's role.
+  const inProvider = tabState !== undefined;
   const {
     isLazy: _isLazy,
+    tabId,
     ...state
   } = tabState ?? {};
+  // Without a provider there's no active index, so this collapses to the caller-provided value.
   const isActive = propIsActive || state?.isActive;
   return Tab$1({
-    id,
+    ...forwardedProps,
     ...state,
+    as,
+    role: inProvider ? 'tab' : undefined,
     Icon,
     Text,
     ref,
+    // Falls back to the caller-provided `id` when there's no TabProvider to generate one.
+    id: tabId || id,
     isActive,
     isAnyDisabled,
+    isDisabled: isAnyDisabled,
     handleFocus: onFocus,
-    handleKeyPress: onKeyPress,
-    ...forwardedProps
+    handleKeyPress: onKeyPress
   });
+}), {
+  displayName: COMPONENT_NAME$6,
+  className: CLASSNAME$6,
+  defaultProps: DEFAULT_PROPS$6
 });
-Tab.displayName = COMPONENT_NAME$5;
-Tab.className = CLASSNAME$6;
-Tab.defaultProps = DEFAULT_PROPS$6;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'TabPanel';
+const COMPONENT_NAME$5 = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
@@ -21225,7 +21783,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;
 
@@ -21376,7 +21934,7 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Thumbnail';
+const COMPONENT_NAME$4 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
@@ -21666,7 +22224,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;
 
@@ -21710,7 +22268,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$2 = 'TimePickerField';
+const COMPONENT_NAME$3 = 'TimePickerField';
 
 /**
  * Component default class name (BEM root).
@@ -21811,7 +22369,7 @@ const TimePickerField$1 = (props, {
     translations: translations
   });
 };
-TimePickerField$1.displayName = COMPONENT_NAME$2;
+TimePickerField$1.displayName = COMPONENT_NAME$3;
 TimePickerField$1.className = CLASSNAME$3;
 
 /**
@@ -22075,12 +22633,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.
@@ -22149,7 +22707,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;
 
@@ -22548,5 +23106,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