@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes _kvldjh3-3-0-1 {
+@keyframes _kvldjh3-3-1-0 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,79 +6,79 @@
     transform: rotate(360deg);
   }
 }
-._kvldjh4-3-0-1 {
+._kvldjh4-3-1-0 {
   display: inline-block;
 }
-._kvldjh5-3-0-1 {
+._kvldjh5-3-1-0 {
   display: block;
   transform: rotate(-90deg);
 }
-._kvldjh6-3-0-1 {
-  stroke: var(--_kvldjh2-3-0-1);
+._kvldjh6-3-1-0 {
+  stroke: var(--_kvldjh2-3-1-0);
   transform-origin: center;
 }
-._kvldjh7-3-0-1 {
+._kvldjh7-3-1-0 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: _kvldjh3-3-0-1;
+  animation-name: _kvldjh3-3-1-0;
   animation-duration: var(--dt-timings-slowest-moderate, 1200ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-._kvldjh8-3-0-1 {
+._kvldjh8-3-1-0 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-._kvldjh9-3-0-1 {
-  stroke: var(--_kvldjh1-3-0-1);
+._kvldjh9-3-1-0 {
+  stroke: var(--_kvldjh1-3-1-0);
 }
-._kvldjha-3-0-1 {
+._kvldjha-3-1-0 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--_kvldjh0-3-0-1);
+  color: var(--_kvldjh0-3-1-0);
 }
-._kvldjhb-3-0-1 {
+._kvldjhb-3-1-0 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-._kvldjhc-3-0-1 {
+._kvldjhc-3-1-0 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-._kvldjhd-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-critical-accent, #bb0731);
+._kvldjhd-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._kvldjhe-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._kvldjhe-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._kvldjhf-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-primary-accent, #464cce);
+._kvldjhf-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._kvldjhg-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-success-accent, #2d6761);
+._kvldjhg-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._kvldjhh-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-warning-accent, #855400);
+._kvldjhh-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._kvldjhi-3-0-1 {
-  --_kvldjh0-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_kvldjh1-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
+._kvldjhi-3-1-0 {
+  --_kvldjh0-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_kvldjh1-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._kvldjhj-3-0-1 {
-  --_kvldjh0-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_kvldjh1-3-0-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+._kvldjhj-3-1-0 {
+  --_kvldjh0-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-3-1-0: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-._kvldjhk-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+._kvldjhk-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
 }
-._kvldjhl-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+._kvldjhl-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
 }
-._kvldjhm-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-warning-on-accent-default, #272024);
+._kvldjhm-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-warning-on-accent-default, #272024);
 }
-._kvldjhn-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+._kvldjhn-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
 }
-._kvldjho-3-0-1 {
-  --_kvldjh2-3-0-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+._kvldjho-3-1-0 {
+  --_kvldjh2-3-1-0: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }

package/esm/content/progress/ProgressCircle.js

@@ -10,6 +10,7 @@ import {
   progressCircleSvgCss
 } from "./ProgressCircle.sty.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useContainerColoring } from "../../layouts/container/Container.js";
@@ -39,6 +40,7 @@ const ProgressCircle = forwardRef(
       "data-dtrum-allow": dataDtrumAllow,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(
       originalValue,
       min,
@@ -49,12 +51,11 @@ const ProgressCircle = forwardRef(
     const derivedVariant = containerColoring.variant === "accent" ? "accent" : "default";
     const fallbackColor = containerColoring.default ? "primary" : containerColoring.color;
     const derivedColor = color ?? fallbackColor;
-    const ariaLabelingProps = useAriaLabelingProps(remainingProps);
-    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     const generatedId = useId();
     const id = propId ?? generatedId;
     const circleStyles = {};
-    const rootProps = {};
     if (!isIndeterminate && value !== void 0) {
       const circumference = 2 * Math.PI * ((progressCircleSizes[size] - progressCircleThickness) / 2);
       circleStyles["strokeDasharray"] = circumference.toFixed(3);
@@ -89,6 +90,7 @@ const ProgressCircle = forwardRef(
           })
         ),
         style: consumerStyle,
+        ...behavioralTrackingProps,
         ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
@@ -103,7 +105,6 @@ const ProgressCircle = forwardRef(
               },
               ...ariaLabelingProps,
               ...progressAriaProps,
-              ...rootProps,
               children: /* @__PURE__ */ jsxs(
                 "svg",
                 {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressCircle.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n  progressCircleBackgroundCSS,\n  progressCircleContainerCSS,\n  progressCircleCSS,\n  progressCircleRootCSS,\n  progressCircleSvgCss,\n} from './ProgressCircle.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.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 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 { type WithChildren } from '../../core/types/with-children.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { textStyle } from '../../styles/textStyle.sty.js';\n\nconst COMPONENT_NAME = 'ProgressCircle';\n\n/**\n * Accepted properties for ProgressCircle.\n * @public\n */\nexport interface ProgressCircleProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The smallest allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the size of the rendered progress.\n   * @defaultValue 'large'\n   */\n  size?: 'small' | 'large';\n  /**\n   * Controls the color of the progress.\n   * @defaultValue 'primary' or a container's color.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\nconst progressCircleSizes = {\n  small: 20,\n  large: 40,\n};\nconst progressCircleThickness = 5;\n\n/**\n * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.\n * @public\n * */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      min = 0,\n      max = 100,\n      size = 'large',\n      color,\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressCircleProps = props;\n\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n\n    const containerColoring = useContainerColoring();\n    const derivedVariant =\n      containerColoring.variant === 'accent' ? 'accent' : 'default';\n\n    // for the color in the ProgressCircle the fallback logic is a bit different - usually\n    // the fallback from the container is \"neutral\" - but in the case of the progress circle the default\n    // fallback color is \"primary\"\n    const fallbackColor = containerColoring.default\n      ? 'primary'\n      : containerColoring.color;\n    const derivedColor = color ?? fallbackColor;\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n\n    const circleStyles: CSSProperties = {};\n    const rootProps = {};\n\n    if (!isIndeterminate && value !== undefined) {\n      const circumference =\n        2 *\n        Math.PI *\n        ((progressCircleSizes[size] - progressCircleThickness) / 2);\n      circleStyles['strokeDasharray'] = circumference.toFixed(3);\n      const dashOffset = Number(\n        (((max - value) / max) * circumference).toFixed(3),\n      );\n      circleStyles['strokeDashoffset'] = `${\n        dashOffset >= 0 ? dashOffset : 0\n      }px`;\n    }\n\n    if (\n      !children &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          consumerClassName,\n          containerColorsCSS({\n            color: derivedColor,\n            variant: derivedVariant,\n          }),\n          progressCircleContainerCSS({\n            size,\n            color: derivedColor,\n            variant: derivedVariant,\n          }),\n        )}\n        style={consumerStyle}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <span\n          id={id}\n          className={clsx(progressCircleRootCSS)}\n          style={{\n            height: `${progressCircleSizes[size]}px`,\n            width: `${progressCircleSizes[size]}px`,\n          }}\n          {...ariaLabelingProps}\n          {...progressAriaProps}\n          {...rootProps}\n        >\n          <svg\n            className={progressCircleSvgCss}\n            viewBox={`0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`}\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <circle\n              fill=\"none\"\n              className={clsx(progressCircleBackgroundCSS)}\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n            <circle\n              style={circleStyles}\n              className={progressCircleCSS({ indeterminate: isIndeterminate })}\n              fill=\"none\"\n              pathLength={\n                isIndeterminate ? 360 : circleStyles['strokeDasharray']\n              }\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n          </svg>\n        </span>\n        {children && (\n          <label\n            className={clsx(\n              textStyle({ textStyle: size === 'small' ? 'small' : 'base' }),\n            )}\n            htmlFor={id}\n          >\n            {children}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\n(\n  ProgressCircle as typeof ProgressCircle & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n  progressCircleBackgroundCSS,\n  progressCircleContainerCSS,\n  progressCircleCSS,\n  progressCircleRootCSS,\n  progressCircleSvgCss,\n} from './ProgressCircle.sty.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 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 { type WithChildren } from '../../core/types/with-children.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { textStyle } from '../../styles/textStyle.sty.js';\n\nconst COMPONENT_NAME = 'ProgressCircle';\n\n/**\n * Accepted properties for ProgressCircle.\n * @public\n */\nexport interface ProgressCircleProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The smallest allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the size of the rendered progress.\n   * @defaultValue 'large'\n   */\n  size?: 'small' | 'large';\n  /**\n   * Controls the color of the progress.\n   * @defaultValue 'primary' or a container's color.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\nconst progressCircleSizes = {\n  small: 20,\n  large: 40,\n};\nconst progressCircleThickness = 5;\n\n/**\n * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.\n * @public\n * */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      min = 0,\n      max = 100,\n      size = 'large',\n      color,\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressCircleProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n\n    const containerColoring = useContainerColoring();\n    const derivedVariant =\n      containerColoring.variant === 'accent' ? 'accent' : 'default';\n\n    // for the color in the ProgressCircle the fallback logic is a bit different - usually\n    // the fallback from the container is \"neutral\" - but in the case of the progress circle the default\n    // fallback color is \"primary\"\n    const fallbackColor = containerColoring.default\n      ? 'primary'\n      : containerColoring.color;\n    const derivedColor = color ?? fallbackColor;\n\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n\n    const circleStyles: CSSProperties = {};\n\n    if (!isIndeterminate && value !== undefined) {\n      const circumference =\n        2 *\n        Math.PI *\n        ((progressCircleSizes[size] - progressCircleThickness) / 2);\n      circleStyles['strokeDasharray'] = circumference.toFixed(3);\n      const dashOffset = Number(\n        (((max - value) / max) * circumference).toFixed(3),\n      );\n      circleStyles['strokeDashoffset'] = `${\n        dashOffset >= 0 ? dashOffset : 0\n      }px`;\n    }\n\n    if (\n      !children &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          consumerClassName,\n          containerColorsCSS({\n            color: derivedColor,\n            variant: derivedVariant,\n          }),\n          progressCircleContainerCSS({\n            size,\n            color: derivedColor,\n            variant: derivedVariant,\n          }),\n        )}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <span\n          id={id}\n          className={clsx(progressCircleRootCSS)}\n          style={{\n            height: `${progressCircleSizes[size]}px`,\n            width: `${progressCircleSizes[size]}px`,\n          }}\n          {...ariaLabelingProps}\n          {...progressAriaProps}\n        >\n          <svg\n            className={progressCircleSvgCss}\n            viewBox={`0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`}\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <circle\n              fill=\"none\"\n              className={clsx(progressCircleBackgroundCSS)}\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n            <circle\n              style={circleStyles}\n              className={progressCircleCSS({ indeterminate: isIndeterminate })}\n              fill=\"none\"\n              pathLength={\n                isIndeterminate ? 360 : circleStyles['strokeDasharray']\n              }\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n          </svg>\n        </span>\n        {children && (\n          <label\n            className={clsx(\n              textStyle({ textStyle: size === 'small' ? 'small' : 'base' }),\n            )}\n            htmlFor={id}\n          >\n            {children}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\n(\n  ProgressCircle as typeof ProgressCircle & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

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

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

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

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

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

package/esm/content/skeleton/Skeleton.css

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

package/esm/content/skeleton/Skeleton.js

@@ -3,7 +3,10 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { skeletonPlaceholderCSS, skeletonSvgCSS } from "./Skeleton.sty.js";
 import { SkeletonDrawer, SkeletonGradient } from "./utils.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "Skeleton";
 const Skeleton = forwardRef(
   (props, forwardedRef) => {
@@ -17,15 +20,20 @@ const Skeleton = forwardRef(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     const gradientId = useId();
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        "data-testid": dataTestId,
         ref: forwardedRef,
         className: clsx(skeletonPlaceholderCSS({ variant }), consumerClassName),
         style: { width, height, ...consumerStyle },
-        ...remainingProps,
+        "data-testid": dataTestId,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ jsxs("svg", { className: skeletonSvgCSS, children: [

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 { useId } from '../../core/hooks/useId.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 extends WithChildren, StylingProps, DataTestId {\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 * The `Skeleton` component renders a colored block with an animated background, indicating that something 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    }: SkeletonProps = props;\n\n    const gradientId = useId();\n\n    return (\n      <div\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={clsx(skeletonPlaceholderCSS({ variant }), consumerClassName)}\n        style={{ width: width, height: height, ...consumerStyle }}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <svg className={skeletonSvgCSS}>\n          <defs>\n            <SkeletonGradient id={gradientId} />\n          </defs>\n\n          <SkeletonDrawer gradientId={gradientId} />\n        </svg>\n\n        {children}\n      </div>\n    );\n  },\n);\n\n(Skeleton as typeof Skeleton & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA8DQ,SAEI,KAFJ;AA9DR,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,aAAa;AAKtB,MAAM,iBAAiB;AA4BhB,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,IAAmB;AAEnB,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,KAAK,uBAAuB,EAAE,QAAQ,CAAC,GAAG,iBAAiB;AAAA,QACtE,OAAO,EAAE,OAAc,QAAgB,GAAG,cAAc;AAAA,QACvD,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,+BAAC,SAAI,WAAW,gBACd;AAAA,gCAAC,UACC,8BAAC,oBAAiB,IAAI,YAAY,GACpC;AAAA,YAEA,oBAAC,kBAAe,YAAwB;AAAA,aAC1C;AAAA,UAEC;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 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 * The `Skeleton` component renders a colored block with an animated background, indicating that something 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;",
   "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-0-1", variantClassNames: { variant: { "default": "_1a1ozfd1-3-0-1", rounded: "_1a1ozfd2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-0-1";
-var skeletonSvgCSS = "_1a1ozfd3-3-0-1";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-0-1";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-0-1";
+var skeletonPlaceholderCSS = _7a468({ defaultClassName: "_1a1ozfd0-3-1-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-1-0", rounded: "_1a1ozfd2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-1-0";
+var skeletonSvgCSS = "_1a1ozfd3-3-1-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-1-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-1-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-0-1',variantClassNames:{variant:{'default':'_1a1ozfd1-3-0-1',rounded:'_1a1ozfd2-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var skeletonSvgBackgroundFillCSS = '_1a1ozfd5-3-0-1';\nexport var skeletonSvgCSS = '_1a1ozfd3-3-0-1';\nexport var skeletonSvgGradientCSS = '_1a1ozfd4-3-0-1';\nexport var skeletonSvgGradientRectCSS = '_1a1ozfd6-3-0-1';"],
+  "sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'_1a1ozfd0-3-1-0',variantClassNames:{variant:{'default':'_1a1ozfd1-3-1-0',rounded:'_1a1ozfd2-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var skeletonSvgBackgroundFillCSS = '_1a1ozfd5-3-1-0';\nexport var skeletonSvgCSS = '_1a1ozfd3-3-1-0';\nexport var skeletonSvgGradientCSS = '_1a1ozfd4-3-1-0';\nexport var skeletonSvgGradientRectCSS = '_1a1ozfd6-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,+BAA+B;AACnC,IAAI,iBAAiB;AACrB,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B;",
   "names": []
 }

package/esm/content/skeleton/SkeletonText.js

@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { skeletonSvgCSS } from "./Skeleton.sty.js";
 import { SkeletonDrawer, SkeletonGradient } from "./utils.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "SkeletonText";
 const lineHeight = 12;
 const linePadding = 8;
@@ -25,12 +28,14 @@ const SkeletonText = forwardRef(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     const maskId = useId();
     const gradientId = useId();
     return /* @__PURE__ */ jsx(
       "div",
       {
-        "data-testid": dataTestId,
         ref: forwardedRef,
         className: consumerClassName,
         style: {
@@ -38,7 +43,10 @@ const SkeletonText = forwardRef(
           height: `${lineStep * lines}px`,
           ...consumerStyle
         },
-        ...remainingProps,
+        "data-testid": dataTestId,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsxs("svg", { className: skeletonSvgCSS, children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(SkeletonGradient, { id: gradientId }) }),

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 { useId } from '../../core/hooks/useId.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 extends StylingProps, DataTestId {\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 * The `SkeletonText` component renders a specified number of placeholder boxes for lines of text with an animated background.\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    }: SkeletonTextProps = props;\n\n    const maskId = useId();\n    const gradientId = useId();\n\n    return (\n      <div\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={{\n          width: width,\n          height: `${lineStep * lines}px`,\n          ...consumerStyle,\n        }}\n        {...remainingProps}\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\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": "AAyEQ,SAEI,KAFJ;AAzER,SAA6B,kBAAkB;AAE/C,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,aAAa;AAItB,MAAM,iBAAiB;AAmBvB,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,IAAuB;AAEvB,UAAM,SAAS,MAAM;AACrB,UAAM,aAAa,MAAM;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,UACL;AAAA,UACA,QAAQ,GAAG,WAAW,KAAK;AAAA,UAC3B,GAAG;AAAA,QACL;AAAA,QACC,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,UAEA,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,\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 * The `SkeletonText` component renders a specified number of placeholder boxes for lines of text with an animated background.\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;",
   "names": []
 }

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

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

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

@@ -2,27 +2,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Description } from "./Description.js";
 import { Footer } from "./Footer.js";
+import { COMPONENT_NAME } from "./terminology-overlay-constants.js";
 import { TerminologyOverlayContext } from "./TerminologyOverlayContext.js";
 import { Trigger } from "./Trigger.js";
-import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { devLog } from "../../core/utils/logging.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useBreakpoint } from "../../layouts/hooks/useBreakpoint.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
-const COMPONENT_NAME = "TerminologyOverlay";
 const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     children,
     defaultOpen,
+    className: consumerClassName,
+    style: consumerStyle,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
-  const ariaProps = _useAriaLabelingProps(remainingProps);
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const smallerScreens = useBreakpoint("(max-width: 480px)");
   const {
     targetRef,
@@ -46,17 +52,23 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
     footer: { match: Footer, multiple: true }
   });
   const rootRef = useMergeRefs([forwardedRef, triggerRef, targetRef]);
+  const { children: triggerChildren, ...triggerSlotProps } = slots.trigger?.props ?? {};
   if (slots.trigger === void 0) {
     devLog("Trigger element has not been defined!");
   }
+  const triggerProps = slots.trigger?.props ?? {};
   return /* @__PURE__ */ jsxs(TerminologyOverlayContext.Provider, { value: overlayTriggerProps, children: [
     /* @__PURE__ */ jsx(
       Trigger,
       {
         ref: rootRef,
-        "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow,
-        children: slots.trigger?.props.children
+        className: triggerProps.className,
+        style: triggerProps.style,
+        "data-testid": triggerProps["data-testid"],
+        "data-dtrum-mask": triggerProps["data-dtrum-mask"] ?? dataDtrumMask,
+        "data-dtrum-allow": triggerProps["data-dtrum-allow"] ?? dataDtrumAllow,
+        ...triggerSlotProps,
+        children: triggerChildren
       }
     ),
     /* @__PURE__ */ jsx(
@@ -65,10 +77,14 @@ const TerminologyOverlayRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
         ref: overlayRef,
         isOpen: overlayState.isOpen,
         overlayProps,
+        className: consumerClassName,
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        ...ariaProps,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ jsxs(Flex, { paddingY: 12, paddingX: 16, flexDirection: "column", children: [
           slots.description,
@@ -85,7 +101,6 @@ const TerminologyOverlay = Object.assign(TerminologyOverlayRoot, {
   Footer
 });
 export {
-  COMPONENT_NAME,
   TerminologyOverlay
 };
 //# sourceMappingURL=TerminologyOverlay.js.map