@dynatrace/strato-components 3.11.1 → 3.11.2

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-11-1", variantClassNames: { error: { true: "_r47o0w2-3-11-1" }, disabled: { true: "_r47o0w3-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-11-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-11-2", variantClassNames: { error: { true: "_r47o0w2-3-11-2" }, disabled: { true: "_r47o0w3-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-2"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-11-2";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-11-1',variantClassNames:{error:{true:'_r47o0w2-3-11-1'},disabled:{true:'_r47o0w3-3-11-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-11-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-11-2',variantClassNames:{error:{true:'_r47o0w2-3-11-2'},disabled:{true:'_r47o0w3-3-11-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-11-2']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js

@@ -8,17 +8,17 @@ import {
   useRef,
   useState
 } from "react";
-import { isElement } from "react-is";
+import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
 import { useBeforeInputHandler } from "./hooks/useBeforeInputHandler.js";
 import { useValidationAndFormatting } from "./hooks/useValidationAndFormatting.js";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.js";
 import { mergeProps } from "../../../core/utils/merge-props.js";
 import { useSelection } from "../hooks/useSelection.js";
-import { spinButtonCSS } from "../SpinButton.sty.js";
-import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
 import { useSpinButtonInteraction } from "../hooks/useSpinButtonInteraction.js";
+import { spinButtonCSS } from "../SpinButton.sty.js";
 const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     disabled = false,
