@dynatrace/strato-components 3.0.1 → 3.1.0

package/content/progress/ProgressBar.css

@@ -1,4 +1,4 @@
-@keyframes _13n9uwh0-3-0-1 {
+@keyframes _13n9uwh0-3-1-0 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,92 +6,92 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._13n9uwh5-3-0-1 {
-  color: var(--_13n9uwh1-3-0-1);
-}
-._13n9uwhd-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-primary-accent, #464cce);
-}
-._13n9uwhe-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-success-accent, #2d6761);
-}
-._13n9uwhf-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-warning-accent, #855400);
-}
-._13n9uwhg-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-critical-accent, #bb0731);
-}
-._13n9uwhh-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._13n9uwh5-3-1-0 {
+  color: var(--_13n9uwh1-3-1-0);
+}
+._13n9uwhd-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-primary-accent, #464cce);
+}
+._13n9uwhe-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-success-accent, #2d6761);
+}
+._13n9uwhf-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-warning-accent, #855400);
+}
+._13n9uwhg-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-critical-accent, #bb0731);
+}
+._13n9uwhh-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-neutral-accent, #595a7d);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._13n9uwhi-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
-}
-._13n9uwhj-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
-}
-._13n9uwhk-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-warning-on-accent-default, #272024);
-}
-._13n9uwhl-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
-}
-._13n9uwhm-3-0-1 {
-  --_13n9uwh1-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh4-3-0-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_13n9uwh2-3-0-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
-  --_13n9uwh3-3-0-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
-}
-._13n9uwhn-3-0-1 {
+._13n9uwhi-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+}
+._13n9uwhj-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+}
+._13n9uwhk-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-warning-on-accent-default, #272024);
+}
+._13n9uwhl-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+}
+._13n9uwhm-3-1-0 {
+  --_13n9uwh1-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh4-3-1-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_13n9uwh2-3-1-0: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+  --_13n9uwh3-3-1-0: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+._13n9uwhn-3-1-0 {
   width: 100%;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   overflow: hidden;
   position: relative;
-  background: var(--_13n9uwh2-3-0-1);
+  background: var(--_13n9uwh2-3-1-0);
 }
-._13n9uwho-3-0-1 {
+._13n9uwho-3-1-0 {
   height: 6px;
 }
-._13n9uwhp-3-0-1 {
+._13n9uwhp-3-1-0 {
   height: 8px;
 }
-._13n9uwhq-3-0-1 {
+._13n9uwhq-3-1-0 {
   height: 100%;
   transition-duration: var(--dt-timings-fast-default, 170ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
-  background-color: var(--_13n9uwh3-3-0-1);
+  background-color: var(--_13n9uwh3-3-1-0);
 }
-._13n9uwhr-3-0-1 {
+._13n9uwhr-3-1-0 {
   width: 100%;
-  animation-name: _13n9uwh0-3-0-1;
+  animation-name: _13n9uwh0-3-1-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   animation-iteration-count: infinite;

package/content/progress/ProgressBar.d.ts

@@ -1,14 +1,15 @@
-import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
-import { type DataTestId } from '../../core/types/data-props.js';
-import { type DOMProps } from '../../core/types/dom.js';
-import { type MaskingProps } from '../../core/types/masking-props.js';
-import { type StylingProps } from '../../core/types/styling-props.js';
-import { type WithChildren } from '../../core/types/with-children.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { DOMProps } from '../../core/types/dom.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+import type { WithChildren } from '../../core/types/with-children.js';
 /**
  * Accepted properties for ProgressBar.
  * @public
  */
-export interface ProgressBarProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps {
+export interface ProgressBarProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
     /**
      * The current value.
      * @defaultValue 'indeterminate'

package/content/progress/ProgressBar.js

@@ -42,6 +42,7 @@ var import_ProgressBarIcon = require("./ProgressBarIcon.js");
 var import_ProgressBarLabel = require("./ProgressBarLabel.js");
 var import_ProgressBarValue = require("./ProgressBarValue.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 var import_Container = require("../../layouts/container/Container.js");
@@ -105,8 +106,9 @@ const _ProgressBar = (0, import_react.forwardRef)(
       max,
       ariaValuetext
     );
-    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
-    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
     const generatedId = (0, import_useId.useId)();
     const id = propId ?? generatedId;
     if (!slots.label && !ariaLabelingProps["aria-label"] && !ariaLabelingProps["aria-labelledby"]) {
@@ -123,6 +125,7 @@ const _ProgressBar = (0, import_react.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext.Provider, { value: { id, density }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Flex.Flex,
       {
+        ref: forwardedRef,
         flexDirection: "column",
         gap: 6,
         width: "100%",
@@ -141,7 +144,7 @@ const _ProgressBar = (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        ref: forwardedRef,
+        ...behavioralTrackingProps,
         ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [

package/content/progress/ProgressBar.sty.js

@@ -27,8 +27,8 @@ __export(ProgressBar_css_exports, {
 module.exports = __toCommonJS(ProgressBar_css_exports);
 var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressBarFillCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwhq-3-0-1", variantClassNames: { indeterminate: { true: "_13n9uwhr-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwhn-3-0-1", variantClassNames: { size: { condensed: "_13n9uwho-3-0-1", "default": "_13n9uwhp-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var progressIndicatorColorVar = "var(--_13n9uwh3-3-0-1)";
-var progressRoot = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwh5-3-0-1", variantClassNames: { color: { primary: "_13n9uwh6-3-0-1", success: "_13n9uwh7-3-0-1", warning: "_13n9uwh8-3-0-1", critical: "_13n9uwh9-3-0-1", neutral: "_13n9uwha-3-0-1" }, onAccent: { true: "_13n9uwhb-3-0-1", false: "_13n9uwhc-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-3-0-1"], [{ color: "success", onAccent: false }, "_13n9uwhe-3-0-1"], [{ color: "warning", onAccent: false }, "_13n9uwhf-3-0-1"], [{ color: "critical", onAccent: false }, "_13n9uwhg-3-0-1"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-3-0-1"], [{ color: "primary", onAccent: true }, "_13n9uwhi-3-0-1"], [{ color: "success", onAccent: true }, "_13n9uwhj-3-0-1"], [{ color: "warning", onAccent: true }, "_13n9uwhk-3-0-1"], [{ color: "critical", onAccent: true }, "_13n9uwhl-3-0-1"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-3-0-1"]] });
-var progressValueColorVar = "var(--_13n9uwh4-3-0-1)";
+var progressBarFillCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwhq-3-1-0", variantClassNames: { indeterminate: { true: "_13n9uwhr-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwhn-3-1-0", variantClassNames: { size: { condensed: "_13n9uwho-3-1-0", "default": "_13n9uwhp-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressIndicatorColorVar = "var(--_13n9uwh3-3-1-0)";
+var progressRoot = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwh5-3-1-0", variantClassNames: { color: { primary: "_13n9uwh6-3-1-0", success: "_13n9uwh7-3-1-0", warning: "_13n9uwh8-3-1-0", critical: "_13n9uwh9-3-1-0", neutral: "_13n9uwha-3-1-0" }, onAccent: { true: "_13n9uwhb-3-1-0", false: "_13n9uwhc-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-3-1-0"], [{ color: "success", onAccent: false }, "_13n9uwhe-3-1-0"], [{ color: "warning", onAccent: false }, "_13n9uwhf-3-1-0"], [{ color: "critical", onAccent: false }, "_13n9uwhg-3-1-0"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-3-1-0"], [{ color: "primary", onAccent: true }, "_13n9uwhi-3-1-0"], [{ color: "success", onAccent: true }, "_13n9uwhj-3-1-0"], [{ color: "warning", onAccent: true }, "_13n9uwhk-3-1-0"], [{ color: "critical", onAccent: true }, "_13n9uwhl-3-1-0"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-3-1-0"]] });
+var progressValueColorVar = "var(--_13n9uwh4-3-1-0)";

package/content/progress/ProgressBarIcon.css

@@ -1,5 +1,5 @@
-._szm9t40-3-0-1 {
+._szm9t40-3-1-0 {
   display: flex;
   margin-left: auto;
-  color: var(--_13n9uwh3-3-0-1);
+  color: var(--_13n9uwh3-3-1-0);
 }

package/content/progress/ProgressBarIcon.sty.js

@@ -23,4 +23,4 @@ __export(ProgressBarIcon_css_exports, {
 module.exports = __toCommonJS(ProgressBarIcon_css_exports);
 var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
 var import_ProgressBarIcon_css_ts_vanilla = require("./ProgressBarIcon.css");
-var progressBarIconContainerCSS = "_szm9t40-3-0-1";
+var progressBarIconContainerCSS = "_szm9t40-3-1-0";

package/content/progress/ProgressBarLabel.css

@@ -1,9 +1,9 @@
-._1ceb8vp0-3-0-1 {
+._1ceb8vp0-3-1-0 {
   color: currentColor;
 }
-._1ceb8vp2-3-0-1 {
+._1ceb8vp2-3-1-0 {
   word-break: break-word;
 }
-._1ceb8vp3-3-0-1 {
+._1ceb8vp3-3-1-0 {
   word-break: break-word;
 }

package/content/progress/ProgressBarLabel.sty.js

@@ -23,4 +23,4 @@ __export(ProgressBarLabel_css_exports, {
 module.exports = __toCommonJS(ProgressBarLabel_css_exports);
 var import_ProgressBarLabel_css_ts_vanilla = require("./ProgressBarLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ceb8vp0-3-0-1", variantClassNames: { size: { condensed: "_1ceb8vp1-3-0-1", "default": "_1ceb8vp2-3-0-1" }, childIsText: { false: "_1ceb8vp3-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ceb8vp0-3-1-0", variantClassNames: { size: { condensed: "_1ceb8vp1-3-1-0", "default": "_1ceb8vp2-3-1-0" }, childIsText: { false: "_1ceb8vp3-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/content/progress/ProgressBarValue.css

@@ -1,13 +1,13 @@
-._1ri4i7o0-3-0-1 {
-  color: var(--_13n9uwh4-3-0-1);
+._1ri4i7o0-3-1-0 {
+  color: var(--_13n9uwh4-3-1-0);
 }
-._1ri4i7o2-3-0-1 {
+._1ri4i7o2-3-1-0 {
   word-break: break-word;
 }
-._1ri4i7o4-3-0-1 {
+._1ri4i7o4-3-1-0 {
   word-break: break-word;
 }
-._1ri4i7o5-3-0-1 {
+._1ri4i7o5-3-1-0 {
   margin-left: auto;
   align-self: center;
 }

package/content/progress/ProgressBarValue.sty.js

@@ -25,4 +25,4 @@ var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
 var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
 var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var value = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-3-0-1", variantClassNames: { size: { condensed: "_1ri4i7o1-3-0-1", "default": "_1ri4i7o2-3-0-1" }, childIsText: { true: "_1ri4i7o3-3-0-1", false: "_1ri4i7o4-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-3-0-1 _oqqp1n0-3-0-1"]] });
+var value = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-3-1-0", variantClassNames: { size: { condensed: "_1ri4i7o1-3-1-0", "default": "_1ri4i7o2-3-1-0" }, childIsText: { true: "_1ri4i7o3-3-1-0", false: "_1ri4i7o4-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-3-1-0 _oqqp1n0-3-1-0"]] });

package/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/content/progress/ProgressCircle.d.ts

@@ -1,4 +1,5 @@
 import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type DOMProps } from '../../core/types/dom.js';
 import { type MaskingProps } from '../../core/types/masking-props.js';
@@ -8,7 +9,7 @@ import { type WithChildren } from '../../core/types/with-children.js';
  * Accepted properties for ProgressCircle.
  * @public
  */
-export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps {
+export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
     /**
      * The current value.
      * @defaultValue 'indeterminate'

package/content/progress/ProgressCircle.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_useProgressAriaProps = require("./hooks/useProgressAriaProps.js");
 var import_ProgressCircle_css = require("./ProgressCircle.sty.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 var import_Container = require("../../layouts/container/Container.js");
@@ -66,6 +67,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
       "data-dtrum-allow": dataDtrumAllow,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const { value, isIndeterminate, progressAriaProps } = (0, import_useProgressAriaProps.useProgressAriaProps)(
       originalValue,
       min,
@@ -76,12 +78,11 @@ const ProgressCircle = (0, import_react.forwardRef)(
     const derivedVariant = containerColoring.variant === "accent" ? "accent" : "default";
     const fallbackColor = containerColoring.default ? "primary" : containerColoring.color;
     const derivedColor = color ?? fallbackColor;
-    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
-    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
+    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
     const generatedId = (0, import_useId.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);
@@ -116,6 +117,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
           })
         ),
         style: consumerStyle,
+        ...behavioralTrackingProps,
         ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
@@ -130,7 +132,6 @@ const ProgressCircle = (0, import_react.forwardRef)(
               },
               ...ariaLabelingProps,
               ...progressAriaProps,
-              ...rootProps,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 "svg",
                 {

package/content/progress/ProgressCircle.sty.js

@@ -27,8 +27,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressCircleBackgroundCSS = "_kvldjh9-3-0-1";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-0-1", variantClassNames: { indeterminate: { true: "_kvldjh7-3-0-1", false: "_kvldjh8-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-3-1-0", variantClassNames: { indeterminate: { true: "_kvldjh7-3-1-0", false: "_kvldjh8-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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";

package/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/content/shared-components/Visual.sty.js

@@ -22,4 +22,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var VisualOverlayCSS = "_9w5efw0-3-0-1";
+var VisualOverlayCSS = "_9w5efw0-3-1-0";

package/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/content/skeleton/Skeleton.d.ts

@@ -1,12 +1,14 @@
 import { type CSSProperties } from 'react';
-import { type DataTestId } from '../../core/types/data-props.js';
-import { type StylingProps } from '../../core/types/styling-props.js';
-import { type WithChildren } from '../../core/types/with-children.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+import type { WithChildren } from '../../core/types/with-children.js';
 /**
  * Accepted properties for Skeleton
  * @public
  */
-export interface SkeletonProps extends WithChildren, StylingProps, DataTestId {
+export interface SkeletonProps extends WithChildren, StylingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Defines the shape of the Skeleton.
      * @defaultValue 'default'