@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/content/progress/ProgressCircle.sty.js

@@ -1,10 +1,10 @@
 import "./ProgressCircle.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var progressCircleBackgroundCSS = "_kvldjh9-3-5-2";
-var progressCircleCSS = _7a468({ defaultClassName: "_kvldjh6-3-5-2", variantClassNames: { indeterminate: { true: "_kvldjh7-3-5-2", false: "_kvldjh8-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = _7a468({ defaultClassName: "_kvldjha-3-5-2", variantClassNames: { size: { small: "_kvldjhb-3-5-2", large: "_kvldjhc-3-5-2" }, color: { critical: "_kvldjhd-3-5-2", neutral: "_kvldjhe-3-5-2", primary: "_kvldjhf-3-5-2", success: "_kvldjhg-3-5-2", warning: "_kvldjhh-3-5-2" }, variant: { "default": "_kvldjhi-3-5-2", accent: "_kvldjhj-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-5-2"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-5-2"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-5-2"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-5-2"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-5-2"]] });
-var progressCircleRootCSS = "_kvldjh4-3-5-2";
-var progressCircleSvgCss = "_kvldjh5-3-5-2";
+var progressCircleBackgroundCSS = "_kvldjh9-3-7-0";
+var progressCircleCSS = _7a468({ defaultClassName: "_kvldjh6-3-7-0", variantClassNames: { indeterminate: { true: "_kvldjh7-3-7-0", false: "_kvldjh8-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = _7a468({ defaultClassName: "_kvldjha-3-7-0", variantClassNames: { size: { small: "_kvldjhb-3-7-0", large: "_kvldjhc-3-7-0" }, color: { critical: "_kvldjhd-3-7-0", neutral: "_kvldjhe-3-7-0", primary: "_kvldjhf-3-7-0", success: "_kvldjhg-3-7-0", warning: "_kvldjhh-3-7-0" }, variant: { "default": "_kvldjhi-3-7-0", accent: "_kvldjhj-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-3-7-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-3-7-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-3-7-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-3-7-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-3-7-0"]] });
+var progressCircleRootCSS = "_kvldjh4-3-7-0";
+var progressCircleSvgCss = "_kvldjh5-3-7-0";
 export {
   progressCircleBackgroundCSS,
   progressCircleCSS,

package/esm/content/progress/ProgressCircle.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressCircle.css.ts"],
-  "sourcesContent": ["import './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressCircleBackgroundCSS = '_kvldjh9-3-5-2';\nexport var progressCircleCSS = _7a468({defaultClassName:'_kvldjh6-3-5-2',variantClassNames:{indeterminate:{true:'_kvldjh7-3-5-2',false:'_kvldjh8-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'_kvldjha-3-5-2',variantClassNames:{size:{small:'_kvldjhb-3-5-2',large:'_kvldjhc-3-5-2'},color:{critical:'_kvldjhd-3-5-2',neutral:'_kvldjhe-3-5-2',primary:'_kvldjhf-3-5-2',success:'_kvldjhg-3-5-2',warning:'_kvldjhh-3-5-2'},variant:{'default':'_kvldjhi-3-5-2',accent:'_kvldjhj-3-5-2'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_kvldjhk-3-5-2'],[{color:'success',variant:'accent'},'_kvldjhl-3-5-2'],[{color:'warning',variant:'accent'},'_kvldjhm-3-5-2'],[{color:'critical',variant:'accent'},'_kvldjhn-3-5-2'],[{color:'neutral',variant:'accent'},'_kvldjho-3-5-2']]});\nexport var progressCircleRootCSS = '_kvldjh4-3-5-2';\nexport var progressCircleSvgCss = '_kvldjh5-3-5-2';"],
+  "sourcesContent": ["import './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressCircleBackgroundCSS = '_kvldjh9-3-7-0';\nexport var progressCircleCSS = _7a468({defaultClassName:'_kvldjh6-3-7-0',variantClassNames:{indeterminate:{true:'_kvldjh7-3-7-0',false:'_kvldjh8-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'_kvldjha-3-7-0',variantClassNames:{size:{small:'_kvldjhb-3-7-0',large:'_kvldjhc-3-7-0'},color:{critical:'_kvldjhd-3-7-0',neutral:'_kvldjhe-3-7-0',primary:'_kvldjhf-3-7-0',success:'_kvldjhg-3-7-0',warning:'_kvldjhh-3-7-0'},variant:{'default':'_kvldjhi-3-7-0',accent:'_kvldjhj-3-7-0'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'_kvldjhk-3-7-0'],[{color:'success',variant:'accent'},'_kvldjhl-3-7-0'],[{color:'warning',variant:'accent'},'_kvldjhm-3-7-0'],[{color:'critical',variant:'accent'},'_kvldjhn-3-7-0'],[{color:'neutral',variant:'accent'},'_kvldjho-3-7-0']]});\nexport var progressCircleRootCSS = '_kvldjh4-3-7-0';\nexport var progressCircleSvgCss = '_kvldjh5-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,8BAA8B;AAClC,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,OAAM,kBAAiB,OAAM,iBAAgB,GAAE,OAAM,EAAC,UAAS,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,iBAAgB,GAAE,SAAQ,EAAC,WAAU,kBAAiB,QAAO,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAC5oB,IAAI,wBAAwB;AAC5B,IAAI,uBAAuB;",
   "names": []
 }

package/esm/content/shared-components/Visual.css

@@ -1,4 +1,4 @@
-._9w5efw0-3-5-2 {
+._9w5efw0-3-7-0 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,13 +11,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._9w5efw0-3-5-2 img, ._9w5efw0-3-5-2 picture, ._9w5efw0-3-5-2 video {
+._9w5efw0-3-7-0 img, ._9w5efw0-3-7-0 picture, ._9w5efw0-3-7-0 video {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._9w5efw0-3-5-2 figure {
+._9w5efw0-3-7-0 figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/esm/content/shared-components/Visual.sty.js

@@ -1,5 +1,5 @@
 import "./Visual.css";
-var VisualOverlayCSS = "_9w5efw0-3-5-2";
+var VisualOverlayCSS = "_9w5efw0-3-7-0";
 export {
   VisualOverlayCSS
 };

package/esm/content/shared-components/Visual.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/shared-components/Visual.css.ts"],
-  "sourcesContent": ["import './Visual.css';\nexport var VisualOverlayCSS = '_9w5efw0-3-5-2';"],
+  "sourcesContent": ["import './Visual.css';\nexport var VisualOverlayCSS = '_9w5efw0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-3-5-2 {
+._1a1ozfd0-3-7-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-3-5-2 {
+._1a1ozfd1-3-7-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-3-5-2 {
+._1a1ozfd2-3-7-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-3-5-2 {
+._1a1ozfd3-3-7-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-3-5-2 stop {
+._1a1ozfd4-3-7-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-3-5-2 {
+._1a1ozfd5-3-7-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-3-5-2 {
+  ._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-5-2", variantClassNames: { variant: { "default": "_1a1ozfd1-3-5-2", rounded: "_1a1ozfd2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-5-2";
-var skeletonSvgCSS = "_1a1ozfd3-3-5-2";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-5-2";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-5-2";
+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-5-2',variantClassNames:{variant:{'default':'_1a1ozfd1-3-5-2',rounded:'_1a1ozfd2-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var skeletonSvgBackgroundFillCSS = '_1a1ozfd5-3-5-2';\nexport var skeletonSvgCSS = '_1a1ozfd3-3-5-2';\nexport var skeletonSvgGradientCSS = '_1a1ozfd4-3-5-2';\nexport var skeletonSvgGradientRectCSS = '_1a1ozfd6-3-5-2';"],
+  "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-5-2 {
+._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-5-2:hover {
+._1dd8zuz0-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1dd8zuz0-3-5-2:active {
+._1dd8zuz0-3-7-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1dd8zuz0-3-5-2: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.js

@@ -7,6 +7,7 @@ import { TerminologyOverlayContext } from "./TerminologyOverlayContext.js";
 import { Trigger } from "./Trigger.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
@@ -30,6 +31,7 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
   const ariaLabelingProps = useAriaLabelingProps(restProps);
   const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const smallerScreens = useBreakpoint("(max-width: 480px)");
+  const overlayContentId = useId();
   const {
     targetRef,
     triggerRef,
@@ -64,6 +66,7 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
         ref: rootRef,
         className: triggerProps.className,
         style: triggerProps.style,
+        "aria-describedby": overlayState.isOpen ? overlayContentId : void 0,
         "data-testid": triggerProps["data-testid"],
         "data-dtrum-mask": triggerProps["data-dtrum-mask"] ?? dataDtrumMask,
         "data-dtrum-allow": triggerProps["data-dtrum-allow"] ?? dataDtrumAllow,
@@ -86,10 +89,19 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
         ...behavioralTrackingProps,
         ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
-        children: /* @__PURE__ */ jsxs(Flex, { paddingY: 12, paddingX: 16, flexDirection: "column", children: [
-          slots.description,
-          slots.footer
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            id: overlayContentId,
+            paddingY: 12,
+            paddingX: 16,
+            flexDirection: "column",
+            children: [
+              slots.description,
+              slots.footer
+            ]
+          }
+        )
       }
     )
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/TerminologyOverlay.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\n\nimport { Description } from './Description.js';\nimport { Footer } from './Footer.js';\nimport { COMPONENT_NAME } from './terminology-overlay-constants.js';\nimport { TerminologyOverlayContext } from './TerminologyOverlayContext.js';\nimport { Trigger, type TerminologyOverlayTriggerProps } from './Trigger.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../layouts/hooks/useBreakpoint.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyOverlayProps\n  extends AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the overlay is open by default\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The component accepts TerminologyOverlay.Trigger, TerminologyOverlay.Description, and TerminologyOverlay.Footer as children.\n   */\n  children: ReactNode;\n}\n//#endregion Typings\n\nconst TerminologyOverlayRoot = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  TerminologyOverlayProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    defaultOpen,\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 ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n  const smallerScreens = useBreakpoint('(max-width: 480px)');\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    offset: 4,\n    crossOffset: -16,\n    widthStrategy: smallerScreens ? { min: 200 } : { min: 350 },\n    defaultOpen,\n    shouldCloseOnBlur: true,\n  });\n\n  const rootRef = useMergeRefs([forwardedRef, triggerRef, targetRef]);\n\n  const [slots] = useSlots(children, {\n    trigger: Trigger,\n    description: Description,\n    footer: { match: Footer, multiple: true },\n  });\n  if (slots.trigger === undefined) {\n    devLog('Trigger element has not been defined!');\n  }\n\n  const { children: triggerChildren, ...triggerSlotProps } =\n    slots.trigger?.props ?? {};\n\n  const triggerProps: Partial<TerminologyOverlayTriggerProps> =\n    slots.trigger?.props ?? {};\n\n  return (\n    <TerminologyOverlayContext.Provider value={overlayTriggerProps}>\n      <Trigger\n        ref={rootRef}\n        className={triggerProps.className}\n        style={triggerProps.style}\n        data-testid={triggerProps['data-testid']}\n        data-dtrum-mask={triggerProps['data-dtrum-mask'] ?? dataDtrumMask}\n        data-dtrum-allow={triggerProps['data-dtrum-allow'] ?? dataDtrumAllow}\n        {...triggerSlotProps}\n      >\n        {triggerChildren}\n      </Trigger>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex paddingY={12} paddingX={16} flexDirection=\"column\">\n          {slots.description}\n          {slots.footer}\n        </Flex>\n      </Overlay>\n    </TerminologyOverlayContext.Provider>\n  );\n});\n\n(\n  TerminologyOverlayRoot as typeof TerminologyOverlayRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `TerminologyOverlay` component to define or explain unusual or technical terms in the UI.\n * @public\n */\nexport const TerminologyOverlay = Object.assign(TerminologyOverlayRoot, {\n  Description,\n  Trigger,\n  Footer,\n});\n"],
-  "mappings": "AAoGM,cAyBE,YAzBF;AApGN,SAAS,kBAAkC;AAE3C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,eAAoD;AAC7D,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAMzB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAwBxB,MAAM,yBAAyC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,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,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AACrE,QAAM,iBAAiB,cAAc,oBAAoB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAAA,IACxB,WAAW;AAAA,IACX,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IACzD,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe,iBAAiB,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,IAAI;AAAA,IAC1D;AAAA,IACA,mBAAmB;AAAA,EACrB,CAAC;AAED,QAAM,UAAU,aAAa,CAAC,cAAc,YAAY,SAAS,CAAC;AAElE,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ,EAAE,OAAO,QAAQ,UAAU,KAAK;AAAA,EAC1C,CAAC;AACD,MAAI,MAAM,YAAY,QAAW;AAC/B,WAAO,uCAAuC;AAAA,EAChD;AAEA,QAAM,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,IACrD,MAAM,SAAS,SAAS,CAAC;AAE3B,QAAM,eACJ,MAAM,SAAS,SAAS,CAAC;AAE3B,SACE,qBAAC,0BAA0B,UAA1B,EAAmC,OAAO,qBACzC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,aAAa;AAAA,QACxB,OAAO,aAAa;AAAA,QACpB,eAAa,aAAa,aAAa;AAAA,QACvC,mBAAiB,aAAa,iBAAiB,KAAK;AAAA,QACpD,oBAAkB,aAAa,kBAAkB,KAAK;AAAA,QACrD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAQ,aAAa;AAAA,QACrB;AAAA,QACA,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,QAAK,UAAU,IAAI,UAAU,IAAI,eAAc,UAC7C;AAAA,gBAAM;AAAA,UACN,MAAM;AAAA,WACT;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,uBAGA,cAAc;AAMT,MAAM,qBAAqB,OAAO,OAAO,wBAAwB;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\n\nimport { Description } from './Description.js';\nimport { Footer } from './Footer.js';\nimport { COMPONENT_NAME } from './terminology-overlay-constants.js';\nimport { TerminologyOverlayContext } from './TerminologyOverlayContext.js';\nimport { Trigger, type TerminologyOverlayTriggerProps } from './Trigger.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../layouts/hooks/useBreakpoint.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyOverlayProps\n  extends AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the overlay is open by default\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The component accepts TerminologyOverlay.Trigger, TerminologyOverlay.Description, and TerminologyOverlay.Footer as children.\n   */\n  children: ReactNode;\n}\n//#endregion Typings\n\nconst TerminologyOverlayRoot = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  TerminologyOverlayProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    defaultOpen,\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 ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n  const smallerScreens = useBreakpoint('(max-width: 480px)');\n  const overlayContentId = useId();\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    offset: 4,\n    crossOffset: -16,\n    widthStrategy: smallerScreens ? { min: 200 } : { min: 350 },\n    defaultOpen,\n    shouldCloseOnBlur: true,\n  });\n\n  const rootRef = useMergeRefs([forwardedRef, triggerRef, targetRef]);\n\n  const [slots] = useSlots(children, {\n    trigger: Trigger,\n    description: Description,\n    footer: { match: Footer, multiple: true },\n  });\n  if (slots.trigger === undefined) {\n    devLog('Trigger element has not been defined!');\n  }\n\n  const { children: triggerChildren, ...triggerSlotProps } =\n    slots.trigger?.props ?? {};\n\n  const triggerProps: Partial<TerminologyOverlayTriggerProps> =\n    slots.trigger?.props ?? {};\n\n  return (\n    <TerminologyOverlayContext.Provider value={overlayTriggerProps}>\n      <Trigger\n        ref={rootRef}\n        className={triggerProps.className}\n        style={triggerProps.style}\n        aria-describedby={overlayState.isOpen ? overlayContentId : undefined}\n        data-testid={triggerProps['data-testid']}\n        data-dtrum-mask={triggerProps['data-dtrum-mask'] ?? dataDtrumMask}\n        data-dtrum-allow={triggerProps['data-dtrum-allow'] ?? dataDtrumAllow}\n        {...triggerSlotProps}\n      >\n        {triggerChildren}\n      </Trigger>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex\n          id={overlayContentId}\n          paddingY={12}\n          paddingX={16}\n          flexDirection=\"column\"\n        >\n          {slots.description}\n          {slots.footer}\n        </Flex>\n      </Overlay>\n    </TerminologyOverlayContext.Provider>\n  );\n});\n\n(\n  TerminologyOverlayRoot as typeof TerminologyOverlayRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `TerminologyOverlay` component to define or explain unusual or technical terms in the UI.\n * @public\n */\nexport const TerminologyOverlay = Object.assign(TerminologyOverlayRoot, {\n  Description,\n  Trigger,\n  Footer,\n});\n"],
+  "mappings": "AAsGM,cA0BE,YA1BF;AAtGN,SAAS,kBAAkC;AAE3C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,eAAoD;AAC7D,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAMzB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAwBxB,MAAM,yBAAyC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,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,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AACrE,QAAM,iBAAiB,cAAc,oBAAoB;AACzD,QAAM,mBAAmB,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAAA,IACxB,WAAW;AAAA,IACX,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IACzD,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe,iBAAiB,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,IAAI;AAAA,IAC1D;AAAA,IACA,mBAAmB;AAAA,EACrB,CAAC;AAED,QAAM,UAAU,aAAa,CAAC,cAAc,YAAY,SAAS,CAAC;AAElE,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ,EAAE,OAAO,QAAQ,UAAU,KAAK;AAAA,EAC1C,CAAC;AACD,MAAI,MAAM,YAAY,QAAW;AAC/B,WAAO,uCAAuC;AAAA,EAChD;AAEA,QAAM,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,IACrD,MAAM,SAAS,SAAS,CAAC;AAE3B,QAAM,eACJ,MAAM,SAAS,SAAS,CAAC;AAE3B,SACE,qBAAC,0BAA0B,UAA1B,EAAmC,OAAO,qBACzC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,aAAa;AAAA,QACxB,OAAO,aAAa;AAAA,QACpB,oBAAkB,aAAa,SAAS,mBAAmB;AAAA,QAC3D,eAAa,aAAa,aAAa;AAAA,QACvC,mBAAiB,aAAa,iBAAiB,KAAK;AAAA,QACpD,oBAAkB,aAAa,kBAAkB,KAAK;AAAA,QACrD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAQ,aAAa;AAAA,QACrB;AAAA,QACA,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,UAAU;AAAA,YACV,eAAc;AAAA,YAEb;AAAA,oBAAM;AAAA,cACN,MAAM;AAAA;AAAA;AAAA,QACT;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,uBAGA,cAAc;AAMT,MAAM,qBAAqB,OAAO,OAAO,wBAAwB;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./TerminologyOverlay.css";
-var trigger = "_1dd8zuz0-3-5-2";
+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-5-2';"],
+  "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

@@ -4,12 +4,14 @@ import { forwardRef, useContext } from "react";
 import { COMPONENT_NAME } from "./terminology-overlay-constants.js";
 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 {
     children,
+    id: propId,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -17,11 +19,12 @@ const Trigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
-  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const {
     "data-dt-name": dataDtName = "Trigger",
     ...remainingBehavioralTrackingProps
   } = behavioralTrackingProps;
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
   const { focusProps, focusClassName, isFocusVisible } = useFocusRing({
     isMinimal: true
   });
@@ -45,6 +48,7 @@ const Trigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ..._mergeProps(
         overlayTriggerProps,
         focusProps,
+        ariaLabelingProps,
         remainingBehavioralTrackingProps
       ),
       "aria-haspopup": "dialog",

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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.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  /**\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    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] = useBehavioralTrackingProps(remainingProps);\n  const {\n    'data-dt-name': dataDtName = 'Trigger',\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\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        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": "AA4DI;AA5DJ,OAAO,UAAU;AACjB,SAAS,YAAY,kBAAkC;AAEvD,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAM7B,SAAS,cAAc,mBAAmB;AAuBnC,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,QAAM;AAAA,IACJ,gBAAgB,aAAa;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI;AACJ,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,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;",
+  "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-5-2 {
+: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-5-2 {
+: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-5-2";
+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-5-2';"],
+  "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-5-2 {
+._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-5-2";
+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-5-2';"],
+  "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/contexts/PermissionsContext.js

@@ -0,0 +1,17 @@
+import { createContext } from "react";
+const DEFAULT_TOOLTIP_TEXT = "You don't have the required permissions";
+const defaultPermissionsContextValue = {
+  isAllowed: true,
+  isLoading: false,
+  tooltipText: DEFAULT_TOOLTIP_TEXT,
+  deniedPermissions: []
+};
+const PermissionsContext = createContext(
+  defaultPermissionsContextValue
+);
+export {
+  DEFAULT_TOOLTIP_TEXT,
+  PermissionsContext,
+  defaultPermissionsContextValue
+};
+//# sourceMappingURL=PermissionsContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/contexts/PermissionsContext.tsx"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nexport interface PermissionsContextValue {\n  isAllowed: boolean;\n  isLoading: boolean;\n  tooltipText: string;\n  deniedPermissions: string[];\n}\n\nexport const DEFAULT_TOOLTIP_TEXT = \"You don't have the required permissions\";\n\nexport const defaultPermissionsContextValue: PermissionsContextValue = {\n  isAllowed: true,\n  isLoading: false,\n  tooltipText: DEFAULT_TOOLTIP_TEXT,\n  deniedPermissions: [],\n};\n\n/**\n * Context that broadcasts the resolved permission state to descendant form components.\n * When no PermissionsProvider is present, the default value leaves components unaffected\n * (isAllowed: true).\n * @internal\n */\nexport const PermissionsContext = createContext<PermissionsContextValue>(\n  defaultPermissionsContextValue,\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AASvB,MAAM,uBAAuB;AAE7B,MAAM,iCAA0D;AAAA,EACrE,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,mBAAmB,CAAC;AACtB;AAQO,MAAM,qBAAqB;AAAA,EAChC;AACF;",
+  "names": []
+}

package/esm/core/dql/dql-common.js

@@ -43,6 +43,7 @@ const sortedDqlCommands = dqlCommands.toSorted(
 );
 const parameterNamePattern = /\w+\s*(?=:)/;
 const booleanLiteralPattern = /\b(?:true|false)\b/i;
+const nullLiteralPattern = /\bnull\b/i;
 const dqlDurationUnits = [
   "minutes",
   "minute",
@@ -92,6 +93,7 @@ export {
   combinedDurationUnits,
   dqlCommands,
   dqlUnitSuffixPattern,
+  nullLiteralPattern,
   parameterNamePattern,
   sortedDqlCommands
 };