@@ -176,7 +176,7 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   );
 });
 function isNumberSpinButton(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === NumberSpinButton;
+  return isSlot(node, NumberSpinButton);
 }
 NumberSpinButton.displayName = "_NumberSpinButton";
 export {

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/number-spin-button/NumberSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\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\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\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      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\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      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === NumberSpinButton\n  );\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
-  "mappings": "AAqMI;AArMJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AAMlC,MAAM,mBAAmC,2BAG9C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,eAAe,4BAA4B;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,IAA2B;AAE3B,QAAM,CAAC,yBAAyB,6BAA6B,IAC3D,2BAA2B,cAAc;AAE3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,QAAM,YAAY,qBAAqB,KAAK;AAC5C,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,EAAE,cAAc,cAAc,WAAW,YAAY,IACzD,aAAa,OAAO;AACtB,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI;AAAA,IAClC;AAAA,IACA;AAAA,IACA,YAAY,4BAA4B;AAAA,IACxC,YAAY,4BAA4B;AAAA,EAC1C;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,OAAe,eAAoC,UAAU;AAC5D,YAAM,WAAW,MAAM,KAAK;AAC5B,cAAQ,KAAK;AACb,eAAS,QAAQ;AAEjB,UAAI,SAAS,SAAS;AACpB,gBAAQ,QAAQ,cAAc,OAAO,KAAK;AAAA,MAC5C;AACA,sBAAgB,WAAW,QAAQ;AAAA,IACrC;AAAA,IACA,CAAC,QAAQ,UAAU,OAAO,QAAQ;AAAA,EACpC;AAGA,QAAM,aAAa;AAAA,IACjB,CAAC,SAAiC,eAAe,UAAU;AACzD,eAAS,IAAI;AACb,cAAQ,EAAE;AACV,UAAI,SAAS;AACX,gBAAQ,cAAc;AAAA,MACxB;AACA,sBAAgB,WAAW,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,MACE,OAAO,aAAa;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EACF;AAGA;AAAA,IACE;AAAA,IACA,OAA4B;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,OAAe,iBACzB,UAAU,OAAO,YAAY;AAAA,MAC/B,YAAY,CAAC,iBAAiB,WAAW,QAAQ,SAAS,YAAY;AAAA,IACxE;AAAA,IACA,CAAC,cAAc,cAAc,WAAW,aAAa,YAAY,SAAS;AAAA,EAC5E;AAGA,YAAU,MAAM;AACd,UAAM,UAAU,SAAS,KAAK;AAC9B,aAAS,CAAC,OAAO;AAAA,EACnB,GAAG,CAAC,UAAU,UAAU,KAAK,CAAC;AAG9B,YAAU,MAAM;AACd;AAAA,MACE,iBAAiB,QACf,iBAAiB,UACjB,OAAO,MAAM,YAAY,IACvB,KACA,aAAa,SAAS;AAAA,IAC5B;AAAA,EAGF,GAAG,CAAC,MAAM,CAAC;AAGX,YAAU,MAAM;AACd,UAAM,UAAU,QAAQ;AACxB,aAAS,iBAAiB,eAAe,kBAAkB;AAC3D,WAAO,MACL,SAAS,oBAAoB,eAAe,kBAAkB;AAAA,EAClE,GAAG,CAAC,kBAAkB,CAAC;AAGvB,YAAU,MAAM;AAEd,QAAI,cAAc,QAAW;AAC3B;AAAA,IACF;AAGA,UAAM,MAAM,aAAa;AACzB,QAAI,cAAc,OAAO;AACvB;AAAA,QACE,cAAc,QAAQ,OAAO,UAAU,SAAS,IAC5C,UAAU,SAAS,IACnB;AAAA,MACN;AAAA,IACF;AAGA,aAAS,kBAAkB,QAAQ,WAAW,OAAO,aAAa,GAAG;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,QAAQ,cAAc,YAAY,CAAC;AAE7D,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,KAAK;AAAA,MACL,UAAU,WAAW,SAAY;AAAA,MACjC;AAAA;AAAA,QAEE,CAAC,YAAY,CAAC,WAAW,OAAO;AAAA;AAAA,MAElC,YAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,cAAc,EAAE,UAAU,OAAO,YAAY,MAAM,CAAC;AAAA,MACtD;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,IAAI,eAAe,EAAE;AAAA,QAC3C,GAAG;AAAA,MACL;AAAA,MAEF,iBAAe;AAAA,MACd,GAAG,WAAW,WAAW,uBAAuB;AAAA,MACjD,cAAY,UAAU,YAAY,KAAK;AAAA,MACvC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,sBAAsB;AAAA,MACjC,gBAAc;AAAA;AAAA,EAChB;AAEJ,CAAC;AAMM,SAAS,mBACd,MAC6C;AAC7C,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAGE,iBACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\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      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\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      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return isSlot(node, NumberSpinButton);\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { isElement } from "react-is";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.js";
 function isSpinButtonGroupSeparator(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === SpinButtonGroupSeparator;
+  return isSlot(node, SpinButtonGroupSeparator);
 }
 const SpinButtonGroupSeparator = ({
   children,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.tsx"],
-  "sourcesContent": ["import {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type { SpinButtonGroupSeparatorProps } from './types.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\n\n/**\n * Allows to check if a ReactNode is a SpinButtonGroupSeparator element.\n * @internal\n */\nexport function isSpinButtonGroupSeparator(\n  node: ReactNode,\n): node is ReactElement<SpinButtonGroupSeparatorProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === SpinButtonGroupSeparator\n  );\n}\n\n/**\n * Used to define a trigger between spinbuttons. e.g. the colon within a time value 12:34.\n */\nexport const SpinButtonGroupSeparator = ({\n  children,\n  trigger,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  ...remainingProps\n}: PropsWithChildren<SpinButtonGroupSeparatorProps>) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  return (\n    <span\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {children ?? trigger}\n    </span>\n  );\n};\n"],
-  "mappings": "AAsCI;AAjCJ,SAAS,iBAAiB;AAG1B,SAAS,kCAAkC;AAMpC,SAAS,2BACd,MACqD;AACrD,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAKO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport type { SpinButtonGroupSeparatorProps } from './types.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\n\n/**\n * Allows to check if a ReactNode is a SpinButtonGroupSeparator element.\n * @internal\n */\nexport function isSpinButtonGroupSeparator(\n  node: ReactNode,\n): node is ReactElement<SpinButtonGroupSeparatorProps> {\n  return isSlot(node, SpinButtonGroupSeparator);\n}\n\n/**\n * Used to define a trigger between spinbuttons. e.g. the colon within a time value 12:34.\n */\nexport const SpinButtonGroupSeparator = ({\n  children,\n  trigger,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  ...remainingProps\n}: PropsWithChildren<SpinButtonGroupSeparatorProps>) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  return (\n    <span\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {children ?? trigger}\n    </span>\n  );\n};\n"],
+  "mappings": "AAiCI;AA1BJ,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AAMhB,SAAS,2BACd,MACqD;AACrD,SAAO,OAAO,MAAM,wBAAwB;AAC9C;AAKO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -7,15 +7,15 @@ import {
   useRef,
   useState
 } from "react";
-import { isElement } from "react-is";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.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;
+  return isSlot(node, TextSpinButton);
 }
 const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
@@ -39,31 +39,27 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { getSelection, setSelection, selectAll, deselectAll } = useSelection(rootRef);
   const [error, setError] = useState(false);
   const { value, onKeyDownHandler, searchValue, clearValue } = useValueNavigation(props);
