@dynatrace/strato-components 3.10.1 → 3.11.0

package/forms/select/Select.d.ts

@@ -150,7 +150,7 @@ export type SelectOnChangeValue<OptionValue, Multiple extends boolean> = Multipl
  * Accepted properties for Select
  * @public
  */
-export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
+export type SelectFormsProps<OptionValue, Multiple extends boolean> = SelectBaseProps<OptionValue, Multiple> & FormControlProps<Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>, (value: SelectOnChangeValue<OptionValue, Multiple>) => void, HTMLInputElement> & FormControlStateProps & DOMProps & StylingProps & DataTestId & BehaviorTrackingProps;
 /**
  * The `Select` component allows you to choose one or multiple
  * options from a collapsed dropdown with options.

package/forms/select/Select.js

@@ -176,7 +176,7 @@ function SelectFwd(props, forwardedRef) {
     propReadOnly,
     controlState
   });
-  const { onBlur: validationOnBlur } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+  (0, import_useFormFieldValidation.useFormFieldValidation)(
     hiddenSelectRef,
     { required, value: (0, import_use_select_options.safeStringify)(propsValue) },
     void 0,
@@ -193,13 +193,13 @@ function SelectFwd(props, forwardedRef) {
         queueMicrotask(() => {
           onOpenChange?.(newState);
         });
-        if (state === true && newState === false) {
+        if (state === true && newState === false && !controlState) {
           queueMicrotask(() => {
             messagesContextDispatch?.({
               type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
               payload: { isTouched: true }
             });
-            hiddenSelectRef.current?.reportValidity();
+            hiddenSelectRef.current?.checkValidity();
             emitValidationState(
               (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "blur")
             );
@@ -335,7 +335,7 @@ function SelectFwd(props, forwardedRef) {
         type: import_select_menu_state_reducer.SelectActions.CLOSE
       }),
       validate: () => {
-        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+        queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
@@ -345,7 +345,7 @@ function SelectFwd(props, forwardedRef) {
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
       validateAsync: async () => {
-        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+        queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
@@ -369,15 +369,17 @@ function SelectFwd(props, forwardedRef) {
     [menuOpen, dispatch]
   );
   const onBlurHandler = (event) => {
-    if (
-      // The relatedTarget is null when the focus leaves the browser and we want to still trigger the onBlur in this case.
-      !event.relatedTarget || event.relatedTarget !== hiddenTrigger && event.relatedTarget !== clearSelectionRef.current && event.relatedTarget !== filterRef.current?.inputRef
-    ) {
-      if (!menuOpen && isFocusWithin) {
-        setIsFocusWithin(false);
-        validationOnBlur();
-        onBlur?.(event);
-      }
+    const relatedTarget = event.relatedTarget;
+    const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || relatedTarget === filterRef.current?.inputRef);
+    if (!movingToInternal && isFocusWithin) {
+      setIsFocusWithin(false);
+      hiddenSelectRef.current?.checkValidity();
+      messagesContextDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: true }
+      });
+      emitValidationState((0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "blur"));
+      onBlur?.(event);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectMenuContext.SelectMenuContext.Provider, { value: contextMemo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/forms/select/components/HiddenSelect.js

@@ -65,6 +65,9 @@ const HiddenSelect = (0, import_react.forwardRef)(
       {},
       id
     );
+    const handleInvalid = controlState ? (event) => {
+      event.preventDefault();
+    } : onInvalid;
     const value = (0, import_react.useMemo)(() => {
       if (multiple) {
         return selectedValuesArray;
@@ -85,7 +88,8 @@ const HiddenSelect = (0, import_react.forwardRef)(
         value: value && value.length !== 0 ? value : void 0,
         id,
         onChange: () => void 0,
-        ...controlState ? {} : { ...ariaProps, onBlur, onChange, onInvalid },
+        onInvalid: handleInvalid,
+        ...controlState ? {} : { ...ariaProps, onBlur, onChange },
         children: selectedValuesArray.map((val, key) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: `${val}` }, `${key}-${val}`);
         })

package/forms/select/components/MenuList.js

@@ -107,7 +107,11 @@ function MenuList(props) {
           style: {
             height: optionVirtualizer.getTotalSize(),
             display: "grid",
-            gridTemplateRows: optionVirtualizer.measurementsCache.map((el) => `${el.size}px`).join(" ")
+            // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
+            gridTemplateRows: Array.from(
+              optionVirtualizer.measurementsCache,
+              (el) => `${el?.size ?? 32}px`
+            ).join(" ")
           },
           className: styles.selectVirtualizationWrapper,
           children: optionVirtualizer.getVirtualItems().map((virtualRow) => {

package/forms/select/styles/Select.css

@@ -1,89 +1,89 @@
-._dlenfc0-3-10-1._dlenfc0-3-10-1 {
+._dlenfc0-3-11-0._dlenfc0-3-11-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-10-1._dlenfc1-3-10-1 {
+._dlenfc1-3-11-0._dlenfc1-3-11-0 {
   min-width: unset;
 }
-._dlenfc3-3-10-1 {
+._dlenfc3-3-11-0 {
   width: 100%;
 }
-._dlenfc4-3-10-1 {
+._dlenfc4-3-11-0 {
   width: auto;
 }
-._dlenfc5-3-10-1 > span {
+._dlenfc5-3-11-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-10-1 {
+._dlenfc6-3-11-0 {
   display: flex;
 }
-._dlenfc7-3-10-1 {
+._dlenfc7-3-11-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-10-1 {
+._dlenfc8-3-11-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-10-1 {
+._dlenfca-3-11-0 {
   width: auto;
 }
-._dlenfcc-3-10-1 {
+._dlenfcc-3-11-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-10-1) ._dlenfcc-3-10-1 {
-  --_bx32h3-3-10-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-11-0) ._dlenfcc-3-11-0 {
+  --_bx32h3-3-11-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-10-1 {
+._dlenfcd-3-11-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-10-1 ._dlenfce-3-10-1, ._1jgl8s50-3-10-1 ._dlenfce-3-10-1:hover, ._1jgl8s50-3-10-1 ._dlenfce-3-10-1:active {
-  --_bx32h3-3-10-1: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-10-1: 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 ._dlenfce-3-11-0, ._1jgl8s50-3-11-0 ._dlenfce-3-11-0:hover, ._1jgl8s50-3-11-0 ._dlenfce-3-11-0:active {
+  --_bx32h3-3-11-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-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);
 }
-._dlenfcf-3-10-1 {
+._dlenfcf-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-10-1 {
+._dlenfcg-3-11-0 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-10-1 {
+._dlenfch-3-11-0 {
   overflow: auto;
 }
-._dlenfci-3-10-1 {
+._dlenfci-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-10-1 {
+._dlenfcj-3-11-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-10-1 ._dlenfcl-3-10-1 {
+._dlenfck-3-11-0 ._dlenfcl-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-10-1 {
+._dlenfcm-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-10-1.strato-select-divider {
+._dlenfcn-3-11-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-10-1 {
+._dlenfco-3-11-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-10-1 {
+._dlenfcp-3-11-0 {
   min-width: 128px;
 }
-._dlenfcq-3-10-1 {
+._dlenfcq-3-11-0 {
   display: inline;
 }
-._dlenfcq-3-10-1 + ._dlenfcq-3-10-1:before {
+._dlenfcq-3-11-0 + ._dlenfcq-3-11-0:before {
   content: ", ";
 }
-._dlenfcr-3-10-1 {
+._dlenfcr-3-11-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -93,23 +93,23 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcr-3-10-1:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-11-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-10-1.strato-select-option--selected {
+._dlenfcr-3-11-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-10-1.strato-select-option--disabled {
+._dlenfcr-3-11-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-10-1.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-11-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-10-1.strato-select-option--selected:hover {
+._dlenfcr-3-11-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-10-1.strato-select-option--selected::before {
+._dlenfcr-3-11-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-10-1:focus {
+._dlenfcs-3-11-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfct-3-10-1 {
+._dlenfct-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -134,14 +134,14 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfct-3-10-1:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-11-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-10-1.strato-select-option--disabled {
+._dlenfct-3-11-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-10-1 {
+._dlenfcu-3-11-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -153,29 +153,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcu-3-10-1 {
+.strato-select-option--disabled ._dlenfcu-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-10-1 {
+._dlenfcv-3-11-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-10-1 {
+._dlenfcw-3-11-0 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-10-1 {
+.strato-select-option--disabled ._dlenfcw-3-11-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-10-1 {
+._dlenfcx-3-11-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcy-3-10-1 {
+._dlenfcy-3-11-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

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

@@ -47,27 +47,27 @@ var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/A
 var import_field_css_ts_vanilla = require("../../../styles/field.css");
 var import_Select_css_ts_vanilla = require("./Select.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearReactSelectZIndex = "_dlenfc5-3-10-1";
-var filter = "_dlenfc1-3-10-1";
-var placeholderColor = "_dlenfcl-3-10-1";
-var select = "_dlenfc0-3-10-1";
-var selectAll = "_dlenfcs-3-10-1";
-var selectGroupHeading = "_dlenfcf-3-10-1";
-var selectMenuDivider = "_dlenfcn-3-10-1";
-var selectMenuListWrapper = "_dlenfch-3-10-1";
-var selectMenuLoadingWrapper = "_dlenfcm-3-10-1";
-var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-10-1", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-10-1" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-10-1";
-var selectNoOptionsMessage = "_dlenfci-3-10-1";
-var selectOptionMulti = "_dlenfct-3-10-1";
-var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-10-1", variantClassNames: { selected: { true: "_dlenfcv-3-10-1" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-10-1";
-var selectOptionPrefix = "_dlenfcx-3-10-1";
-var selectOptionSingle = "_dlenfcr-3-10-1";
-var selectOptionSuffix = "_dlenfcy-3-10-1";
-var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc9-3-10-1", variantClassNames: { fullWidth: { true: "_dlenfca-3-10-1" }, showError: { true: "_dlenfcb-3-10-1" }, readOnly: { true: "_dlenfcc-3-10-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-10-1"], [{ showError: false, readOnly: true }, "_dlenfce-3-10-1"]] });
-var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-10-1", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-10-1" }, readOnly: { true: "_dlenfc8-3-10-1" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-10-1";
-var selectVirtualizationWrapper = "_dlenfcg-3-10-1";
-var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-10-1", variantClassNames: { fullWidth: { true: "_dlenfc3-3-10-1", false: "_dlenfc4-3-10-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-10-1";
+var clearReactSelectZIndex = "_dlenfc5-3-11-0";
+var filter = "_dlenfc1-3-11-0";
+var placeholderColor = "_dlenfcl-3-11-0";
+var select = "_dlenfc0-3-11-0";
+var selectAll = "_dlenfcs-3-11-0";
+var selectGroupHeading = "_dlenfcf-3-11-0";
+var selectMenuDivider = "_dlenfcn-3-11-0";
+var selectMenuListWrapper = "_dlenfch-3-11-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-11-0";
+var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-11-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-11-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-11-0";
+var selectNoOptionsMessage = "_dlenfci-3-11-0";
+var selectOptionMulti = "_dlenfct-3-11-0";
+var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-11-0", variantClassNames: { selected: { true: "_dlenfcv-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-11-0";
+var selectOptionPrefix = "_dlenfcx-3-11-0";
+var selectOptionSingle = "_dlenfcr-3-11-0";
+var selectOptionSuffix = "_dlenfcy-3-11-0";
+var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ 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"]] });
+var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-11-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-11-0" }, readOnly: { true: "_dlenfc8-3-11-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-11-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-11-0";
+var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-11-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-11-0", false: "_dlenfc4-3-11-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-11-0";

package/forms/spin-buttons/SpinButton.css

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

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

@@ -23,5 +23,5 @@ __export(SpinButton_css_exports, {
 module.exports = __toCommonJS(SpinButton_css_exports);
 var import_SpinButton_css_ts_vanilla = require("./SpinButton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-10-1", variantClassNames: { error: { true: "_r47o0w2-3-10-1" }, disabled: { true: "_r47o0w3-3-10-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-10-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-10-1";
+var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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";

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

@@ -111,15 +111,8 @@ function useValueOverflow(children, valueOverflow, onTrailingOverflow, onTrailin
   const triggerRefs = (0, import_react.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 } = (0, import_react.isValidElement)(child) ? child.props : {};
+    ref?.(handler);
   }
   const clonedChildren = (0, import_react.useMemo)(
     () => import_react.Children.map(children, (child, index) => {

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

@@ -1,4 +1,3 @@
-import type { RefObject, ReactNode, RefCallback } from 'react';
 import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
@@ -40,10 +39,6 @@ export type SpinButtonGroupSeparatorProps = {
      */
     trigger: string;
 } & StylingProps & DataTestId & BehaviorTrackingProps;
