@dynatrace/strato-components 3.13.3 → 3.14.1

package/forms/switch/Switch.css

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

package/forms/switch/Switch.js

@@ -128,7 +128,7 @@ const Switch = (0, import_react.forwardRef)(
     ]);
     const formValidityChangeRef = (0, import_react.useRef)(void 0);
     const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
-      (state) => formValidityChangeRef.current?.(state)
+      controlState ? void 0 : (state) => formValidityChangeRef.current?.(state)
     );
     const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
       _emitValidationState,
@@ -183,7 +183,8 @@ const Switch = (0, import_react.forwardRef)(
       { required, value: String(value), isSelected },
       void 0,
       void 0,
-      _emitValidationState
+      _emitValidationState,
+      controlState
     );
     if (value !== void 0 && !onChange && (0, import_is_node_environment.isDev)()) {
       console.log(
@@ -211,7 +212,7 @@ const Switch = (0, import_react.forwardRef)(
       if (!disabled && !readOnly) {
         onChange?.(!isSelected, e);
         setIsSelected(!isSelected);
-        !controlState && validationOnChange();
+        validationOnChange();
       }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -253,9 +254,7 @@ const Switch = (0, import_react.forwardRef)(
                     onChange: handleChange,
                     onBlur: focusProps.onBlur,
                     onFocus: focusProps.onFocus,
-                    onInvalid: (event) => {
-                      !controlState && validationOnInvalid(event);
-                    },
+                    onInvalid: validationOnInvalid,
                     name,
                     form: _form,
                     value: formValue,

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

package/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl2-3-13-3 {
-  --_44rwcl0-3-13-3: 0px;
+._44rwcl2-3-14-1 {
+  --_44rwcl0-3-14-1: 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-13-3:focus-within {
-  --_44rwcl0-3-13-3: -2px;
+._44rwcl2-3-14-1:focus-within {
+  --_44rwcl0-3-14-1: -2px;
 }
-._44rwcl2-3-13-3::-webkit-resizer {
+._44rwcl2-3-14-1::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-13-3 {
+._44rwcl3-3-14-1 {
   width: fit-content;
 }
-._44rwcl4-3-13-3 {
+._44rwcl4-3-14-1 {
   resize: none;
 }
-._44rwcl5-3-13-3 {
+._44rwcl5-3-14-1 {
   resize: both;
 }
-._44rwcl6-3-13-3 {
+._44rwcl6-3-14-1 {
   resize: horizontal;
 }
-._44rwcl7-3-13-3 {
+._44rwcl7-3-14-1 {
   resize: vertical;
 }
-._44rwcl8-3-13-3 {
+._44rwcl8-3-14-1 {
   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-13-3);
+  box-shadow: var(--_44rwcl1-3-14-1);
 }
-._44rwcl8-3-13-3::placeholder {
+._44rwcl8-3-14-1::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-13-3:hover {
+._44rwcl8-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-13-3:active {
+._44rwcl8-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._44rwcl8-3-13-3 {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcl8-3-14-1 {
+  --_44rwcl1-3-14-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);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-13-3 ._44rwcl8-3-13-3:hover {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcl8-3-14-1:hover {
+  --_44rwcl1-3-14-1: 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-13-3 ._44rwcl8-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcl8-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwcl9-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-13-3::placeholder {
+._44rwcl9-3-14-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-13-3:hover {
+._44rwcl9-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-13-3:active {
+._44rwcl9-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-13-3 ._44rwcl9-3-13-3, ._1jgl8s50-3-13-3 ._44rwcl9-3-13-3:hover, ._1jgl8s50-3-13-3 ._44rwcl9-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcl9-3-14-1, ._1jgl8s50-3-14-1 ._44rwcl9-3-14-1:hover, ._1jgl8s50-3-14-1 ._44rwcl9-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwcla-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-13-3:hover {
+._44rwcla-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-13-3:active {
+._44rwcla-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-13-3 ._44rwcla-3-13-3, ._1jgl8s50-3-13-3 ._44rwcla-3-13-3:hover, ._1jgl8s50-3-13-3 ._44rwcla-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcla-3-14-1, ._1jgl8s50-3-14-1 ._44rwcla-3-14-1:hover, ._1jgl8s50-3-14-1 ._44rwcla-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwclb-3-14-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-13-3::placeholder {
+._44rwclb-3-14-1::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-13-3:hover {
+._44rwclb-3-14-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-13-3:active {
+._44rwclb-3-14-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-13-3 ._44rwclb-3-13-3 {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwclb-3-14-1 {
+  --_44rwcl1-3-14-1: 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-13-3 ._44rwclb-3-13-3:hover {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwclb-3-14-1:hover {
+  --_44rwcl1-3-14-1: 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-13-3 ._44rwclb-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwclb-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwclc-3-14-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-13-3::placeholder {
+._44rwclc-3-14-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-13-3:hover {
+._44rwclc-3-14-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-13-3:active {
+._44rwclc-3-14-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-13-3 ._44rwclc-3-13-3, ._1jgl8s50-3-13-3 ._44rwclc-3-13-3:hover, ._1jgl8s50-3-13-3 ._44rwclc-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwclc-3-14-1, ._1jgl8s50-3-14-1 ._44rwclc-3-14-1:hover, ._1jgl8s50-3-14-1 ._44rwclc-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwcld-3-14-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-13-3:hover {
+._44rwcld-3-14-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-13-3:active {
+._44rwcld-3-14-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-13-3 ._44rwcld-3-13-3, ._1jgl8s50-3-13-3 ._44rwcld-3-13-3:hover, ._1jgl8s50-3-13-3 ._44rwcld-3-13-3:active {
-  --_44rwcl1-3-13-3: 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-14-1 ._44rwcld-3-14-1, ._1jgl8s50-3-14-1 ._44rwcld-3-14-1:hover, ._1jgl8s50-3-14-1 ._44rwcld-3-14-1:active {
+  --_44rwcl1-3-14-1: 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-13-3 {
+._44rwcle-3-14-1 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-13-3)) translateY(var(--_44rwcl0-3-13-3));
+  transform: translateX(var(--_44rwcl0-3-14-1)) translateY(var(--_44rwcl0-3-14-1));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-13-3 {
+._44rwclf-3-14-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-13-3 {
+._44rwclg-3-14-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-13-3 {
+._44rwcli-3-14-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-13-3 {
+  ._44rwcle-3-14-1 {
     display: none;
   }
 }

package/forms/text-area/TextArea.js

@@ -113,7 +113,7 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
   const textareaRef = (0, import_react.useRef)(null);
   const formValidityChangeRef = (0, import_react.useRef)(void 0);
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
-    (state) => formValidityChangeRef.current?.(state)
+    controlState ? void 0 : (state) => formValidityChangeRef.current?.(state)
   );
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
@@ -162,7 +162,8 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
     { required, minLength, maxLength, value: value ?? "" },
     void 0,
     void 0,
-    _emitValidationState
+    _emitValidationState,
+    controlState
   );
   const validateFieldForForm = ({
     reveal,
@@ -201,7 +202,7 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
     const newValue = event.target?.value;
     setValue(newValue);
     onChange?.(newValue, event);
-    !controlState && validationOnChange();
+    validationOnChange();
   };
   const mergedAriaDescribedby = [ariaDescribedby, inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const { containerClassName, ...containerProps } = (0, import_useContainerFocus.useContainerFocus)({
@@ -265,7 +266,7 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
                   "aria-disabled": ariaDisabled,
                   placeholder,
                   onChange: handleChange,
-                  onInvalid: (e) => !controlState && validationOnInvalid(e),
+                  onInvalid: validationOnInvalid,
                   onFocus: focusRingOnFocus,
                   onBlur: focusRingOnBlur,
                   ...(0, import_merge_props.mergeProps)(

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

@@ -25,6 +25,6 @@ module.exports = __toCommonJS(TextArea_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_TextArea_css_ts_vanilla = require("./TextArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl2-3-13-3", variantClassNames: { contentWidth: { true: "_44rwcl3-3-13-3" }, resize: { none: "_44rwcl4-3-13-3", both: "_44rwcl5-3-13-3", horizontal: "_44rwcl6-3-13-3", vertical: "_44rwcl7-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcle-3-13-3", variantClassNames: { error: { true: "_44rwclf-3-13-3" }, disabled: { true: "_44rwclg-3-13-3" }, readOnly: { true: "_44rwclh-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-13-3"]] });
-var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl8-3-13-3", variantClassNames: { disabled: { true: "_44rwcl9-3-13-3" }, readOnly: { true: "_44rwcla-3-13-3" }, error: { true: "_44rwclb-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-13-3"], [{ readOnly: true, error: true }, "_44rwcld-3-13-3"]] });
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl2-3-14-1", variantClassNames: { contentWidth: { true: "_44rwcl3-3-14-1" }, resize: { none: "_44rwcl4-3-14-1", both: "_44rwcl5-3-14-1", horizontal: "_44rwcl6-3-14-1", vertical: "_44rwcl7-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcle-3-14-1", variantClassNames: { error: { true: "_44rwclf-3-14-1" }, disabled: { true: "_44rwclg-3-14-1" }, readOnly: { true: "_44rwclh-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-14-1"]] });
+var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl8-3-14-1", variantClassNames: { disabled: { true: "_44rwcl9-3-14-1" }, readOnly: { true: "_44rwcla-3-14-1" }, error: { true: "_44rwclb-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-14-1"], [{ readOnly: true, error: true }, "_44rwcld-3-14-1"]] });

package/forms/toggle-button-group/ToggleButtonGroup.js

@@ -161,59 +161,53 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
     }
   });
   formValidityChangeRef.current = formControl.onValidityChange;
-  (0, import_react.useImperativeHandle)(
-    forwardedRef,
-    () => {
-      const newRef = {
-        element: wrapperRef.current,
-        focus() {
-          const checkedInput = wrapperRef.current?.querySelector(
-            "input:checked"
-          );
-          (checkedInput ?? wrapperRef.current?.querySelector("input"))?.focus();
-        },
-        validate() {
-          wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
-          messagesContextDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: true }
-          });
-          const firstInput = wrapperRef.current?.querySelector(
-            "input"
-          );
-          emitValidationState(
-            (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
-          );
-        },
-        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
-        validateAsync: async () => {
-          wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
-          messagesContextDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: true }
-          });
-          const firstInput = wrapperRef.current?.querySelector(
-            "input"
-          );
-          return emitValidationState(
-            (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
-          );
-        }
-      };
-      if (!wrapperRef.current) {
-        return null;
+  (0, import_react.useImperativeHandle)(forwardedRef, () => {
+    const newRef = {
+      element: wrapperRef.current,
+      focus() {
+        const checkedInput = wrapperRef.current?.querySelector(
+          "input:checked"
+        );
+        (checkedInput ?? wrapperRef.current?.querySelector("input"))?.focus();
+      },
+      validate() {
+        wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const firstInput = wrapperRef.current?.querySelector(
+          "input"
+        );
+        emitValidationState((0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual"));
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const firstInput = wrapperRef.current?.querySelector(
+          "input"
+        );
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
+        );
       }
-      return new Proxy(wrapperRef.current, {
-        get: function(target, property) {
-          if (property in newRef) {
-            return newRef[property];
-          }
-          return target[property];
+    };
+    if (!wrapperRef.current) {
+      return null;
+    }
+    return new Proxy(wrapperRef.current, {
+      get: function(target, property) {
+        if (property in newRef) {
+          return newRef[property];
         }
-      });
-    },
-    [messagesContextDispatch, emitValidationState]
-  );
+        return target[property];
+      }
+    });
+  }, [messagesContextDispatch, emitValidationState]);
   const handleChange = (0, import_react.useCallback)(
     (value2, event) => {
       setSelectedValue?.(value2);