-  useImperativeHandle(
-    forwardedRef,
-    () => {
-      return {
-        type: "text",
-        element: rootRef,
-        setSelection,
-        getSelection,
-        selectAll,
-        deselectAll,
-        searchValue,
-        clearValue,
-        onChange
-      };
-    },
-    [
-      clearValue,
-      deselectAll,
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      type: "text",
+      element: rootRef,
+      setSelection,
       getSelection,
-      onChange,
-      searchValue,
       selectAll,
-      setSelection
-    ]
-  );
+      deselectAll,
+      searchValue,
+      clearValue,
+      onChange
+    };
+  }, [
+    clearValue,
+    deselectAll,
+    getSelection,
+    onChange,
+    searchValue,
+    selectAll,
+    setSelection
+  ]);
   useEffect(() => {
     if (!rootRef.current) {
       return;

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\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.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    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\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      {...behavioralTrackingProps}\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';\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.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 isSlot(node, TextSpinButton);\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    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\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(forwardedRef, (): 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    clearValue,\n    deselectAll,\n    getSelection,\n    onChange,\n    searchValue,\n    selectAll,\n    setSelection,\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      {...behavioralTrackingProps}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.css

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

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

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-1", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-1", false: "_1tkc5xfd-3-11-1" }, readOnly: { true: "_1tkc5xfe-3-11-1" }, hasError: { true: "_1tkc5xff-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-1"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-1" }, readOnly: { true: "_1tkc5xf2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-1", false: "_1tkc5xf5-3-11-1" }, required: { true: "_1tkc5xf6-3-11-1" }, readOnly: { true: "_1tkc5xf7-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-11-1";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-1", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-1", false: "_1tkc5xfj-3-11-1" }, hasError: { true: "_1tkc5xfk-3-11-1", false: "_1tkc5xfl-3-11-1" }, color: { primary: "_1tkc5xfm-3-11-1", neutral: "_1tkc5xfn-3-11-1" }, isFocusVisible: { true: "_1tkc5xfo-3-11-1", false: "_1tkc5xfp-3-11-1" }, readOnly: { true: "_1tkc5xfq-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-1"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-1"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-1"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-1"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-2", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-2", false: "_1tkc5xfd-3-11-2" }, readOnly: { true: "_1tkc5xfe-3-11-2" }, hasError: { true: "_1tkc5xff-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-2"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-2" }, readOnly: { true: "_1tkc5xf2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-2", false: "_1tkc5xf5-3-11-2" }, required: { true: "_1tkc5xf6-3-11-2" }, readOnly: { true: "_1tkc5xf7-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-11-2";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-2", false: "_1tkc5xfj-3-11-2" }, hasError: { true: "_1tkc5xfk-3-11-2", false: "_1tkc5xfl-3-11-2" }, color: { primary: "_1tkc5xfm-3-11-2", neutral: "_1tkc5xfn-3-11-2" }, isFocusVisible: { true: "_1tkc5xfo-3-11-2", false: "_1tkc5xfp-3-11-2" }, readOnly: { true: "_1tkc5xfq-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-2"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-2"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-2"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-2"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-2"]] });
 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 '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-1',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-1',false:'_1tkc5xfd-3-11-1'},readOnly:{true:'_1tkc5xfe-3-11-1'},hasError:{true:'_1tkc5xff-3-11-1'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-1']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-1',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-1'},readOnly:{true:'_1tkc5xf2-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-1',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-1',false:'_1tkc5xf5-3-11-1'},required:{true:'_1tkc5xf6-3-11-1'},readOnly:{true:'_1tkc5xf7-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-1';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-1',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-1',false:'_1tkc5xfj-3-11-1'},hasError:{true:'_1tkc5xfk-3-11-1',false:'_1tkc5xfl-3-11-1'},color:{primary:'_1tkc5xfm-3-11-1',neutral:'_1tkc5xfn-3-11-1'},isFocusVisible:{true:'_1tkc5xfo-3-11-1',false:'_1tkc5xfp-3-11-1'},readOnly:{true:'_1tkc5xfq-3-11-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-1'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-1'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-1'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-1'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-1']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-2',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-2',false:'_1tkc5xfd-3-11-2'},readOnly:{true:'_1tkc5xfe-3-11-2'},hasError:{true:'_1tkc5xff-3-11-2'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-2']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-2'},readOnly:{true:'_1tkc5xf2-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-2',false:'_1tkc5xf5-3-11-2'},required:{true:'_1tkc5xf6-3-11-2'},readOnly:{true:'_1tkc5xf7-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-2';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-2',false:'_1tkc5xfj-3-11-2'},hasError:{true:'_1tkc5xfk-3-11-2',false:'_1tkc5xfl-3-11-2'},color:{primary:'_1tkc5xfm-3-11-2',neutral:'_1tkc5xfn-3-11-2'},isFocusVisible:{true:'_1tkc5xfo-3-11-2',false:'_1tkc5xfp-3-11-2'},readOnly:{true:'_1tkc5xfq-3-11-2'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-2'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-2'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-2'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-2'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-2']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AAC/S,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClM,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,mBAAkB,GAAE,gBAAe,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }