@lumx/react 4.20.0-next.4 → 4.20.0

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';
@@ -6415,29 +6415,6 @@ function setupListbox(handle, signal, notify, options) {
   return focusNav;
 }
 
-/**
- * Wrap `fn` so that, no matter how many times the returned function is called within the same
- * microtask cycle, `fn` only runs once at the end of that cycle.
- */
-function debounceMicrotask(fn) {
-  let running = false;
-  const debounced = () => {
-    if (!running) {
-      running = true;
-      queueMicrotask(() => {
-        if (running) {
-          running = false;
-          fn();
-        }
-      });
-    }
-  };
-  debounced.cancel = () => {
-    running = false;
-  };
-  return debounced;
-}
-
 /** Options for configuring the shared combobox behavior. */
 
 /**
@@ -6498,8 +6475,18 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     loadingAnnouncement: new Set()
   };
 
+  /**
+   * Last value dispatched for each event. Kept in sync so pull-based subscribers — React's
+   * `useSyncExternalStore` via {@link ComboboxHandle.getSnapshot} — can read the current value
+   * during their own render/commit. This lets React catch changes that happened between a
+   * consumer's render and its subscription (e.g. options registered by child effects before the
+   * consumer subscribed, since `optionsChange` is not replayed on subscribe).
+   */
+  const latestValues = {};
+
   /** Notify all subscribers for a given event. */
   function notify(event, value) {
+    latestValues[event] = value;
     subscribers[event].forEach(cb => cb(value));
   }
 
@@ -6522,9 +6509,8 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
    * 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)
    */
-  const notifyVisibilityChange = debounceMicrotask(() => {
+  function notifyVisibilityChange() {
     for (const [sectionElement] of sectionRegistrations) {
       notifySection(sectionElement, sectionRegistrations, optionRegistrations);
     }
@@ -6545,7 +6531,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     if (isOpenState) {
       trigger?.setAttribute('aria-expanded', String(hasVisibleContent()));
     }
-  });
+  }
 
   // ── Skeleton loading tracking ──────────────────────────────
 
@@ -6931,6 +6917,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         subscribers[event].delete(callback);
       };
     },
+    getSnapshot(event) {
+      return latestValues[event];
+    },
     destroy() {
       detach();
       trigger = null;
@@ -6939,10 +6928,13 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       lastOptionsLength = 0;
       lastInputValue = '';
       lastLoadingState = false;
+      // 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();
       clearTimeout(loadingTimer);
       announcementSent = false;
       // Clear all subscribers
@@ -7267,6 +7259,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 +7475,30 @@ function useComboboxContext() {
 
 /**
  * Hook to subscribe to a combobox event via the handle's subscriber system.
- * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+ *
+ * Uses `useSyncExternalStore` (shim, for React 17 support) reading the handle's synchronous
+ * `getSnapshot` — the correct pattern for an external (non-React) store. It reads the current
+ * value during commit, so a consumer doesn't miss changes that happened between its render and its
+ * subscription (e.g. options registered by child effects before this consumer subscribed, since
+ * `optionsChange` is not replayed on subscribe), and it is tearing-safe under concurrent rendering.
+ *
+ * The handle dispatches synchronously, so the store update fires within the triggering render/event
+ * (inside React's `act` in tests) rather than a deferred microtask. 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);
 }
 
 /**
@@ -11850,13 +12052,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';
 
 /**
- * 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 +12084,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 +12124,8 @@ const Dialog$1 = props => {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
-          children: /*#__PURE__*/jsx("div", {
-            className: element$B('container'),
-            role: "dialog",
-            "aria-modal": "true",
-            ...dialogProps,
-            children: /*#__PURE__*/jsx(ClickAwayProvider, {
-              callback: !shouldPreventCloseOnClickAway && handleClose,
-              childrenRefs: clickAwayRefs,
-              parentRef: rootRef,
-              children: /*#__PURE__*/jsxs("section", {
-                className: element$B('wrapper'),
-                ref: wrapperRef,
-                children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
-                  ...headerChildProps,
-                  className: classnames(element$B('header', {
-                    'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
-                  }), headerChildProps?.className),
-                  children: [header, headerChildContent]
-                }), /*#__PURE__*/jsxs("div", {
-                  ref: contentRef,
-                  className: element$B('content'),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: element$B('sentinel', {
-                      top: true
-                    }),
-                    ref: setSentinelTop
-                  }), content, /*#__PURE__*/jsx("div", {
-                    className: element$B('sentinel', {
-                      bottom: true
-                    }),
-                    ref: setSentinelBottom
-                  })]
-                }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
-                  ...footerChildProps,
-                  className: classnames(element$B('footer', {
-                    'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
-                  }), footerChildProps?.className),
-                  children: [footer, footerChildContent]
-                }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: element$B('progress-overlay'),
-                  children: /*#__PURE__*/jsx(ProgressCircular, {})
-                })]
-              })
-            })
+          children: /*#__PURE__*/jsx(IdsRegistryProvider, {
+            children: children
           })
         })
       })]
