@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -4,6 +4,9 @@ import {
 const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
   const onKeyDownHandler = useCallback(
     (e) => {
+      if (e.shiftKey === true || e.key === "Shift") {
+        return;
+      }
       const handlers = spinButtonRefs.current.filter(Boolean);
       const index = handlers?.findIndex(
         ({ element }) => element?.current === e?.target
@@ -23,12 +26,18 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
           if (prev && selection && selection.start === 0) {
             prev.element.current?.focus();
             e.preventDefault();
+          } else if (target && selection === void 0) {
+            target.selectAll();
+            e.preventDefault();
           }
           return;
         case "ArrowRight":
           if (next && selection && selection.end === length) {
             next.element.current?.focus();
             e.preventDefault();
+          } else if (target && selection === void 0) {
+            next.selectAll();
+            e.preventDefault();
           }
           return;
         case "Backspace":

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonHandler } from '../types.js';\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRef - A sparse array of trigger keys\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n) => {\n  // the keydown handler to attach to the spinbutton\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Condensed version of the handlers for simpler usage\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      // Don't do anything, if the event target is not in our spin button array\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n      switch (e.key) {\n        case 'ArrowLeft':\n          // If a prev. spinbutton is available and the cursor is at the first position\n          if (prev && selection && selection.start === 0) {\n            prev.element.current?.focus();\n            e.preventDefault();\n          }\n          return;\n        case 'ArrowRight':\n          // If a next spinbutton is available and the cursor is at the last position\n          if (next && selection && selection.end === length) {\n            next.element.current?.focus();\n            e.preventDefault();\n          }\n          return;\n        case 'Backspace':\n          // If a prev. spinbutton is available and the cursor is collapsed at the first position\n          if (\n            prev &&\n            selection &&\n            selection.start === 0 &&\n            selection.end === 0\n          ) {\n            prev.element.current?.focus();\n            // Set the cursor to the last position of the prev. spinbutton\n            prev.setSelection({ start: 0, end: 0, rtl: true });\n            e.preventDefault();\n          }\n          return;\n      }\n\n      // Search for a defined trigger after the current target index\n      const lookupIndex = spinButtonRefs.current?.findIndex(\n        (h) => h === target,\n      );\n      const nextTriggerIndex = triggerRefs.current.findIndex(\n        (trigger, index) => trigger !== undefined && index > lookupIndex,\n      );\n\n      // Find the first spinbutton after the trigger index\n      const afterTriggerSpinButton = spinButtonRefs.current?.find(\n        (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n      );\n      const trigger = triggerRefs.current[nextTriggerIndex];\n\n      // If a trigger and a after trigger spinbutton was found, focus the spinbutton if the event key matches the trigger key.\n      if (\n        trigger !== undefined &&\n        afterTriggerSpinButton &&\n        e.key === trigger\n      ) {\n        afterTriggerSpinButton.element.current?.focus();\n        e.preventDefault();\n      }\n    },\n    [spinButtonRefs, triggerRefs],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AASA,MAAM,wBAAwB,CACnC,gBACA,gBACG;AAEH,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA0B;AAEzB,YAAM,WAAW,eAAe,QAAQ,OAAO,OAAO;AACtD,YAAM,QAAQ,UAAU;AAAA,QACtB,CAAC,EAAE,QAAQ,MAAM,SAAS,YAAY,GAAG;AAAA,MAC3C;AAGA,UAAI,QAAQ,GAAG;AACb;AAAA,MACF;AAEA,YAAM,CAAC,MAAM,QAAQ,IAAI,IAAI;AAAA,QAC3B,SAAS,QAAQ,CAAC;AAAA,QAClB,SAAS,KAAK;AAAA,QACd,SAAS,QAAQ,CAAC;AAAA,MACpB;AAEA,YAAM,SAAS,QAAQ,SAAS,SAAS,aAAa;AACtD,YAAM,YAAY,QAAQ,aAAa;AACvC,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,UAAU,GAAG;AAC9C,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,QAAQ,QAAQ;AACjD,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cACE,QACA,aACA,UAAU,UAAU,KACpB,UAAU,QAAQ,GAClB;AACA,iBAAK,QAAQ,SAAS,MAAM;AAE5B,iBAAK,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC;AACjD,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,MACJ;AAGA,YAAM,cAAc,eAAe,SAAS;AAAA,QAC1C,CAAC,MAAM,MAAM;AAAA,MACf;AACA,YAAM,mBAAmB,YAAY,QAAQ;AAAA,QAC3C,CAACA,UAASC,WAAUD,aAAY,UAAaC,SAAQ;AAAA,MACvD;AAGA,YAAM,yBAAyB,eAAe,SAAS;AAAA,QACrD,CAAC,YAAYA,WAAU,cAAcA,SAAQ;AAAA,MAC/C;AACA,YAAM,UAAU,YAAY,QAAQ,gBAAgB;AAGpD,UACE,YAAY,UACZ,0BACA,EAAE,QAAQ,SACV;AACA,+BAAuB,QAAQ,SAAS,MAAM;AAC9C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,WAAW;AAAA,EAC9B;AAEA,SAAO,EAAE,iBAAiB;AAC5B;",
+  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonHandler } from '../types.js';\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRef - A sparse array of trigger keys\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n) => {\n  // the keydown handler to attach to the spinbutton\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      // Condensed version of the handlers for simpler usage\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      // Don't do anything, if the event target is not in our spin button array\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n      switch (e.key) {\n        case 'ArrowLeft':\n          // If a prev. spinbutton is available and the cursor is at the first position\n          if (prev && selection && selection.start === 0) {\n            prev.element.current?.focus();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowLeft is pressed, we need to restore the selection to the current spin button.\n            target.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'ArrowRight':\n          // If a next spinbutton is available and the cursor is at the last position\n          if (next && selection && selection.end === length) {\n            next.element.current?.focus();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowRight is pressed, we need to restore the selection to the current spin button.\n            next.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'Backspace':\n          // If a prev. spinbutton is available and the cursor is collapsed at the first position\n          if (\n            prev &&\n            selection &&\n            selection.start === 0 &&\n            selection.end === 0\n          ) {\n            prev.element.current?.focus();\n            // Set the cursor to the last position of the prev. spinbutton\n            prev.setSelection({ start: 0, end: 0, rtl: true });\n            e.preventDefault();\n          }\n          return;\n      }\n\n      // Search for a defined trigger after the current target index\n      const lookupIndex = spinButtonRefs.current?.findIndex(\n        (h) => h === target,\n      );\n      const nextTriggerIndex = triggerRefs.current.findIndex(\n        (trigger, index) => trigger !== undefined && index > lookupIndex,\n      );\n\n      // Find the first spinbutton after the trigger index\n      const afterTriggerSpinButton = spinButtonRefs.current?.find(\n        (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n      );\n      const trigger = triggerRefs.current[nextTriggerIndex];\n\n      // If a trigger and a after trigger spinbutton was found, focus the spinbutton if the event key matches the trigger key.\n      if (\n        trigger !== undefined &&\n        afterTriggerSpinButton &&\n        e.key === trigger\n      ) {\n        afterTriggerSpinButton.element.current?.focus();\n        e.preventDefault();\n      }\n    },\n    [spinButtonRefs, triggerRefs],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AASA,MAAM,wBAAwB,CACnC,gBACA,gBACG;AAEH,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA0B;AACzB,UAAI,EAAE,aAAa,QAAQ,EAAE,QAAQ,SAAS;AAC5C;AAAA,MACF;AAGA,YAAM,WAAW,eAAe,QAAQ,OAAO,OAAO;AACtD,YAAM,QAAQ,UAAU;AAAA,QACtB,CAAC,EAAE,QAAQ,MAAM,SAAS,YAAY,GAAG;AAAA,MAC3C;AAGA,UAAI,QAAQ,GAAG;AACb;AAAA,MACF;AAEA,YAAM,CAAC,MAAM,QAAQ,IAAI,IAAI;AAAA,QAC3B,SAAS,QAAQ,CAAC;AAAA,QAClB,SAAS,KAAK;AAAA,QACd,SAAS,QAAQ,CAAC;AAAA,MACpB;AAEA,YAAM,SAAS,QAAQ,SAAS,SAAS,aAAa;AACtD,YAAM,YAAY,QAAQ,aAAa;AACvC,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,UAAU,GAAG;AAC9C,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB,WAAW,UAAU,cAAc,QAAW;AAE5C,mBAAO,UAAU;AACjB,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,QAAQ,QAAQ;AACjD,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB,WAAW,UAAU,cAAc,QAAW;AAE5C,iBAAK,UAAU;AACf,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cACE,QACA,aACA,UAAU,UAAU,KACpB,UAAU,QAAQ,GAClB;AACA,iBAAK,QAAQ,SAAS,MAAM;AAE5B,iBAAK,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC;AACjD,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,MACJ;AAGA,YAAM,cAAc,eAAe,SAAS;AAAA,QAC1C,CAAC,MAAM,MAAM;AAAA,MACf;AACA,YAAM,mBAAmB,YAAY,QAAQ;AAAA,QAC3C,CAACA,UAASC,WAAUD,aAAY,UAAaC,SAAQ;AAAA,MACvD;AAGA,YAAM,yBAAyB,eAAe,SAAS;AAAA,QACrD,CAAC,YAAYA,WAAU,cAAcA,SAAQ;AAAA,MAC/C;AACA,YAAM,UAAU,YAAY,QAAQ,gBAAgB;AAGpD,UACE,YAAY,UACZ,0BACA,EAAE,QAAQ,SACV;AACA,+BAAuB,QAAQ,SAAS,MAAM;AAC9C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,WAAW;AAAA,EAC9B;AAEA,SAAO,EAAE,iBAAiB;AAC5B;",
   "names": ["trigger", "index"]
 }

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

@@ -11,6 +11,7 @@ import { isElement } from "react-is";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useSelection } from "../hooks/useSelection.js";
+import { useSpinButtonInteraction } from "../hooks/useSpinButtonInteraction.js";
 import { spinButtonCSS } from "../SpinButton.sty.js";
 function isTextSpinButton(node) {
   return node !== void 0 && node !== null && isElement(node) && node.type === TextSpinButton;
@@ -27,7 +28,8 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     style: consumerStyle,
     onKeyDownHandler: propOnKeyDownHandler,
     "data-testid": dataTestId,
-    onChange
+    onChange,
+    "data-pattern": dataPattern
   } = props;
   const ariaProps = useAriaLabelingProps(props);
   const rootRef = useRef(null);
