@dynatrace/strato-components 1.15.0 → 1.16.1

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-1-15-0";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-15-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-15-0", false: "_kvldjh8-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-15-0", variantClassNames: { size: { small: "_kvldjhb-1-15-0", large: "_kvldjhc-1-15-0" }, color: { critical: "_kvldjhd-1-15-0", neutral: "_kvldjhe-1-15-0", primary: "_kvldjhf-1-15-0", success: "_kvldjhg-1-15-0", warning: "_kvldjhh-1-15-0" }, variant: { "default": "_kvldjhi-1-15-0", accent: "_kvldjhj-1-15-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-15-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-15-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-15-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-15-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-15-0"]] });
-var progressCircleRootCSS = "_kvldjh4-1-15-0";
-var progressCircleSvgCss = "_kvldjh5-1-15-0";
+var progressCircleBackgroundCSS = "_kvldjh9-1-16-1";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-16-1", variantClassNames: { indeterminate: { true: "_kvldjh7-1-16-1", false: "_kvldjh8-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-16-1", variantClassNames: { size: { small: "_kvldjhb-1-16-1", large: "_kvldjhc-1-16-1" }, color: { critical: "_kvldjhd-1-16-1", neutral: "_kvldjhe-1-16-1", primary: "_kvldjhf-1-16-1", success: "_kvldjhg-1-16-1", warning: "_kvldjhh-1-16-1" }, variant: { "default": "_kvldjhi-1-16-1", accent: "_kvldjhj-1-16-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-16-1"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-16-1"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-16-1"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-16-1"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-16-1"]] });
+var progressCircleRootCSS = "_kvldjh4-1-16-1";
+var progressCircleSvgCss = "_kvldjh5-1-16-1";

package/content/skeleton/Skeleton.css

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

package/content/skeleton/Skeleton.js

@@ -36,7 +36,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
-var import_core = require("../../core/index.js");
+var import_useId = require("../../core/hooks/useId.js");
 const Skeleton = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
@@ -49,7 +49,7 @@ const Skeleton = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
-    const gradientId = (0, import_core.useId)();
+    const gradientId = (0, import_useId.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {

package/content/skeleton/Skeleton.sty.js

@@ -27,8 +27,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-1-15-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-15-0", rounded: "_1a1ozfd2-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-15-0";
-var skeletonSvgCSS = "_1a1ozfd3-1-15-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-1-15-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-15-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-16-1", variantClassNames: { variant: { "default": "_1a1ozfd1-1-16-1", rounded: "_1a1ozfd2-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-16-1";
+var skeletonSvgCSS = "_1a1ozfd3-1-16-1";
+var skeletonSvgGradientCSS = "_1a1ozfd4-1-16-1";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-16-1";

package/content/skeleton/SkeletonText.js

@@ -25,7 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
-var import_core = require("../../core/index.js");
+var import_useId = require("../../core/hooks/useId.js");
 const lineHeight = 12;
 const linePadding = 8;
 const baseYOffset = linePadding * 0.5;
@@ -47,8 +47,8 @@ const SkeletonText = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
-    const maskId = (0, import_core.useId)();
-    const gradientId = (0, import_core.useId)();
+    const maskId = (0, import_useId.useId)();
+    const gradientId = (0, import_useId.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

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

@@ -30,6 +30,7 @@ var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_AppRoot_css = require("./AppRoot.sty.js");
 var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
 var import_FocusProvider = require("../../providers/FocusProvider.js");
+const COMPONENT_NAME = "AppRoot";
 function getBaseHref() {
   const baseElement = document.querySelector("base");
   const href = baseElement?.href ?? "/";
@@ -83,6 +84,7 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-theme": theme,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_intl.IntlProvider,
           {
@@ -97,4 +99,4 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
     );
   }
 );
-AppRoot.displayName = "AppRoot";
+AppRoot.displayName = COMPONENT_NAME;

package/core/hooks/useBehavioralTrackingProps.d.ts

@@ -0,0 +1,2 @@
+import type { BehaviorTrackingProps } from '../types/behavior-tracking-props.js';
+export declare const useBehavioralTrackingProps: <TProps extends object>(props: TProps) => [BehaviorTrackingProps, Omit<TProps, keyof BehaviorTrackingProps>];

package/core/hooks/useBehavioralTrackingProps.js

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBehavioralTrackingProps_exports = {};
+__export(useBehavioralTrackingProps_exports, {
+  useBehavioralTrackingProps: () => useBehavioralTrackingProps
+});
+module.exports = __toCommonJS(useBehavioralTrackingProps_exports);
+var import_react = require("react");
+const behaviorTrackingPropKeys = [
+  "data-dt-content",
+  "data-dt-name",
+  "data-dt-children-name",
+  "data-dt-features",
+  "data-dt-properties",
+  "data-dt-mouse-over",
+  "data-dt-value-content",
+  "data-dt-children-value-content",
+  "data-dt-ancestor"
+];
+const useBehavioralTrackingProps = (props) => (0, import_react.useMemo)(() => {
+  const behavioralTrackingProps = {};
+  const restProps = { ...props };
+  for (const [key, value] of Object.entries(props)) {
+    if (behaviorTrackingPropKeys.includes(key) && typeof value === "string") {
+      behavioralTrackingProps[key] = value;
+      delete restProps[key];
+    }
+  }
+  return [behavioralTrackingProps, restProps];
+}, [props]);

package/core/index.d.ts

@@ -25,3 +25,4 @@ export type { AriaDisabledProps, AriaLabelingProps, } from './types/a11y-props.j
 export type { DOMProps } from './types/dom.js';
 export { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';
 export { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';
+export type { BehaviorTrackingProps } from './types/behavior-tracking-props.js';

package/core/styles/focusRing.css

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

package/core/styles/focusRing.sty.d.ts

@@ -1,3 +1,6 @@
+declare const outerShadow: `var(--${string})`;
+declare const innerShadow: `var(--${string})`;
+declare const backgroundColor: `var(--${string})`;
 export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     minimal: {
         true: {
@@ -16,27 +19,37 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
     variant: {
         neutral: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         primary: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         success: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         warning: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         critical: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
     };
@@ -59,28 +72,39 @@ export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes")
     variant: {
         neutral: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         primary: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         success: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         warning: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
         critical: {
             vars: {
-                [x: string]: string;
+                [outerShadow]: string;
+                [innerShadow]: string;
+                [backgroundColor]: string;
             };
         };
     };
 }>;
+export {};

package/core/styles/focusRing.sty.js

@@ -24,5 +24,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 focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-15-0", variantClassNames: { minimal: { true: "_z2r50s4-1-15-0", false: "_z2r50s5-1-15-0" }, variant: { neutral: "_z2r50s6-1-15-0", primary: "_z2r50s7-1-15-0", success: "_z2r50s8-1-15-0", warning: "_z2r50s9-1-15-0", critical: "_z2r50sa-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-15-0", variantClassNames: { minimal: { true: "_z2r50sc-1-15-0", false: "_z2r50sd-1-15-0" }, variant: { neutral: "_z2r50se-1-15-0", primary: "_z2r50sf-1-15-0", success: "_z2r50sg-1-15-0", warning: "_z2r50sh-1-15-0", critical: "_z2r50si-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-16-1", variantClassNames: { minimal: { true: "_z2r50s4-1-16-1", false: "_z2r50s5-1-16-1" }, variant: { neutral: "_z2r50s6-1-16-1", primary: "_z2r50s7-1-16-1", success: "_z2r50s8-1-16-1", warning: "_z2r50s9-1-16-1", critical: "_z2r50sa-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-16-1", variantClassNames: { minimal: { true: "_z2r50sc-1-16-1", false: "_z2r50sd-1-16-1" }, variant: { neutral: "_z2r50se-1-16-1", primary: "_z2r50sf-1-16-1", success: "_z2r50sg-1-16-1", warning: "_z2r50sh-1-16-1", critical: "_z2r50si-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -0,0 +1,33 @@
+/**
+ * The data tracking attributes required for components and their children.
+ * @public
+ */
+export interface BehaviorTrackingProps {
+    'data-dt-content'?: string;
+    /**
+     * Sets a custom name for a specific element.
+     */
+    'data-dt-name'?: string;
+    /**
+     * Sets a custom name for the element itself and all descendant elements that don't have their own naming attributes.
+     */
+    'data-dt-children-name'?: string;
+    /**
+     * Groups elements into logical features for tracking and analysis. Features are inherited from all ancestors and concatenated together.
+     */
+    'data-dt-features'?: string;
+    /**
+     * Attaches key-value properties to a specific element for additional context and metadata.
+     */
+    'data-dt-properties'?: string;
+    /**
+     * 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;
+    /**
+     * Overrides the DOM parent relationship with a logical parent for attribute inheritance.
+     */
+    'data-dt-ancestor'?: string;
+}

package/core/types/behavior-tracking-props.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var behavior_tracking_props_exports = {};
+module.exports = __toCommonJS(behavior_tracking_props_exports);

package/core/utils/colorUtils.css

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