@@ -11985,8 +12134,257 @@ 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.
+ *
+ * Re-reads the registry's `getId` snapshot on mount/update (in case an id was registered between
+ * render and commit, e.g. by a descendant in the same commit) before subscribing for later changes.
+ *
+ * @param  key Registry key to read.
+ * @return The registered id, or `undefined` when none is registered / outside any provider.
+ */
+function useRegisteredId(key) {
+  const registry = useContext(IdsRegistryContext);
+  const [id, setId] = useState(() => registry?.getId(key));
+  useEffect(() => {
+    setId(registry?.getId(key));
+    return registry?.subscribe(key, () => setId(registry.getId(key)));
+  }, [registry, key]);
+  return id;
+}
+
+/**
+ * Renders the core `DialogContent`, resolving its `aria-labelledby` from the ids registry.
+ *
+ * Must render as a descendant of the `IdsRegistryProvider` set up by the core `DialogShell` (which is
+ * why it is its own component: the subscription hook needs to run below the provider). Internal to the
+ * dialog family - not exported from the package barrel.
  */
+const DialogContent = props => {
+  const labelId = useRegisteredId(DIALOG_LABEL_KEY);
+  return DialogContent$1({
+    ...props,
+    labelId
+  });
+};
+DialogContent.displayName = 'DialogContent';
 
 const isHeader$1 = isComponent('header');
 const isFooter$1 = isComponent('footer');
@@ -12007,11 +12405,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 +12430,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 +12442,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,75 +12461,252 @@ 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
+    })
+  });
+});
+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;
+
 /**
- * Component display name.
+ * Typography to use by default depending on the heading level.
  */
-const COMPONENT_NAME$_ = 'Divider';
+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'
+};
 
 /**
- * Component default class name and class prefix.
+ * Defines the props of the component.
  */
-const CLASSNAME$Z = 'lumx-divider';
+
+/**
+ * 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.
+ */
+const COMPONENT_NAME$Z = 'Divider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$Y = 'lumx-divider';
 const {
   block: block$L
-} = bem(CLASSNAME$Z);
+} = bem(CLASSNAME$Y);
 
 /**
  * Divider component.
@@ -12181,7 +12737,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Divider component.
@@ -12202,22 +12758,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$_;
-Divider.className = CLASSNAME$Z;
-Divider.defaultProps = DEFAULT_PROPS$R;
+Divider.displayName = COMPONENT_NAME$Z;
+Divider.className = CLASSNAME$Y;
+Divider.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'DragHandle';
+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 +12809,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * DragHandle component.
@@ -12274,9 +12830,9 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$Z;
-DragHandle.className = CLASSNAME$Y;
-DragHandle.defaultProps = DEFAULT_PROPS$Q;
+DragHandle.displayName = COMPONENT_NAME$Y;
+DragHandle.className = CLASSNAME$X;
+DragHandle.defaultProps = DEFAULT_PROPS$P;
 
 const INITIAL_INDEX = -1;
 
@@ -12521,21 +13077,21 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'Dropdown';
+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 +13115,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;
@@ -12614,28 +13170,28 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$Y;
-Dropdown.className = CLASSNAME$X;
-Dropdown.defaultProps = DEFAULT_PROPS$P;
+Dropdown.displayName = COMPONENT_NAME$X;
+Dropdown.className = CLASSNAME$W;
+Dropdown.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'ExpansionPanel';
+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 +13304,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,
@@ -12819,17 +13375,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$X;
-ExpansionPanel.className = CLASSNAME$W;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
+ExpansionPanel.displayName = COMPONENT_NAME$W;
+ExpansionPanel.className = CLASSNAME$V;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
 
-const COMPONENT_NAME$W = 'Flag';
-const CLASSNAME$V = 'lumx-flag';
-const DEFAULT_PROPS$N = {};
+const COMPONENT_NAME$V = 'Flag';
+const CLASSNAME$U = 'lumx-flag';
+const DEFAULT_PROPS$M = {};
 const {
   block: block$H,
   element: element$y
-} = bem(CLASSNAME$V);
+} = bem(CLASSNAME$U);
 
 /**
  * Flag component.
@@ -12887,140 +13443,9 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$W;
-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$V = '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$V;
-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.displayName = COMPONENT_NAME$V;
+Flag.className = CLASSNAME$U;
+Flag.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
@@ -14127,7 +14552,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,
@@ -14328,7 +14753,9 @@ const Lightbox$1 = props => {
     handleClose,
     parentElement,
     focusElement,
+    labelId,
     preventAutoClose,
+    preventCloseOnClick,
     theme,
     zIndex,
     isVisible,
@@ -14348,8 +14775,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 +14804,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 +14824,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 +14844,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 +14869,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 +14889,7 @@ const Lightbox = forwardRef((props, ref) => {
     focusElement,
     isOpen,
     isVisible,
+    labelId,
     ref: mergeRefs(ref, wrapperRef),
     theme,
     zIndex,
@@ -14490,6 +14898,26 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
+
+/**
+ * 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;
 
@@ -16300,7 +16728,10 @@ 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.
  */
 
 /**
@@ -16319,21 +16750,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 +16774,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,6 +16787,21 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
+
+/**
+ * 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;
@@ -22599,5 +23047,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$1z 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$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 };
+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