@@ -59,7 +61,6 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       setSelection
     ]
   );
-  const [isEditable, setIsEditable] = useState(false);
   useEffect(() => {
     if (!rootRef.current) {
       return;
@@ -74,13 +75,19 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       setError(value !== null && !options.includes(value));
     }
   }, [required, value, options]);
+  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({
+    disabled,
+    selectAll,
+    deselectAll,
+    rootElement: rootRef.current
+  });
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-testid": dataTestId,
       contentEditable: (
         // contentEditable when focused and non-editable when blurred, allowing text selection.
-        !disabled && !readOnly && (isEditable || value === null) ? true : void 0
+        !disabled && !readOnly ? true : void 0
       ),
       ref: rootRef,
       tabIndex: disabled ? void 0 : 0,
@@ -98,33 +105,14 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ...ariaProps,
       "aria-label": ariaProps["aria-label"] ?? placeholder,
       onKeyDown: propOnKeyDownHandler ?? onKeyDownHandler,
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-        } else {
-          selectAll();
-        }
-      },
-      onFocus: (e) => {
-        if (disabled) {
-          e.preventDefault();
-        } else {
-          setIsEditable(true);
-          selectAll();
-          rootRef.current?.scrollIntoView({
-            block: "nearest",
-            inline: "nearest"
-          });
-        }
-      },
-      onBlur: () => {
-        deselectAll();
-        setIsEditable(false);
-      },
+      onClick,
+      onFocus,
+      onBlur,
       onBeforeInput: (e) => e.preventDefault(),
       onPaste: (e) => e.preventDefault(),
       onDrop: (e) => e.preventDefault(),
