@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/forms/select/styles/Select.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-10-4';\nexport var filter = '_dlenfc1-3-10-4';\nexport var placeholderColor = '_dlenfcl-3-10-4';\nexport var select = '_dlenfc0-3-10-4';\nexport var selectAll = '_dlenfcs-3-10-4';\nexport var selectGroupHeading = '_dlenfcf-3-10-4';\nexport var selectMenuDivider = '_dlenfcn-3-10-4';\nexport var selectMenuListWrapper = '_dlenfch-3-10-4';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-10-4';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-10-4',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-10-4'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-10-4';\nexport var selectNoOptionsMessage = '_dlenfci-3-10-4';\nexport var selectOptionMulti = '_dlenfct-3-10-4';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-10-4',variantClassNames:{selected:{true:'_dlenfcv-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-10-4';\nexport var selectOptionPrefix = '_dlenfcx-3-10-4';\nexport var selectOptionSingle = '_dlenfcr-3-10-4';\nexport var selectOptionSuffix = '_dlenfcy-3-10-4';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-10-4',variantClassNames:{fullWidth:{true:'_dlenfca-3-10-4'},showError:{true:'_dlenfcb-3-10-4'},readOnly:{true:'_dlenfcc-3-10-4'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-10-4'],[{showError:false,readOnly:true},'_dlenfce-3-10-4']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-10-4',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-10-4'},readOnly:{true:'_dlenfc8-3-10-4'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-10-4';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-10-4';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-10-4',variantClassNames:{fullWidth:{true:'_dlenfc3-3-10-4',false:'_dlenfc4-3-10-4'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-11-0';\nexport var filter = '_dlenfc1-3-11-0';\nexport var placeholderColor = '_dlenfcl-3-11-0';\nexport var select = '_dlenfc0-3-11-0';\nexport var selectAll = '_dlenfcs-3-11-0';\nexport var selectGroupHeading = '_dlenfcf-3-11-0';\nexport var selectMenuDivider = '_dlenfcn-3-11-0';\nexport var selectMenuListWrapper = '_dlenfch-3-11-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-11-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-11-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-11-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-11-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-11-0';\nexport var selectOptionMulti = '_dlenfct-3-11-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-11-0',variantClassNames:{selected:{true:'_dlenfcv-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-11-0';\nexport var selectOptionPrefix = '_dlenfcx-3-11-0';\nexport var selectOptionSingle = '_dlenfcr-3-11-0';\nexport var selectOptionSuffix = '_dlenfcy-3-11-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-11-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-11-0'},showError:{true:'_dlenfcb-3-11-0'},readOnly:{true:'_dlenfcc-3-11-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-11-0'],[{showError:false,readOnly:true},'_dlenfce-3-11-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-11-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-11-0'},readOnly:{true:'_dlenfc8-3-11-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-11-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-11-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-11-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-11-0',false:'_dlenfc4-3-11-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;AAC/B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACvV,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpM,IAAI,kBAAkB;",
   "names": []
 }

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-10-4 {
+._r47o0w1-3-11-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-10-4:empty::before {
+._r47o0w1-3-11-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-10-4:focus:empty {
+._r47o0w1-3-11-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-10-4 {
+._r47o0w2-3-11-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-10-4:focus:empty {
+._r47o0w2-3-11-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-10-4 {
+._r47o0w3-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-10-4:empty::before {
+._r47o0w3-3-11-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-10-4 {
+._r47o0w4-3-11-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

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-10-4", variantClassNames: { error: { true: "_r47o0w2-3-10-4" }, disabled: { true: "_r47o0w3-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-10-4"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-10-4";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-11-0", variantClassNames: { error: { true: "_r47o0w2-3-11-0" }, disabled: { true: "_r47o0w3-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-11-0";
 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-10-4',variantClassNames:{error:{true:'_r47o0w2-3-10-4'},disabled:{true:'_r47o0w3-3-10-4'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-10-4']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-10-4';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-11-0',variantClassNames:{error:{true:'_r47o0w2-3-11-0'},disabled:{true:'_r47o0w3-3-11-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-11-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-0';"],
   "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/spin-button-group/hooks/useValueOverflow.js

@@ -95,15 +95,8 @@ function useValueOverflow(children, valueOverflow, onTrailingOverflow, onTrailin
   const triggerRefs = useRef([]);
   function linkRefAndRemember(child, index, handler) {
     spinButtonRefs.current[index] = handler;
-    const { ref } = child;
-    if (ref === void 0 || ref === null) {
-      return;
-    }
-    if (typeof ref === "function") {
-      ref(handler);
-    } else {
-      ref.current = handler;
-    }
+    const { ref } = isValidElement(child) ? child.props : {};
+    ref?.(handler);
   }
   const clonedChildren = useMemo(
     () => Children.map(children, (child, index) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.tsx"],
-  "sourcesContent": ["import {\n  useMemo,\n  useRef,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../../number-spin-button/constants.js';\nimport { isNumberSpinButton } from '../../number-spin-button/NumberSpinButton.js';\nimport {\n  NumberSpinButtonProps,\n  NumberSpinButtonRef,\n} from '../../number-spin-button/types.js';\nimport { isTextSpinButton } from '../../text-spin-button/TextSpinButton.js';\nimport {\n  TextSpinButtonProps,\n  TextSpinButtonRef,\n} from '../../text-spin-button/types.js';\nimport { isSpinButtonGroupSeparator } from '../SpinButtonGroupSeparator.js';\nimport type {\n  ChildWithRef,\n  SpinButtonGroupSeparatorProps,\n  SpinButtonHandler,\n} from '../types.js';\n\n/**\n * Handles number spin-button overflow and auto-advance behavior within a group.\n * Applies impossible/complete value focus shifts and forwards trailing overflow when no next target exists.\n */\nfunction handleValueOverflow({\n  candidate,\n  event,\n  index,\n  maxValue,\n  valueOverflow,\n  spinButtonRefs,\n  onTrailingOverflow,\n  onTrailingEdge,\n}: {\n  candidate: string;\n  event: InputEvent;\n  index: number;\n  maxValue: number;\n  valueOverflow: boolean;\n  spinButtonRefs: { current: SpinButtonHandler[] };\n  onTrailingOverflow?: (overflowChar: string) => void;\n  onTrailingEdge?: () => void;\n}) {\n  // Search for the next configured spinbutton within the group.\n  const nextSpinButton = spinButtonRefs.current.find(\n    (handler, i) => handler && i > index,\n  );\n\n  if (!valueOverflow || candidate === '') {\n    return;\n  }\n\n  // Shared derived values used across all cases below.\n  const currentHandler = spinButtonRefs.current[index] as\n    | NumberSpinButtonRef\n    | undefined;\n  if (!currentHandler) {\n    return;\n  }\n\n  const currentText = currentHandler?.element?.current?.textContent ?? '';\n  const sel = currentHandler?.getSelection();\n  const maxNrOfDigits = maxValue.toString().length;\n  const overflowChar = candidate.substring(candidate.length - 1);\n  const overflowDigit = parseInt(overflowChar);\n  const isNumericOverflow = Number.isInteger(overflowDigit);\n  const isCandidateNumeric = /^\\d+$/.test(candidate);\n  const candidateValue = parseInt(candidate, 10);\n\n  const hasNextInGroup = nextSpinButton !== undefined;\n  const canAdvanceOutOfGroup =\n    nextSpinButton === undefined && onTrailingEdge !== undefined;\n  const isReplacingWholeValue =\n    sel !== undefined && sel.start === 0 && sel.end === currentText.length;\n\n  // Auto-advance: impossible first digit.\n  // Keep the digit in current and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    maxNrOfDigits >= 2 &&\n    candidate.length === 1 &&\n    candidateValue > Math.floor(maxValue / 10) &&\n    (currentText === '' || isReplacingWholeValue) &&\n    (hasNextInGroup || canAdvanceOutOfGroup)\n  ) {\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n\n    if (hasNextInGroup) {\n      nextSpinButton.element.current?.focus();\n    } else {\n      onTrailingEdge?.();\n    }\n    return;\n  }\n\n  // Auto-advance: complete value.\n  // Commit current value and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue <= maxValue\n  ) {\n    const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== undefined;\n\n    if (hasNextInGroup || hasCrossGroupEdge) {\n      // Commit the complete value manually so we can preventDefault.\n      currentHandler?.applyText(candidate, true);\n      event.preventDefault();\n      if (hasNextInGroup) {\n        nextSpinButton.element.current?.focus();\n      } else {\n        onTrailingEdge?.();\n      }\n      return;\n    }\n\n    // Last spinbutton with no advance target: commit and select all so the\n    // field remains interactive \u2014 the next keystroke replaces the value.\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n    currentHandler.selectAll();\n    return;\n  }\n\n  // Auto-advance: value overflow \u2014 candidate fills max digits but exceeds maxValue.\n  // Forward the overflow char to the next spinbutton without committing the invalid candidate.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue > maxValue &&\n    hasNextInGroup\n  ) {\n    event.preventDefault();\n    if (nextSpinButton.type === 'number') {\n      nextSpinButton.applyText(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n      nextSpinButton.setSelection({ start: 0, end: 0, rtl: true });\n    } else {\n      nextSpinButton.searchValue(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n    }\n    return;\n  }\n\n  if (!hasNextInGroup && onTrailingOverflow) {\n    // No next spin button in this group - check if overflow would\n    // occur and forward the overflow character to the external handler.\n    if (!isNumericOverflow || !isCandidateNumeric) {\n      return;\n    }\n    // Nothing to do if the candidate value fits within the current spin button.\n    if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {\n      return;\n    }\n    event.preventDefault();\n    onTrailingOverflow(overflowChar);\n  }\n}\n\n/**\n * Hook to provide ootb value overflow behavior for spinbuttons within the group.\n * To achieve this, the provided children needs to be cloned to get access to the imperative handlers.\n * In addition to the spin button handlers, it provides an array of trigger refs.\n */\nexport function useValueOverflow(\n  children: ReactNode,\n  valueOverflow: boolean,\n  onTrailingOverflow?: (overflowChar: string) => void,\n  onTrailingEdge?: () => void,\n) {\n  const spinButtonRefs = useRef<SpinButtonHandler[]>([]);\n  const triggerRefs = useRef<string[]>([]);\n\n  // Extract, store and link potential external ref to the current ref.\n  function linkRefAndRemember<T extends SpinButtonHandler>(\n    child: ReactNode,\n    index: number,\n    handler: T,\n  ) {\n    // Remember component handler for ffu.\n    spinButtonRefs.current[index] = handler;\n    const { ref } = child as ChildWithRef<T>;\n\n    // Nothing else to do if no external ref was passed.\n    if (ref === undefined || ref === null) {\n      return;\n    }\n\n    // Execute callback ref or forward handler to external ref.\n    if (typeof ref === 'function') {\n      ref(handler);\n    } else {\n      ref.current = handler;\n    }\n  }\n\n  // Cloned children with extended ootb functionality\n  const clonedChildren = useMemo(\n    () =>\n      Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        if (isNumberSpinButton(child)) {\n          return cloneElement<\n            NumberSpinButtonProps & {\n              ref?: (handler: NumberSpinButtonRef) => void;\n            }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: NumberSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n              onBeforeInput: (candidate, event) => {\n                const {\n                  maxValue = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n                  onBeforeInput,\n                } = child.props as NumberSpinButtonProps;\n\n                // Call an external handler if one is set, exit early if necessary.\n                onBeforeInput?.(candidate, event);\n                if (event.defaultPrevented) {\n                  return;\n                }\n\n                handleValueOverflow({\n                  candidate,\n                  event,\n                  index,\n                  maxValue,\n                  valueOverflow,\n                  spinButtonRefs,\n                  onTrailingOverflow,\n                  onTrailingEdge,\n                });\n              },\n            },\n            children,\n          );\n        } else if (isTextSpinButton(child)) {\n          return cloneElement<\n            TextSpinButtonProps & { ref?: (handler: TextSpinButtonRef) => void }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: TextSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n            },\n            children,\n          );\n        } else if (isSpinButtonGroupSeparator(child)) {\n          // Remember the trigger key for the current child index\n          triggerRefs.current[index] = (\n            child.props as SpinButtonGroupSeparatorProps\n          ).trigger;\n          return child;\n        }\n\n        return child;\n      }),\n    [children, valueOverflow, onTrailingOverflow, onTrailingEdge],\n  );\n\n  return {\n    clonedChildren,\n    spinButtonRefs,\n    triggerRefs,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useMemo,\n  useRef,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../../number-spin-button/constants.js';\nimport { isNumberSpinButton } from '../../number-spin-button/NumberSpinButton.js';\nimport {\n  NumberSpinButtonProps,\n  NumberSpinButtonRef,\n} from '../../number-spin-button/types.js';\nimport { isTextSpinButton } from '../../text-spin-button/TextSpinButton.js';\nimport {\n  TextSpinButtonProps,\n  TextSpinButtonRef,\n} from '../../text-spin-button/types.js';\nimport { isSpinButtonGroupSeparator } from '../SpinButtonGroupSeparator.js';\nimport type {\n  SpinButtonGroupSeparatorProps,\n  SpinButtonHandler,\n} from '../types.js';\n\n/**\n * Handles number spin-button overflow and auto-advance behavior within a group.\n * Applies impossible/complete value focus shifts and forwards trailing overflow when no next target exists.\n */\nfunction handleValueOverflow({\n  candidate,\n  event,\n  index,\n  maxValue,\n  valueOverflow,\n  spinButtonRefs,\n  onTrailingOverflow,\n  onTrailingEdge,\n}: {\n  candidate: string;\n  event: InputEvent;\n  index: number;\n  maxValue: number;\n  valueOverflow: boolean;\n  spinButtonRefs: { current: SpinButtonHandler[] };\n  onTrailingOverflow?: (overflowChar: string) => void;\n  onTrailingEdge?: () => void;\n}) {\n  // Search for the next configured spinbutton within the group.\n  const nextSpinButton = spinButtonRefs.current.find(\n    (handler, i) => handler && i > index,\n  );\n\n  if (!valueOverflow || candidate === '') {\n    return;\n  }\n\n  // Shared derived values used across all cases below.\n  const currentHandler = spinButtonRefs.current[index] as\n    | NumberSpinButtonRef\n    | undefined;\n  if (!currentHandler) {\n    return;\n  }\n\n  const currentText = currentHandler?.element?.current?.textContent ?? '';\n  const sel = currentHandler?.getSelection();\n  const maxNrOfDigits = maxValue.toString().length;\n  const overflowChar = candidate.substring(candidate.length - 1);\n  const overflowDigit = parseInt(overflowChar);\n  const isNumericOverflow = Number.isInteger(overflowDigit);\n  const isCandidateNumeric = /^\\d+$/.test(candidate);\n  const candidateValue = parseInt(candidate, 10);\n\n  const hasNextInGroup = nextSpinButton !== undefined;\n  const canAdvanceOutOfGroup =\n    nextSpinButton === undefined && onTrailingEdge !== undefined;\n  const isReplacingWholeValue =\n    sel !== undefined && sel.start === 0 && sel.end === currentText.length;\n\n  // Auto-advance: impossible first digit.\n  // Keep the digit in current and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    maxNrOfDigits >= 2 &&\n    candidate.length === 1 &&\n    candidateValue > Math.floor(maxValue / 10) &&\n    (currentText === '' || isReplacingWholeValue) &&\n    (hasNextInGroup || canAdvanceOutOfGroup)\n  ) {\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n\n    if (hasNextInGroup) {\n      nextSpinButton.element.current?.focus();\n    } else {\n      onTrailingEdge?.();\n    }\n    return;\n  }\n\n  // Auto-advance: complete value.\n  // Commit current value and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue <= maxValue\n  ) {\n    const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== undefined;\n\n    if (hasNextInGroup || hasCrossGroupEdge) {\n      // Commit the complete value manually so we can preventDefault.\n      currentHandler?.applyText(candidate, true);\n      event.preventDefault();\n      if (hasNextInGroup) {\n        nextSpinButton.element.current?.focus();\n      } else {\n        onTrailingEdge?.();\n      }\n      return;\n    }\n\n    // Last spinbutton with no advance target: commit and select all so the\n    // field remains interactive \u2014 the next keystroke replaces the value.\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n    currentHandler.selectAll();\n    return;\n  }\n\n  // Auto-advance: value overflow \u2014 candidate fills max digits but exceeds maxValue.\n  // Forward the overflow char to the next spinbutton without committing the invalid candidate.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue > maxValue &&\n    hasNextInGroup\n  ) {\n    event.preventDefault();\n    if (nextSpinButton.type === 'number') {\n      nextSpinButton.applyText(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n      nextSpinButton.setSelection({ start: 0, end: 0, rtl: true });\n    } else {\n      nextSpinButton.searchValue(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n    }\n    return;\n  }\n\n  if (!hasNextInGroup && onTrailingOverflow) {\n    // No next spin button in this group - check if overflow would\n    // occur and forward the overflow character to the external handler.\n    if (!isNumericOverflow || !isCandidateNumeric) {\n      return;\n    }\n    // Nothing to do if the candidate value fits within the current spin button.\n    if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {\n      return;\n    }\n    event.preventDefault();\n    onTrailingOverflow(overflowChar);\n  }\n}\n\n/**\n * Hook to provide ootb value overflow behavior for spinbuttons within the group.\n * To achieve this, the provided children needs to be cloned to get access to the imperative handlers.\n * In addition to the spin button handlers, it provides an array of trigger refs.\n */\nexport function useValueOverflow(\n  children: ReactNode,\n  valueOverflow: boolean,\n  onTrailingOverflow?: (overflowChar: string) => void,\n  onTrailingEdge?: () => void,\n) {\n  const spinButtonRefs = useRef<SpinButtonHandler[]>([]);\n  const triggerRefs = useRef<string[]>([]);\n\n  function linkRefAndRemember<T extends SpinButtonHandler>(\n    child: ReactNode,\n    index: number,\n    handler: T,\n  ) {\n    spinButtonRefs.current[index] = handler;\n    const { ref } = (isValidElement(child) ? child.props : {}) as {\n      ref?: (h: T) => void;\n    };\n    ref?.(handler);\n  }\n\n  // Cloned children with extended ootb functionality\n  const clonedChildren = useMemo(\n    () =>\n      Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        if (isNumberSpinButton(child)) {\n          return cloneElement<\n            NumberSpinButtonProps & {\n              ref?: (handler: NumberSpinButtonRef) => void;\n            }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: NumberSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n              onBeforeInput: (candidate, event) => {\n                const {\n                  maxValue = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n                  onBeforeInput,\n                } = child.props as NumberSpinButtonProps;\n\n                // Call an external handler if one is set, exit early if necessary.\n                onBeforeInput?.(candidate, event);\n                if (event.defaultPrevented) {\n                  return;\n                }\n\n                handleValueOverflow({\n                  candidate,\n                  event,\n                  index,\n                  maxValue,\n                  valueOverflow,\n                  spinButtonRefs,\n                  onTrailingOverflow,\n                  onTrailingEdge,\n                });\n              },\n            },\n            children,\n          );\n        } else if (isTextSpinButton(child)) {\n          return cloneElement<\n            TextSpinButtonProps & { ref?: (handler: TextSpinButtonRef) => void }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: TextSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n            },\n            children,\n          );\n        } else if (isSpinButtonGroupSeparator(child)) {\n          // Remember the trigger key for the current child index\n          triggerRefs.current[index] = (\n            child.props as SpinButtonGroupSeparatorProps\n          ).trigger;\n          return child;\n        }\n\n        return child;\n      }),\n    [children, valueOverflow, onTrailingOverflow, onTrailingEdge],\n  );\n\n  return {\n    clonedChildren,\n    spinButtonRefs,\n    triggerRefs,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.css

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

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-10-4", variantClassNames: { selected: { true: "_1tkc5xfc-3-10-4", false: "_1tkc5xfd-3-10-4" }, readOnly: { true: "_1tkc5xfe-3-10-4" }, hasError: { true: "_1tkc5xff-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-10-4"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xf1-3-10-4" }, readOnly: { true: "_1tkc5xf2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xf4-3-10-4", false: "_1tkc5xf5-3-10-4" }, required: { true: "_1tkc5xf6-3-10-4" }, readOnly: { true: "_1tkc5xf7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-10-4";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xfi-3-10-4", false: "_1tkc5xfj-3-10-4" }, hasError: { true: "_1tkc5xfk-3-10-4", false: "_1tkc5xfl-3-10-4" }, color: { primary: "_1tkc5xfm-3-10-4", neutral: "_1tkc5xfn-3-10-4" }, isFocusVisible: { true: "_1tkc5xfo-3-10-4", false: "_1tkc5xfp-3-10-4" }, readOnly: { true: "_1tkc5xfq-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-10-4"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-10-4"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-10-4"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-10-4"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-10-4"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-0", false: "_1tkc5xfd-3-11-0" }, readOnly: { true: "_1tkc5xfe-3-11-0" }, hasError: { true: "_1tkc5xff-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-0"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-0" }, readOnly: { true: "_1tkc5xf2-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-0", false: "_1tkc5xf5-3-11-0" }, required: { true: "_1tkc5xf6-3-11-0" }, readOnly: { true: "_1tkc5xf7-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-11-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-0", false: "_1tkc5xfj-3-11-0" }, hasError: { true: "_1tkc5xfk-3-11-0", false: "_1tkc5xfl-3-11-0" }, color: { primary: "_1tkc5xfm-3-11-0", neutral: "_1tkc5xfn-3-11-0" }, isFocusVisible: { true: "_1tkc5xfo-3-11-0", false: "_1tkc5xfp-3-11-0" }, readOnly: { true: "_1tkc5xfq-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-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 '../../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-10-4',variantClassNames:{selected:{true:'_1tkc5xfc-3-10-4',false:'_1tkc5xfd-3-10-4'},readOnly:{true:'_1tkc5xfe-3-10-4'},hasError:{true:'_1tkc5xff-3-10-4'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-10-4']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xf1-3-10-4'},readOnly:{true:'_1tkc5xf2-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xf4-3-10-4',false:'_1tkc5xf5-3-10-4'},required:{true:'_1tkc5xf6-3-10-4'},readOnly:{true:'_1tkc5xf7-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-10-4';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xfi-3-10-4',false:'_1tkc5xfj-3-10-4'},hasError:{true:'_1tkc5xfk-3-10-4',false:'_1tkc5xfl-3-10-4'},color:{primary:'_1tkc5xfm-3-10-4',neutral:'_1tkc5xfn-3-10-4'},isFocusVisible:{true:'_1tkc5xfo-3-10-4',false:'_1tkc5xfp-3-10-4'},readOnly:{true:'_1tkc5xfq-3-10-4'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-10-4'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-10-4'],[{color:'neutral',disabled:true},'_1tkc5xft-3-10-4'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-10-4'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-10-4']]});"],
+  "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-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-0',false:'_1tkc5xfd-3-11-0'},readOnly:{true:'_1tkc5xfe-3-11-0'},hasError:{true:'_1tkc5xff-3-11-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-0'},readOnly:{true:'_1tkc5xf2-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-0',false:'_1tkc5xf5-3-11-0'},required:{true:'_1tkc5xf6-3-11-0'},readOnly:{true:'_1tkc5xf7-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-0',false:'_1tkc5xfj-3-11-0'},hasError:{true:'_1tkc5xfk-3-11-0',false:'_1tkc5xfl-3-11-0'},color:{primary:'_1tkc5xfm-3-11-0',neutral:'_1tkc5xfn-3-11-0'},isFocusVisible:{true:'_1tkc5xfo-3-11-0',false:'_1tkc5xfp-3-11-0'},readOnly:{true:'_1tkc5xfq-3-11-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-0']]});"],
   "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": []
 }

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

@@ -1,5 +1,5 @@
-._44rwcl2-3-10-4 {
-  --_44rwcl0-3-10-4: 0px;
+._44rwcl2-3-11-0 {
+  --_44rwcl0-3-11-0: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl2-3-10-4:focus-within {
-  --_44rwcl0-3-10-4: -2px;
+._44rwcl2-3-11-0:focus-within {
+  --_44rwcl0-3-11-0: -2px;
 }
-._44rwcl2-3-10-4::-webkit-resizer {
+._44rwcl2-3-11-0::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-10-4 {
+._44rwcl3-3-11-0 {
   width: fit-content;
 }
-._44rwcl4-3-10-4 {
+._44rwcl4-3-11-0 {
   resize: none;
 }
-._44rwcl5-3-10-4 {
+._44rwcl5-3-11-0 {
   resize: both;
 }
-._44rwcl6-3-10-4 {
+._44rwcl6-3-11-0 {
   resize: horizontal;
 }
-._44rwcl7-3-10-4 {
+._44rwcl7-3-11-0 {
   resize: vertical;
 }
-._44rwcl8-3-10-4 {
+._44rwcl8-3-11-0 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -51,138 +51,138 @@
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  box-shadow: var(--_44rwcl1-3-10-4);
+  box-shadow: var(--_44rwcl1-3-11-0);
 }
-._44rwcl8-3-10-4::placeholder {
+._44rwcl8-3-11-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-10-4:hover {
+._44rwcl8-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-10-4:active {
+._44rwcl8-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._44rwcl8-3-10-4 {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-11-0 ._44rwcl8-3-11-0 {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-4 ._44rwcl8-3-10-4:hover {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-11-0 ._44rwcl8-3-11-0:hover {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-4 ._44rwcl8-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-11-0 ._44rwcl8-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcl9-3-10-4 {
+._44rwcl9-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-10-4::placeholder {
+._44rwcl9-3-11-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-10-4:hover {
+._44rwcl9-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-10-4:active {
+._44rwcl9-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-4 ._44rwcl9-3-10-4, ._1jgl8s50-3-10-4 ._44rwcl9-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcl9-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-0 ._44rwcl9-3-11-0, ._1jgl8s50-3-11-0 ._44rwcl9-3-11-0:hover, ._1jgl8s50-3-11-0 ._44rwcl9-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcla-3-10-4 {
+._44rwcla-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-10-4:hover {
+._44rwcla-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-10-4:active {
+._44rwcla-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-4 ._44rwcla-3-10-4, ._1jgl8s50-3-10-4 ._44rwcla-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcla-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-0 ._44rwcla-3-11-0, ._1jgl8s50-3-11-0 ._44rwcla-3-11-0:hover, ._1jgl8s50-3-11-0 ._44rwcla-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclb-3-10-4 {
+._44rwclb-3-11-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-10-4::placeholder {
+._44rwclb-3-11-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-10-4:hover {
+._44rwclb-3-11-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-10-4:active {
+._44rwclb-3-11-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-10-4 ._44rwclb-3-10-4 {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-11-0 ._44rwclb-3-11-0 {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-4 ._44rwclb-3-10-4:hover {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-11-0 ._44rwclb-3-11-0:hover {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-10-4 ._44rwclb-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-11-0 ._44rwclb-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclc-3-10-4 {
+._44rwclc-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-10-4::placeholder {
+._44rwclc-3-11-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-10-4:hover {
+._44rwclc-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-10-4:active {
+._44rwclc-3-11-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-4 ._44rwclc-3-10-4, ._1jgl8s50-3-10-4 ._44rwclc-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwclc-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-0 ._44rwclc-3-11-0, ._1jgl8s50-3-11-0 ._44rwclc-3-11-0:hover, ._1jgl8s50-3-11-0 ._44rwclc-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcld-3-10-4 {
+._44rwcld-3-11-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-10-4:hover {
+._44rwcld-3-11-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-10-4:active {
+._44rwcld-3-11-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-10-4 ._44rwcld-3-10-4, ._1jgl8s50-3-10-4 ._44rwcld-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcld-3-10-4:active {
-  --_44rwcl1-3-10-4: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-0 ._44rwcld-3-11-0, ._1jgl8s50-3-11-0 ._44rwcld-3-11-0:hover, ._1jgl8s50-3-11-0 ._44rwcld-3-11-0:active {
+  --_44rwcl1-3-11-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcle-3-10-4 {
+._44rwcle-3-11-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-10-4)) translateY(var(--_44rwcl0-3-10-4));
+  transform: translateX(var(--_44rwcl0-3-11-0)) translateY(var(--_44rwcl0-3-11-0));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-10-4 {
+._44rwclf-3-11-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-10-4 {
+._44rwclg-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-10-4 {
+._44rwcli-3-11-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-10-4 {
+  ._44rwcle-3-11-0 {
     display: none;
   }
 }

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

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl2-3-10-4", variantClassNames: { contentWidth: { true: "_44rwcl3-3-10-4" }, resize: { none: "_44rwcl4-3-10-4", both: "_44rwcl5-3-10-4", horizontal: "_44rwcl6-3-10-4", vertical: "_44rwcl7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-10-4", variantClassNames: { error: { true: "_44rwclf-3-10-4" }, disabled: { true: "_44rwclg-3-10-4" }, readOnly: { true: "_44rwclh-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-10-4"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl8-3-10-4", variantClassNames: { disabled: { true: "_44rwcl9-3-10-4" }, readOnly: { true: "_44rwcla-3-10-4" }, error: { true: "_44rwclb-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-10-4"], [{ readOnly: true, error: true }, "_44rwcld-3-10-4"]] });
+var container = _7a468({ defaultClassName: "_44rwcl2-3-11-0", variantClassNames: { contentWidth: { true: "_44rwcl3-3-11-0" }, resize: { none: "_44rwcl4-3-11-0", both: "_44rwcl5-3-11-0", horizontal: "_44rwcl6-3-11-0", vertical: "_44rwcl7-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-11-0", variantClassNames: { error: { true: "_44rwclf-3-11-0" }, disabled: { true: "_44rwclg-3-11-0" }, readOnly: { true: "_44rwclh-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-11-0"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl8-3-11-0", variantClassNames: { disabled: { true: "_44rwcl9-3-11-0" }, readOnly: { true: "_44rwcla-3-11-0" }, error: { true: "_44rwclb-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-11-0"], [{ readOnly: true, error: true }, "_44rwcld-3-11-0"]] });
 export {
   container,
   resizeIcon,