@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/content/release-phase-indicator/ReleasePhaseIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/release-phase-indicator/ReleasePhaseIndicator.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\nimport { useIntl, type MessageDescriptor } from 'react-intl';\n\nimport { releasePhaseMessages } from './messages.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { Chip } from '../chip/Chip.js';\n\nconst COMPONENT_NAME = 'ReleasePhaseIndicator';\n\n/**\n * The release phase to display. Determines the chip label and color.\n * @public\n */\nexport type ReleasePhase = 'preview' | 'new' | 'deprecated' | 'early-access';\n\n/**\n * Accepted properties for ReleasePhaseIndicator\n * @public\n */\nexport interface ReleasePhaseIndicatorProps\n  extends DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The release phase to display. Determines the chip label and color.\n   */\n  phase: ReleasePhase;\n}\n\nconst phaseColorMap: Record<ReleasePhase, 'primary' | 'warning'> = {\n  preview: 'primary',\n  new: 'primary',\n  deprecated: 'warning',\n  'early-access': 'primary',\n};\n\nconst phaseLabelMap: Record<ReleasePhase, MessageDescriptor> = {\n  preview: releasePhaseMessages.preview,\n  new: releasePhaseMessages.new,\n  deprecated: releasePhaseMessages.deprecated,\n  'early-access': releasePhaseMessages.earlyAccess,\n};\n\n/**\n * Use the `ReleasePhaseIndicator` to communicate the release phase\n * of a feature (Preview, New, Early Access, Deprecated).\n * @public\n */\nexport const ReleasePhaseIndicator = forwardRef<\n  HTMLDivElement,\n  ReleasePhaseIndicatorProps\n>((props, forwardedRef) => {\n  const {\n    phase,\n    id,\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\n  const intl = useIntl();\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <Chip\n      id={id}\n      ref={forwardedRef}\n      size=\"condensed\"\n      variant=\"emphasized\"\n      color={phaseColorMap[phase]}\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      {intl.formatMessage(phaseLabelMap[phase])}\n    </Chip>\n  );\n});\n\n(\n  ReleasePhaseIndicator as typeof ReleasePhaseIndicator & {\n    displayName: string;\n  }\n).displayName = 'ReleasePhaseIndicator';\n"],
-  "mappings": "AAkFI;AAlFJ,SAAS,kBAAkB;AAC3B,SAAS,eAAuC;AAEhD,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAOpC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAyBvB,MAAM,gBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAEA,MAAM,gBAAyD;AAAA,EAC7D,SAAS,qBAAqB;AAAA,EAC9B,KAAK,qBAAqB;AAAA,EAC1B,YAAY,qBAAqB;AAAA,EACjC,gBAAgB,qBAAqB;AACvC;AAOO,MAAM,wBAAwB,WAGnC,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;AAEJ,QAAM,OAAO,QAAQ;AAErB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAO,cAAc,KAAK;AAAA,MAC1B,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB,eAAK,cAAc,cAAc,KAAK,CAAC;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAGC,sBAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef } from 'react';\nimport { useIntl, type MessageDescriptor } from 'react-intl';\n\nimport { releasePhaseMessages } from './messages.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { Chip } from '../chip/Chip.js';\n\nconst COMPONENT_NAME = 'ReleasePhaseIndicator';\n\n/**\n * The release phase to display. Determines the chip label and color.\n * @public\n */\nexport type ReleasePhase = 'preview' | 'new' | 'deprecated' | 'early-access';\n\n/**\n * Accepted properties for ReleasePhaseIndicator\n * @public\n */\nexport interface ReleasePhaseIndicatorProps\n  extends\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The release phase to display. Determines the chip label and color.\n   */\n  phase: ReleasePhase;\n}\n\nconst phaseColorMap: Record<ReleasePhase, 'primary' | 'warning'> = {\n  preview: 'primary',\n  new: 'primary',\n  deprecated: 'warning',\n  'early-access': 'primary',\n};\n\nconst phaseLabelMap: Record<ReleasePhase, MessageDescriptor> = {\n  preview: releasePhaseMessages.preview,\n  new: releasePhaseMessages.new,\n  deprecated: releasePhaseMessages.deprecated,\n  'early-access': releasePhaseMessages.earlyAccess,\n};\n\n/**\n * Use the `ReleasePhaseIndicator` to communicate the release phase\n * of a feature (Preview, New, Early Access, Deprecated).\n * @public\n */\nexport const ReleasePhaseIndicator = forwardRef<\n  HTMLDivElement,\n  ReleasePhaseIndicatorProps\n>((props, forwardedRef) => {\n  const {\n    phase,\n    id,\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\n  const intl = useIntl();\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <Chip\n      id={id}\n      ref={forwardedRef}\n      size=\"condensed\"\n      variant=\"emphasized\"\n      color={phaseColorMap[phase]}\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      {intl.formatMessage(phaseLabelMap[phase])}\n    </Chip>\n  );\n});\n\n(\n  ReleasePhaseIndicator as typeof ReleasePhaseIndicator & {\n    displayName: string;\n  }\n).displayName = 'ReleasePhaseIndicator';\n"],
+  "mappings": "AAmFI;AAnFJ,SAAS,kBAAkB;AAC3B,SAAS,eAAuC;AAEhD,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAOpC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AA0BvB,MAAM,gBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAEA,MAAM,gBAAyD;AAAA,EAC7D,SAAS,qBAAqB;AAAA,EAC9B,KAAK,qBAAqB;AAAA,EAC1B,YAAY,qBAAqB;AAAA,EACjC,gBAAgB,qBAAqB;AACvC;AAOO,MAAM,wBAAwB,WAGnC,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;AAEJ,QAAM,OAAO,QAAQ;AAErB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAO,cAAc,KAAK;AAAA,MAC1B,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB,eAAK,cAAc,cAAc,KAAK,CAAC;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAGC,sBAGA,cAAc;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/shared-components/Visual.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { VisualOverlayCSS } from './Visual.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n\n//#region Typings\n/**\n * @public\n */\nexport interface VisualProps extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * Container for the Visual for the guided interaction overlays, e.g. an image or a video.\n * @public\n */\nexport const Visual = (props: VisualProps) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(VisualOverlayCSS, consumerClassName)}\n      style={consumerStyle}\n    >\n      {children}\n    </div>\n  );\n};\n\nVisual['displayName'] = 'GuidedInteraction.Visual';\n"],
-  "mappings": "AA2BI;AA3BJ,OAAO,UAAU;AAEjB,SAAS,wBAAwB;AAiB1B,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,OAAO,aAAa,IAAI;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { VisualOverlayCSS } from './Visual.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface VisualProps extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * Container for the Visual for the guided interaction overlays, e.g. an image or a video.\n * @public\n */\nexport const Visual = (props: VisualProps) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(VisualOverlayCSS, consumerClassName)}\n      style={consumerStyle}\n    >\n      {children}\n    </div>\n  );\n};\n\nVisual['displayName'] = 'GuidedInteraction.Visual';\n"],
+  "mappings": "AA0BI;AA1BJ,OAAO,UAAU;AAEjB,SAAS,wBAAwB;AAgB1B,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,OAAO,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Visual.css";
-var VisualOverlayCSS = "_9w5efw0-3-13-2";
+var VisualOverlayCSS = "_9w5efw0-3-14-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-13-2';"],
+  "sourcesContent": ["import './Visual.css';\nexport var VisualOverlayCSS = '_9w5efw0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/content/skeleton/Skeleton.css

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/skeleton/Skeleton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { skeletonPlaceholderCSS, skeletonSvgCSS } from './Skeleton.sty.js';\nimport { SkeletonDrawer, SkeletonGradient } from './utils.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Skeleton';\n\n/**\n * Accepted properties for Skeleton\n * @public\n */\nexport interface SkeletonProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Defines the shape of the Skeleton.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'rounded';\n  /**\n   * Width of the Skeleton placeholder.\n   * @defaultValue 100%\n   */\n  width?: CSSProperties['width'];\n  /**\n   * Height of the Skeleton placeholder.\n   * @defaultValue 100%\n   */\n  height?: CSSProperties['height'];\n}\n\n/**\n * Use the `Skeleton` to represent a loading state when the app loads for the first time or most of the page is loading.\n * @public\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      variant = 'default',\n      width = '100%',\n      height = '100%',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const gradientId = useId();\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={clsx(skeletonPlaceholderCSS({ variant }), consumerClassName)}\n        style={{ width, height, ...consumerStyle }}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <svg className={skeletonSvgCSS}>\n          <defs>\n            <SkeletonGradient id={gradientId} />\n          </defs>\n          <SkeletonDrawer gradientId={gradientId} />\n        </svg>\n        {children}\n      </div>\n    );\n  },\n);\n\n(Skeleton as typeof Skeleton & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA+EQ,SAEI,KAFJ;AA/ER,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAOpC,MAAM,iBAAiB;AAiChB,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,uBAAuB,EAAE,QAAQ,CAAC,GAAG,iBAAiB;AAAA,QACtE,OAAO,EAAE,OAAO,QAAQ,GAAG,cAAc;AAAA,QACzC,eAAa;AAAA,QACZ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,+BAAC,SAAI,WAAW,gBACd;AAAA,gCAAC,UACC,8BAAC,oBAAiB,IAAI,YAAY,GACpC;AAAA,YACA,oBAAC,kBAAe,YAAwB;AAAA,aAC1C;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,SAAuD,cACtD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { skeletonPlaceholderCSS, skeletonSvgCSS } from './Skeleton.sty.js';\nimport { SkeletonDrawer, SkeletonGradient } from './utils.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Skeleton';\n\n/**\n * Accepted properties for Skeleton\n * @public\n */\nexport interface SkeletonProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Defines the shape of the Skeleton.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'rounded';\n  /**\n   * Width of the Skeleton placeholder.\n   * @defaultValue 100%\n   */\n  width?: CSSProperties['width'];\n  /**\n   * Height of the Skeleton placeholder.\n   * @defaultValue 100%\n   */\n  height?: CSSProperties['height'];\n}\n\n/**\n * Use the `Skeleton` to represent a loading state when the app loads for the first time or most of the page is loading.\n * @public\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      variant = 'default',\n      width = '100%',\n      height = '100%',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const gradientId = useId();\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={clsx(skeletonPlaceholderCSS({ variant }), consumerClassName)}\n        style={{ width, height, ...consumerStyle }}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <svg className={skeletonSvgCSS}>\n          <defs>\n            <SkeletonGradient id={gradientId} />\n          </defs>\n          <SkeletonDrawer gradientId={gradientId} />\n        </svg>\n        {children}\n      </div>\n    );\n  },\n);\n\n(Skeleton as typeof Skeleton & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAgFQ,SAEI,KAFJ;AAhFR,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAOpC,MAAM,iBAAiB;AAkChB,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,uBAAuB,EAAE,QAAQ,CAAC,GAAG,iBAAiB;AAAA,QACtE,OAAO,EAAE,OAAO,QAAQ,GAAG,cAAc;AAAA,QACzC,eAAa;AAAA,QACZ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,+BAAC,SAAI,WAAW,gBACd;AAAA,gCAAC,UACC,8BAAC,oBAAiB,IAAI,YAAY,GACpC;AAAA,YACA,oBAAC,kBAAe,YAAwB;AAAA,aAC1C;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,SAAuD,cACtD;",
   "names": []
 }

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

package/esm/content/skeleton/SkeletonText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/skeleton/SkeletonText.tsx"],
-  "sourcesContent": ["import { type CSSProperties, forwardRef } from 'react';\n\nimport { skeletonSvgCSS } from './Skeleton.sty.js';\nimport { SkeletonDrawer, SkeletonGradient } from './utils.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { StylingProps } from '../../core/types/styling-props.js';\n\nconst COMPONENT_NAME = 'SkeletonText';\n\n/**\n * Accepted properties for SkeletonText\n * @public\n */\nexport interface SkeletonTextProps\n  extends StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Width of the SkeletonText placeholder.\n   * @defaultValue 100%\n   */\n  width?: CSSProperties['width'];\n  /**\n   * Number of Lines of the SkeletonText placeholder.\n   * @defaultValue 3\n   */\n  lines?: number;\n}\n\nconst lineHeight = 12;\nconst linePadding = 8;\n\nconst baseYOffset = linePadding * 0.5;\nconst lineCapSize = lineHeight * 0.5;\nconst lineStep = lineHeight + linePadding;\n\nconst getSkeletonLinesMargin = (line: number, lines: number) => {\n  if (lines === 1) {\n    // do not add any margin for single-line SkeletonTexts\n    return 0;\n  }\n  return ((line + 2) % 3) * lineHeight;\n};\n\n/**\n * Use the `SkeletonText` to represent loading text content with animated placeholder lines.\n * @public\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (props, forwardedRef) => {\n    const {\n      width = '100%',\n      lines = 3,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const maskId = useId();\n    const gradientId = useId();\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={{\n          width,\n          height: `${lineStep * lines}px`,\n          ...consumerStyle,\n        }}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <svg className={skeletonSvgCSS}>\n          <defs>\n            <SkeletonGradient id={gradientId} />\n          </defs>\n          <mask id={maskId}>\n            {new Array(lines).fill(null).map((_, lineIndex) => (\n              <rect\n                key={`${lines}-${lineIndex}`}\n                y={baseYOffset + lineStep * lineIndex}\n                height={lineHeight}\n                rx={lineCapSize}\n                fill=\"white\"\n                style={{\n                  // we also substract 1px, to make sure the line cap is fully within the svg, and isn't cut\n                  width: `calc(100% - 1px - ${getSkeletonLinesMargin(\n                    lineIndex,\n                    lines,\n                  )}px)`,\n                }}\n              />\n            ))}\n          </mask>\n          <g mask={`url(#${maskId})`}>\n            <SkeletonDrawer gradientId={gradientId} />\n          </g>\n        </svg>\n      </div>\n    );\n  },\n);\n\n(SkeletonText as typeof SkeletonText & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAyFQ,SAEI,KAFJ;AAzFR,SAA6B,kBAAkB;AAE/C,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAMpC,MAAM,iBAAiB;AAuBvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,cAAc;AAClC,MAAM,cAAc,aAAa;AACjC,MAAM,WAAW,aAAa;AAE9B,MAAM,yBAAyB,CAAC,MAAc,UAAkB;AAC9D,MAAI,UAAU,GAAG;AAEf,WAAO;AAAA,EACT;AACA,UAAS,OAAO,KAAK,IAAK;AAC5B;AAMO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,SAAS,MAAM;AACrB,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,UACL;AAAA,UACA,QAAQ,GAAG,WAAW,KAAK;AAAA,UAC3B,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACZ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,SAAI,WAAW,gBACd;AAAA,8BAAC,UACC,8BAAC,oBAAiB,IAAI,YAAY,GACpC;AAAA,UACA,oBAAC,UAAK,IAAI,QACP,cAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,IAAI,CAAC,GAAG,cACnC;AAAA,YAAC;AAAA;AAAA,cAEC,GAAG,cAAc,WAAW;AAAA,cAC5B,QAAQ;AAAA,cACR,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,OAAO;AAAA;AAAA,gBAEL,OAAO,qBAAqB;AAAA,kBAC1B;AAAA,kBACA;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,YAXK,GAAG,KAAK,IAAI,SAAS;AAAA,UAY5B,CACD,GACH;AAAA,UACA,oBAAC,OAAE,MAAM,QAAQ,MAAM,KACrB,8BAAC,kBAAe,YAAwB,GAC1C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
+  "sourcesContent": ["import { type CSSProperties, forwardRef } from 'react';\n\nimport { skeletonSvgCSS } from './Skeleton.sty.js';\nimport { SkeletonDrawer, SkeletonGradient } from './utils.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 { StylingProps } from '../../core/types/styling-props.js';\n\nconst COMPONENT_NAME = 'SkeletonText';\n\n/**\n * Accepted properties for SkeletonText\n * @public\n */\nexport interface SkeletonTextProps\n  extends StylingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {\n  /**\n   * Width of the SkeletonText placeholder.\n   * @defaultValue 100%\n   */\n  width?: CSSProperties['width'];\n  /**\n   * Number of Lines of the SkeletonText placeholder.\n   * @defaultValue 3\n   */\n  lines?: number;\n}\n\nconst lineHeight = 12;\nconst linePadding = 8;\n\nconst baseYOffset = linePadding * 0.5;\nconst lineCapSize = lineHeight * 0.5;\nconst lineStep = lineHeight + linePadding;\n\nconst getSkeletonLinesMargin = (line: number, lines: number) => {\n  if (lines === 1) {\n    // do not add any margin for single-line SkeletonTexts\n    return 0;\n  }\n  return ((line + 2) % 3) * lineHeight;\n};\n\n/**\n * Use the `SkeletonText` to represent loading text content with animated placeholder lines.\n * @public\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (props, forwardedRef) => {\n    const {\n      width = '100%',\n      lines = 3,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const maskId = useId();\n    const gradientId = useId();\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={{\n          width,\n          height: `${lineStep * lines}px`,\n          ...consumerStyle,\n        }}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <svg className={skeletonSvgCSS}>\n          <defs>\n            <SkeletonGradient id={gradientId} />\n          </defs>\n          <mask id={maskId}>\n            {new Array(lines).fill(null).map((_, lineIndex) => (\n              <rect\n                key={`${lines}-${lineIndex}`}\n                y={baseYOffset + lineStep * lineIndex}\n                height={lineHeight}\n                rx={lineCapSize}\n                fill=\"white\"\n                style={{\n                  // we also substract 1px, to make sure the line cap is fully within the svg, and isn't cut\n                  width: `calc(100% - 1px - ${getSkeletonLinesMargin(\n                    lineIndex,\n                    lines,\n                  )}px)`,\n                }}\n              />\n            ))}\n          </mask>\n          <g mask={`url(#${maskId})`}>\n            <SkeletonDrawer gradientId={gradientId} />\n          </g>\n        </svg>\n      </div>\n    );\n  },\n);\n\n(SkeletonText as typeof SkeletonText & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAsFQ,SAEI,KAFJ;AAtFR,SAA6B,kBAAkB;AAE/C,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAMpC,MAAM,iBAAiB;AAoBvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,cAAc;AAClC,MAAM,cAAc,aAAa;AACjC,MAAM,WAAW,aAAa;AAE9B,MAAM,yBAAyB,CAAC,MAAc,UAAkB;AAC9D,MAAI,UAAU,GAAG;AAEf,WAAO;AAAA,EACT;AACA,UAAS,OAAO,KAAK,IAAK;AAC5B;AAMO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,SAAS,MAAM;AACrB,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,UACL;AAAA,UACA,QAAQ,GAAG,WAAW,KAAK;AAAA,UAC3B,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACZ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,SAAI,WAAW,gBACd;AAAA,8BAAC,UACC,8BAAC,oBAAiB,IAAI,YAAY,GACpC;AAAA,UACA,oBAAC,UAAK,IAAI,QACP,cAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,IAAI,CAAC,GAAG,cACnC;AAAA,YAAC;AAAA;AAAA,cAEC,GAAG,cAAc,WAAW;AAAA,cAC5B,QAAQ;AAAA,cACR,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,OAAO;AAAA;AAAA,gBAEL,OAAO,qBAAqB;AAAA,kBAC1B;AAAA,kBACA;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,YAXK,GAAG,KAAK,IAAI,SAAS;AAAA,UAY5B,CACD,GACH;AAAA,UACA,oBAAC,OAAE,MAAM,QAAQ,MAAM,KACrB,8BAAC,kBAAe,YAAwB,GAC1C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/Description.tsx"],
-  "sourcesContent": ["import { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Paragraph } from '../../typography/paragraph/Paragraph.js';\nimport { Text } from '../../typography/text/Text.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyDescriptionProps\n  extends DOMProps,\n    WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion Typings\n\n/**\n * Adds the description for the terminology to help the user.\n * @public\n */\nexport const Description = (props: TerminologyDescriptionProps) => {\n  const {\n    children,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n  if (typeof children === 'string') {\n    return (\n      <Paragraph\n        id={id}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n      >\n        {children}\n      </Paragraph>\n    );\n  }\n  return (\n    <Text as=\"div\" textStyle=\"base\" id={id}>\n      {children}\n    </Text>\n  );\n};\n\nDescription.displayName = 'TerminologyOverlay.Description';\n"],
-  "mappings": "AAgCM;AA5BN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAiBd,MAAM,cAAc,CAAC,UAAuC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AACJ,MAAI,OAAO,aAAa,UAAU;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE,oBAAC,QAAK,IAAG,OAAM,WAAU,QAAO,IAC7B,UACH;AAEJ;AAEA,YAAY,cAAc;",
+  "sourcesContent": ["import { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Paragraph } from '../../typography/paragraph/Paragraph.js';\nimport { Text } from '../../typography/text/Text.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface TerminologyDescriptionProps\n  extends DOMProps, WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * Adds the description for the terminology to help the user.\n * @public\n */\nexport const Description = (props: TerminologyDescriptionProps) => {\n  const {\n    children,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n  if (typeof children === 'string') {\n    return (\n      <Paragraph\n        id={id}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n      >\n        {children}\n      </Paragraph>\n    );\n  }\n  return (\n    <Text as=\"div\" textStyle=\"base\" id={id}>\n      {children}\n    </Text>\n  );\n};\n\nDescription.displayName = 'TerminologyOverlay.Description';\n"],
+  "mappings": "AA6BM;AAzBN,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAcd,MAAM,cAAc,CAAC,UAAuC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AACJ,MAAI,OAAO,aAAa,UAAU;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE,oBAAC,QAAK,IAAG,OAAM,WAAU,QAAO,IAC7B,UACH;AAEJ;AAEA,YAAY,cAAc;",
   "names": []
 }

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

@@ -59,7 +59,11 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
   }
   const { children: triggerChildren, ...triggerSlotProps } = slots.trigger?.props ?? {};
   const triggerProps = slots.trigger?.props ?? {};
-  return /* @__PURE__ */ jsxs(TerminologyOverlayContext.Provider, { value: overlayTriggerProps, children: [
+  const contextValue = {
+    ...overlayTriggerProps,
+    "data-state": overlayState.isOpen ? "open" : "closed"
+  };
+  return /* @__PURE__ */ jsxs(TerminologyOverlayContext.Provider, { value: contextValue, children: [
     /* @__PURE__ */ jsx(
       Trigger,
       {

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 { 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": "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",
+  "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\n    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  const contextValue = {\n    ...overlayTriggerProps,\n    'data-state': overlayState.isOpen ? ('open' as const) : ('closed' as const),\n  };\n\n  return (\n    <TerminologyOverlayContext.Provider value={contextValue}>\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": "AA4GM,cA0BE,YA1BF;AA5GN,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;AAyBxB,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,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,cAAc,aAAa,SAAU,SAAoB;AAAA,EAC3D;AAEA,SACE,qBAAC,0BAA0B,UAA1B,EAAmC,OAAO,cACzC;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/TerminologyOverlayContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/terminology-overlay/TerminologyOverlayContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { KeyboardEvent } from '../../core/types/events.js';\n\n/** @internal */\ninterface TerminologyOverlayContextType {\n  isDisabled?: boolean;\n  'aria-expanded'?: boolean | 'true' | 'false';\n  'aria-haspopup'?:\n    | boolean\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | 'true'\n    | 'false';\n  'aria-controls'?: string;\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const TerminologyOverlayContext =\n  createContext<TerminologyOverlayContextType>({});\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAqBvB,MAAM,4BACX,cAA6C,CAAC,CAAC;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { KeyboardEvent } from '../../core/types/events.js';\n\n/** @internal */\ninterface TerminologyOverlayContextType {\n  isDisabled?: boolean;\n  'aria-expanded'?: boolean | 'true' | 'false';\n  'aria-haspopup'?:\n    | boolean\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | 'true'\n    | 'false';\n  'aria-controls'?: string;\n  'data-state'?: 'open' | 'closed';\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const TerminologyOverlayContext =\n  createContext<TerminologyOverlayContextType>({});\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAsBvB,MAAM,4BACX,cAA6C,CAAC,CAAC;",
   "names": []
 }

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

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 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 { InlineButton } from "../../buttons/inline-button/InlineButton.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.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 {
@@ -25,38 +23,26 @@ const Trigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     ...remainingBehavioralTrackingProps
   } = behavioralTrackingProps;
   const ariaLabelingProps = useAriaLabelingProps(restProps);
-  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({
-    isMinimal: true
-  });
   const overlayTriggerProps = useContext(TerminologyOverlayContext);
   return /* @__PURE__ */ jsx(
-    "button",
+    InlineButton,
     {
-      className: clsx(
-        focusClassName,
-        trigger,
-        {
-          "strato-focus-visible": isFocusVisible
-        },
-        consumerClassName
-      ),
-      style: {
-        textDecoration: isFocusVisible ? "none" : void 0,
-        ...consumerStyle
-      },
+      as: "button",
+      id: propId,
+      className: consumerClassName,
+      style: consumerStyle,
       ref: forwardedRef,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       ..._mergeProps(
         overlayTriggerProps,
-        focusProps,
         ariaLabelingProps,
-        remainingBehavioralTrackingProps
+        { "data-dt-children-name": dataDtName },
+        remainingBehavioralTrackingProps,
+        { "data-dt-component": COMPONENT_NAME }
       ),
       "aria-haspopup": "dialog",
-      "data-testid": dataTestId,
-      "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow,
-      "data-dt-name": dataDtName,
-      "data-dt-component": COMPONENT_NAME,
       children
     }
   );

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/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;",
+  "sourcesContent": ["import { forwardRef, useContext, type ReactNode } from 'react';\n\nimport { COMPONENT_NAME } from './terminology-overlay-constants.js';\nimport { TerminologyOverlayContext } from './TerminologyOverlayContext.js';\nimport { InlineButton } from '../../buttons/inline-button/InlineButton.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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\n    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 overlayTriggerProps = useContext(TerminologyOverlayContext);\n\n  return (\n    <InlineButton\n      as=\"button\"\n      id={propId}\n      className={consumerClassName}\n      style={consumerStyle}\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {..._mergeProps(\n        overlayTriggerProps,\n        ariaLabelingProps,\n        { 'data-dt-children-name': dataDtName },\n        remainingBehavioralTrackingProps,\n        { 'data-dt-component': COMPONENT_NAME },\n      )}\n      aria-haspopup=\"dialog\"\n    >\n      {children}\n    </InlineButton>\n  );\n});\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'TerminologyOverlay.Trigger';\n"],
+  "mappings": "AA8DI;AA9DJ,SAAS,YAAY,kBAAkC;AAEvD,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAO3C,SAAS,cAAc,mBAAmB;AAyBnC,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,sBAAsB,WAAW,yBAAyB;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,QACF;AAAA,QACA;AAAA,QACA,EAAE,yBAAyB,WAAW;AAAA,QACtC;AAAA,QACA,EAAE,qBAAqB,eAAe;AAAA,MACxC;AAAA,MACA,iBAAc;AAAA,MAEb;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-13-2 {
+:root[data-theme="light"]._1jgl8s50-3-14-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);
@@ -449,7 +449,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-13-2 {
+:root[data-theme="dark"]._1jgl8s50-3-14-0 {
   --dt-box-shadows-surface-flat-hover: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 4px 14px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);
   --dt-box-shadows-surface-flat-active: var(--_vr-10);
   --dt-box-shadows-surface-flat-drag: var(--_vr-shadow-0), var(--_vr-shadow-1), 0 13px 17px -2px color-mix(in srgb, var(--dt-colors-box-shadow-default) 80%, transparent);

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

@@ -1,5 +1,5 @@
 import "./AppRoot.css";
-var dtVisualRefreshEnabled = "_1jgl8s50-3-13-2";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-14-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-13-2';"],
+  "sourcesContent": ["import './AppRoot.css';\nexport var dtVisualRefreshEnabled = '_1jgl8s50-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

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

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { useActiveElement } from "../../hooks/useActiveElement.js";
 import { useFocusContext } from "../../hooks/useFocusContext.js";
 import { useModality } from "../../hooks/useModality.js";
+import { attemptFocus } from "../../utils/focus-management/attempt-focus.js";
 import { focusFirstDescendant } from "../../utils/focus-management/focus-first-descendant.js";
 import { getFirstTabbableChild } from "../../utils/focus-management/get-first-tabbable-child.js";
 import { getLastTabbableChild } from "../../utils/focus-management/get-last-tabbable-child.js";
@@ -34,12 +35,17 @@ const FocusScope = (props) => {
       };
       const unregister = focusContext.registerScope(scopeRegistration);
       focusContext.setBackgroundInertness(true);
+      let lastFocusedInScope = null;
       const handleFocusIn = (event) => {
-        if (focusContext.getTopScope() !== scopeRegistration) {
+        const { target } = event;
+        if (!(target instanceof Element)) {
+          return;
+        }
+        if (wrapperRef.current?.contains(target)) {
+          lastFocusedInScope = target;
           return;
         }
-        const target = event.target;
-        if (target && wrapperRef.current?.contains(target)) {
+        if (focusContext.getTopScope() !== scopeRegistration) {
           return;
         }
         if (isInInertSubtree(target)) {
@@ -113,7 +119,22 @@ const FocusScope = (props) => {
       };
       document.addEventListener("focusout", handleFocusOut, true);
       focusFirstDescendant(wrapperRef.current, focusOptions);
+      lastFocusedInScope = null;
+      let reassertFocusTimeout;
+      if (!wrapperRef.current?.contains(document.activeElement)) {
+        reassertFocusTimeout = setTimeout(() => {
+          const wrapper = wrapperRef.current;
+          if (!wrapper || focusContext.getTopScope() !== scopeRegistration || wrapper.contains(document.activeElement)) {
+            return;
+          }
+          if (lastFocusedInScope instanceof HTMLElement && wrapper.contains(lastFocusedInScope) && attemptFocus(lastFocusedInScope, focusOptionsRef.current)) {
+            return;
+          }
+          focusFirstDescendant(wrapper, focusOptionsRef.current);
+        }, 0);
+      }
       return () => {
+        clearTimeout(reassertFocusTimeout);
         document.removeEventListener("focusin", handleFocusIn, true);
         document.removeEventListener("keydown", handleKeyDown, true);
         document.removeEventListener("focusout", handleFocusOut, true);

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';\nimport { getFirstTabbableChild } from '../../utils/focus-management/get-first-tabbable-child.js';\nimport { getLastTabbableChild } from '../../utils/focus-management/get-last-tabbable-child.js';\nimport { isInInertSubtree } from '../../utils/focus-management/is-tabbable.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 focus landed on an element inside an inert subtree, an async\n        // operation (e.g. Radix restoring focus to a menu trigger after\n        // onSelect fires) placed focus in the now-inert background.\n        // Pull it back into this scope.\n        if (isInInertSubtree(target)) {\n          focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);\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      // Tab cycling: prevent focus from escaping the scope (e.g. to parent\n      // frames in an iframe-hosted app) by wrapping Tab/Shift+Tab at the\n      // boundaries of the scope. The boundaries have to be derived from what\n      // the browser actually tabs to \u2014 an element that is merely focusable but\n      // never reached (e.g. a `display: none` control) would be a boundary the\n      // active element can never match, so the wrap would silently never fire.\n\n      // Set while the browser performs the default action of a Tab key press,\n      // so the focusout net below can tell tab navigation apart from focus\n      // that was lost because its element got re-rendered away.\n      let isTabbing = false;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Tab') {\n          return;\n        }\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        isTabbing = true;\n        setTimeout(() => {\n          isTabbing = false;\n        }, 0);\n        const wrapper = wrapperRef.current;\n        if (!wrapper) {\n          return;\n        }\n        const first = getFirstTabbableChild(wrapper) as HTMLElement | null;\n        const last = getLastTabbableChild(wrapper) as HTMLElement | null;\n        if (!first || !last) {\n          return;\n        }\n        if (event.shiftKey) {\n          if (document.activeElement === first) {\n            event.preventDefault();\n            last.focus({ preventScroll: true, ...focusOptionsRef.current });\n          }\n        } else {\n          if (document.activeElement === last) {\n            event.preventDefault();\n            first.focus({ preventScroll: true, ...focusOptionsRef.current });\n          }\n        }\n      };\n      document.addEventListener('keydown', handleKeyDown, true);\n\n      // Safety net for tab stops the tab-order helpers cannot see at all:\n      // Chrome makes an overflowing scroll container keyboard focusable while\n      // still reporting `tabIndex` as -1, so Tab can step onto it and then out\n      // of the scope, dropping focus on `<body>`. A null `relatedTarget` means\n      // focus went nowhere, so bring it back to the scope container. Only tab\n      // navigation is corrected \u2014 focus lost to a re-render belongs to whoever\n      // owns that element (e.g. drag and drop restoring its own drag handle).\n      const handleFocusOut = (event: FocusEvent) => {\n        if (!isTabbing) {\n          return;\n        }\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        if (event.relatedTarget !== null) {\n          return;\n        }\n        requestAnimationFrame(() => {\n          const wrapper = wrapperRef.current;\n          // Focus left the document altogether (tab switch, dev tools) \u2014\n          // stealing it back would fight the browser.\n          if (!wrapper || !document.hasFocus()) {\n            return;\n          }\n          if (wrapper.contains(document.activeElement)) {\n            return;\n          }\n          const container = wrapper.firstElementChild as HTMLElement | null;\n          container?.focus({ preventScroll: true });\n          if (document.activeElement !== container) {\n            focusFirstDescendant(wrapper, focusOptionsRef.current);\n          }\n        });\n      };\n      document.addEventListener('focusout', handleFocusOut, true);\n\n      focusFirstDescendant(wrapperRef.current, focusOptions);\n\n      return () => {\n        document.removeEventListener('focusin', handleFocusIn, true);\n        document.removeEventListener('keydown', handleKeyDown, true);\n        document.removeEventListener('focusout', handleFocusOut, 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    // oxlint-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": "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",
+  "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 { attemptFocus } from '../../utils/focus-management/attempt-focus.js';\nimport { focusFirstDescendant } from '../../utils/focus-management/focus-first-descendant.js';\nimport { getFirstTabbableChild } from '../../utils/focus-management/get-first-tabbable-child.js';\nimport { getLastTabbableChild } from '../../utils/focus-management/get-last-tabbable-child.js';\nimport { isInInertSubtree } from '../../utils/focus-management/is-tabbable.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      // Lets the re-assert below hand focus back to whatever the scope's\n      // content focused itself (e.g. a confirmation dialog focusing its\n      // destructive action via a ref) rather than to the first focusable\n      // element.\n      let lastFocusedInScope: Element | null = null;\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        const { target } = event;\n        if (!(target instanceof Element)) {\n          return;\n        }\n        if (wrapperRef.current?.contains(target)) {\n          lastFocusedInScope = target;\n          return;\n        }\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        // If focus landed on an element inside an inert subtree, an async\n        // operation (e.g. Radix restoring focus to a menu trigger after\n        // onSelect fires) placed focus in the now-inert background.\n        // Pull it back into this scope.\n        if (isInInertSubtree(target)) {\n          focusFirstDescendant(wrapperRef.current, focusOptionsRef.current);\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      // Tab cycling: prevent focus from escaping the scope (e.g. to parent\n      // frames in an iframe-hosted app) by wrapping Tab/Shift+Tab at the\n      // boundaries of the scope. The boundaries have to be derived from what\n      // the browser actually tabs to \u2014 an element that is merely focusable but\n      // never reached (e.g. a `display: none` control) would be a boundary the\n      // active element can never match, so the wrap would silently never fire.\n\n      // Set while the browser performs the default action of a Tab key press,\n      // so the focusout net below can tell tab navigation apart from focus\n      // that was lost because its element got re-rendered away.\n      let isTabbing = false;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Tab') {\n          return;\n        }\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        isTabbing = true;\n        setTimeout(() => {\n          isTabbing = false;\n        }, 0);\n        const wrapper = wrapperRef.current;\n        if (!wrapper) {\n          return;\n        }\n        const first = getFirstTabbableChild(wrapper) as HTMLElement | null;\n        const last = getLastTabbableChild(wrapper) as HTMLElement | null;\n        if (!first || !last) {\n          return;\n        }\n        if (event.shiftKey) {\n          if (document.activeElement === first) {\n            event.preventDefault();\n            last.focus({ preventScroll: true, ...focusOptionsRef.current });\n          }\n        } else {\n          if (document.activeElement === last) {\n            event.preventDefault();\n            first.focus({ preventScroll: true, ...focusOptionsRef.current });\n          }\n        }\n      };\n      document.addEventListener('keydown', handleKeyDown, true);\n\n      // Safety net for tab stops the tab-order helpers cannot see at all:\n      // Chrome makes an overflowing scroll container keyboard focusable while\n      // still reporting `tabIndex` as -1, so Tab can step onto it and then out\n      // of the scope, dropping focus on `<body>`. A null `relatedTarget` means\n      // focus went nowhere, so bring it back to the scope container. Only tab\n      // navigation is corrected \u2014 focus lost to a re-render belongs to whoever\n      // owns that element (e.g. drag and drop restoring its own drag handle).\n      const handleFocusOut = (event: FocusEvent) => {\n        if (!isTabbing) {\n          return;\n        }\n        if (focusContext.getTopScope() !== scopeRegistration) {\n          return;\n        }\n        if (event.relatedTarget !== null) {\n          return;\n        }\n        requestAnimationFrame(() => {\n          const wrapper = wrapperRef.current;\n          // Focus left the document altogether (tab switch, dev tools) \u2014\n          // stealing it back would fight the browser.\n          if (!wrapper || !document.hasFocus()) {\n            return;\n          }\n          if (wrapper.contains(document.activeElement)) {\n            return;\n          }\n          const container = wrapper.firstElementChild as HTMLElement | null;\n          container?.focus({ preventScroll: true });\n          if (document.activeElement !== container) {\n            focusFirstDescendant(wrapper, focusOptionsRef.current);\n          }\n        });\n      };\n      document.addEventListener('focusout', handleFocusOut, true);\n\n      focusFirstDescendant(wrapperRef.current, focusOptions);\n\n      // The walk above leaves behind the last element it tried, which is not\n      // necessarily one that ever held focus. Only focus moves from here on\n      // (e.g. the content focusing its own primary action via a ref) are worth\n      // restoring.\n      lastFocusedInScope = null;\n\n      // A closing overlay (e.g. Radix Menu) can steal the focus we just set\n      // before tearing down its trap, leaving focus on the body. If that\n      // happened, claim focus again after the next macrotask, when the overlay\n      // is unmounted and its trap is gone.\n      let reassertFocusTimeout: ReturnType<typeof setTimeout> | undefined;\n      if (!wrapperRef.current?.contains(document.activeElement)) {\n        reassertFocusTimeout = setTimeout(() => {\n          const wrapper = wrapperRef.current;\n          if (\n            !wrapper ||\n            focusContext.getTopScope() !== scopeRegistration ||\n            wrapper.contains(document.activeElement)\n          ) {\n            return;\n          }\n          if (\n            lastFocusedInScope instanceof HTMLElement &&\n            wrapper.contains(lastFocusedInScope) &&\n            attemptFocus(lastFocusedInScope, focusOptionsRef.current)\n          ) {\n            return;\n          }\n          focusFirstDescendant(wrapper, focusOptionsRef.current);\n        }, 0);\n      }\n\n      return () => {\n        clearTimeout(reassertFocusTimeout);\n        document.removeEventListener('focusin', handleFocusIn, true);\n        document.removeEventListener('keydown', handleKeyDown, true);\n        document.removeEventListener('focusout', handleFocusOut, 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    // oxlint-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": "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",
   "names": ["triggerElementCopy"]
 }

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

@@ -1,4 +1,4 @@
-._1xz8nhz0-3-13-2 {
+._1xz8nhz0-3-14-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-13-2";
+var visuallyHidden = "_1xz8nhz0-3-14-0";
 export {
   visuallyHidden
 };