-      onCut: (e) => e.preventDefault()
+      onCut: (e) => e.preventDefault(),
+      "data-pattern": dataPattern
     }
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/text-spin-button/TextSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === TextSpinButton\n  );\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n  }: TextSpinButtonProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(\n    forwardedRef,\n    (): TextSpinButtonRef => {\n      return {\n        type: 'text' as const,\n        element: rootRef,\n        setSelection,\n        getSelection,\n        selectAll,\n        deselectAll,\n        searchValue,\n        clearValue,\n        onChange,\n      };\n    },\n    [\n      clearValue,\n      deselectAll,\n      getSelection,\n      onChange,\n      searchValue,\n      selectAll,\n      setSelection,\n    ],\n  );\n\n  const [isEditable, setIsEditable] = useState(false);\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly && (isEditable || value === null)\n          ? true\n          : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        } else {\n          selectAll();\n        }\n      }}\n      onFocus={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        } else {\n          setIsEditable(true);\n          selectAll();\n          rootRef.current?.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n        }\n      }}\n      onBlur={() => {\n        deselectAll();\n        setIsEditable(false);\n      }}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === TextSpinButton\n  );\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n    'data-pattern': dataPattern,\n  }: TextSpinButtonProps = props;\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(\n    forwardedRef,\n    (): TextSpinButtonRef => {\n      return {\n        type: 'text' as const,\n        element: rootRef,\n        setSelection,\n        getSelection,\n        selectAll,\n        deselectAll,\n        searchValue,\n        clearValue,\n        onChange,\n      };\n    },\n    [\n      clearValue,\n      deselectAll,\n      getSelection,\n      onChange,\n      searchValue,\n      selectAll,\n      setSelection,\n    ],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
+  "mappings": "AA2HI;AA3HJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,iBAAiB;AAG1B,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAMvB,SAAS,iBACd,MAC2C;AAC3C,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAMO,MAAM,iBAAiC,2BAG5C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAyB;AAEzB,QAAM,YAAY,qBAAqB,KAAK;AAC5C,QAAM,UAAU,OAAwB,IAAI;AAC5C,QAAM,EAAE,cAAc,cAAc,WAAW,YAAY,IACzD,aAAa,OAAO;AAEtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,QAAM,EAAE,OAAO,kBAAkB,aAAa,WAAW,IACvD,mBAAmB,KAAK;AAG1B;AAAA,IACE;AAAA,IACA,MAAyB;AACvB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB;AAAA,IACF;AACA,YAAQ,QAAQ,cAAc,SAAS;AACvC,aAAS,kBAAkB,QAAQ,WAAW,UAAU;AAAA,EAG1D,GAAG,CAAC,KAAK,CAAC;AAGV,YAAU,MAAM;AACd,QAAI,YAAY,UAAU,MAAM;AAC9B,eAAS,IAAI;AAAA,IACf,OAAO;AACL,eAAS,UAAU,QAAQ,CAAC,QAAQ,SAAS,KAAK,CAAC;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,UAAU,OAAO,OAAO,CAAC;AAE7B,QAAM,EAAE,SAAS,SAAS,OAAO,IAAI,yBAAyB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,QAAQ;AAAA,EACvB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb;AAAA;AAAA,QAEE,CAAC,YAAY,CAAC,WAAW,OAAO;AAAA;AAAA,MAElC,KAAK;AAAA,MACL,UAAU,WAAW,SAAY;AAAA,MACjC,MAAK;AAAA,MACL,YAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,cAAc,EAAE,UAAU,OAAO,YAAY,MAAM,CAAC;AAAA,MACtD;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,IAAI,WAAW;AAAA,QACrC,GAAG;AAAA,MACL;AAAA,MAEF,iBAAe;AAAA,MACd,GAAG;AAAA,MACJ,cAAY,UAAU,YAAY,KAAK;AAAA,MACvC,WAAW,wBAAwB;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,MAAM,EAAE,eAAe;AAAA,MACvC,SAAS,CAAC,MAAM,EAAE,eAAe;AAAA,MACjC,QAAQ,CAAC,MAAM,EAAE,eAAe;AAAA,MAChC,OAAO,CAAC,MAAM,EAAE,eAAe;AAAA,MAC/B,gBAAc;AAAA;AAAA,EAChB;AAEJ,CAAC;AAGC,eACA,cAAc;",
   "names": []
 }

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

