@dynatrace/strato-components 3.6.0 → 3.7.0

package/esm/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-6-0 {
+._1a1ozfd0-3-7-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-6-0 {
+._1a1ozfd1-3-7-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-6-0 {
+._1a1ozfd2-3-7-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-6-0 {
+._1a1ozfd3-3-7-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-6-0 stop {
+._1a1ozfd4-3-7-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-6-0 {
+._1a1ozfd5-3-7-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-6-0 {
+  ._1a1ozfd6-3-7-0 {
     display: contents;
   }
 }

package/esm/content/skeleton/Skeleton.sty.js

@@ -1,10 +1,10 @@
 import "./Skeleton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var skeletonPlaceholderCSS = _7a468({ defaultClassName: "_1a1ozfd0-3-6-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-6-0", rounded: "_1a1ozfd2-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-6-0";
-var skeletonSvgCSS = "_1a1ozfd3-3-6-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-6-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-6-0";
+var skeletonPlaceholderCSS = _7a468({ defaultClassName: "_1a1ozfd0-3-7-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-7-0", rounded: "_1a1ozfd2-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-7-0";
+var skeletonSvgCSS = "_1a1ozfd3-3-7-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-7-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-7-0";
 export {
   skeletonPlaceholderCSS,
   skeletonSvgBackgroundFillCSS,

package/esm/content/skeleton/Skeleton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/skeleton/Skeleton.css.ts"],
-  "sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'_1a1ozfd0-3-6-0',variantClassNames:{variant:{'default':'_1a1ozfd1-3-6-0',rounded:'_1a1ozfd2-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var skeletonSvgBackgroundFillCSS = '_1a1ozfd5-3-6-0';\nexport var skeletonSvgCSS = '_1a1ozfd3-3-6-0';\nexport var skeletonSvgGradientCSS = '_1a1ozfd4-3-6-0';\nexport var skeletonSvgGradientRectCSS = '_1a1ozfd6-3-6-0';"],
+  "sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'_1a1ozfd0-3-7-0',variantClassNames:{variant:{'default':'_1a1ozfd1-3-7-0',rounded:'_1a1ozfd2-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var skeletonSvgBackgroundFillCSS = '_1a1ozfd5-3-7-0';\nexport var skeletonSvgCSS = '_1a1ozfd3-3-7-0';\nexport var skeletonSvgGradientCSS = '_1a1ozfd4-3-7-0';\nexport var skeletonSvgGradientRectCSS = '_1a1ozfd6-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,+BAA+B;AACnC,IAAI,iBAAiB;AACrB,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B;",
   "names": []
 }

package/esm/content/terminology-overlay/TerminologyOverlay.css

@@ -1,4 +1,4 @@
-._1dd8zuz0-3-6-0 {
+._1dd8zuz0-3-7-0 {
   border: none;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   padding: var(--dt-spacings-size-0, 0);
@@ -16,13 +16,13 @@
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1dd8zuz0-3-6-0:hover {
+._1dd8zuz0-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-6-0:active {
+._1dd8zuz0-3-7-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-6-0:not(.strato-focus-visible) {
+._1dd8zuz0-3-7-0:not(.strato-focus-visible) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }

package/esm/content/terminology-overlay/TerminologyOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./TerminologyOverlay.css";
-var trigger = "_1dd8zuz0-3-6-0";
+var trigger = "_1dd8zuz0-3-7-0";
 export {
   trigger
 };

package/esm/content/terminology-overlay/TerminologyOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/TerminologyOverlay.css.ts"],
-  "sourcesContent": ["import './TerminologyOverlay.css';\nexport var trigger = '_1dd8zuz0-3-6-0';"],
+  "sourcesContent": ["import './TerminologyOverlay.css';\nexport var trigger = '_1dd8zuz0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/content/terminology-overlay/Trigger.js

@@ -6,7 +6,7 @@ import { trigger } from "./TerminologyOverlay.sty.js";
 import { TerminologyOverlayContext } from "./TerminologyOverlayContext.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 const Trigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {

package/esm/content/terminology-overlay/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/Trigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, type ReactNode } from 'react';\n\nimport { COMPONENT_NAME } from './terminology-overlay-constants.js';\nimport { trigger } from './TerminologyOverlay.sty.js';\nimport { TerminologyOverlayContext } from './TerminologyOverlayContext.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyOverlayTriggerProps\n  extends DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    AriaLabelingProps {\n  /**\n   * Trigger Overlay button must contain children elements.\n   */\n  children: ReactNode;\n}\n//#endregion Typings\n\n/**\n * TerminologyOverlay Trigger component, used for rendering trigger content.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  TerminologyOverlayTriggerProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Trigger',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n    isMinimal: true,\n  });\n  const overlayTriggerProps = useContext(TerminologyOverlayContext);\n\n  return (\n    <button\n      className={clsx(\n        focusClassName,\n        trigger,\n        {\n          'strato-focus-visible': isFocusVisible,\n        },\n        consumerClassName,\n      )}\n      style={{\n        textDecoration: isFocusVisible ? 'none' : undefined,\n        ...consumerStyle,\n      }}\n      ref={forwardedRef}\n      {..._mergeProps(\n        overlayTriggerProps,\n        focusProps,\n        ariaLabelingProps,\n        remainingBehavioralTrackingProps,\n      )}\n      aria-haspopup=\"dialog\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-name={dataDtName}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </button>\n  );\n});\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'TerminologyOverlay.Trigger';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, type ReactNode } from 'react';\n\nimport { COMPONENT_NAME } from './terminology-overlay-constants.js';\nimport { trigger } from './TerminologyOverlay.sty.js';\nimport { TerminologyOverlayContext } from './TerminologyOverlayContext.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyOverlayTriggerProps\n  extends DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    AriaLabelingProps {\n  /**\n   * Trigger Overlay button must contain children elements.\n   */\n  children: ReactNode;\n}\n//#endregion Typings\n\n/**\n * TerminologyOverlay Trigger component, used for rendering trigger content.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  TerminologyOverlayTriggerProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Trigger',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n    isMinimal: true,\n  });\n  const overlayTriggerProps = useContext(TerminologyOverlayContext);\n\n  return (\n    <button\n      className={clsx(\n        focusClassName,\n        trigger,\n        {\n          'strato-focus-visible': isFocusVisible,\n        },\n        consumerClassName,\n      )}\n      style={{\n        textDecoration: isFocusVisible ? 'none' : undefined,\n        ...consumerStyle,\n      }}\n      ref={forwardedRef}\n      {..._mergeProps(\n        overlayTriggerProps,\n        focusProps,\n        ariaLabelingProps,\n        remainingBehavioralTrackingProps,\n      )}\n      aria-haspopup=\"dialog\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-name={dataDtName}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </button>\n  );\n});\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'TerminologyOverlay.Trigger';\n"],
   "mappings": "AAkEI;AAlEJ,OAAO,UAAU;AACjB,SAAS,YAAY,kBAAkC;AAEvD,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAO7B,SAAS,cAAc,mBAAmB;AAwBnC,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM;AAAA,IACJ,gBAAgB,aAAa;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,EAAE,YAAY,gBAAgB,eAAe,IAAI,aAAa;AAAA,IAClE,WAAW;AAAA,EACb,CAAC;AACD,QAAM,sBAAsB,WAAW,yBAAyB;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,wBAAwB;AAAA,QAC1B;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB,iBAAiB,SAAS;AAAA,QAC1C,GAAG;AAAA,MACL;AAAA,MACA,KAAK;AAAA,MACJ,GAAG;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,iBAAc;AAAA,MACd,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/core/components/app-root/AppRoot.css

@@ -118,7 +118,7 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
-:root[data-theme="light"]._1jgl8s50-3-6-0 {
+:root[data-theme="light"]._1jgl8s50-3-7-0 {
   --dt-box-shadows-surface-flat-rest: var(--_vr-10);
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
@@ -451,7 +451,7 @@
   --_vr-40: var(--_vr-shadow-1), var(--_vr-shadow-2-40), var(--_vr-shadow-0);
   --_vr-50: var(--_vr-shadow-1), var(--_vr-shadow-2-50), var(--_vr-shadow-0);
 }
-:root[data-theme="dark"]._1jgl8s50-3-6-0 {
+:root[data-theme="dark"]._1jgl8s50-3-7-0 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-20);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-50);

package/esm/core/components/app-root/AppRoot.sty.js

@@ -1,5 +1,5 @@
 import "./AppRoot.css";
-var dtVisualRefreshEnabled = "_1jgl8s50-3-6-0";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-7-0";
 export {
   dtVisualRefreshEnabled
 };

package/esm/core/components/app-root/AppRoot.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.css.ts"],
-  "sourcesContent": ["import './AppRoot.css';\nexport var dtVisualRefreshEnabled = '_1jgl8s50-3-6-0';"],
+  "sourcesContent": ["import './AppRoot.css';\nexport var dtVisualRefreshEnabled = '_1jgl8s50-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/core/components/focus-scope/FocusScope.js

@@ -20,31 +20,60 @@ const FocusScope = (props) => {
   ) {
     focusOptions = { focusVisible: false };
   }
+  const focusOptionsRef = useRef(focusOptions);
+  focusOptionsRef.current = focusOptions;
   useEffect(() => {
-    if (contain || autoFocus) {
-      focusFirstDescendant(wrapperRef.current, focusOptions);
-    }
     if (contain) {
-      focusContext.setBackgroundInertness(true);
       const triggerElementCopy2 = triggerElement.current;
+      const scopeRegistration = {
+        wrapperRef,
+        triggerElement: triggerElementCopy2
+      };
+      const unregister = focusContext.registerScope(scopeRegistration);
+      focusContext.setBackgroundInertness(true);
+      const handleFocusIn = (event) => {
+        if (focusContext.getTopScope() !== scopeRegistration) {
+          return;
+        }
+        const target = event.target;
+        if (target && wrapperRef.current?.contains(target)) {
+          return;
+        }
+        if (!focusContext.isInsideAnyScope(target)) {
+          return;
+        }
+        focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);
+      };
+      document.addEventListener("focusin", handleFocusIn, true);
+      focusFirstDescendant(wrapperRef.current, focusOptions);
       return () => {
+        document.removeEventListener("focusin", handleFocusIn, true);
+        unregister();
         focusContext.setBackgroundInertness(false);
-        focusContext.focusTriggerElement(triggerElementCopy2);
+        const stillActive = focusContext.getTopScope();
+        if (!stillActive?.wrapperRef.current?.contains(document.activeElement)) {
+          focusContext.focusTriggerElement(triggerElementCopy2);
+        }
       };
     }
+    if (autoFocus) {
+      focusFirstDescendant(wrapperRef.current, focusOptions);
+    }
+    const handleTabKey = (e) => {
+      if (e.key !== "Tab") {
+        return;
+      }
+      if (e.target === triggerElement.current) {
+        e.preventDefault();
+        focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);
+      }
+    };
     if (!autoFocus && !contain) {
-      document.addEventListener("keydown", (e) => {
-        if (e.key !== "Tab") {
-          return;
-        }
-        if (e.target === triggerElement.current) {
-          e.preventDefault();
-          focusFirstDescendant(wrapperRef.current, focusOptions);
-        }
-      });
+      document.addEventListener("keydown", handleTabKey);
     }
     const triggerElementCopy = triggerElement.current;
     return () => {
+      document.removeEventListener("keydown", handleTabKey);
       triggerElementCopy.focus();
     };
   }, [contain, autoFocus]);

package/esm/core/components/focus-scope/FocusScope.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/focus-scope/FocusScope.tsx"],
-  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { useActiveElement } from '../../hooks/useActiveElement.js';\nimport { useFocusContext } from '../../hooks/useFocusContext.js';\nimport { useModality } from '../../hooks/useModality.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport type { WithChildren } from '../../types/with-children.js';\nimport { focusFirstDescendant } from '../../utils/focus-management/focus-first-descendant.js';\n\n// #region Types\n\n/**\n * Prop definition of the `FocusScope` component.\n * @public\n */\nexport interface FocusScopeProps extends WithChildren, DataTestId {\n  /**\n   * If set to true, the focus scope automatically focuses the first focusable element inside.\n   * @defaultValue false\n   */\n  autoFocus?: boolean;\n  /**\n   * If set to true, the focus scope traps the focus inside.\n   * @defaultValue false\n   */\n  contain?: boolean;\n}\n// #endregion Types\n\n/**\n * The `FocusScope` helps you manage the focus when opening any overlay. If you\n * want to create a custom overlay, you can wrap the content of your overlay in the\n * `FocusScope` to help you make the overlay accessible and handle focus\n * appropriately.\n * @public\n */\nexport const FocusScope = (props: FocusScopeProps) => {\n  const { autoFocus, contain, children, 'data-testid': dataTestId } = props;\n  const focusContext = useFocusContext();\n  const modality = useModality();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const focusedElement = useActiveElement();\n  const triggerElement = useRef(focusedElement);\n\n  let focusOptions: { focusVisible: boolean } | undefined;\n\n  // If the modality is keyboard, we want to focus the first focusable element and show the focus ring.\n  if (modality === 'keyboard') {\n    focusOptions = { focusVisible: true };\n  } else if (\n    // If the modality is pointer or touch, we want to focus the first focusable element but not show the focus ring.\n    modality === 'pointer' ||\n    modality === 'touch'\n  ) {\n    focusOptions = { focusVisible: false };\n  }\n\n  useEffect(() => {\n    if (contain || autoFocus) {\n      focusFirstDescendant(wrapperRef.current, focusOptions);\n    }\n\n    if (contain) {\n      focusContext.setBackgroundInertness(true);\n      const triggerElementCopy = triggerElement.current;\n\n      return () => {\n        focusContext.setBackgroundInertness(false);\n\n        focusContext.focusTriggerElement(triggerElementCopy);\n      };\n    }\n\n    if (!autoFocus && !contain) {\n      document.addEventListener('keydown', (e) => {\n        if (e.key !== 'Tab') {\n          return;\n        }\n\n        if (e.target === triggerElement.current) {\n          e.preventDefault();\n          focusFirstDescendant(wrapperRef.current, focusOptions);\n        }\n      });\n    }\n\n    const triggerElementCopy = triggerElement.current;\n\n    return () => {\n      // restore focus on trigger when unmounting the focusscope\n      triggerElementCopy.focus();\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [contain, autoFocus]);\n\n  return (\n    <div\n      style={{ display: 'contents' }}\n      ref={wrapperRef}\n      aria-labelledby={triggerElement.current.id}\n      data-testid={dataTestId}\n      // Prevents that focus is lost when clicking on non-focusable items inside (atm used in the internal Drawer).\n      // Probably worth considering moving that to the focusScope when redoing the overlays.\n      // tabIndex={-1}\n    >\n      {children}\n    </div>\n  );\n};\n\nFocusScope.displayName = 'FocusScope';\n"],
-  "mappings": "AAiGI;AAjGJ,SAAS,WAAW,cAAc;AAElC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAG5B,SAAS,4BAA4B;AA6B9B,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,WAAW,SAAS,UAAU,eAAe,WAAW,IAAI;AACpE,QAAM,eAAe,gBAAgB;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,iBAAiB,OAAO,cAAc;AAE5C,MAAI;AAGJ,MAAI,aAAa,YAAY;AAC3B,mBAAe,EAAE,cAAc,KAAK;AAAA,EACtC;AAAA;AAAA,IAEE,aAAa,aACb,aAAa;AAAA,IACb;AACA,mBAAe,EAAE,cAAc,MAAM;AAAA,EACvC;AAEA,YAAU,MAAM;AACd,QAAI,WAAW,WAAW;AACxB,2BAAqB,WAAW,SAAS,YAAY;AAAA,IACvD;AAEA,QAAI,SAAS;AACX,mBAAa,uBAAuB,IAAI;AACxC,YAAMA,sBAAqB,eAAe;AAE1C,aAAO,MAAM;AACX,qBAAa,uBAAuB,KAAK;AAEzC,qBAAa,oBAAoBA,mBAAkB;AAAA,MACrD;AAAA,IACF;AAEA,QAAI,CAAC,aAAa,CAAC,SAAS;AAC1B,eAAS,iBAAiB,WAAW,CAAC,MAAM;AAC1C,YAAI,EAAE,QAAQ,OAAO;AACnB;AAAA,QACF;AAEA,YAAI,EAAE,WAAW,eAAe,SAAS;AACvC,YAAE,eAAe;AACjB,+BAAqB,WAAW,SAAS,YAAY;AAAA,QACvD;AAAA,MACF,CAAC;AAAA,IACH;AAEA,UAAM,qBAAqB,eAAe;AAE1C,WAAO,MAAM;AAEX,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EAGF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,KAAK;AAAA,MACL,mBAAiB,eAAe,QAAQ;AAAA,MACxC,eAAa;AAAA,MAKZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;",
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nimport { useActiveElement } from '../../hooks/useActiveElement.js';\nimport { useFocusContext } from '../../hooks/useFocusContext.js';\nimport { useModality } from '../../hooks/useModality.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport type { WithChildren } from '../../types/with-children.js';\nimport { focusFirstDescendant } from '../../utils/focus-management/focus-first-descendant.js';\n\n// #region Types\n\n/**\n * Prop definition of the `FocusScope` component.\n * @public\n */\nexport interface FocusScopeProps extends WithChildren, DataTestId {\n  /**\n   * If set to true, the focus scope automatically focuses the first focusable element inside.\n   * @defaultValue false\n   */\n  autoFocus?: boolean;\n  /**\n   * If set to true, the focus scope traps the focus inside.\n   * @defaultValue false\n   */\n  contain?: boolean;\n}\n// #endregion Types\n\n/**\n * The `FocusScope` helps you manage the focus when opening any overlay. If you\n * want to create a custom overlay, you can wrap the content of your overlay in the\n * `FocusScope` to help you make the overlay accessible and handle focus\n * appropriately.\n * @public\n */\nexport const FocusScope = (props: FocusScopeProps) => {\n  const { autoFocus, contain, children, 'data-testid': dataTestId } = props;\n  const focusContext = useFocusContext();\n  const modality = useModality();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const focusedElement = useActiveElement();\n  const triggerElement = useRef(focusedElement);\n\n  let focusOptions: { focusVisible: boolean } | undefined;\n\n  // If the modality is keyboard, we want to focus the first focusable element and show the focus ring.\n  if (modality === 'keyboard') {\n    focusOptions = { focusVisible: true };\n  } else if (\n    // If the modality is pointer or touch, we want to focus the first focusable element but not show the focus ring.\n    modality === 'pointer' ||\n    modality === 'touch'\n  ) {\n    focusOptions = { focusVisible: false };\n  }\n\n  // Keep a ref so event handlers always read the current modality-derived value,\n  // even when modality changes while the scope is open (effect deps don't include modality).\n  const focusOptionsRef = useRef(focusOptions);\n  focusOptionsRef.current = focusOptions;\n\n  useEffect(() => {\n    if (contain) {\n      const triggerElementCopy = triggerElement.current;\n\n      // Register on the active-scope stack BEFORE moving focus, so the\n      // previous top scope's focusin listener sees this scope as the new top\n      // and yields rather than stealing focus back.\n      const scopeRegistration = {\n        wrapperRef,\n        triggerElement: triggerElementCopy,\n      };\n      const unregister = focusContext.registerScope(scopeRegistration);\n      focusContext.setBackgroundInertness(true);\n\n      // Containment listener: only the top scope acts. When focus escapes\n      // into another registered scope (e.g. a closing menu restoring focus\n      // to a trigger that lives in an outer Sheet), pull it back. Focus\n      // moving into a sibling portal that isn't a FocusScope (e.g. a Radix\n      // Menu's portaled content) is a legitimate nested overlay \u2014 leave it\n      // alone, otherwise the menu's onSelect loses focus and never fires.\n      const handleFocusIn = (event: FocusEvent) => {\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        const target = event.target as Element | null;\n        if (target && wrapperRef.current?.contains(target)) {\n          return;\n        }\n        if (!focusContext.isInsideAnyScope(target)) {\n          return;\n        }\n        focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);\n      };\n      document.addEventListener('focusin', handleFocusIn, true);\n\n      focusFirstDescendant(wrapperRef.current, focusOptions);\n\n      return () => {\n        document.removeEventListener('focusin', handleFocusIn, true);\n        unregister();\n        focusContext.setBackgroundInertness(false);\n\n        // Only restore focus to this scope's trigger when it would not steal\n        // focus from another still-active scope: if a remaining scope already\n        // owns focus, leave it alone.\n        const stillActive = focusContext.getTopScope();\n        if (\n          !stillActive?.wrapperRef.current?.contains(document.activeElement)\n        ) {\n          focusContext.focusTriggerElement(triggerElementCopy);\n        }\n      };\n    }\n\n    if (autoFocus) {\n      focusFirstDescendant(wrapperRef.current, focusOptions);\n    }\n\n    const handleTabKey = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      if (e.target === triggerElement.current) {\n        e.preventDefault();\n        focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);\n      }\n    };\n\n    if (!autoFocus && !contain) {\n      document.addEventListener('keydown', handleTabKey);\n    }\n\n    const triggerElementCopy = triggerElement.current;\n\n    return () => {\n      document.removeEventListener('keydown', handleTabKey);\n      // restore focus on trigger when unmounting the focusscope\n      triggerElementCopy.focus();\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [contain, autoFocus]);\n\n  return (\n    <div\n      style={{ display: 'contents' }}\n      ref={wrapperRef}\n      aria-labelledby={triggerElement.current.id}\n      data-testid={dataTestId}\n      // Prevents that focus is lost when clicking on non-focusable items inside (atm used in the internal Drawer).\n      // Probably worth considering moving that to the focusScope when redoing the overlays.\n      // tabIndex={-1}\n    >\n      {children}\n    </div>\n  );\n};\n\nFocusScope.displayName = 'FocusScope';\n"],
+  "mappings": "AAmJI;AAnJJ,SAAS,WAAW,cAAc;AAElC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAG5B,SAAS,4BAA4B;AA6B9B,MAAM,aAAa,CAAC,UAA2B;AACpD,QAAM,EAAE,WAAW,SAAS,UAAU,eAAe,WAAW,IAAI;AACpE,QAAM,eAAe,gBAAgB;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,iBAAiB,OAAO,cAAc;AAE5C,MAAI;AAGJ,MAAI,aAAa,YAAY;AAC3B,mBAAe,EAAE,cAAc,KAAK;AAAA,EACtC;AAAA;AAAA,IAEE,aAAa,aACb,aAAa;AAAA,IACb;AACA,mBAAe,EAAE,cAAc,MAAM;AAAA,EACvC;AAIA,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAE1B,YAAU,MAAM;AACd,QAAI,SAAS;AACX,YAAMA,sBAAqB,eAAe;AAK1C,YAAM,oBAAoB;AAAA,QACxB;AAAA,QACA,gBAAgBA;AAAA,MAClB;AACA,YAAM,aAAa,aAAa,cAAc,iBAAiB;AAC/D,mBAAa,uBAAuB,IAAI;AAQxC,YAAM,gBAAgB,CAAC,UAAsB;AAC3C,YAAI,aAAa,YAAY,MAAM,mBAAmB;AACpD;AAAA,QACF;AACA,cAAM,SAAS,MAAM;AACrB,YAAI,UAAU,WAAW,SAAS,SAAS,MAAM,GAAG;AAClD;AAAA,QACF;AACA,YAAI,CAAC,aAAa,iBAAiB,MAAM,GAAG;AAC1C;AAAA,QACF;AACA,6BAAqB,WAAW,SAAS,gBAAgB,OAAO;AAAA,MAClE;AACA,eAAS,iBAAiB,WAAW,eAAe,IAAI;AAExD,2BAAqB,WAAW,SAAS,YAAY;AAErD,aAAO,MAAM;AACX,iBAAS,oBAAoB,WAAW,eAAe,IAAI;AAC3D,mBAAW;AACX,qBAAa,uBAAuB,KAAK;AAKzC,cAAM,cAAc,aAAa,YAAY;AAC7C,YACE,CAAC,aAAa,WAAW,SAAS,SAAS,SAAS,aAAa,GACjE;AACA,uBAAa,oBAAoBA,mBAAkB;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAEA,QAAI,WAAW;AACb,2BAAqB,WAAW,SAAS,YAAY;AAAA,IACvD;AAEA,UAAM,eAAe,CAAC,MAAqB;AACzC,UAAI,EAAE,QAAQ,OAAO;AACnB;AAAA,MACF;AAEA,UAAI,EAAE,WAAW,eAAe,SAAS;AACvC,UAAE,eAAe;AACjB,6BAAqB,WAAW,SAAS,gBAAgB,OAAO;AAAA,MAClE;AAAA,IACF;AAEA,QAAI,CAAC,aAAa,CAAC,SAAS;AAC1B,eAAS,iBAAiB,WAAW,YAAY;AAAA,IACnD;AAEA,UAAM,qBAAqB,eAAe;AAE1C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,YAAY;AAEpD,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EAGF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,KAAK;AAAA,MACL,mBAAiB,eAAe,QAAQ;AAAA,MACxC,eAAa;AAAA,MAKZ;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;",
   "names": ["triggerElementCopy"]
 }

package/esm/core/components/visually-hidden/VisuallyHidden.css

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-6-0 {
+._1xz8nhz0-3-7-0 {
   width: 0;
   height: 0;
   opacity: 0;

package/esm/core/components/visually-hidden/VisuallyHidden.sty.js

@@ -1,5 +1,5 @@
 import "./VisuallyHidden.css";
-var visuallyHidden = "_1xz8nhz0-3-6-0";
+var visuallyHidden = "_1xz8nhz0-3-7-0";
 export {
   visuallyHidden
 };

package/esm/core/components/visually-hidden/VisuallyHidden.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/visually-hidden/VisuallyHidden.css.ts"],
-  "sourcesContent": ["import './VisuallyHidden.css';\nexport var visuallyHidden = '_1xz8nhz0-3-6-0';"],
+  "sourcesContent": ["import './VisuallyHidden.css';\nexport var visuallyHidden = '_1xz8nhz0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;",
   "names": []
 }

package/esm/core/contexts/FocusContext.js

@@ -1,8 +1,11 @@
 import { createContext } from "react";
 const FocusContext = createContext({
   backgroundInertness: void 0,
-  setBackgroundInertness: (value) => null,
-  focusTriggerElement: (value) => null
+  setBackgroundInertness: () => null,
+  focusTriggerElement: () => null,
+  registerScope: () => () => void 0,
+  getTopScope: () => void 0,
+  isInsideAnyScope: () => false
 });
 export {
   FocusContext

package/esm/core/contexts/FocusContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/contexts/FocusContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  setBackgroundInertness: (value: boolean) => void;\n  focusTriggerElement: (value: HTMLElement | undefined) => void;\n};\n\n/**\n * This context keeps all information needed for proper focus management.\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n * @internal\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  backgroundInertness: undefined,\n  setBackgroundInertness: (value) => null,\n  focusTriggerElement: (value) => null,\n});\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAkBvB,MAAM,eAAe,cAAiC;AAAA,EAC3D,qBAAqB;AAAA,EACrB,wBAAwB,CAAC,UAAU;AAAA,EACnC,qBAAqB,CAAC,UAAU;AAClC,CAAC;",
+  "sourcesContent": ["import { createContext, type RefObject } from 'react';\n\n/**\n * A registered `FocusScope` with `contain`. Used by the FocusProvider's\n * scope stack so that nested scopes (e.g. a Modal inside a Sheet) can\n * cooperate: only the topmost scope is the active focus-containment owner.\n * @internal\n */\nexport type FocusScopeRegistration = {\n  wrapperRef: RefObject<HTMLDivElement | null>;\n  triggerElement: HTMLElement | undefined;\n};\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  /**\n   * Increments (true) or decrements (false) the active-scope counter that\n   * controls whether the provider's wrapper is `inert`. Reference counted\n   * so that nested scopes do not clear the parent's inertness when they\n   * unmount.\n   */\n  setBackgroundInertness: (value: boolean) => void;\n  focusTriggerElement: (value: HTMLElement | undefined) => void;\n  /**\n   * Push a contain-scope onto the active-scope stack. Returns a function\n   * that pops the scope off again.\n   */\n  registerScope: (scope: FocusScopeRegistration) => () => void;\n  /** Returns the currently topmost contain-scope, if any. */\n  getTopScope: () => FocusScopeRegistration | undefined;\n  /** Returns whether the given element is inside any registered scope. */\n  isInsideAnyScope: (element: Element | null) => boolean;\n};\n\n/**\n * This context keeps all information needed for proper focus management.\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n * @internal\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  backgroundInertness: undefined,\n  setBackgroundInertness: () => null,\n  focusTriggerElement: () => null,\n  registerScope: () => () => undefined,\n  getTopScope: () => undefined,\n  isInsideAnyScope: () => false,\n});\n"],
+  "mappings": "AAAA,SAAS,qBAAqC;AA4CvC,MAAM,eAAe,cAAiC;AAAA,EAC3D,qBAAqB;AAAA,EACrB,wBAAwB,MAAM;AAAA,EAC9B,qBAAqB,MAAM;AAAA,EAC3B,eAAe,MAAM,MAAM;AAAA,EAC3B,aAAa,MAAM;AAAA,EACnB,kBAAkB,MAAM;AAC1B,CAAC;",
   "names": []
 }

package/esm/core/{styles → hooks}/useFocusRing.js

@@ -1,9 +1,8 @@
 import {
   useCallback,
-  useEffect,
   useState
 } from "react";
-import * as styles from "./focusRing.sty.js";
+import * as styles from "../styles/focusRing.sty.js";
 import { modalityStore } from "../utils/modality.js";
 function useFocusRing(props = {}) {
   const {
@@ -18,11 +17,6 @@ function useFocusRing(props = {}) {
   const [isFocused, setIsFocused] = useState(false);
   const modality = modalityStore.getState();
   const usedColor = color ?? variant ?? "neutral";
-  useEffect(() => {
-    if (disabled) {
-      setIsFocused(false);
-    }
-  }, [disabled]);
   const onBlur = useCallback((event) => {
     if (event.currentTarget === event.target) {
       setIsFocused(false);
@@ -37,7 +31,7 @@ function useFocusRing(props = {}) {
     onFocus,
     onBlur
   };
-  if ((ignoreModality || modality === "keyboard") && (isFocused || focusWithin)) {
+  if ((ignoreModality || modality === "keyboard") && (isFocused || focusWithin) && !disabled) {
     if (isMinimal) {
       return {
         focusClassName: focusWithin ? styles.focusRingFocusWithin({

package/esm/core/hooks/useFocusRing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useFocusRing.ts"],
+  "sourcesContent": ["import {\n  useCallback,\n  useState,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\n\nimport * as styles from '../styles/focusRing.sty.js';\nimport { modalityStore } from '../utils/modality.js';\n\n/** @public */\nexport interface UseFocusRingProps {\n  /**\n   * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.\n   * @defaultValue false\n   */\n  isMinimal?: boolean;\n\n  /**\n   * Whether or not the modality should be ignored, so that the focus ring is also present if users clicks the element (not just by tabbing to it).\n   * @defaultValue false\n   */\n  ignoreModality?: boolean;\n\n  /**\n   * The styling color of the element.\n   * @defaultValue neutral\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n\n  /**\n   * The styling color of the element.\n   * @defaultValue neutral\n   * @deprecated - `variant` is deprecated, please use `color` instead.\n   */\n  variant?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n\n  /**\n   * Apply the focus ring styling if an embedded element gains the focus\n   */\n  focusWithin?: boolean;\n\n  /**\n   * Whether the element is disabled. If disabled changes to true, the focus will be removed.\n   */\n  disabled?: boolean;\n}\n\n/** @public */\nexport type FocusRingProps = {\n  /** The focus styles that depend on modality. */\n  focusClassName: string;\n  /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/\n  focusProps: {\n    onFocus: (e: ReactFocusEvent | FocusEvent) => void;\n    onBlur: (e: ReactFocusEvent | FocusEvent) => void;\n  };\n  /** Whether or not the element got focus via keyboard. */\n  isFocusVisible: boolean;\n};\n\n/**\n * Custom hook used to determine focus styling depending on modality.\n * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.\n * @public\n */\nexport function useFocusRing(props: UseFocusRingProps = {}): FocusRingProps {\n  const {\n    color,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    variant,\n    ignoreModality = false,\n    isMinimal = false,\n    focusWithin = false,\n    disabled = false,\n  } = props;\n  const [isFocused, setIsFocused] = useState(false);\n\n  const modality = modalityStore.getState();\n\n  const usedColor = color ?? variant ?? 'neutral';\n\n  const onBlur = useCallback((event: ReactFocusEvent | FocusEvent) => {\n    // trigger only when the self element is unfocused (stopPropagation)\n    if (event.currentTarget === event.target) {\n      setIsFocused(false);\n    }\n  }, []);\n\n  const onFocus = useCallback((event: ReactFocusEvent | FocusEvent) => {\n    // trigger only when the self element is focused (stopPropagation)\n    if (event.currentTarget === event.target) {\n      setIsFocused(true);\n    }\n  }, []);\n\n  const focusProps = {\n    onFocus,\n    onBlur,\n  };\n\n  if (\n    (ignoreModality || modality === 'keyboard') &&\n    (isFocused || focusWithin) &&\n    !disabled\n  ) {\n    if (isMinimal) {\n      return {\n        focusClassName: focusWithin\n          ? styles.focusRingFocusWithin({\n              minimal: true,\n              color: usedColor,\n            })\n          : styles.focusRing({ minimal: true, color: usedColor }),\n        isFocusVisible: !focusWithin,\n        focusProps,\n      };\n    }\n\n    return {\n      focusClassName: focusWithin\n        ? styles.focusRingFocusWithin({ minimal: false, color: usedColor })\n        : styles.focusRing({ minimal: false, color: usedColor }),\n      isFocusVisible: !focusWithin,\n      focusProps,\n    };\n  }\n\n  return {\n    focusClassName: focusWithin\n      ? styles.focusRingFocusWithin()\n      : styles.focusRing(),\n    isFocusVisible: false,\n    focusProps,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,YAAY,YAAY;AACxB,SAAS,qBAAqB;AA0DvB,SAAS,aAAa,QAA2B,CAAC,GAAmB;AAC1E,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,WAAW,cAAc,SAAS;AAExC,QAAM,YAAY,SAAS,WAAW;AAEtC,QAAM,SAAS,YAAY,CAAC,UAAwC;AAElE,QAAI,MAAM,kBAAkB,MAAM,QAAQ;AACxC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,UAAwC;AAEnE,QAAI,MAAM,kBAAkB,MAAM,QAAQ;AACxC,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AAEA,OACG,kBAAkB,aAAa,gBAC/B,aAAa,gBACd,CAAC,UACD;AACA,QAAI,WAAW;AACb,aAAO;AAAA,QACL,gBAAgB,cACZ,OAAO,qBAAqB;AAAA,UAC1B,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC,IACD,OAAO,UAAU,EAAE,SAAS,MAAM,OAAO,UAAU,CAAC;AAAA,QACxD,gBAAgB,CAAC;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,MACL,gBAAgB,cACZ,OAAO,qBAAqB,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC,IAChE,OAAO,UAAU,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACzD,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,gBAAgB,cACZ,OAAO,qBAAqB,IAC5B,OAAO,UAAU;AAAA,IACrB,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/core/index.js

@@ -7,7 +7,7 @@ import { useCurrentTheme } from "./hooks/useCurrentTheme.js";
 import { useFocusContext } from "./hooks/useFocusContext.js";
 import {
   useFocusRing
-} from "./styles/useFocusRing.js";
+} from "./hooks/useFocusRing.js";
 import { FocusProvider } from "./providers/FocusProvider.js";
 import { attemptFocus } from "./utils/focus-management/attempt-focus.js";
 import { focusFirstDescendant } from "./utils/focus-management/focus-first-descendant.js";
@@ -33,7 +33,7 @@ import { useBreakpointProps } from "./hooks/useBreakpointProps.js";
 import { useContainerBreakpoint } from "./hooks/useContainerBreakpoint.js";
 import { useContainerSize } from "./hooks/useContainerSize.js";
 import { useControllableState } from "./hooks/useControllableState.js";
-import { useFocusRing as useFocusRing2 } from "./styles/useFocusRing.js";
+import { useFocusRing as useFocusRing2 } from "./hooks/useFocusRing.js";
 import { useFormControlState } from "./hooks/useFormControlState.js";
 import { useIsInViewport } from "./hooks/useIsInViewport.js";
 import { useMeasureChildren } from "./hooks/useMeasureChildren.js";

package/esm/core/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/core/index.ts"],
-  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport { dtVisualRefreshEnabled as _dtVisualRefreshEnabled } from './components/app-root/AppRoot.sty.js';\nexport {\n  FocusScope,\n  type FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport type { FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  type UseFocusRingProps,\n  type FocusRingProps,\n  useFocusRing,\n} from './styles/useFocusRing.js';\nexport { FocusProvider as _FocusProvider } from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from './hooks/useBehavioralTrackingProps.js';\nexport { useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\nexport type { BehaviorTrackingProps } from './types/behavior-tracking-props.js';\nexport { OverlayContainer } from './components/OverlayContainer.js';\nexport type { OverlayContainerProps } from './components/OverlayContainer.js';\nexport { VisuallyHidden as _VisuallyHidden } from './components/visually-hidden/VisuallyHidden.js';\nexport { ModalContext } from './contexts/ModalContext.js';\nexport type { ModalContextProps } from './contexts/ModalContext.js';\nexport { OverlayStackingContext } from './contexts/OverlayStacking.js';\nexport { SharedInputPropsContext } from './contexts/SharedInputPropsContext.js';\nexport type { SharedInputProps } from './contexts/SharedInputPropsContext.js';\nexport { useBreakpointProps } from './hooks/useBreakpointProps.js';\nexport type { BreakpointProps } from './hooks/useBreakpointProps.js';\nexport { useContainerBreakpoint } from './hooks/useContainerBreakpoint.js';\nexport { useContainerSize } from './hooks/useContainerSize.js';\nexport type { ContainerSize } from './hooks/useContainerSize.js';\nexport { useControllableState as _useControllableState } from './hooks/useControllableState.js';\nexport type { useControllableStateProps as _useControllableStateProps } from './hooks/useControllableState.js';\nexport { useFocusRing as _useFocusRing } from './styles/useFocusRing.js';\nexport type {\n  FocusRingProps as _FocusRingProps,\n  UseFocusRingProps as _UseFocusRingProps,\n} from './styles/useFocusRing.js';\nexport { useFormControlState as _useFormControlState } from './hooks/useFormControlState.js';\nexport type { useFormControlStateReturnType as _useFormControlStateReturnType } from './hooks/useFormControlState.js';\nexport { useIsInViewport as _useIsInViewport } from './hooks/useIsInViewport.js';\nexport { useMeasureChildren as _useMeasureChildren } from './hooks/useMeasureChildren.js';\nexport type {\n  UseMeasureChildrenChildProps as _UseMeasureChildrenChildProps,\n  UseMeasureChildrenReturnType as _UseMeasureChildrenReturnType,\n  ContainerSize as _ContainerSize,\n} from './hooks/useMeasureChildren.js';\nexport { useMergeRefs } from './hooks/useMergeRefs.js';\nexport { useOverlayStacking } from './hooks/useOverlayStacking.js';\nexport type { Elevation } from './hooks/useOverlayStacking.js';\nexport { usePrevious } from './hooks/usePrevious.js';\nexport { useRequestAnimationFrame as _useRequestAnimationFrame } from './hooks/useRequestAnimationFrame.js';\nexport type { useThrottleReturnType as _useThrottleReturnType } from './hooks/useRequestAnimationFrame.js';\nexport { useRovingFocus } from './hooks/useRovingFocus.js';\nexport type {\n  RovingFocusOptions,\n  RovingFocusReturnType,\n} from './hooks/useRovingFocus.js';\nexport { useSafeLayoutEffect } from './hooks/useSafeLayoutEffect.js';\nexport { useSharedInputPropsContext as _useSharedInputPropsContext } from './hooks/useSharedInputPropsContext.js';\nexport type {\n  NumberFormatParser as _NumberFormatParser,\n  NumberFormatParserArgs as _NumberFormatParserArgs,\n} from '../filters/filter-field/parser/getNumberParser.js';\nexport { ModalContextProvider } from './providers/ModalContextProvider.js';\nexport type { ModalContextProviderProps } from './providers/ModalContextProvider.js';\nexport { OverlayProvider } from './providers/OverlayProvider.js';\nexport { OverlayStackingProvider } from './providers/OverlayStackingProvider.js';\nexport { ScrollProvider } from './providers/ScrollProvider.js';\nexport type { ScrollProviderProps } from './providers/ScrollProvider.js';\nexport { useStoreSelector } from './store/selector.js';\nexport { createStore } from './store/store.js';\nexport type { Store } from './store/store.js';\nexport type {\n  BaseEvent,\n  FocusEvents,\n  KeyboardEvent,\n  KeyboardEvents,\n  PressEvent,\n} from './types/events.js';\nexport type {\n  FormControlProps,\n  FormControlBaseProps,\n  FormControlControlledProps,\n  FormControlUncontrolledProps,\n} from './types/form-control-props.js';\nexport type {\n  FormControlState,\n  FormControlStateProps,\n  FormControlValueState,\n} from './types/form-control-state.js';\nexport type {\n  Components,\n  NormalComponents as ReactMarkdownNormalComponents,\n  SpecialComponents as ReactMarkdownSpecialComponents,\n  UnorderedListComponent as ReactMarkdownUnorderedListComponent,\n  TableRowComponent as ReactMarkdownTableRowComponent,\n  TableCellComponent as ReactMarkdownTableCellComponent,\n  OrderedListComponent as ReactMarkdownOrderedListComponent,\n  LiComponent as ReactMarkdownLiComponent,\n  HeadingComponent as ReactMarkdownHeadingComponent,\n  CodeComponent as ReactMarkdownCodeComponent,\n  ReactMarkdownProps as ReactMarkdownReactMarkdownProps,\n  ReactMarkdownNames as ReactMarkdownReactMarkdownNames,\n  IntrinsicElements as ReactMarkdownIntrinsicElements,\n} from './types/markdown/react-markdown.js';\nexport type {\n  Position as UnistPosition,\n  Point as UnistPoint,\n  Parent as UnistParent,\n  Node as UnistNode,\n  Literal as UnistLiteral,\n  NodeData as UnistNodeData,\n  Data as UnistData,\n} from './types/markdown/unist.js';\nexport type {\n  Element as HastElement,\n  Properties as HastProperties,\n  Root as HastRoot,\n  Parent as HastParent,\n  Content as HastContent,\n  RootContent as HastRootContent,\n  ElementContent as HastElementContent,\n  RootContentMap as HastRootContentMap,\n  ElementContentMap as HastElementContentMap,\n  Comment as HastComment,\n  DocType as HastDocType,\n  Text as HastText,\n  Literal as HastLiteral,\n} from './types/markdown/hast.js';\nexport type { Orientation } from './types/orientation.js';\nexport type { PointerType } from './types/pointer.js';\nexport type {\n  CombinedThresholds,\n  ThresholdPropsWithBackgroundColorOptional,\n  ThresholdPropsWithColorOptional,\n  SingleThreshold,\n  Threshold,\n  ThresholdColor,\n  ThresholdColors,\n  ThresholdExtended,\n  ThresholdForNumbers,\n  ThresholdForStrings,\n  ThresholdNumbersComparator,\n  ThresholdOptions,\n  ThresholdRule,\n  ThresholdStringsComparator,\n} from './types/threshold-types.js';\nexport type {\n  // DEPRECATION: [APPDEV-16487] BREAKING-CHANGE: Forms - Remove deprecated parseTime.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TimeDetails,\n  Timeframe,\n  TimeValue,\n} from './types/time.js';\nexport { isNumber, isPotentialDateValue } from './types/type-guards.js';\n// DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\nexport {\n  /**\n   * @deprecated Will be removed in the future.\n   */\n  formatDatetimeDefault as _formatDate,\n} from './utils/default-formatters.js';\nexport { _sanitizeSymbol } from './utils/sanitize-symbol.js';\nexport { convertToNumberIfPureNumber as _convertToNumberIfPureNumber } from './utils/string-utils.js';\nexport { _InteractiveSelector } from './utils/styles/interactiveSelector.js';\nexport {\n  _checkCombinedThresholdRules,\n  _matchesThreshold,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  getThresholdColor,\n} from './utils/threshold-utils.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { TIMEFRAME_EXPRESSION, parseTime } from './utils/timeParser.js';\nexport {\n  downloadBlob as _downloadBlob,\n  downloadCSV as _downloadCSV,\n  downloadFromUrl as _downloadFromUrl,\n} from './utils/download.js';\nexport { accessValue as _accessValue } from './utils/accessors/access-value.js';\nexport type {\n  IntentProps,\n  IntentWithResponseProps,\n  IntentWithoutResponseProps,\n  SuccessRes,\n  ErrorRes,\n  IntentBaseProps,\n} from './slots/Intent/Intent.js';\nexport { Intent } from './slots/Intent/Intent.js';\n\nexport {\n  usePermissions,\n  type PermissionsResult,\n  type PermissionDetail,\n} from './hooks/usePermissions.js';\n"],
-  "mappings": "AAAA,SAAS,eAAkC;AAC3C,SAAmC,8BAA+B;AAClE;AAAA,EACE;AAAA,OAEK;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EAGE;AAAA,OACK;AACP,SAA0B,qBAAsB;AAUhD,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAuC,kCAAmC;AAC1E,SAAS,aAAa;AACtB,SAAgC,2BAA4B;AAO5D,SAAwC,mCAAoC;AAC5E,SAAyB,oBAAqB;AAE9C,SAAS,wBAAwB;AAEjC,SAA2B,sBAAuB;AAClD,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AAExC,SAAS,0BAA0B;AAEnC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAEjC,SAAiC,4BAA6B;AAE9D,SAAyB,gBAAhBA,qBAAqC;AAK9C,SAAgC,2BAA4B;AAE5D,SAA4B,uBAAwB;AACpD,SAA+B,0BAA2B;AAM1D,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAC5B,SAAqC,gCAAiC;AAEtE,SAAS,sBAAsB;AAK/B,SAAS,2BAA2B;AACpC,SAAuC,kCAAmC;AAK1E,SAAS,4BAA4B;AAErC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAoF5B,SAAS,UAAU,4BAA4B;AAE/C;AAAA,EAI2B;AAAA,OACpB;AACP,SAAS,uBAAuB;AAChC,SAAwC,mCAAoC;AAC5E,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,sBAAsB,iBAAiB;AAChD;AAAA,EACkB;AAAA,EACD;AAAA,EACI;AAAA,OACd;AACP,SAAwB,mBAAoB;AAS5C,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,OAGK;",
+  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport { dtVisualRefreshEnabled as _dtVisualRefreshEnabled } from './components/app-root/AppRoot.sty.js';\nexport {\n  FocusScope,\n  type FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport type {\n  FocusContextProps as _FocusContextProps,\n  FocusScopeRegistration as _FocusScopeRegistration,\n} from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  type UseFocusRingProps,\n  type FocusRingProps,\n  useFocusRing,\n} from './hooks/useFocusRing.js';\nexport { FocusProvider as _FocusProvider } from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from './hooks/useBehavioralTrackingProps.js';\nexport { useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\nexport type { BehaviorTrackingProps } from './types/behavior-tracking-props.js';\nexport { OverlayContainer } from './components/OverlayContainer.js';\nexport type { OverlayContainerProps } from './components/OverlayContainer.js';\nexport { VisuallyHidden as _VisuallyHidden } from './components/visually-hidden/VisuallyHidden.js';\nexport { ModalContext } from './contexts/ModalContext.js';\nexport type { ModalContextProps } from './contexts/ModalContext.js';\nexport { OverlayStackingContext } from './contexts/OverlayStacking.js';\nexport { SharedInputPropsContext } from './contexts/SharedInputPropsContext.js';\nexport type { SharedInputProps } from './contexts/SharedInputPropsContext.js';\nexport { useBreakpointProps } from './hooks/useBreakpointProps.js';\nexport type { BreakpointProps } from './hooks/useBreakpointProps.js';\nexport { useContainerBreakpoint } from './hooks/useContainerBreakpoint.js';\nexport { useContainerSize } from './hooks/useContainerSize.js';\nexport type { ContainerSize } from './hooks/useContainerSize.js';\nexport { useControllableState as _useControllableState } from './hooks/useControllableState.js';\nexport type { useControllableStateProps as _useControllableStateProps } from './hooks/useControllableState.js';\nexport { useFocusRing as _useFocusRing } from './hooks/useFocusRing.js';\nexport type {\n  FocusRingProps as _FocusRingProps,\n  UseFocusRingProps as _UseFocusRingProps,\n} from './hooks/useFocusRing.js';\nexport { useFormControlState as _useFormControlState } from './hooks/useFormControlState.js';\nexport type { useFormControlStateReturnType as _useFormControlStateReturnType } from './hooks/useFormControlState.js';\nexport { useIsInViewport as _useIsInViewport } from './hooks/useIsInViewport.js';\nexport { useMeasureChildren as _useMeasureChildren } from './hooks/useMeasureChildren.js';\nexport type {\n  UseMeasureChildrenChildProps as _UseMeasureChildrenChildProps,\n  UseMeasureChildrenReturnType as _UseMeasureChildrenReturnType,\n  ContainerSize as _ContainerSize,\n} from './hooks/useMeasureChildren.js';\nexport { useMergeRefs } from './hooks/useMergeRefs.js';\nexport { useOverlayStacking } from './hooks/useOverlayStacking.js';\nexport type { Elevation } from './hooks/useOverlayStacking.js';\nexport { usePrevious } from './hooks/usePrevious.js';\nexport { useRequestAnimationFrame as _useRequestAnimationFrame } from './hooks/useRequestAnimationFrame.js';\nexport type { useThrottleReturnType as _useThrottleReturnType } from './hooks/useRequestAnimationFrame.js';\nexport { useRovingFocus } from './hooks/useRovingFocus.js';\nexport type {\n  RovingFocusOptions,\n  RovingFocusReturnType,\n} from './hooks/useRovingFocus.js';\nexport { useSafeLayoutEffect } from './hooks/useSafeLayoutEffect.js';\nexport { useSharedInputPropsContext as _useSharedInputPropsContext } from './hooks/useSharedInputPropsContext.js';\nexport type {\n  NumberFormatParser as _NumberFormatParser,\n  NumberFormatParserArgs as _NumberFormatParserArgs,\n} from '../filters/filter-field/parser/getNumberParser.js';\nexport { ModalContextProvider } from './providers/ModalContextProvider.js';\nexport type { ModalContextProviderProps } from './providers/ModalContextProvider.js';\nexport { OverlayProvider } from './providers/OverlayProvider.js';\nexport { OverlayStackingProvider } from './providers/OverlayStackingProvider.js';\nexport { ScrollProvider } from './providers/ScrollProvider.js';\nexport type { ScrollProviderProps } from './providers/ScrollProvider.js';\nexport { useStoreSelector } from './store/selector.js';\nexport { createStore } from './store/store.js';\nexport type { Store } from './store/store.js';\nexport type {\n  BaseEvent,\n  FocusEvents,\n  KeyboardEvent,\n  KeyboardEvents,\n  PressEvent,\n} from './types/events.js';\nexport type {\n  FormControlProps,\n  FormControlBaseProps,\n  FormControlControlledProps,\n  FormControlUncontrolledProps,\n} from './types/form-control-props.js';\nexport type {\n  FormControlState,\n  FormControlStateProps,\n  FormControlValueState,\n} from './types/form-control-state.js';\nexport type {\n  Components,\n  NormalComponents as ReactMarkdownNormalComponents,\n  SpecialComponents as ReactMarkdownSpecialComponents,\n  UnorderedListComponent as ReactMarkdownUnorderedListComponent,\n  TableRowComponent as ReactMarkdownTableRowComponent,\n  TableCellComponent as ReactMarkdownTableCellComponent,\n  OrderedListComponent as ReactMarkdownOrderedListComponent,\n  LiComponent as ReactMarkdownLiComponent,\n  HeadingComponent as ReactMarkdownHeadingComponent,\n  CodeComponent as ReactMarkdownCodeComponent,\n  ReactMarkdownProps as ReactMarkdownReactMarkdownProps,\n  ReactMarkdownNames as ReactMarkdownReactMarkdownNames,\n  IntrinsicElements as ReactMarkdownIntrinsicElements,\n} from './types/markdown/react-markdown.js';\nexport type {\n  Position as UnistPosition,\n  Point as UnistPoint,\n  Parent as UnistParent,\n  Node as UnistNode,\n  Literal as UnistLiteral,\n  NodeData as UnistNodeData,\n  Data as UnistData,\n} from './types/markdown/unist.js';\nexport type {\n  Element as HastElement,\n  Properties as HastProperties,\n  Root as HastRoot,\n  Parent as HastParent,\n  Content as HastContent,\n  RootContent as HastRootContent,\n  ElementContent as HastElementContent,\n  RootContentMap as HastRootContentMap,\n  ElementContentMap as HastElementContentMap,\n  Comment as HastComment,\n  DocType as HastDocType,\n  Text as HastText,\n  Literal as HastLiteral,\n} from './types/markdown/hast.js';\nexport type { Orientation } from './types/orientation.js';\nexport type { PointerType } from './types/pointer.js';\nexport type {\n  CombinedThresholds,\n  ThresholdPropsWithBackgroundColorOptional,\n  ThresholdPropsWithColorOptional,\n  SingleThreshold,\n  Threshold,\n  ThresholdColor,\n  ThresholdColors,\n  ThresholdExtended,\n  ThresholdForNumbers,\n  ThresholdForStrings,\n  ThresholdNumbersComparator,\n  ThresholdOptions,\n  ThresholdRule,\n  ThresholdStringsComparator,\n} from './types/threshold-types.js';\nexport type {\n  // DEPRECATION: [APPDEV-16487] BREAKING-CHANGE: Forms - Remove deprecated parseTime.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  TimeDetails,\n  Timeframe,\n  TimeValue,\n} from './types/time.js';\nexport { isNumber, isPotentialDateValue } from './types/type-guards.js';\n// DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\nexport {\n  /**\n   * @deprecated Will be removed in the future.\n   */\n  formatDatetimeDefault as _formatDate,\n} from './utils/default-formatters.js';\nexport { _sanitizeSymbol } from './utils/sanitize-symbol.js';\nexport { convertToNumberIfPureNumber as _convertToNumberIfPureNumber } from './utils/string-utils.js';\nexport { _InteractiveSelector } from './utils/styles/interactiveSelector.js';\nexport {\n  _checkCombinedThresholdRules,\n  _matchesThreshold,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  getThresholdColor,\n} from './utils/threshold-utils.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { TIMEFRAME_EXPRESSION, parseTime } from './utils/timeParser.js';\nexport {\n  downloadBlob as _downloadBlob,\n  downloadCSV as _downloadCSV,\n  downloadFromUrl as _downloadFromUrl,\n} from './utils/download.js';\nexport { accessValue as _accessValue } from './utils/accessors/access-value.js';\nexport type {\n  IntentProps,\n  IntentWithResponseProps,\n  IntentWithoutResponseProps,\n  SuccessRes,\n  ErrorRes,\n  IntentBaseProps,\n} from './slots/Intent/Intent.js';\nexport { Intent } from './slots/Intent/Intent.js';\n\nexport {\n  usePermissions,\n  type PermissionsResult,\n  type PermissionDetail,\n} from './hooks/usePermissions.js';\n"],
+  "mappings": "AAAA,SAAS,eAAkC;AAC3C,SAAmC,8BAA+B;AAClE;AAAA,EACE;AAAA,OAEK;AAOP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EAGE;AAAA,OACK;AACP,SAA0B,qBAAsB;AAUhD,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAuC,kCAAmC;AAC1E,SAAS,aAAa;AACtB,SAAgC,2BAA4B;AAO5D,SAAwC,mCAAoC;AAC5E,SAAyB,oBAAqB;AAE9C,SAAS,wBAAwB;AAEjC,SAA2B,sBAAuB;AAClD,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AAExC,SAAS,0BAA0B;AAEnC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAEjC,SAAiC,4BAA6B;AAE9D,SAAyB,gBAAhBA,qBAAqC;AAK9C,SAAgC,2BAA4B;AAE5D,SAA4B,uBAAwB;AACpD,SAA+B,0BAA2B;AAM1D,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAC5B,SAAqC,gCAAiC;AAEtE,SAAS,sBAAsB;AAK/B,SAAS,2BAA2B;AACpC,SAAuC,kCAAmC;AAK1E,SAAS,4BAA4B;AAErC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAoF5B,SAAS,UAAU,4BAA4B;AAE/C;AAAA,EAI2B;AAAA,OACpB;AACP,SAAS,uBAAuB;AAChC,SAAwC,mCAAoC;AAC5E,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,sBAAsB,iBAAiB;AAChD;AAAA,EACkB;AAAA,EACD;AAAA,EACI;AAAA,OACd;AACP,SAAwB,mBAAoB;AAS5C,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,OAGK;",
   "names": ["useFocusRing"]
 }

package/esm/core/providers/FocusProvider.js

@@ -1,54 +1,96 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import { FocusContext } from "../contexts/FocusContext.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  FocusContext
+} from "../contexts/FocusContext.js";
 import { useFocusContext } from "../hooks/useFocusContext.js";
 import { getProperInertValue } from "../utils/get-inert-value.js";
 import { mergeProps } from "../utils/merge-props.js";
 const FocusProvider = ({ children }) => {
-  const [backgroundInertness, setBackgroundInertness] = useState(false);
+  const [activeScopeCount, setActiveScopeCount] = useState(0);
   const focusContext = useFocusContext();
   const wrapperRef = useRef(null);
+  const scopeStackRef = useRef([]);
   const focusTriggerElement = useCallback((ref) => {
-    if (wrapperRef.current?.getAttribute("inert") === null) {
-      ref?.focus();
+    if (!ref) {
+      return;
+    }
+    if (!wrapperRef.current?.contains(ref)) {
+      ref.focus();
+      return;
+    }
+    if (wrapperRef.current.getAttribute("inert") === null) {
+      ref.focus();
       return;
     }
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         if (mutation.type === "attributes" && mutation.attributeName === "inert") {
           if (wrapperRef.current?.getAttribute("inert") === null) {
-            ref?.focus();
+            ref.focus();
             observer.disconnect();
             break;
           }
         }
       }
     });
-    if (wrapperRef.current !== null) {
-      observer.observe(wrapperRef.current, { attributes: true });
-      setTimeout(() => {
-        observer.disconnect();
-      }, 5e3);
+    observer.observe(wrapperRef.current, { attributes: true });
+    setTimeout(() => {
+      observer.disconnect();
+    }, 5e3);
+  }, []);
+  const setBackgroundInertness = useCallback((value) => {
+    setActiveScopeCount((count) => Math.max(0, count + (value ? 1 : -1)));
+  }, []);
+  const registerScope = useCallback((scope) => {
+    scopeStackRef.current.push(scope);
+    return () => {
+      const index = scopeStackRef.current.indexOf(scope);
+      if (index !== -1) {
+        scopeStackRef.current.splice(index, 1);
+      }
+    };
+  }, []);
+  const getTopScope = useCallback(() => {
+    const stack = scopeStackRef.current;
+    return stack.length > 0 ? stack[stack.length - 1] : void 0;
+  }, []);
+  const isInsideAnyScope = useCallback((element) => {
+    if (!element) {
+      return false;
     }
+    return scopeStackRef.current.some(
+      (scope) => scope.wrapperRef.current?.contains(element)
+    );
   }, []);
+  const backgroundInertness = activeScopeCount > 0;
   const focusProps = backgroundInertness ? {
     inert: getProperInertValue(true),
     tabIndex: -1,
     "aria-hidden": true
   } : { inert: void 0, tabIndex: void 0, "aria-hidden": false };
-  return /* @__PURE__ */ jsx(
-    FocusContext.Provider,
-    {
-      value: {
-        ...mergeProps(focusContext, {
-          backgroundInertness,
-          setBackgroundInertness,
-          focusTriggerElement
-        })
-      },
-      children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, ...focusProps, children })
-    }
+  const contextValue = useMemo(
+    () => ({
+      ...mergeProps(focusContext, {
+        backgroundInertness,
+        setBackgroundInertness,
+        focusTriggerElement,
+        registerScope,
+        getTopScope,
+        isInsideAnyScope
+      })
+    }),
+    [
+      focusContext,
+      backgroundInertness,
+      setBackgroundInertness,
+      focusTriggerElement,
+      registerScope,
+      getTopScope,
+      isInsideAnyScope
+    ]
   );
+  return /* @__PURE__ */ jsx(FocusContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, ...focusProps, children }) });
 };
 FocusProvider["displayName"] = "FocusProvider";
 export {