@dynatrace/strato-components 3.7.1 → 3.8.0

package/forms/text-area/TextArea.css

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

package/forms/text-area/TextArea.js

@@ -49,6 +49,8 @@ var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldVal
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 const COMPONENT_NAME = "TextArea";
 const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
@@ -60,6 +62,7 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
   const {
     onChange,
     onBlur,
+    onValidityChange,
     minLength,
     maxLength,
     id: propId,
@@ -93,6 +96,11 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
   const { state: messagesContextState, dispatch: messagesContextDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const containerRef = (0, import_react.useRef)(null);
   const textareaRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, textareaRef.current, "manual")
+  );
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     return {
       element: containerRef.current,
@@ -106,6 +114,20 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, textareaRef.current, "manual")
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        textareaRef.current?.checkValidity();
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, textareaRef.current, "manual")
+        );
       }
     };
   });
@@ -120,7 +142,13 @@ const TextAreaRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
     onBlur: validationOnBlur,
     onInvalid: validationOnInvalid,
     ariaProps
-  } = (0, import_useFormFieldValidation.useFormFieldValidation)(textareaRef, { required, minLength, maxLength });
+  } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+    textareaRef,
+    { required, minLength, maxLength, value: value ?? "" },
+    void 0,
+    void 0,
+    _emitValidationState
+  );
   const handleChange = (event) => {
     const newValue = event.target?.value;
     setValue(newValue);

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-7-1", variantClassNames: { contentWidth: { true: "_44rwcl3-3-7-1" }, resize: { none: "_44rwcl4-3-7-1", both: "_44rwcl5-3-7-1", horizontal: "_44rwcl6-3-7-1", vertical: "_44rwcl7-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcle-3-7-1", variantClassNames: { error: { true: "_44rwclf-3-7-1" }, disabled: { true: "_44rwclg-3-7-1" }, readOnly: { true: "_44rwclh-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-7-1"]] });
-var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl8-3-7-1", variantClassNames: { disabled: { true: "_44rwcl9-3-7-1" }, readOnly: { true: "_44rwcla-3-7-1" }, error: { true: "_44rwclb-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-7-1"], [{ readOnly: true, error: true }, "_44rwcld-3-7-1"]] });
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl2-3-8-0", variantClassNames: { contentWidth: { true: "_44rwcl3-3-8-0" }, resize: { none: "_44rwcl4-3-8-0", both: "_44rwcl5-3-8-0", horizontal: "_44rwcl6-3-8-0", vertical: "_44rwcl7-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcle-3-8-0", variantClassNames: { error: { true: "_44rwclf-3-8-0" }, disabled: { true: "_44rwclg-3-8-0" }, readOnly: { true: "_44rwclh-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-8-0"]] });
+var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl8-3-8-0", variantClassNames: { disabled: { true: "_44rwcl9-3-8-0" }, readOnly: { true: "_44rwcla-3-8-0" }, error: { true: "_44rwclb-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-8-0"], [{ readOnly: true, error: true }, "_44rwcld-3-8-0"]] });

package/forms/text-input/TextInput.d.ts

@@ -28,7 +28,7 @@ export interface TextInputUncontrolledProps {
  * The properties of the TextInput component.
  * @public
  */
-export type TextInputProps = Pick<BaseInputProps, 'autoComplete' | 'placeholder' | 'variant' | 'minLength' | 'maxLength' | 'pattern' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onBlur' | 'role' | 'className' | 'style' | 'data-testid' | 'data-dtrum-mask' | 'data-dtrum-allow'> & FormControlProps<string, (value: string, event: ChangeEvent<HTMLInputElement>) => void> & WithChildren & BehaviorTrackingProps & {
+export type TextInputProps = Pick<BaseInputProps, 'autoComplete' | 'placeholder' | 'variant' | 'minLength' | 'maxLength' | 'pattern' | 'onClick' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onBlur' | 'onValidityChange' | 'role' | 'className' | 'style' | 'data-testid' | 'data-dtrum-mask' | 'data-dtrum-allow'> & FormControlProps<string, (value: string, event: ChangeEvent<HTMLInputElement>) => void> & WithChildren & BehaviorTrackingProps & {
     /**
      * Maps to the native input type. Use this to enhance the semantics
      * of the native input, change default keyboards on mobile or support browser

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

@@ -50,6 +50,7 @@ var import_Text = require("../../typography/text/Text.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 const Item = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const fallbackId = (0, import_useId.useId)();
@@ -78,7 +79,8 @@ const Item = (0, import_react.forwardRef)(
       ariaDisabled,
       selectedValue,
       isReadOnly: isReadOnlyContext,
-      onChange
+      onChange,
+      onValidityChange
     } = (0, import_useToggleButtonGroupContext.useToggleButtonGroupContext)();
     const labelRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
@@ -92,7 +94,13 @@ const Item = (0, import_react.forwardRef)(
       onInvalid: validationOnInvalid,
       onBlur: validationOnBlur,
       ariaProps
-    } = (0, import_useFormFieldValidation.useFormFieldValidation)(inputRef, { isRequired });
+    } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+      inputRef,
+      { isRequired, selectedValue: selectedValue ?? void 0 },
+      void 0,
+      id,
+      onValidityChange
+    );
     (0, import_react.useEffect)(() => {
       messagesContextDispatch?.({
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDFORMCONTROLID,
@@ -116,6 +124,11 @@ const Item = (0, import_react.forwardRef)(
         },
         validate() {
           inputRef.current?.checkValidity();
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          inputRef.current?.checkValidity();
+          return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
         }
       };
     });
@@ -152,8 +165,9 @@ const Item = (0, import_react.forwardRef)(
           onChange?.(value, e);
         }
         validationOnChange?.();
+        onValidityChange?.((0, import_validation_builders.getValidationState)(inputRef.current, "change"));
       },
-      [isReadOnly, value, onChange, validationOnChange]
+      [isReadOnly, value, onChange, validationOnChange, onValidityChange]
     );
     (0, import_react.useEffect)(() => {
       if (checked && labelRef.current) {

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

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(ToggleButtonGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_ToggleButtonGroupContext = require("./contexts/ToggleButtonGroupContext.js");
 var import_Item = require("./Item.js");
@@ -44,12 +45,15 @@ var import_useContainerSize = require("../../core/hooks/useContainerSize.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useSlots = require("../../core/hooks/useSlots.js");
-var import_is_visual_refresh_enabled = require("../../core/utils/is-visual-refresh-enabled.js");
+var import_useVisualRefreshEnabled = require("../../core/hooks/useVisualRefreshEnabled.js");
 var import_Divider = require("../../layouts/divider/Divider.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 const COMPONENT_NAME = "ToggleButtonGroup";
 const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const fallbackName = (0, import_useId.useId)();
@@ -64,6 +68,7 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
     name = fallbackName,
     width = "content",
     onChange,
+    onValidityChange,
     className: consumerClassName,
     style: consumerStyle,
     "aria-disabled": propAriaDisabled,
@@ -71,8 +76,18 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
     "data-dtrum-mask": dataDtrumMask,
     ...remainingProps
   } = props;
+  const intl = (0, import_react_intl.useIntl)();
   const wrapperRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(
+      intl,
+      wrapperRef.current?.querySelector("input"),
+      "manual"
+    )
+  );
   const [isOverflowingLeft, setIsOverflowingLeft] = (0, import_react.useState)(false);
   const [isOverflowingRight, setIsOverflowingRight] = (0, import_react.useState)(false);
   const {
@@ -108,12 +123,31 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
           (checkedInput ?? wrapperRef.current?.querySelector("input"))?.focus();
         },
         validate() {
-          const inputs = wrapperRef.current?.querySelectorAll("input");
-          inputs?.forEach((input) => input?.checkValidity());
+          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) {
@@ -128,7 +162,7 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
         }
       });
     },
-    [messagesContextDispatch]
+    [messagesContextDispatch, emitValidationState]
   );
   const handleChange = (0, import_react.useCallback)(
     (value2, event) => {
@@ -152,7 +186,8 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
       isRequired,
       hasError,
       selectedValue,
-      onChange: handleChange
+      onChange: handleChange,
+      onValidityChange: emitValidationState
     }),
     [
       name,
@@ -162,10 +197,11 @@ const ToggleButtonGroupRoot = (0, import_react.forwardRef)((props, forwardedRef)
       isRequired,
       hasError,
       selectedValue,
-      handleChange
+      handleChange,
+      emitValidationState
     ]
   );
-  const scrollButtonVariant = (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? "default" : "emphasized";
+  const scrollButtonVariant = (0, import_useVisualRefreshEnabled.useVisualRefreshEnabled)() ? "default" : "emphasized";
   const color = hasError && !isDisabledOrAriaDisabled ? "critical" : "neutral";
   const { width: containerWidth } = (0, import_useContainerSize.useContainerSize)(containerRef);
   const updateOverflow = (0, import_react.useCallback)(() => {

package/forms/toggle-button-group/contexts/ToggleButtonGroupContext.d.ts

@@ -1,4 +1,5 @@
 import { type FormEvent, type Context } from 'react';
+import type { ValidationState } from '../../validation/types.js';
 /** @internal */
 export type ToggleButtonGroupContextType = {
     /** The name of the ToggleButtonGroup. */
@@ -20,6 +21,8 @@ export type ToggleButtonGroupContextType = {
     selectedValue?: string | null;
     /** Handler that is called when the value of the group changes. */
     onChange?: (value: string, event?: FormEvent<HTMLElement | SVGElement>) => void;
+    /** Called whenever the group's validation state changes due to a user interaction. */
+    onValidityChange?: (state: ValidationState) => void;
 };
 /**
  * Context to hold the state of the ToggleButtonGroup