@@ -85,6 +85,9 @@ const useValueNavigation = (props) => {
   );
   const onKeyDownHandler = useCallback(
     (e) => {
+      if (e.shiftKey === true || e.key === "Shift") {
+        return;
+      }
       if (disabled || readOnly) {
         return;
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/text-spin-button/hooks/useValueNavigation.tsx"],
-  "sourcesContent": ["import {\n  type FormEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { constrainValue } from '../../helper.js';\nimport { TEXT_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport type { TextSpinButtonProps } from '../types.js';\n\n/** @internal */\nexport const useValueNavigation = (props: TextSpinButtonProps) => {\n  // Set default keyboard behavior if undefined.\n  const {\n    options,\n    onArrowUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (_, e) => {\n      e.preventDefault();\n      return 0;\n    },\n    onEnd = (_, e) => {\n      e.preventDefault();\n      return options.length - 1;\n    },\n    disabled,\n    readOnly,\n    defaultValue = TEXT_SPIN_BUTTON_DEFAULTS.VALUE,\n    value: valueProp,\n    onChange,\n    isCyclic,\n  } = props;\n\n  const [value, setValue] = useState(valueProp ?? defaultValue);\n\n  // Update value to the result of the given transform function.\n  const handleValueNavigation = useCallback(\n    (\n      transform: (curIndex: number, e: FormEvent) => number,\n      event: FormEvent,\n    ) => {\n      const sanitized = (idx: number) => {\n        const maxIndex = options.length - 1;\n        return constrainValue(idx, 0, maxIndex, isCyclic) ?? 0;\n      };\n\n      // if nothing was selected, start with the first configured value\n      const curIndex =\n        value === null ? 0 : options.indexOf(value || valueProp || '');\n      const newIndex = sanitized(transform(curIndex, event));\n      const newValue = options[newIndex];\n\n      if (value !== newValue) {\n        setValue(newValue);\n        onChange?.(newValue);\n      }\n    },\n    [value, options, valueProp, onChange, isCyclic],\n  );\n\n  // Lookup table for faster search\n  const lookupTable = useMemo(\n    () => options.map((v) => v[0].toLowerCase()),\n    [options],\n  );\n\n  // For a given key, scan lookup table and update the value accordingly.\n  const searchValue = useCallback(\n    (key: string, fireOnChange = false) => {\n      const idx = lookupTable.indexOf(key.toLowerCase());\n      if (idx < 0) {\n        return undefined;\n      }\n\n      const newValue = options[idx];\n      if (value !== newValue) {\n        setValue(newValue);\n      }\n\n      fireOnChange && onChange?.(newValue);\n\n      return newValue;\n    },\n    [lookupTable, options, value, onChange],\n  );\n\n  const clearValue = useCallback(\n    (fireOnChange = false) => {\n      setValue(null);\n      fireOnChange && onChange?.(null);\n    },\n    [onChange],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n      switch (e.key) {\n        case 'ArrowUp':\n          handleValueNavigation(onArrowUp, e);\n          break;\n        case 'ArrowDown':\n          handleValueNavigation(onArrowDown, e);\n          break;\n        case 'PageUp':\n          handleValueNavigation(onPageUp, e);\n          break;\n        case 'PageDown':\n          handleValueNavigation(onPageDown, e);\n          break;\n        case 'Home':\n          handleValueNavigation(onHome, e);\n          break;\n        case 'End':\n          handleValueNavigation(onEnd, e);\n          break;\n        case 'Backspace':\n        case 'Delete':\n          if (value !== null) {\n            setValue(null);\n            onChange?.(null);\n          }\n          e.preventDefault();\n          break;\n        default:\n          // If a character key was pressed, look for a value starting with the char.\n          if (!e.metaKey && !e.ctrlKey && e.key.match(/^\\w$/)) {\n            const newValue = searchValue(e.key);\n            if (newValue !== undefined && newValue !== value) {\n              onChange?.(newValue);\n            }\n            e.preventDefault();\n          }\n          break;\n      }\n    },\n    [\n      disabled,\n      handleValueNavigation,\n      onArrowDown,\n      onArrowUp,\n      onChange,\n      onEnd,\n      onHome,\n      onPageDown,\n      onPageUp,\n      readOnly,\n      searchValue,\n      setValue,\n      value,\n    ],\n  );\n\n  useEffect(() => {\n    // update value if component is in controlled mode\n    if (valueProp !== undefined) {\n      setValue(valueProp);\n    }\n  }, [setValue, valueProp]);\n\n  return { value, onKeyDownHandler, searchValue, clearValue };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type FormEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { constrainValue } from '../../helper.js';\nimport { TEXT_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport type { TextSpinButtonProps } from '../types.js';\n\n/** @internal */\nexport const useValueNavigation = (props: TextSpinButtonProps) => {\n  // Set default keyboard behavior if undefined.\n  const {\n    options,\n    onArrowUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (_, e) => {\n      e.preventDefault();\n      return 0;\n    },\n    onEnd = (_, e) => {\n      e.preventDefault();\n      return options.length - 1;\n    },\n    disabled,\n    readOnly,\n    defaultValue = TEXT_SPIN_BUTTON_DEFAULTS.VALUE,\n    value: valueProp,\n    onChange,\n    isCyclic,\n  } = props;\n\n  const [value, setValue] = useState(valueProp ?? defaultValue);\n\n  // Update value to the result of the given transform function.\n  const handleValueNavigation = useCallback(\n    (\n      transform: (curIndex: number, e: FormEvent) => number,\n      event: FormEvent,\n    ) => {\n      const sanitized = (idx: number) => {\n        const maxIndex = options.length - 1;\n        return constrainValue(idx, 0, maxIndex, isCyclic) ?? 0;\n      };\n\n      // if nothing was selected, start with the first configured value\n      const curIndex =\n        value === null ? 0 : options.indexOf(value || valueProp || '');\n      const newIndex = sanitized(transform(curIndex, event));\n      const newValue = options[newIndex];\n\n      if (value !== newValue) {\n        setValue(newValue);\n        onChange?.(newValue);\n      }\n    },\n    [value, options, valueProp, onChange, isCyclic],\n  );\n\n  // Lookup table for faster search\n  const lookupTable = useMemo(\n    () => options.map((v) => v[0].toLowerCase()),\n    [options],\n  );\n\n  // For a given key, scan lookup table and update the value accordingly.\n  const searchValue = useCallback(\n    (key: string, fireOnChange = false) => {\n      const idx = lookupTable.indexOf(key.toLowerCase());\n      if (idx < 0) {\n        return undefined;\n      }\n\n      const newValue = options[idx];\n      if (value !== newValue) {\n        setValue(newValue);\n      }\n\n      fireOnChange && onChange?.(newValue);\n\n      return newValue;\n    },\n    [lookupTable, options, value, onChange],\n  );\n\n  const clearValue = useCallback(\n    (fireOnChange = false) => {\n      setValue(null);\n      fireOnChange && onChange?.(null);\n    },\n    [onChange],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n      switch (e.key) {\n        case 'ArrowUp':\n          handleValueNavigation(onArrowUp, e);\n          break;\n        case 'ArrowDown':\n          handleValueNavigation(onArrowDown, e);\n          break;\n        case 'PageUp':\n          handleValueNavigation(onPageUp, e);\n          break;\n        case 'PageDown':\n          handleValueNavigation(onPageDown, e);\n          break;\n        case 'Home':\n          handleValueNavigation(onHome, e);\n          break;\n        case 'End':\n          handleValueNavigation(onEnd, e);\n          break;\n        case 'Backspace':\n        case 'Delete':\n          if (value !== null) {\n            setValue(null);\n            onChange?.(null);\n          }\n          e.preventDefault();\n          break;\n        default:\n          // If a character key was pressed, look for a value starting with the char.\n          if (!e.metaKey && !e.ctrlKey && e.key.match(/^\\w$/)) {\n            const newValue = searchValue(e.key);\n            if (newValue !== undefined && newValue !== value) {\n              onChange?.(newValue);\n            }\n            e.preventDefault();\n          }\n          break;\n      }\n    },\n    [\n      disabled,\n      handleValueNavigation,\n      onArrowDown,\n      onArrowUp,\n      onChange,\n      onEnd,\n      onHome,\n      onPageDown,\n      onPageUp,\n      readOnly,\n      searchValue,\n      setValue,\n      value,\n    ],\n  );\n\n  useEffect(() => {\n    // update value if component is in controlled mode\n    if (valueProp !== undefined) {\n      setValue(valueProp);\n    }\n  }, [setValue, valueProp]);\n\n  return { value, onKeyDownHandler, searchValue, clearValue };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,61 +1,61 @@
-._1tkc5xf0-3-1-1 {
+._1tkc5xf0-3-2-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-1-1 {
+._1tkc5xf1-3-2-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-1-1 {
+._1tkc5xf2-3-2-0 {
   cursor: not-allowed;
 }
-._1tkc5xf3-3-1-1 {
+._1tkc5xf3-3-2-0 {
   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-1-1 {
+._1tkc5xf4-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-1-1 {
+._1tkc5xf5-3-2-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-1-1:after {
+._1tkc5xf6-3-2-0:after {
   content: "*";
 }
-._1tkc5xfa-3-1-1 {
-  --_1tkc5xf9-3-1-1: var(--_bx32h1-3-1-1);
+._1tkc5xfa-3-2-0 {
+  --_1tkc5xf9-3-2-0: var(--_bx32h1-3-2-0);
   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-1-1 {
-  --_1tkc5xf7-3-1-1: 1;
-  --_1tkc5xf8-3-1-1: 0;
+._1tkc5xfb-3-2-0 {
+  --_1tkc5xf7-3-2-0: 1;
+  --_1tkc5xf8-3-2-0: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfc-3-1-1 {
-  --_1tkc5xf7-3-1-1: 0;
-  --_1tkc5xf8-3-1-1: 1;
+._1tkc5xfc-3-2-0 {
+  --_1tkc5xf7-3-2-0: 0;
+  --_1tkc5xf8-3-2-0: 1;
   transform: unset;
 }
-._1tkc5xfa-3-1-1 > svg {
+._1tkc5xfa-3-2-0 > 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-1-1 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf7-3-1-1);
-  color: var(--_1tkc5xf9-3-1-1);
+._1tkc5xfa-3-2-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf7-3-2-0);
+  color: var(--_1tkc5xf9-3-2-0);
 }
-._1tkc5xfa-3-1-1 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf8-3-1-1);
-  color: var(--_1tkc5xf9-3-1-1);
+._1tkc5xfa-3-2-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf8-3-2-0);
+  color: var(--_1tkc5xf9-3-2-0);
 }
-._1tkc5xfd-3-1-1 {
+._1tkc5xfd-3-2-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -70,22 +70,22 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-1-1);
+  background-color: var(--_bx32h3-3-2-0);
 }
-._1tkc5xfm-3-1-1 {
-  background-color: var(--_bx32h2-3-1-1);
+._1tkc5xfm-3-2-0 {
+  background-color: var(--_bx32h2-3-2-0);
 }
-._1tkc5xfn-3-1-1 {
+._1tkc5xfn-3-2-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfo-3-1-1 {
+._1tkc5xfo-3-2-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xfp-3-1-1 {
+._1tkc5xfp-3-2-0 {
   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-1-1 {
+._1tkc5xfq-3-2-0 {
   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 +96,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-1-1);
+  background-color: var(--_bx32h1-3-2-0);
 }

package/esm/forms/switch/Switch.sty.js

@@ -1,11 +1,11 @@
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-1-1", variantClassNames: { selected: { true: "_1tkc5xfb-3-1-1", false: "_1tkc5xfc-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-1-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-1-1" }, readOnly: { true: "_1tkc5xf2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-1-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-1-1", false: "_1tkc5xf5-3-1-1" }, required: { true: "_1tkc5xf6-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfq-3-1-1";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-1-1", variantClassNames: { disabled: { true: "_1tkc5xfe-3-1-1", false: "_1tkc5xff-3-1-1" }, hasError: { true: "_1tkc5xfg-3-1-1", false: "_1tkc5xfh-3-1-1" }, color: { primary: "_1tkc5xfi-3-1-1", neutral: "_1tkc5xfj-3-1-1" }, isFocusVisible: { true: "_1tkc5xfk-3-1-1", false: "_1tkc5xfl-3-1-1" }, readOnly: { true: "_1tkc5xfm-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-1-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-1-1"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-1-1"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-2-0", variantClassNames: { selected: { true: "_1tkc5xfb-3-2-0", false: "_1tkc5xfc-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-2-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-2-0" }, readOnly: { true: "_1tkc5xf2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-2-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-2-0", false: "_1tkc5xf5-3-2-0" }, required: { true: "_1tkc5xf6-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfq-3-2-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-2-0", variantClassNames: { disabled: { true: "_1tkc5xfe-3-2-0", false: "_1tkc5xff-3-2-0" }, hasError: { true: "_1tkc5xfg-3-2-0", false: "_1tkc5xfh-3-2-0" }, color: { primary: "_1tkc5xfi-3-2-0", neutral: "_1tkc5xfj-3-2-0" }, isFocusVisible: { true: "_1tkc5xfk-3-2-0", false: "_1tkc5xfl-3-2-0" }, readOnly: { true: "_1tkc5xfm-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-2-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-2-0"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-2-0"]] });
 export {
   switchIconCSS,
   switchLabelCSS,

package/esm/forms/switch/Switch.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-1-1',variantClassNames:{selected:{true:'_1tkc5xfb-3-1-1',false:'_1tkc5xfc-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-1-1',variantClassNames:{disabled:{true:'_1tkc5xf1-3-1-1'},readOnly:{true:'_1tkc5xf2-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-1-1',variantClassNames:{disabled:{true:'_1tkc5xf4-3-1-1',false:'_1tkc5xf5-3-1-1'},required:{true:'_1tkc5xf6-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-1-1';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-1-1',variantClassNames:{disabled:{true:'_1tkc5xfe-3-1-1',false:'_1tkc5xff-3-1-1'},hasError:{true:'_1tkc5xfg-3-1-1',false:'_1tkc5xfh-3-1-1'},color:{primary:'_1tkc5xfi-3-1-1',neutral:'_1tkc5xfj-3-1-1'},isFocusVisible:{true:'_1tkc5xfk-3-1-1',false:'_1tkc5xfl-3-1-1'},readOnly:{true:'_1tkc5xfm-3-1-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-1-1'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-1-1'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-1-1']]});"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-2-0',variantClassNames:{selected:{true:'_1tkc5xfb-3-2-0',false:'_1tkc5xfc-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-2-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-2-0'},readOnly:{true:'_1tkc5xf2-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-2-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-2-0',false:'_1tkc5xf5-3-2-0'},required:{true:'_1tkc5xf6-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-2-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-2-0',variantClassNames:{disabled:{true:'_1tkc5xfe-3-2-0',false:'_1tkc5xff-3-2-0'},hasError:{true:'_1tkc5xfg-3-2-0',false:'_1tkc5xfh-3-2-0'},color:{primary:'_1tkc5xfi-3-2-0',neutral:'_1tkc5xfj-3-2-0'},isFocusVisible:{true:'_1tkc5xfk-3-2-0',false:'_1tkc5xfl-3-2-0'},readOnly:{true:'_1tkc5xfm-3-2-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-2-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-2-0'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-2-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpL,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/L,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtN,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl1-3-1-1 {
-  --_44rwcl0-3-1-1: 0px;
+._44rwcl1-3-2-0 {
+  --_44rwcl0-3-2-0: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl1-3-1-1:focus-within {
-  --_44rwcl0-3-1-1: -2px;
+._44rwcl1-3-2-0:focus-within {
+  --_44rwcl0-3-2-0: -2px;
 }
-._44rwcl1-3-1-1::-webkit-resizer {
+._44rwcl1-3-2-0::-webkit-resizer {
   display: none;
 }
-._44rwcl2-3-1-1 {
+._44rwcl2-3-2-0 {
   width: fit-content;
 }
-._44rwcl3-3-1-1 {
+._44rwcl3-3-2-0 {
   resize: none;
 }
-._44rwcl4-3-1-1 {
+._44rwcl4-3-2-0 {
   resize: both;
 }
-._44rwcl5-3-1-1 {
+._44rwcl5-3-2-0 {
   resize: horizontal;
 }
-._44rwcl6-3-1-1 {
+._44rwcl6-3-2-0 {
   resize: vertical;
 }
-._44rwcl7-3-1-1 {
+._44rwcl7-3-2-0 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -52,80 +52,80 @@
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._44rwcl7-3-1-1::placeholder {
+._44rwcl7-3-2-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl7-3-1-1:hover {
+._44rwcl7-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl7-3-1-1:active {
+._44rwcl7-3-2-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._44rwcl7-3-1-1:read-only {
+._44rwcl7-3-2-0:read-only {
   cursor: not-allowed;
 }
-._44rwcl8-3-1-1 {
+._44rwcl8-3-2-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl8-3-1-1::placeholder {
+._44rwcl8-3-2-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl8-3-1-1:hover {
+._44rwcl8-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl8-3-1-1:active {
+._44rwcl8-3-2-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-1-1 {
+._44rwcl9-3-2-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-1-1::placeholder {
+._44rwcl9-3-2-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-1-1:hover {
+._44rwcl9-3-2-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwcl9-3-1-1:active {
+._44rwcl9-3-2-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._44rwcla-3-1-1 {
+._44rwcla-3-2-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcla-3-1-1::placeholder {
+._44rwcla-3-2-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcla-3-1-1:hover {
+._44rwcla-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-1-1:active {
+._44rwcla-3-2-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclb-3-1-1 {
+._44rwclb-3-2-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-1-1)) translateY(var(--_44rwcl0-3-1-1));
+  transform: translateX(var(--_44rwcl0-3-2-0)) translateY(var(--_44rwcl0-3-2-0));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclc-3-1-1 {
+._44rwclc-3-2-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcld-3-1-1 {
+._44rwcld-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcle-3-1-1 {
+._44rwcle-3-2-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwclb-3-1-1 {
+  ._44rwclb-3-2-0 {
     display: none;
   }
 }

package/esm/forms/text-area/TextArea.sty.js

@@ -1,8 +1,8 @@
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl1-3-1-1", variantClassNames: { contentWidth: { true: "_44rwcl2-3-1-1" }, resize: { none: "_44rwcl3-3-1-1", both: "_44rwcl4-3-1-1", horizontal: "_44rwcl5-3-1-1", vertical: "_44rwcl6-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwclb-3-1-1", variantClassNames: { error: { true: "_44rwclc-3-1-1" }, disabled: { true: "_44rwcld-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-1-1"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl7-3-1-1", variantClassNames: { disabled: { true: "_44rwcl8-3-1-1" }, error: { true: "_44rwcl9-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-1-1"]] });
+var container = _7a468({ defaultClassName: "_44rwcl1-3-2-0", variantClassNames: { contentWidth: { true: "_44rwcl2-3-2-0" }, resize: { none: "_44rwcl3-3-2-0", both: "_44rwcl4-3-2-0", horizontal: "_44rwcl5-3-2-0", vertical: "_44rwcl6-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwclb-3-2-0", variantClassNames: { error: { true: "_44rwclc-3-2-0" }, disabled: { true: "_44rwcld-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-2-0"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl7-3-2-0", variantClassNames: { disabled: { true: "_44rwcl8-3-2-0" }, error: { true: "_44rwcl9-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-2-0"]] });
 export {
   container,
   resizeIcon,

package/esm/forms/text-area/TextArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.css.ts"],
-  "sourcesContent": ["import './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl1-3-1-1',variantClassNames:{contentWidth:{true:'_44rwcl2-3-1-1'},resize:{none:'_44rwcl3-3-1-1',both:'_44rwcl4-3-1-1',horizontal:'_44rwcl5-3-1-1',vertical:'_44rwcl6-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwclb-3-1-1',variantClassNames:{error:{true:'_44rwclc-3-1-1'},disabled:{true:'_44rwcld-3-1-1'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcle-3-1-1']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl7-3-1-1',variantClassNames:{disabled:{true:'_44rwcl8-3-1-1'},error:{true:'_44rwcl9-3-1-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwcla-3-1-1']]});"],
+  "sourcesContent": ["import './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl1-3-2-0',variantClassNames:{contentWidth:{true:'_44rwcl2-3-2-0'},resize:{none:'_44rwcl3-3-2-0',both:'_44rwcl4-3-2-0',horizontal:'_44rwcl5-3-2-0',vertical:'_44rwcl6-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwclb-3-2-0',variantClassNames:{error:{true:'_44rwclc-3-2-0'},disabled:{true:'_44rwcld-3-2-0'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcle-3-2-0']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl7-3-2-0',variantClassNames:{disabled:{true:'_44rwcl8-3-2-0'},error:{true:'_44rwcl9-3-2-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwcla-3-2-0']]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,iBAAgB,GAAE,QAAO,EAAC,MAAK,kBAAiB,MAAK,kBAAiB,YAAW,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrQ,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAClO,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,OAAM,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }