@dynatrace/strato-components 3.3.3 → 3.4.1

package/forms/spin-buttons/number-spin-button/hooks/useValueNavigation.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -85,6 +84,7 @@ const useValueNavigation = (ref, props, applyText) => {
       if (e.shiftKey || e.key === "Shift") {
         return;
       }
+      const safeValue = value !== null && value !== void 0 && !Number.isNaN(value) ? value : null;
       const updateValue = (newValue) => {
         const sanitizedValue = (0, import_helper.constrainValue)(
           newValue,
@@ -92,7 +92,7 @@ const useValueNavigation = (ref, props, applyText) => {
           maxValue,
           isCyclic
         );
-        if (value === sanitizedValue) {
+        if (safeValue === sanitizedValue) {
           return;
         }
         const newText = format(sanitizedValue);
@@ -102,22 +102,22 @@ const useValueNavigation = (ref, props, applyText) => {
       };
       switch (e.key) {
         case "ArrowUp":
-          updateValue(onArrowUp(value ?? 0, e));
+          updateValue(onArrowUp(safeValue ?? 0, e));
           break;
         case "ArrowDown":
-          updateValue(onArrowDown(value ?? 0, e));
+          updateValue(onArrowDown(safeValue ?? 0, e));
           break;
         case "PageUp":
-          updateValue(onPageUp(value ?? 0, e));
+          updateValue(onPageUp(safeValue ?? 0, e));
           break;
         case "PageDown":
-          updateValue(onPageDown(value ?? 0, e));
+          updateValue(onPageDown(safeValue ?? 0, e));
           break;
         case "Home":
-          updateValue(onHome(value ?? 0, e));
+          updateValue(onHome(safeValue ?? 0, e));
           break;
         case "End":
-          updateValue(onEnd(value ?? 0, e));
+          updateValue(onEnd(safeValue ?? 0, e));
           break;
       }
     },

package/forms/spin-buttons/number-spin-button/types.d.ts

@@ -1,5 +1,6 @@
 import { type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
 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 { FormControlProps } from '../../../core/types/form-control-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -132,7 +133,7 @@ export type NumberSpinButtonProps = FormControlProps<number | null, (value: numb
      * A pattern relevant for the input value in order to apply specific parsing.
      */
     'data-pattern'?: string;
-};
+} & BehaviorTrackingProps;
 /**
  * Imperative handler to give access to the root span element of the spinbutton.
  * It provides additional methods to interact with the spinbutton.

package/forms/spin-buttons/number-spin-button/types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/spin-button-group/SpinButtonGroup.d.ts

@@ -4,8 +4,8 @@ import type { SpinButtonGroupProps } from './types.js';
  * Use the _SpinButtonGroup to combine text and number spinbuttons and provide ootb navigation between them.
  * @internal
  */
-export declare const SpinButtonGroup: (({ children, valueOverflow, onLeadingEdge, onTrailingEdge, onTrailingOverflow, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, "data-dtrum-mask": dataDtrumMask, "data-dtrum-allow": dataDtrumAllow, }: PropsWithChildren<SpinButtonGroupProps>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const SpinButtonGroup: (({ children, valueOverflow, onLeadingEdge, onTrailingEdge, onTrailingOverflow, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, "data-dtrum-mask": dataDtrumMask, "data-dtrum-allow": dataDtrumAllow, ...remainingProps }: PropsWithChildren<SpinButtonGroupProps>) => import("react/jsx-runtime").JSX.Element) & {
     Number: (props: import("../number-spin-button/types.js").NumberSpinButtonProps & import("react").RefAttributes<import("../number-spin-button/types.js").NumberSpinButtonRef>) => import("react").ReactElement | null;
     Text: (props: import("../text-spin-button/types.js").TextSpinButtonProps & import("react").RefAttributes<import("../text-spin-button/types.js").TextSpinButtonRef>) => import("react").ReactElement | null;
-    Separator: ({ children, trigger, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, }: PropsWithChildren<import("./types.js").SpinButtonGroupSeparatorProps>) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ children, trigger, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, ...remainingProps }: PropsWithChildren<import("./types.js").SpinButtonGroupSeparatorProps>) => import("react/jsx-runtime").JSX.Element;
 };

package/forms/spin-buttons/spin-button-group/SpinButtonGroup.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,6 +35,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_useNavigateSpinButton = require("./hooks/useNavigateSpinButton.js");
 var import_useValueOverflow = require("./hooks/useValueOverflow.js");
 var import_SpinButtonGroupSeparator = require("./SpinButtonGroupSeparator.js");
+var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_NumberSpinButton = require("../number-spin-button/NumberSpinButton.js");
 var import_SpinButton_css = require("../SpinButton.sty.js");
 var import_TextSpinButton = require("../text-spin-button/TextSpinButton.js");
@@ -49,8 +49,10 @@ const InternalSpinButtonGroup = ({
   style: consumerStyle,
   "data-testid": dataTestId,
   "data-dtrum-mask": dataDtrumMask,
-  "data-dtrum-allow": dataDtrumAllow
+  "data-dtrum-allow": dataDtrumAllow,
+  ...remainingProps
 }) => {
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const { clonedChildren, spinButtonRefs, triggerRefs } = (0, import_useValueOverflow.useValueOverflow)(
     children,
     valueOverflow,
@@ -61,8 +63,7 @@ const InternalSpinButtonGroup = ({
     spinButtonRefs,
     triggerRefs,
     onLeadingEdge,
-    onTrailingEdge,
-    onTrailingOverflow
+    onTrailingEdge
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
@@ -73,6 +74,7 @@ const InternalSpinButtonGroup = ({
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      ...behavioralTrackingProps,
       onKeyDown: onKeyDownHandler,
       children: clonedChildren
     }

package/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.d.ts

@@ -8,4 +8,4 @@ export declare function isSpinButtonGroupSeparator(node: ReactNode): node is Rea
 /**
  * Used to define a trigger between spinbuttons. e.g. the colon within a time value 12:34.
  */
-export declare const SpinButtonGroupSeparator: ({ children, trigger, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, }: PropsWithChildren<SpinButtonGroupSeparatorProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SpinButtonGroupSeparator: ({ children, trigger, className: consumerClassName, style: consumerStyle, "data-testid": dataTestId, ...remainingProps }: PropsWithChildren<SpinButtonGroupSeparatorProps>) => import("react/jsx-runtime").JSX.Element;

package/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -24,6 +23,7 @@ __export(SpinButtonGroupSeparator_exports, {
 module.exports = __toCommonJS(SpinButtonGroupSeparator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_is = require("react-is");
+var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 function isSpinButtonGroupSeparator(node) {
   return node !== void 0 && node !== null && (0, import_react_is.isElement)(node) && node.type === SpinButtonGroupSeparator;
 }
@@ -32,14 +32,17 @@ const SpinButtonGroupSeparator = ({
   trigger,
   className: consumerClassName,
   style: consumerStyle,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  ...remainingProps
 }) => {
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       className: consumerClassName,
       style: consumerStyle,
       "data-testid": dataTestId,
+      ...behavioralTrackingProps,
       children: children ?? trigger
     }
   );

package/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.d.ts

@@ -6,8 +6,7 @@ import type { SpinButtonHandler } from '../types.js';
  * @param triggerRefs - A sparse array of trigger keys
  * @param onLeadingEdge - Optional callback fired when the user navigates backwards past the first spin button
  * @param onTrailingEdge - Optional callback fired when the user navigates forward past the last spin button
- * @param onTrailingOverflow - Optional callback fired with the overflow character when a TextSpinButton at the trailing position receives a digit key it cannot consume
  */
-export declare const useNavigateSpinButton: (spinButtonRefs: MutableRefObject<SpinButtonHandler[]>, triggerRefs: MutableRefObject<string[]>, onLeadingEdge?: () => void, onTrailingEdge?: () => void, onTrailingOverflow?: (overflowChar: string) => void) => {
+export declare const useNavigateSpinButton: (spinButtonRefs: MutableRefObject<SpinButtonHandler[]>, triggerRefs: MutableRefObject<string[]>, onLeadingEdge?: () => void, onTrailingEdge?: () => void) => {
     onKeyDownHandler: (e: ReactKeyboardEvent) => void;
 };

package/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,7 +21,65 @@ __export(useNavigateSpinButton_exports, {
 });
 module.exports = __toCommonJS(useNavigateSpinButton_exports);
 var import_react = require("react");
-const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge, onTrailingOverflow) => {
+function handleArrowLeft(event, prevSpinButton, currentSpinButton, selection, onLeadingEdge) {
+  if (prevSpinButton && selection?.start === 0) {
+    prevSpinButton.element.current?.focus();
+    event.preventDefault();
+  } else if (!prevSpinButton && onLeadingEdge && selection?.start === 0) {
+    onLeadingEdge();
+    event.preventDefault();
+  } else if (currentSpinButton && selection === void 0) {
+    currentSpinButton.selectAll();
+    event.preventDefault();
+  }
+}
+function handleArrowRight(event, currentSpinButton, nextSpinButton, selection, length, onTrailingEdge) {
+  if (nextSpinButton && selection && selection.end === length) {
+    nextSpinButton.element.current?.focus();
+    event.preventDefault();
+  } else if (!nextSpinButton && onTrailingEdge && selection && selection.end === length) {
+    onTrailingEdge();
+    event.preventDefault();
+  } else if (currentSpinButton && selection === void 0) {
+    currentSpinButton.selectAll();
+    event.preventDefault();
+  }
+}
+function handleDeletion(event, nextSpinButton, selection, length, onEdgeHandler) {
+  if (!length && selection?.start === 0 && selection?.end === 0) {
+    if (nextSpinButton) {
+      nextSpinButton.element.current?.focus();
+      event.preventDefault();
+    } else if (onEdgeHandler) {
+      onEdgeHandler();
+      event.preventDefault();
+    }
+  }
+}
+function handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target) {
+  const lookupIndex = spinButtonRefs.current?.findIndex((h) => h === target);
+  const nextTriggerIndex = triggerRefs.current.findIndex(
+    (trigger2, index) => trigger2 !== void 0 && index > lookupIndex
+  );
+  const afterTriggerSpinButton = spinButtonRefs.current?.find(
+    (spinbutton, index) => spinbutton && index > nextTriggerIndex
+  );
+  const trigger = triggerRefs.current[nextTriggerIndex];
+  if (trigger !== void 0 && afterTriggerSpinButton && e.key === trigger) {
+    afterTriggerSpinButton.element.current?.focus();
+    e.preventDefault();
+  }
+}
+function handleTrailingTextAdvance(e, target, next, onTrailingEdge) {
+  if (target.type !== "text" || next || !/^[a-zA-Z]$/.test(e.key) || e.metaKey || e.ctrlKey) {
+    return;
+  }
+  const match = target.searchValue(e.key);
+  if (match !== void 0) {
+    onTrailingEdge?.();
+  }
+}
+const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge) => {
   const onKeyDownHandler = (0, import_react.useCallback)(
     (e) => {
       if (e.shiftKey === true || e.key === "Shift") {
@@ -44,71 +101,22 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTra
       const selection = target?.getSelection();
       switch (e.key) {
         case "ArrowLeft":
-          if (prev && selection && selection.start === 0) {
-            prev.element.current?.focus();
-            e.preventDefault();
-          } else if (!prev && onLeadingEdge && selection && selection.start === 0) {
-            onLeadingEdge();
-            e.preventDefault();
-          } else if (target && selection === void 0) {
-            target.selectAll();
-            e.preventDefault();
-          }
+          handleArrowLeft(e, prev, target, selection, onLeadingEdge);
           return;
         case "ArrowRight":
-          if (next && selection && selection.end === length) {
-            next.element.current?.focus();
-            e.preventDefault();
-          } else if (!next && onTrailingEdge && selection && selection.end === length) {
-            onTrailingEdge();
-            e.preventDefault();
-          } else if (target && selection === void 0) {
-            next.selectAll();
-            e.preventDefault();
-          }
+          handleArrowRight(e, target, next, selection, length, onTrailingEdge);
           return;
         case "Backspace":
-          if (prev && selection && selection.start === 0 && selection.end === 0) {
-            prev.element.current?.focus();
-            prev.setSelection({ start: 0, end: 0, rtl: true });
-            e.preventDefault();
-          } else if (!prev && onLeadingEdge && selection && selection.start === 0 && selection.end === 0) {
-            onLeadingEdge();
-            e.preventDefault();
-          }
+          handleDeletion(e, prev, selection, length, onLeadingEdge);
+          return;
+        case "Delete":
+          handleDeletion(e, next, selection, length, onTrailingEdge);
           return;
       }
-      const lookupIndex = spinButtonRefs.current?.findIndex(
-        (h) => h === target
-      );
-      const nextTriggerIndex = triggerRefs.current.findIndex(
-        (trigger2, index2) => trigger2 !== void 0 && index2 > lookupIndex
-      );
-      const afterTriggerSpinButton = spinButtonRefs.current?.find(
-        (spinbutton, index2) => spinbutton && index2 > nextTriggerIndex
-      );
-      const trigger = triggerRefs.current[nextTriggerIndex];
-      if (trigger !== void 0 && afterTriggerSpinButton && e.key === trigger) {
-        afterTriggerSpinButton.element.current?.focus();
-        e.preventDefault();
-      }
-      if (target.type === "text" && /^\d$/.test(e.key) && !e.metaKey && !e.ctrlKey) {
-        if (next?.type === "number") {
-          next.applyText(e.key, true);
-          next.element.current?.focus();
-          next.setSelection({ start: 0, end: 0, rtl: true });
-        } else if (!next && onTrailingOverflow) {
-          onTrailingOverflow(e.key);
-        }
-      }
+      handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);
+      handleTrailingTextAdvance(e, target, next, onTrailingEdge);
     },
-    [
-      spinButtonRefs,
-      triggerRefs,
-      onLeadingEdge,
-      onTrailingEdge,
-      onTrailingOverflow
-    ]
+    [spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge]
   );
   return { onKeyDownHandler };
 };

package/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/spin-button-group/types.d.ts

@@ -1,4 +1,5 @@
 import type { MutableRefObject, ReactNode, RefCallback } from 'react';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -27,7 +28,7 @@ export type SpinButtonGroupProps = {
      * prevented before this callback fires.
      */
     onTrailingOverflow?: (overflowChar: string) => void;
-} & StylingProps & DataTestId & MaskingProps;
+} & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps;
 /**
  * Props for the SpinButtonGroupSeparator component.
  * @internal
@@ -38,7 +39,7 @@ export type SpinButtonGroupSeparatorProps = {
      * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) for possible values
      */
     trigger: string;
-} & StylingProps & DataTestId;
+} & StylingProps & DataTestId & BehaviorTrackingProps;
 /** Typed access to a potential existing child ref object. */
 export type ChildWithRef<T> = ReactNode & {
     ref: RefCallback<T> | MutableRefObject<T> | undefined;

package/forms/spin-buttons/spin-button-group/types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/text-spin-button/TextSpinButton.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -38,6 +37,7 @@ var import_react = require("react");
 var import_react_is = require("react-is");
 var import_useValueNavigation = require("./hooks/useValueNavigation.js");
 var import_useAriaLabelingProps = require("../../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_useSelection = require("../hooks/useSelection.js");
 var import_useSpinButtonInteraction = require("../hooks/useSpinButtonInteraction.js");
 var import_SpinButton_css = require("../SpinButton.sty.js");
@@ -57,8 +57,10 @@ const TextSpinButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     onKeyDownHandler: propOnKeyDownHandler,
     "data-testid": dataTestId,
     onChange,
-    "data-pattern": dataPattern
+    "data-pattern": dataPattern,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const ariaProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(props);
   const rootRef = (0, import_react.useRef)(null);
   const { getSelection, setSelection, selectAll, deselectAll } = (0, import_useSelection.useSelection)(rootRef);
@@ -140,7 +142,8 @@ const TextSpinButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       onPaste: (e) => e.preventDefault(),
       onDrop: (e) => e.preventDefault(),
       onCut: (e) => e.preventDefault(),
-      "data-pattern": dataPattern
+      "data-pattern": dataPattern,
+      ...behavioralTrackingProps
     }
   );
 });

package/forms/spin-buttons/text-spin-button/constants.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/text-spin-button/hooks/useValueNavigation.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/text-spin-button/types.d.ts

@@ -1,5 +1,6 @@
 import { type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
 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 { FormControlProps } from '../../../core/types/form-control-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -94,7 +95,7 @@ export type TextSpinButtonProps = FormControlProps<string | null, (value: string
      * A pattern relevant for the input value in order to apply specific parsing.
      */
     'data-pattern'?: string;
-};
+} & BehaviorTrackingProps;
 /**
  * Imperative handler to give access to the root span element of the spinbutton.
  * It provides additional methods to interact with the spinbutton.
@@ -113,8 +114,8 @@ export interface TextSpinButtonRef {
     selectAll: () => void;
     /** Deselect any text selecton. */
     deselectAll: () => void;
-    /** Case insensitive value lookup. First value starting with `firstChar` is selected. Ignored if no value can be found.*/
-    searchValue: (firstChar: string, fireOnChange?: boolean) => void;
+    /** Case insensitive value lookup. First value starting with `firstChar` is selected. Ignored if no value can be found. Returns the matched value or `undefined`. */
+    searchValue: (firstChar: string, fireOnChange?: boolean) => string | undefined;
     /** Clear the text content of the spinbutton. */
     clearValue: (fireOnChange?: boolean) => void;
     /** Calls the onChange. */

package/forms/spin-buttons/text-spin-button/types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/spin-buttons/types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/forms/switch/Switch.css

@@ -1,61 +1,70 @@
-._1tkc5xf0-3-3-3 {
+._1tkc5xf0-3-4-1 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-3-3 {
+._1tkc5xf1-3-4-1 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-3-3 {
-  cursor: not-allowed;
+._1tkc5xf2-3-4-1 {
+  cursor: default;
 }
-._1tkc5xf3-3-3-3 {
+._1tkc5xf3-3-4-1 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-3-3 {
+._1tkc5xf4-3-4-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-3-3 {
+._1tkc5xf5-3-4-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-3-3:after {
+._1tkc5xf6-3-4-1:after {
   content: "*";
 }
-._1tkc5xfa-3-3-3 {
-  --_1tkc5xf9-3-3-3: var(--_bx32h1-3-3-3);
+._1tkc5xf7-3-4-1 {
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+}
+._1tkc5xfb-3-4-1 {
+  --_1tkc5xfa-3-4-1: var(--_bx32h1-3-4-1);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfb-3-3-3 {
-  --_1tkc5xf7-3-3-3: 1;
-  --_1tkc5xf8-3-3-3: 0;
+._1tkc5xfc-3-4-1 {
+  --_1tkc5xf8-3-4-1: 1;
+  --_1tkc5xf9-3-4-1: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfc-3-3-3 {
-  --_1tkc5xf7-3-3-3: 0;
-  --_1tkc5xf8-3-3-3: 1;
+._1tkc5xfd-3-4-1 {
+  --_1tkc5xf8-3-4-1: 0;
+  --_1tkc5xf9-3-4-1: 1;
   transform: unset;
 }
-._1tkc5xfa-3-3-3 > svg {
+._1tkc5xfe-3-4-1 {
+  --_1tkc5xfa-3-4-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
+}
+._1tkc5xfg-3-4-1 {
+  --_1tkc5xfa-3-4-1: var(--dt-colors-icon-critical-default, #bb0731);
+}
+._1tkc5xfb-3-4-1 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfa-3-3-3 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf7-3-3-3);
-  color: var(--_1tkc5xf9-3-3-3);
+._1tkc5xfb-3-4-1 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-4-1);
+  color: var(--_1tkc5xfa-3-4-1);
 }
-._1tkc5xfa-3-3-3 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf8-3-3-3);
-  color: var(--_1tkc5xf9-3-3-3);
+._1tkc5xfb-3-4-1 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-4-1);
+  color: var(--_1tkc5xfa-3-4-1);
 }
-._1tkc5xfd-3-3-3 {
+._1tkc5xfh-3-4-1 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -70,22 +79,27 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-3-3);
+  background-color: var(--_bx32h3-3-4-1);
 }
-._1tkc5xfm-3-3-3 {
-  background-color: var(--_bx32h2-3-3-3);
-}
-._1tkc5xfn-3-3-3 {
+._1tkc5xfr-3-4-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfo-3-3-3 {
+._1tkc5xfs-3-4-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xfp-3-3-3 {
+._1tkc5xft-3-4-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1tkc5xfq-3-3-3 {
+._1tkc5xfu-3-4-1 {
+  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._1tkc5xfv-3-4-1 {
+  background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
+}
+._1tkc5xfw-3-4-1 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -96,5 +110,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_bx32h1-3-3-3);
+  background-color: var(--_1tkc5xfa-3-4-1);
 }

package/forms/switch/Switch.d.ts

@@ -1,4 +1,5 @@
 import { type ChangeEvent } from 'react';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
 import { DataTestId } from '../../core/types/data-props.js';
 import type { FormControlProps } from '../../core/types/form-control-props.js';
 import { MaskingProps } from '../../core/types/masking-props.js';
@@ -8,7 +9,7 @@ import type { FormControlRef } from '../shared-types.js';
 /**
  * @public
  */
-export type SwitchProps = FormControlProps<boolean, (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never> & StylingProps & DataTestId & MaskingProps & WithChildren & {
+export type SwitchProps = FormControlProps<boolean, (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never> & StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & WithChildren & {
     /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */
     formValue?: string;
 };