@dynatrace/strato-components 3.7.1 → 3.9.0

package/forms/index.js

@@ -24,6 +24,7 @@ __export(forms_exports, {
   FormFieldMessages: () => import_FormFieldMessages.FormFieldMessages,
   Hint: () => import_Hint.Hint,
   Label: () => import_Label.Label,
+  NativeValidityStateKeys: () => import_types.NativeValidityStateKeys,
   NumberInput: () => import_NumberInput.NumberInput,
   NumberInputV2: () => import_NumberInput2.NumberInput,
   PasswordInput: () => import_PasswordInput.PasswordInput,
@@ -42,10 +43,13 @@ __export(forms_exports, {
   SelectPrefix: () => import_SelectPrefix.SelectPrefix,
   SelectSuffix: () => import_SelectSuffix.SelectSuffix,
   SelectTrigger: () => import_SelectTrigger.SelectTrigger,
+  StratoValidityStateKeys: () => import_types.StratoValidityStateKeys,
   Switch: () => import_Switch.Switch,
   TextArea: () => import_TextArea.TextArea,
   TextInput: () => import_TextInput.TextInput,
   ToggleButtonGroup: () => import_ToggleButtonGroup.ToggleButtonGroup,
+  ValidationError: () => import_types.ValidationError,
+  ValidityStateKey: () => import_types.ValidityStateKey,
   _Calendar: () => import_Calendar.Calendar,
   _DateTimeRangePicker: () => import_DateTimeRangePicker.DateTimeRangePicker,
   _FormFieldContext: () => import_FormFieldContext._FormFieldContext,
@@ -85,6 +89,7 @@ var import_SelectPrefix = require("./select/SelectPrefix.js");
 var import_SelectSuffix = require("./select/SelectSuffix.js");
 var import_SelectTrigger = require("./select/SelectTrigger.js");
 var import_shared_types = require("./shared-types.js");
+var import_types = require("./validation/types.js");
 var import_NumberSpinButton = require("./spin-buttons/number-spin-button/NumberSpinButton.js");
 var import_SpinButtonGroup = require("./spin-buttons/spin-button-group/SpinButtonGroup.js");
 var import_TextSpinButton = require("./spin-buttons/text-spin-button/TextSpinButton.js");

package/forms/number-input/NumberInputBase.js

@@ -40,17 +40,15 @@ var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
-var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
 var styles = __toESM(require("../_base-input/BaseInput.sty.js"));
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
-var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
+var import_useFormControl = require("../forms-core/hooks/useFormControl.js");
 var import_helpers = require("../forms-core/time/helpers.js");
 var import_useAutofillEvent_css = require("../hooks/useAutofillEvent.sty.js");
 var import_useAutofillEvent = require("../hooks/useAutofillEvent.js");
-var import_useInputHint = require("../hooks/useInputHint.js");
 const NumberInputBase = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const intl = (0, import_react_intl.useIntl)();
   const defaultPlaceholder = intl.formatMessage({
@@ -97,13 +95,19 @@ const NumberInputBase = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     required,
     id: contextId,
     ariaDisabled,
-    readOnly: isReadOnly
-  } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
+    readOnly: isReadOnly,
+    inputProps: inputHintAriaProps,
+    hintProps,
+    hint,
+    showError: hasError
+  } = (0, import_useFormControl.useFormControl)({
     propDisabled,
     propRequired,
     propId,
     propAriaDisabled: ariaDisabledProp,
-    propReadOnly
+    propReadOnly,
+    controlState,
+    validationVisibility: "immediate"
   });
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const state = (0, import_numberfield2.useNumberFieldState)({
@@ -178,11 +182,6 @@ const NumberInputBase = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     defaultValue: inputDefaultValue,
     value: inputPropsValue?.toString()
   });
-  const [hasError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
-  const { inputProps: inputHintAriaProps, hintProps } = (0, import_useInputHint.useInputHint)({
-    hint,
-    hasError
-  });
   const { isAutoFilled, onAnimationStart } = (0, import_useAutofillEvent.useAutofillEvent)();
   const handleInputChange = (event) => {
     remainingInputProps?.onChange?.(event);

package/forms/number-input-v2/NumberInput.js

@@ -34,8 +34,13 @@ var import_BaseInput = require("../_base-input/BaseInput.js");
 var import_BaseInputButton = require("../_base-input/BaseInputButton.js");
 var import_BaseInputContent = require("../_base-input/BaseInputContent.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_helpers = require("../forms-core/time/helpers.js");
+var import_types = require("../validation/types.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 const COMPONENT_NAME = "NumberInput";
 const VALID_PATTERN = "^[+\\-]?\\d+(?:[\\.,]\\d+)?(?:[eE][+\\-]?\\d+)?$";
 const VALID_REGEXP = new RegExp(VALID_PATTERN);
@@ -51,6 +56,7 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
   const {
     onChange,
     onKeyDown,
+    onBlur,
     value: propValue,
     defaultValue,
     required,
@@ -64,10 +70,12 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     step,
     stepMultiplier = 1,
     placeholder = defaultPlaceholder,
+    onValidityChange,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
-  const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const { dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
   const errorId = (0, import_useId.useId)();
   const isPasted = (0, import_react.useRef)(false);
   const isInternalChanged = (0, import_react.useRef)(defaultValue !== void 0);
@@ -127,6 +135,27 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     }).format(propValue);
     return formattedPropValue;
   }, [propValue, internalValue]);
+  const computeValidationState = (0, import_react.useCallback)(
+    (trigger) => {
+      const input = internalRef.current?.inputRef;
+      if (!value && value !== 0) {
+        const nativeErrorKey = (0, import_useFormFieldValidation.getErrorType)(input?.validity);
+        const message = nativeErrorKey ? (0, import_useFormFieldValidation.getI18nValidationMessage)(intl, nativeErrorKey, input) : void 0;
+        return (0, import_validation_builders.getValidationState)(input, trigger, message);
+      }
+      const errorKey = (0, import_validation.getErrorKey)(value, min, max, step);
+      return errorKey ? (0, import_validation_builders.getValidationState)(
+        import_types.NativeValidityStateKeys[errorKey],
+        trigger,
+        (0, import_useFormFieldValidation.getI18nValidationMessage)(intl, errorKey, input)
+      ) : (0, import_validation_builders.getValidationState)(null, trigger);
+    },
+    [value, min, max, step, intl]
+  );
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => computeValidationState("manual")
+  );
   const handleChange = (0, import_react.useCallback)(
     (e) => {
       const parsedValue = (0, import_format.checkFormat)(e.target.value);
@@ -150,6 +179,13 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     },
     [onChange, setInternalValue, value, setValueNative]
   );
+  const handleBlur = (0, import_react.useCallback)(
+    (e) => {
+      emitValidationState(computeValidationState("blur"));
+      onBlur?.(e);
+    },
+    [emitValidationState, computeValidationState, onBlur]
+  );
   const handleStep = (0, import_react.useCallback)(
     (direction) => {
       setValueNative(
@@ -199,31 +235,51 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     el.element?.addEventListener("wheel", onWheel, { passive: false });
     return () => el.element?.removeEventListener("wheel", onWheel);
   }, [handleStep]);
+  (0, import_react.useImperativeHandle)(
+    forwardedRef,
+    () => ({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- internalRef.current is guaranteed by useImperativeHandle's post-mount execution
+      ...internalRef.current,
+      validateAsync: async () => {
+        dispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const validationState = computeValidationState("manual");
+        emitValidationState(validationState);
+        return validationState;
+      }
+    }),
+    [dispatch, computeValidationState, emitValidationState]
+  );
   (0, import_react.useEffect)(() => {
-    if (!value && value !== 0) {
-      return;
-    }
-    const errorMessage = (0, import_validation.getErrorKey)(value, min, max, step);
-    if (errorMessage) {
-      (0, import_validation.addError)(errorMessage, errorId, internalRef.current?.inputRef, dispatch);
-      return;
-    }
     dispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
-      payload: {
-        id: errorId,
-        messageType: "formcontrol"
-      }
+      payload: { id: errorId, messageType: "formcontrol" }
     });
+    const errorKey = value || value === 0 ? (0, import_validation.getErrorKey)(value, min, max, step) : null;
+    if (errorKey) {
+      dispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          id: errorId,
+          message: (0, import_useFormFieldValidation.getI18nErrorMessage)(errorKey, internalRef.current?.inputRef),
+          validityStateKey: "customError",
+          messageType: "formcontrol",
+          variant: "error"
+        }
+      });
+    }
+    emitValidationState(computeValidationState("change"));
   }, [
     value,
     min,
     max,
     step,
-    state.isTouched,
-    state.isValid,
     dispatch,
-    errorId
+    errorId,
+    emitValidationState,
+    computeValidationState
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_BaseInput.BaseInput,
@@ -238,6 +294,7 @@ const NumberInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       readOnly,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
       onPaste: () => isPasted.current = true,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,

package/forms/number-input-v2/utils/validation.d.ts

@@ -1,5 +1,4 @@
-import type { Dispatch } from 'react';
-import { type FormFieldMessagesReducerAction } from '../../forms-core/state/formfield-messages-state-reducer.js';
+import type { NativeValidityStateKeys } from '../../validation/types.js';
 /**
  * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.
  * @internal
@@ -10,13 +9,8 @@ export declare function sanitizePositiveNumber(value: number | undefined): numbe
  * @internal
  */
 export declare function isStepAligned(value: number, step: number, min?: number): boolean;
-/**
- * Adds an error message to the form field messages state.
- * @internal
- */
-export declare function addError(errorType: keyof ValidityState, errorId: string, ref: HTMLInputElement | HTMLSelectElement | null | undefined, dispatch: Dispatch<FormFieldMessagesReducerAction> | undefined): void;
 /**
  * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).
  * @internal
  */
-export declare function getErrorKey(value: string | number, min?: number, max?: number, step?: number): keyof ValidityState | null;
+export declare function getErrorKey(value: string | number, min?: number, max?: number, step?: number): keyof typeof NativeValidityStateKeys | null;

package/forms/number-input-v2/utils/validation.js

@@ -17,15 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var validation_exports = {};
 __export(validation_exports, {
-  addError: () => addError,
   getErrorKey: () => getErrorKey,
   isStepAligned: () => isStepAligned,
   sanitizePositiveNumber: () => sanitizePositiveNumber
 });
 module.exports = __toCommonJS(validation_exports);
 var import_format = require("./format.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");
 function sanitizePositiveNumber(value) {
   return value !== void 0 && !Number.isNaN(value) && value > 0 ? value : 1;
 }
@@ -35,18 +32,6 @@ function isStepAligned(value, step, min = 0) {
   const tolerance = step * 1e-9;
   return Math.abs(value - roundedValue) < tolerance;
 }
-function addError(errorType, errorId, ref, dispatch) {
-  dispatch?.({
-    type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
-    payload: {
-      id: errorId,
-      message: (0, import_useFormFieldValidation.getI18nErrorMessage)(errorType, ref),
-      validityStateKey: errorType,
-      messageType: "formcontrol",
-      variant: "error"
-    }
-  });
-}
 function getErrorKey(value, min, max, step) {
   const parsed = (0, import_format.parseNumber)(value);
   if (min !== void 0 && parsed < min) {

package/forms/password-input/PasswordInput.js

@@ -56,6 +56,7 @@ const PasswordInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
     name,
     readOnly = false,
     disabled,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     children,
     "data-testid": dataTestId,

package/forms/radio/Radio.js

@@ -43,9 +43,11 @@ var import_is_node_environment = require("../../core/utils/is-node-environment.j
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_field_css = require("../../styles/field.sty.js");
 var import_Text = require("../../typography/text/Text.js");
+var import_useFormFieldContext = require("../forms-core/hooks/useFormFieldContext.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 COMPONENT_NAME = "Radio";
 const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -66,6 +68,7 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
     } = props;
     const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const { dispatch: messagesContextDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+    const { registerMemberFormControlId } = (0, import_useFormFieldContext.useFormFieldContext)();
     const radioGroupContext = (0, import_react.useContext)(import_RadioGroupContext.RadioGroupContext);
     if ((0, import_is_node_environment.isDev)() && !radioGroupContext) {
       console.warn(
@@ -81,7 +84,8 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
       name: groupName,
       required: groupRequired,
       value: groupValue,
-      onChange
+      onChange,
+      onValidityChange
     } = radioGroupContext || {};
     const radioLabelRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
@@ -101,6 +105,18 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          if (controlState !== void 0) {
+            return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
+          }
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
         }
       };
     });
@@ -111,24 +127,30 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
       ariaProps
     } = (0, import_useFormFieldValidation.useFormFieldValidation)(
       inputRef,
-      { groupRequired },
+      { groupRequired, groupValue: String(groupValue) },
       {
         "aria-label": ariaLabelProp,
         "aria-labelledby": ariaLabelledByProp,
         "aria-describedby": ariaDescribedByProp,
         "aria-details": ariaDetailsProp
-      }
+      },
+      id,
+      onValidityChange
+    );
+    (0, import_react.useEffect)(
+      () => registerMemberFormControlId(id),
+      [id, registerMemberFormControlId]
     );
     (0, import_react.useEffect)(() => {
       messagesContextDispatch?.({
-        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDFORMCONTROLID,
-        payload: { controlId: id }
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
       return () => messagesContextDispatch?.({
-        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEFORMCONTROLID,
-        payload: { controlId: id }
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
-    }, [id]);
+    }, [id, messagesContextDispatch]);
     const disabled = propDisabled ?? isDisabled;
     const disabledOrAriaDisabled = disabled || ariaDisabled || false;
     const checked = value === groupValue;

package/forms/radio/RadioGroup.js

@@ -33,18 +33,20 @@ module.exports = __toCommonJS(RadioGroup_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_RadioGroupContext = require("./RadioGroupContext.js");
 var styles = __toESM(require("./styles.sty.js"));
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
-var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_is_node_environment = require("../../core/utils/is-node-environment.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_FormFieldMessageContextProvider = require("../forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
-var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
-var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
+var import_useFormControl = require("../forms-core/hooks/useFormControl.js");
+var import_useFormFieldContext = require("../forms-core/hooks/useFormFieldContext.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_useInputHint = require("../hooks/useInputHint.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     children,
@@ -53,12 +55,16 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     value,
     name,
     defaultValue,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     onChange,
+    onValidityChange,
     readOnly: propReadOnly,
     required: propRequired,
     "aria-disabled": propAriaDisabled,
     "aria-describedby": ariaDescribedby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -67,33 +73,43 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     ...remainingProps
   } = props;
   const {
+    id,
     disabled,
     required,
-    id,
+    readOnly: _readOnly,
     ariaDisabled,
-    readOnly: _readOnly
-  } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageDispatch: messagesContextDispatch
+  } = (0, import_useFormControl.useFormControl)({
+    propId,
     propDisabled,
     propRequired,
-    propId,
     propAriaDisabled,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const readOnly = !!_readOnly;
-  const { state: messagesContextState, dispatch: messagesContextDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-  const [controlStateHasError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
-  const hasError = controlState ? controlStateHasError : messagesContextState.showError;
-  const { inputProps, hintProps } = (0, import_useInputHint.useInputHint)({
-    ariaDescribedby,
-    hint,
-    hasError
-  });
+  const { formFieldLabelId } = (0, import_useFormFieldContext.useFormFieldContext)();
+  const groupLabelledby = ariaLabelledby ?? (ariaLabel === void 0 ? formFieldLabelId : void 0);
   const [controllableState, setControllableState] = (0, import_useControllableState.useControllableState)({
     defaultValue,
     value,
     onChange
   });
+  const intl = (0, import_react_intl.useIntl)();
   const wrapperRef = (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"
+    )
+  );
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     return {
       element: wrapperRef.current,
@@ -107,14 +123,34 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
         if (controlState !== void 0) {
           return;
         }
-        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 () => {
+        const firstInput = wrapperRef.current?.querySelector(
+          "input"
+        );
+        if (controlState !== void 0) {
+          return emitValidationState(
+            (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
+          );
+        }
+        wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
+        );
       }
     };
   });
@@ -128,23 +164,25 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       name,
       isDisabled: disabled,
       ariaDisabled,
-      hasError,
+      hasError: showError,
       value: controllableState,
       onChange: setControllableState,
       readOnly,
       required,
-      controlState
+      controlState,
+      onValidityChange: emitValidationState
     }),
     [
       name,
       disabled,
       ariaDisabled,
-      hasError,
+      showError,
       controllableState,
       setControllableState,
       readOnly,
       required,
-      controlState
+      controlState,
+      emitValidationState
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -156,22 +194,25 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       "aria-orientation": "vertical",
       role: "radiogroup",
       "aria-live": "polite",
+      "aria-label": ariaLabel,
       "aria-disabled": propAriaDisabled,
+      "aria-labelledby": groupLabelledby,
       ref: wrapperRef,
       className: (0, import_clsx.default)(consumerClassName, styles.group, {
         [styles.readOnly]: readOnly,
-        [styles.hasError]: hasError
+        [styles.hasError]: showError
       }),
       style: consumerStyle,
       id,
-      ...inputProps,
+      "aria-describedby": [ariaDescribedby, inputProps["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+      "aria-invalid": inputProps["aria-invalid"],
       ...remainingProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RadioGroupContext.RadioGroupContext.Provider, { value: radioGroupContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 8, children }) }),
         hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_FormFieldMessageBaseItem.InternalBaseItem,
           {
-            variant: hasError ? "error" : "hint",
+            variant: showError ? "error" : "hint",
             disabled: disabled || ariaDisabled,
             ...hintProps,
             children: hint

package/forms/radio/RadioGroupContext.d.ts

@@ -1,5 +1,6 @@
 import { type FocusEvent } from 'react';
 import type { FormControlState } from '../../core/types/form-control-state.js';
+import type { ValidationState } from '../validation/types.js';
 type RadioGroupContextType = {
     /** The name of the radio group. */
     name?: string;
@@ -22,6 +23,11 @@ type RadioGroupContextType = {
     onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;
     /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */
     controlState?: FormControlState;
+    /**
+     * Called when validation state changes. Fires automatically on blur or change,
+     * and when triggered manually via `validate()` or `validateAsync()`.
+     */
+    onValidityChange?: (state: ValidationState) => void;
 };
 /** Context describing the state of a RadioGroup */
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | undefined>;