@dynatrace/strato-components 3.5.0 → 3.5.2

package/content/skeleton/Skeleton.css

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

package/content/skeleton/Skeleton.sty.js

@@ -26,8 +26,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-5-0", variantClassNames: { variant: { "default": "_1a1ozfd1-3-5-0", rounded: "_1a1ozfd2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-5-0";
-var skeletonSvgCSS = "_1a1ozfd3-3-5-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-3-5-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-5-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-3-5-2", variantClassNames: { variant: { "default": "_1a1ozfd1-3-5-2", rounded: "_1a1ozfd2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-3-5-2";
+var skeletonSvgCSS = "_1a1ozfd3-3-5-2";
+var skeletonSvgGradientCSS = "_1a1ozfd4-3-5-2";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-3-5-2";

package/content/terminology-overlay/TerminologyOverlay.css

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

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

@@ -21,4 +21,4 @@ __export(TerminologyOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TerminologyOverlay_css_exports);
 var import_TerminologyOverlay_css_ts_vanilla = require("./TerminologyOverlay.css");
-var trigger = "_1dd8zuz0-3-5-0";
+var trigger = "_1dd8zuz0-3-5-2";

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

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

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

@@ -21,4 +21,4 @@ __export(AppRoot_css_exports, {
 });
 module.exports = __toCommonJS(AppRoot_css_exports);
 var import_AppRoot_css_ts_vanilla = require("./AppRoot.css");
-var dtVisualRefreshEnabled = "_1jgl8s50-3-5-0";
+var dtVisualRefreshEnabled = "_1jgl8s50-3-5-2";

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

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

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

@@ -21,4 +21,4 @@ __export(VisuallyHidden_css_exports, {
 });
 module.exports = __toCommonJS(VisuallyHidden_css_exports);
 var import_VisuallyHidden_css_ts_vanilla = require("./VisuallyHidden.css");
-var visuallyHidden = "_1xz8nhz0-3-5-0";
+var visuallyHidden = "_1xz8nhz0-3-5-2";

package/core/hooks/useBehavioralTrackingProps.js

@@ -26,7 +26,7 @@ const useBehavioralTrackingProps = (props) => (0, import_react.useMemo)(() => {
   const behavioralTrackingProps = {};
   const restProps = { ...props };
   for (const [key, value] of Object.entries(props)) {
-    if (import_extract_behavior_tracking_props.behaviorTrackingPropKeys.includes(key) && typeof value === "string") {
+    if (import_extract_behavior_tracking_props.behaviorTrackingPropKeys.includes(key) && (typeof value === "string" || typeof value === "boolean")) {
       behavioralTrackingProps[key] = value;
       delete restProps[key];
     }

package/core/sdk/sdk-logger.js

@@ -40,7 +40,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.5.0"
+          version: "3.5.2"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -48,7 +48,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.5.0"
+          version: "3.5.2"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-5-0 {
+._1rtjj3o0-3-5-2 {
   line-height: normal;
   width: inherit;
 }

package/core/styles/defaultChartValues.sty.js

@@ -21,4 +21,4 @@ __export(defaultChartValues_css_exports, {
 });
 module.exports = __toCommonJS(defaultChartValues_css_exports);
 var import_defaultChartValues_css_ts_vanilla = require("./defaultChartValues.css");
-var defaultChartSize = "_1rtjj3o0-3-5-0";
+var defaultChartSize = "_1rtjj3o0-3-5-2";

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-3-5-0 {
+._z2r50s3-3-5-2 {
   outline: none;
 }
-._z2r50s3-3-5-0:focus-visible {
+._z2r50s3-3-5-2:focus-visible {
   outline: none;
 }
-._z2r50s4-3-5-0 {
+._z2r50s4-3-5-2 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-0);
-  background-color: var(--_z2r50s2-3-5-0);
-}
-._z2r50s5-3-5-0._z2r50s5-3-5-0 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-0);
-}
-._z2r50s6-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-3-5-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-2);
+  background-color: var(--_z2r50s2-3-5-2);
+}
+._z2r50s5-3-5-2._z2r50s5-3-5-2 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-2), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-2);
+}
+._z2r50s6-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-3-5-2:focus-within {
   outline: none;
 }
-._z2r50sc-3-5-0:focus-within {
+._z2r50sc-3-5-2:focus-within {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-0);
-  background-color: var(--_z2r50s2-3-5-0);
-}
-._z2r50sd-3-5-0:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-0);
-}
-._z2r50se-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-2);
+  background-color: var(--_z2r50s2-3-5-2);
+}
+._z2r50sd-3-5-2:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-2), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-2);
+}
+._z2r50se-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-3-5-2 {
+  --_z2r50s0-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/core/styles/focusRing.sty.js

@@ -23,5 +23,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRing = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-3-5-0", variantClassNames: { minimal: { true: "_z2r50s4-3-5-0", false: "_z2r50s5-3-5-0" }, color: { neutral: "_z2r50s6-3-5-0", primary: "_z2r50s7-3-5-0", success: "_z2r50s8-3-5-0", warning: "_z2r50s9-3-5-0", critical: "_z2r50sa-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithin = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-3-5-0", variantClassNames: { minimal: { true: "_z2r50sc-3-5-0", false: "_z2r50sd-3-5-0" }, color: { neutral: "_z2r50se-3-5-0", primary: "_z2r50sf-3-5-0", success: "_z2r50sg-3-5-0", warning: "_z2r50sh-3-5-0", critical: "_z2r50si-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRing = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-3-5-2", variantClassNames: { minimal: { true: "_z2r50s4-3-5-2", false: "_z2r50s5-3-5-2" }, color: { neutral: "_z2r50s6-3-5-2", primary: "_z2r50s7-3-5-2", success: "_z2r50s8-3-5-2", warning: "_z2r50s9-3-5-2", critical: "_z2r50sa-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithin = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-3-5-2", variantClassNames: { minimal: { true: "_z2r50sc-3-5-2", false: "_z2r50sd-3-5-2" }, color: { neutral: "_z2r50se-3-5-2", primary: "_z2r50sf-3-5-2", success: "_z2r50sg-3-5-2", warning: "_z2r50sh-3-5-2", critical: "_z2r50si-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/focusRingStatic.css

@@ -1,50 +1,49 @@
-._z0fq9b4-3-5-0 {
+._z0fq9b4-3-5-2 {
   outline: none;
-  box-shadow: none;
 }
-._z0fq9b5-3-5-0 {
-  --_z0fq9b3-3-5-0: var(--dt-borders-width-default, 1px);
-  --_z0fq9b2-3-5-0: 0 0 0 var(--_z0fq9b3-3-5-0) var(--_z0fq9b0-3-5-0) inset;
+._z0fq9b5-3-5-2 {
+  --_z0fq9b3-3-5-2: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-3-5-2: 0 0 0 var(--_z0fq9b3-3-5-2) var(--_z0fq9b0-3-5-2) inset;
 }
-._z0fq9b6-3-5-0 {
-  --_z0fq9b3-3-5-0: var(--dt-borders-width-emphasized, 2px);
-  --_z0fq9b2-3-5-0: 0 0 0 var(--_z0fq9b3-3-5-0) var(--_z0fq9b0-3-5-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-5-0) + 1px) var(--_z0fq9b1-3-5-0) inset;
+._z0fq9b6-3-5-2 {
+  --_z0fq9b3-3-5-2: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-3-5-2: 0 0 0 var(--_z0fq9b3-3-5-2) var(--_z0fq9b0-3-5-2) inset, 0 0 0 calc(var(--_z0fq9b3-3-5-2) + 1px) var(--_z0fq9b1-3-5-2) inset;
 }
-._z0fq9b7-3-5-0 {
-  --_z0fq9b2-3-5-0: none;
+._z0fq9b7-3-5-2 {
+  --_z0fq9b2-3-5-2: none;
 }
-._z0fq9b8-3-5-0._z0fq9b8-3-5-0 {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9b8-3-5-2._z0fq9b8-3-5-2 {
+  box-shadow: var(--_z0fq9b2-3-5-2);
 }
-._z0fq9b9-3-5-0:focus-visible {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9b9-3-5-2:focus-visible {
+  box-shadow: var(--_z0fq9b2-3-5-2);
 }
-._z0fq9ba-3-5-0:focus-within {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9ba-3-5-2:focus-within {
+  box-shadow: var(--_z0fq9b2-3-5-2);
 }
-._z0fq9bb-3-5-0:has(:focus-visible) {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9bb-3-5-2:has(:focus-visible) {
+  box-shadow: var(--_z0fq9b2-3-5-2);
 }
-._z0fq9bc-3-5-0:focus {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9bc-3-5-2:focus {
+  box-shadow: var(--_z0fq9b2-3-5-2);
 }
-._z0fq9bd-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
+._z0fq9bd-3-5-2 {
+  --_z0fq9b0-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._z0fq9be-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
+._z0fq9be-3-5-2 {
+  --_z0fq9b0-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-3-5-2: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._z0fq9bf-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
+._z0fq9bf-3-5-2 {
+  --_z0fq9b0-3-5-2: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-3-5-2: var(--dt-colors-border-success-default, #d3dedd);
 }
-._z0fq9bg-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
+._z0fq9bg-3-5-2 {
+  --_z0fq9b0-3-5-2: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-3-5-2: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._z0fq9bh-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
+._z0fq9bh-3-5-2 {
+  --_z0fq9b0-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
 }

package/core/styles/focusRingStatic.sty.js

@@ -22,4 +22,4 @@ __export(focusRingStatic_css_exports, {
 module.exports = __toCommonJS(focusRingStatic_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-5-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-5-0", false: "_z0fq9b6-3-5-0" }, disabled: { true: "_z0fq9b7-3-5-0" }, when: { always: "_z0fq9b8-3-5-0", "focus-visible": "_z0fq9b9-3-5-0", "focus-within": "_z0fq9ba-3-5-0", "focus-within-visible": "_z0fq9bb-3-5-0", focus: "_z0fq9bc-3-5-0" }, color: { neutral: "_z0fq9bd-3-5-0", primary: "_z0fq9be-3-5-0", success: "_z0fq9bf-3-5-0", warning: "_z0fq9bg-3-5-0", critical: "_z0fq9bh-3-5-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-5-2", variantClassNames: { minimal: { true: "_z0fq9b5-3-5-2", false: "_z0fq9b6-3-5-2" }, disabled: { true: "_z0fq9b7-3-5-2" }, when: { always: "_z0fq9b8-3-5-2", "focus-visible": "_z0fq9b9-3-5-2", "focus-within": "_z0fq9ba-3-5-2", "focus-within-visible": "_z0fq9bb-3-5-2", focus: "_z0fq9bc-3-5-2" }, color: { neutral: "_z0fq9bd-3-5-2", primary: "_z0fq9be-3-5-2", success: "_z0fq9bf-3-5-2", warning: "_z0fq9bg-3-5-2", critical: "_z0fq9bh-3-5-2" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/styles/virtualFocus.css

@@ -1,10 +1,10 @@
-._9mvxlq0-3-5-0 {
+._9mvxlq0-3-5-2 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._9mvxlq1-3-5-0 {
+._9mvxlq1-3-5-2 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-primary-accent, #464cce);

package/core/styles/virtualFocus.sty.js

@@ -21,4 +21,4 @@ __export(virtualFocus_css_exports, {
 });
 module.exports = __toCommonJS(virtualFocus_css_exports);
 var import_virtualFocus_css_ts_vanilla = require("./virtualFocus.css");
-var virtualFocus = { neutral: "_9mvxlq0-3-5-0", primary: "_9mvxlq1-3-5-0" };
+var virtualFocus = { neutral: "_9mvxlq0-3-5-2", primary: "_9mvxlq1-3-5-2" };

package/core/types/behavior-tracking-props.d.ts

@@ -24,8 +24,14 @@ export interface BehaviorTrackingProps {
      * Enables mouse hover tracking with a minimum duration threshold. Only captures hover events if the user stays over the element for the specified milliseconds.
      */
     'data-dt-mouse-over'?: string;
-    'data-dt-value-content'?: string;
-    'data-dt-children-value-content'?: string;
+    /**
+     * Marks the element's value content for masking or exposure in RUM session recordings.
+     */
+    'data-dt-value-content'?: boolean;
+    /**
+     * Marks descendant value content elements for masking or exposure in RUM session recordings.
+     */
+    'data-dt-children-value-content'?: boolean;
     /**
      * Overrides the DOM parent relationship with a logical parent for attribute inheritance.
      */

package/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-3-5-0: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-3-5-2: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-3-5-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-3-5-2: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-3-5-0: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-3-5-2: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-3-5-2: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-3-5-0: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-3-5-2: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-3-5-2: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-3-5-0: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-3-5-2: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-3-5-2: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-3-5-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-3-5-2: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-3-5-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-3-5-2: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-3-5-2: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-3-5-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-3-5-0: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-3-5-2: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-3-5-2: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-3-5-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-3-5-2: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-3-5-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-3-5-2: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-3-5-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-3-5-0: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-3-5-2: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-3-5-2: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-3-5-0: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-3-5-0: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-3-5-2: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-3-5-2: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-3-5-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-3-5-0: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-3-5-2: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-3-5-2: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-3-5-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-3-5-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-3-5-2: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-3-5-2: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-3-5-0 {
-  --_k096v40-3-5-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-3-5-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-3-5-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-3-5-2 {
+  --_k096v40-3-5-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-3-5-2: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-3-5-2: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/core/utils/colorUtils.sty.js

@@ -23,5 +23,5 @@ __export(colorUtils_css_exports, {
 module.exports = __toCommonJS(colorUtils_css_exports);
 var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-5-0", variantClassNames: { color: { critical: "_k096v44-3-5-0", neutral: "_k096v45-3-5-0", primary: "_k096v46-3-5-0", success: "_k096v47-3-5-0", warning: "_k096v48-3-5-0" }, variant: { "default": "_k096v49-3-5-0", accent: "_k096v4a-3-5-0" }, disabled: { true: "_k096v4b-3-5-0", false: "_k096v4c-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-5-0"], [{ color: "success", variant: "accent" }, "_k096v4e-3-5-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-5-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-5-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-5-0"], [{ color: "primary", disabled: true }, "_k096v4i-3-5-0"], [{ color: "success", disabled: true }, "_k096v4j-3-5-0"], [{ color: "warning", disabled: true }, "_k096v4k-3-5-0"], [{ color: "critical", disabled: true }, "_k096v4l-3-5-0"], [{ color: "neutral", disabled: true }, "_k096v4m-3-5-0"]] });
-var colorUtilsVars = { text: "var(--_k096v40-3-5-0)", icon: "var(--_k096v41-3-5-0)", borderColor: "var(--_k096v42-3-5-0)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-5-2", variantClassNames: { color: { critical: "_k096v44-3-5-2", neutral: "_k096v45-3-5-2", primary: "_k096v46-3-5-2", success: "_k096v47-3-5-2", warning: "_k096v48-3-5-2" }, variant: { "default": "_k096v49-3-5-2", accent: "_k096v4a-3-5-2" }, disabled: { true: "_k096v4b-3-5-2", false: "_k096v4c-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-5-2"], [{ color: "success", variant: "accent" }, "_k096v4e-3-5-2"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-5-2"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-5-2"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-5-2"], [{ color: "primary", disabled: true }, "_k096v4i-3-5-2"], [{ color: "success", disabled: true }, "_k096v4j-3-5-2"], [{ color: "warning", disabled: true }, "_k096v4k-3-5-2"], [{ color: "critical", disabled: true }, "_k096v4l-3-5-2"], [{ color: "neutral", disabled: true }, "_k096v4m-3-5-2"]] });
+var colorUtilsVars = { text: "var(--_k096v40-3-5-2)", icon: "var(--_k096v41-3-5-2)", borderColor: "var(--_k096v42-3-5-2)" };

package/core/utils/extract-behavior-tracking-props.js

@@ -37,7 +37,7 @@ function extractBehaviorTrackingProps(props) {
   const record = props;
   for (const key of behaviorTrackingPropKeys) {
     const value = record[key];
-    if (typeof value === "string") {
+    if (typeof value === "string" || typeof value === "boolean") {
       result[key] = value;
     }
   }