-/** Typed access to a potential existing child ref object. */
-export type ChildWithRef<T> = ReactNode & {
-    ref: RefCallback<T> | RefObject<T> | undefined;
-};
 /** Supported types of spinbutton handlers within this hook. */
 export type SpinButtonHandler = NumberSpinButtonRef | TextSpinButtonRef;
 //# sourceMappingURL=types.d.ts.map

package/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-10-1 {
+._1tkc5xf0-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-10-1 {
+._1tkc5xf1-3-11-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-10-1 {
+._1tkc5xf2-3-11-0 {
   cursor: default;
 }
-._1tkc5xf3-3-10-1 {
+._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-1 {
+._1tkc5xf4-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-10-1 {
+._1tkc5xf5-3-11-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-10-1:after {
+._1tkc5xf6-3-11-0:after {
   content: "*";
 }
-._1tkc5xf7-3-10-1 {
+._1tkc5xf7-3-11-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-10-1 {
-  --_1tkc5xfa-3-10-1: var(--_bx32h1-3-10-1);
+._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-1 {
-  --_1tkc5xf8-3-10-1: 1;
-  --_1tkc5xf9-3-10-1: 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-1 {
-  --_1tkc5xf8-3-10-1: 0;
-  --_1tkc5xf9-3-10-1: 1;
+._1tkc5xfd-3-11-0 {
+  --_1tkc5xf8-3-11-0: 0;
+  --_1tkc5xf9-3-11-0: 1;
   transform: unset;
 }
-._1tkc5xfe-3-10-1 {
-  --_1tkc5xfa-3-10-1: 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-1 {
-  --_1tkc5xfa-3-10-1: 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-1 > 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-1 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-10-1);
-  color: var(--_1tkc5xfa-3-10-1);
+._1tkc5xfb-3-11-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-11-0);
+  color: var(--_1tkc5xfa-3-11-0);
 }
-._1tkc5xfb-3-10-1 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-10-1);
-  color: var(--_1tkc5xfa-3-10-1);
+._1tkc5xfb-3-11-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-11-0);
+  color: var(--_1tkc5xfa-3-11-0);
 }
-._1tkc5xfh-3-10-1 {
+._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-1);
+  background-color: var(--_bx32h3-3-11-0);
 }
-._1tkc5xfr-3-10-1 {
+._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-1 {
+._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-1 {
+._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-1 {
+._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-1 {
+._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-1 {
+._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-1);
+  background-color: var(--_1tkc5xfa-3-11-0);
 }

package/forms/switch/Switch.sty.js

@@ -28,8 +28,8 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Switch_css_ts_vanilla = require("./Switch.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var switchIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfb-3-10-1", variantClassNames: { selected: { true: "_1tkc5xfc-3-10-1", false: "_1tkc5xfd-3-10-1" }, readOnly: { true: "_1tkc5xfe-3-10-1" }, hasError: { true: "_1tkc5xff-3-10-1" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-10-1"]] });
-var switchLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf0-3-10-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-10-1" }, readOnly: { true: "_1tkc5xf2-3-10-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf3-3-10-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-10-1", false: "_1tkc5xf5-3-10-1" }, required: { true: "_1tkc5xf6-3-10-1" }, readOnly: { true: "_1tkc5xf7-3-10-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-10-1";
-var switchWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfh-3-10-1", variantClassNames: { disabled: { true: "_1tkc5xfi-3-10-1", false: "_1tkc5xfj-3-10-1" }, hasError: { true: "_1tkc5xfk-3-10-1", false: "_1tkc5xfl-3-10-1" }, color: { primary: "_1tkc5xfm-3-10-1", neutral: "_1tkc5xfn-3-10-1" }, isFocusVisible: { true: "_1tkc5xfo-3-10-1", false: "_1tkc5xfp-3-10-1" }, readOnly: { true: "_1tkc5xfq-3-10-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-10-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-10-1"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-10-1"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-10-1"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-10-1"]] });
+var switchIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf0-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-0" }, readOnly: { true: "_1tkc5xf2-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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"]] });