@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/forms/forms-core/components/form-field/FormField.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './FormField.sty.js';\nimport { FormFieldContextProvider } from './FormFieldContextProvider.js';\nimport { FormFieldMessageContextProvider } from './FormFieldMessageContextProvider.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\nconst COMPONENT_NAME = 'FormField';\n\n/**\n * @public\n */\nexport interface FormFieldProps\n  extends WithChildren,\n    SharedFormFieldProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `FormField` component is the outermost layout component of an input\n * component (for example `TextInput`), providing support for displaying a\n * sibling `label` element alongside.\n *\n * It also features responsive design: small containers show the label elements\n * aligned on top of the input. In comparison, wider containers show input elements\n * with their label aligned to the left.\n *\n * The form field is child-agnostic.\n * @public\n */\nexport const FormField = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldProps\n>((formFieldProps, forwardedRef) => {\n  const generatedId = useId();\n  const {\n    children,\n    id: propId = generatedId,\n    disabled,\n    required,\n    readOnly,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    controlId: _controlId,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: FormFieldProps = formFieldProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <FormFieldContextProvider\n      formFieldId={propId}\n      disabled={disabled}\n      ariaDisabled={_parseBoolean(ariaDisabledProp)}\n      required={required}\n      readOnly={readOnly}\n    >\n      <FormFieldMessageContextProvider>\n        <Flex\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          className={clsx(styles.formField, consumerClassName)}\n          gap={4}\n          flexDirection=\"column\"\n          style={consumerStyle}\n          {...mergeProps(restProps, behavioralTrackingProps)}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Flex>\n      </FormFieldMessageContextProvider>\n    </FormFieldContextProvider>\n  );\n});\n\n(FormField as typeof FormField & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAiFQ;AAjFR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AACxB,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AA2BhB,MAAM,YAA4B,2BAGvC,CAAC,gBAAgB,iBAAiB;AAClC,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAoB;AAEpB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,cAAc,cAAc,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA,8BAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,UACnD,KAAK;AAAA,UACL,eAAc;AAAA,UACd,OAAO;AAAA,UACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,UACjD,qBAAmB;AAAA,UAElB;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,UAAyD,cACxD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './FormField.sty.js';\nimport { FormFieldContextProvider } from './FormFieldContextProvider.js';\nimport { FormFieldMessageContextProvider } from './FormFieldMessageContextProvider.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\nconst COMPONENT_NAME = 'FormField';\n\n/**\n * @public\n */\nexport interface FormFieldProps\n  extends\n    WithChildren,\n    SharedFormFieldProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `FormField` component is the outermost layout component of an input\n * component (for example `TextInput`), providing support for displaying a\n * sibling `label` element alongside.\n *\n * It also features responsive design: small containers show the label elements\n * aligned on top of the input. In comparison, wider containers show input elements\n * with their label aligned to the left.\n *\n * The form field is child-agnostic.\n * @public\n */\nexport const FormField = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldProps\n>((formFieldProps, forwardedRef) => {\n  const generatedId = useId();\n  const {\n    children,\n    id: propId = generatedId,\n    disabled,\n    required,\n    readOnly,\n    // oxlint-disable-next-line typescript/no-deprecated\n    controlId: _controlId,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: FormFieldProps = formFieldProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <FormFieldContextProvider\n      formFieldId={propId}\n      disabled={disabled}\n      ariaDisabled={_parseBoolean(ariaDisabledProp)}\n      required={required}\n      readOnly={readOnly}\n    >\n      <FormFieldMessageContextProvider>\n        <Flex\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          className={clsx(styles.formField, consumerClassName)}\n          gap={4}\n          flexDirection=\"column\"\n          style={consumerStyle}\n          {...mergeProps(restProps, behavioralTrackingProps)}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Flex>\n      </FormFieldMessageContextProvider>\n    </FormFieldContextProvider>\n  );\n});\n\n(FormField as typeof FormField & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAkFQ;AAlFR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AACxB,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AA4BhB,MAAM,YAA4B,2BAGvC,CAAC,gBAAgB,iBAAiB;AAClC,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAoB;AAEpB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,cAAc,cAAc,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA,8BAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,UACnD,KAAK;AAAA,UACL,eAAc;AAAA,UACd,OAAO;AAAA,UACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,UACjD,qBAAmB;AAAA,UAElB;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,UAAyD,cACxD;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field/FormField.sty.js

@@ -1,5 +1,5 @@
 import "./FormField.css";
-var formField = "_mvcxum0-3-12-1";
+var formField = "_mvcxum0-3-13-0";
 export {
   formField
 };

package/esm/forms/forms-core/components/form-field/FormField.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.css.ts"],
-  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-12-1';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field/FormFieldMessageContextProvider.js

@@ -32,7 +32,7 @@ const FormFieldMessageContextProvider = (formFieldProps) => {
     []
   );
   const legacyFormFieldId = (
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     formFieldState.formFieldId ?? formFieldState.controlId ?? propId
   );
   const [state, dispatch] = useReducer(formFieldMessageReducerCB, {

package/esm/forms/forms-core/components/form-field/FormFieldMessageContextProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormFieldMessageContextProvider.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  type JSXElementConstructor,\n  type ComponentProps,\n  useMemo,\n} from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { FormContext } from '../../../form/context/FormContext.js';\nimport { FormFieldMessageContext } from '../../contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../../types/formfield-messages.types.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\ntype FormFieldMessageContextProviderProps = WithChildren &\n  DOMProps &\n  Pick<SharedFormFieldProps, 'disabled'> & {\n    /** interim solution for the segmentSelector until we introduce proper group errors. */\n    showError?: boolean;\n  };\n\n/**\n * Provides the FormFieldMessages context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldMessageContextProvider = /* @__PURE__ */ (\n  formFieldProps: FormFieldMessageContextProviderProps,\n) => {\n  const generatedId = useId();\n  const messagesContainerId = useId();\n  const formContext = useContext(FormContext);\n  const {\n    children,\n    id: propId = generatedId,\n    disabled: propDisabled,\n    showError: propShowError,\n  }: FormFieldMessageContextProviderProps = formFieldProps;\n\n  const formFieldState = useFormFieldContext();\n\n  const formFieldMessageReducerCB = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const legacyFormFieldId =\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    formFieldState.formFieldId ?? formFieldState.controlId ?? propId;\n\n  const [state, dispatch] = useReducer(formFieldMessageReducerCB, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n    isValid: undefined,\n    formFieldId: legacyFormFieldId,\n    formControlId: formFieldState.formControlId ?? legacyFormFieldId,\n    memberFormControlIds: formFieldState.memberFormControlIds,\n  });\n\n  const memberFormControlIdsKey =\n    formFieldState.memberFormControlIds.join('\\u0000');\n\n  useEffect(() => {\n    if (formFieldState.formControlId === undefined) {\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.SETFORMCONTROLID,\n      payload: { formControlId: formFieldState.formControlId },\n    });\n  }, [formFieldState.formControlId]);\n\n  useEffect(() => {\n    for (const formControlId of formFieldState.memberFormControlIds) {\n      dispatch({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId },\n      });\n    }\n\n    return () => {\n      for (const formControlId of formFieldState.memberFormControlIds) {\n        dispatch({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId },\n        });\n      }\n    };\n    // memberFormControlIdsKey captures the actual id list while avoiding an\n    // effect loop from the context array identity changing after each registration.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [memberFormControlIdsKey]);\n\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      disabled: formFieldState.disabled || propDisabled,\n      controlId: legacyFormFieldId,\n      dispatch,\n      state: {\n        ...state,\n        showError: (propShowError ?? false) || state.showError,\n      },\n      fieldMessagesContainerId: messagesContainerId,\n      formMessagesContainerId: formContext?.formMessagesId,\n      // A control can route its native/Strato messages to the form-wide outlet via\n      // `_messageTarget`. When the field is not among the targets, those messages are\n      // dropped from the inline render here (a pure render-time filter, so they never\n      // flash inline first). Validity is unaffected, and consumer-authored errors\n      // (source 'custom') always stay at the field. With no enclosing <Form>, 'form'\n      // falls back to the field, so nothing is suppressed.\n      routesAwayFromField:\n        formContext !== undefined &&\n        state.messageTarget !== undefined &&\n        !state.messageTarget.includes('field'),\n    }),\n    [\n      formContext,\n      formFieldState.disabled,\n      legacyFormFieldId,\n      propDisabled,\n      dispatch,\n      state,\n      propShowError,\n      messagesContainerId,\n    ],\n  );\n\n  return (\n    <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n      {children}\n    </FormFieldMessageContext.Provider>\n  );\n};\n\n/**\n * Function to ensure that a component with props that have generics in their type is always wrapped within a `MessageContextProvider`\n * for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProviderWithGenerics<\n  ComponentType extends JSXElementConstructor<\n    FormControlBaseProps<TOnChange, TFocusElement>\n  >,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: ComponentType) {\n  type Props = ComponentProps<ComponentType>;\n  type RefType = Props extends { ref?: infer R } ? R : never;\n\n  const WrappedComponent = forwardRef<RefType, Props>((props, forwardedRef) => {\n    const { dispatch } = useFormFieldMessagesContext();\n\n    if (dispatch !== undefined) {\n      // the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return <OriginalComponent ref={forwardedRef} {...(props as any)} />;\n    }\n\n    const { disabled, id } = props;\n\n    return (\n      <FormFieldMessageContextProvider disabled={disabled} id={id}>\n        {/* the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics */}\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <OriginalComponent ref={forwardedRef} {...(props as any)} />\n      </FormFieldMessageContextProvider>\n    );\n  });\n\n  // The cast ensures the returned component retains generics when used in JSX\n  return WrappedComponent as ComponentType;\n}\n\n/**\n * Function to ensure that an element is always wrapped within a MessageContextProvider for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProvider<\n  PropType extends FormControlBaseProps<TOnChange, TFocusElement>,\n  RefType,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: JSXElementConstructor<PropType>) {\n  const WithFormFieldMessageContextProvider = forwardRef<RefType, PropType>(\n    (props, forwardedRef) => {\n      const { dispatch } = useFormFieldMessagesContext();\n\n      if (dispatch !== undefined) {\n        return <OriginalComponent ref={forwardedRef} {...props} />;\n      }\n\n      const { disabled, id } = props;\n\n      return (\n        <FormFieldMessageContextProvider disabled={disabled} id={id}>\n          <OriginalComponent ref={forwardedRef} {...props} />\n        </FormFieldMessageContextProvider>\n      );\n    },\n  );\n\n  return WithFormFieldMessageContextProvider;\n}\n\n(\n  FormFieldMessageContextProvider as typeof FormFieldMessageContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessageContextProvider';\n"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  type JSXElementConstructor,\n  type ComponentProps,\n  useMemo,\n} from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { FormContext } from '../../../form/context/FormContext.js';\nimport { FormFieldMessageContext } from '../../contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../../types/formfield-messages.types.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\ntype FormFieldMessageContextProviderProps = WithChildren &\n  DOMProps &\n  Pick<SharedFormFieldProps, 'disabled'> & {\n    /** interim solution for the segmentSelector until we introduce proper group errors. */\n    showError?: boolean;\n  };\n\n/**\n * Provides the FormFieldMessages context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldMessageContextProvider = /* @__PURE__ */ (\n  formFieldProps: FormFieldMessageContextProviderProps,\n) => {\n  const generatedId = useId();\n  const messagesContainerId = useId();\n  const formContext = useContext(FormContext);\n  const {\n    children,\n    id: propId = generatedId,\n    disabled: propDisabled,\n    showError: propShowError,\n  }: FormFieldMessageContextProviderProps = formFieldProps;\n\n  const formFieldState = useFormFieldContext();\n\n  const formFieldMessageReducerCB = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const legacyFormFieldId =\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    formFieldState.formFieldId ?? formFieldState.controlId ?? propId;\n\n  const [state, dispatch] = useReducer(formFieldMessageReducerCB, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n    isValid: undefined,\n    formFieldId: legacyFormFieldId,\n    formControlId: formFieldState.formControlId ?? legacyFormFieldId,\n    memberFormControlIds: formFieldState.memberFormControlIds,\n  });\n\n  const memberFormControlIdsKey =\n    formFieldState.memberFormControlIds.join('\\u0000');\n\n  useEffect(() => {\n    if (formFieldState.formControlId === undefined) {\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.SETFORMCONTROLID,\n      payload: { formControlId: formFieldState.formControlId },\n    });\n  }, [formFieldState.formControlId]);\n\n  useEffect(() => {\n    for (const formControlId of formFieldState.memberFormControlIds) {\n      dispatch({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId },\n      });\n    }\n\n    return () => {\n      for (const formControlId of formFieldState.memberFormControlIds) {\n        dispatch({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId },\n        });\n      }\n    };\n    // memberFormControlIdsKey captures the actual id list while avoiding an\n    // effect loop from the context array identity changing after each registration.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [memberFormControlIdsKey]);\n\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      disabled: formFieldState.disabled || propDisabled,\n      controlId: legacyFormFieldId,\n      dispatch,\n      state: {\n        ...state,\n        showError: (propShowError ?? false) || state.showError,\n      },\n      fieldMessagesContainerId: messagesContainerId,\n      formMessagesContainerId: formContext?.formMessagesId,\n      // A control can route its native/Strato messages to the form-wide outlet via\n      // `_messageTarget`. When the field is not among the targets, those messages are\n      // dropped from the inline render here (a pure render-time filter, so they never\n      // flash inline first). Validity is unaffected, and consumer-authored errors\n      // (source 'custom') always stay at the field. With no enclosing <Form>, 'form'\n      // falls back to the field, so nothing is suppressed.\n      routesAwayFromField:\n        formContext !== undefined &&\n        state.messageTarget !== undefined &&\n        !state.messageTarget.includes('field'),\n    }),\n    [\n      formContext,\n      formFieldState.disabled,\n      legacyFormFieldId,\n      propDisabled,\n      dispatch,\n      state,\n      propShowError,\n      messagesContainerId,\n    ],\n  );\n\n  return (\n    <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n      {children}\n    </FormFieldMessageContext.Provider>\n  );\n};\n\n/**\n * Function to ensure that a component with props that have generics in their type is always wrapped within a `MessageContextProvider`\n * for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProviderWithGenerics<\n  ComponentType extends JSXElementConstructor<\n    FormControlBaseProps<TOnChange, TFocusElement>\n  >,\n  TFocusElement extends Element = Element,\n  // oxlint-disable-next-line typescript/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: ComponentType) {\n  type Props = ComponentProps<ComponentType>;\n  type RefType = Props extends { ref?: infer R } ? R : never;\n\n  const WrappedComponent = forwardRef<RefType, Props>((props, forwardedRef) => {\n    const { dispatch } = useFormFieldMessagesContext();\n\n    if (dispatch !== undefined) {\n      // the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics\n      // oxlint-disable-next-line typescript/no-explicit-any\n      return <OriginalComponent ref={forwardedRef} {...(props as any)} />;\n    }\n\n    const { disabled, id } = props;\n\n    return (\n      <FormFieldMessageContextProvider disabled={disabled} id={id}>\n        {/* the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics */}\n        {/* oxlint-disable-next-line typescript/no-explicit-any */}\n        <OriginalComponent ref={forwardedRef} {...(props as any)} />\n      </FormFieldMessageContextProvider>\n    );\n  });\n\n  // The cast ensures the returned component retains generics when used in JSX\n  return WrappedComponent as ComponentType;\n}\n\n/**\n * Function to ensure that an element is always wrapped within a MessageContextProvider for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProvider<\n  PropType extends FormControlBaseProps<TOnChange, TFocusElement>,\n  RefType,\n  TFocusElement extends Element = Element,\n  // oxlint-disable-next-line typescript/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: JSXElementConstructor<PropType>) {\n  const WithFormFieldMessageContextProvider = forwardRef<RefType, PropType>(\n    (props, forwardedRef) => {\n      const { dispatch } = useFormFieldMessagesContext();\n\n      if (dispatch !== undefined) {\n        return <OriginalComponent ref={forwardedRef} {...props} />;\n      }\n\n      const { disabled, id } = props;\n\n      return (\n        <FormFieldMessageContextProvider disabled={disabled} id={id}>\n          <OriginalComponent ref={forwardedRef} {...props} />\n        </FormFieldMessageContextProvider>\n      );\n    },\n  );\n\n  return WithFormFieldMessageContextProvider;\n}\n\n(\n  FormFieldMessageContextProvider as typeof FormFieldMessageContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessageContextProvider';\n"],
   "mappings": "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",
   "names": ["state"]
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-12-1 {
+._16z6rg10-3-13-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-12-1 {
+._16z6rg11-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-12-1 {
+._16z6rg12-3-13-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-12-1 {
+._16z6rg13-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-12-1 {
+._16z6rg14-3-13-0 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.js

@@ -12,6 +12,7 @@ const FormFieldMessageItem = (props) => {
     message,
     id = generatedId,
     validityStateKey,
+    showImmediately = false,
     ...remainingProps
   } = props;
   const { state, dispatch } = useFormFieldMessagesContext();
@@ -23,6 +24,7 @@ const FormFieldMessageItem = (props) => {
       payload: {
         id,
         variant,
+        ...showImmediately && { showError: variant === "error" },
         ...messageString !== void 0 && { messageText: messageString }
       }
     });
@@ -32,9 +34,9 @@ const FormFieldMessageItem = (props) => {
         payload: { id }
       });
     };
-  }, [variant, id, dispatch, messageString]);
+  }, [variant, id, dispatch, messageString, showImmediately]);
   const hasFormControlRegistration = state.formControlId !== void 0 || state.memberFormControlIds !== void 0 && state.memberFormControlIds.length > 0;
-  if (dispatch && hasFormControlRegistration && !state.showError && variant === "error") {
+  if (!showImmediately && dispatch && hasFormControlRegistration && !state.showError && variant === "error") {
     return null;
   }
   return /* @__PURE__ */ jsx(BaseItem, { variant, id, ...remainingProps, children: children ?? message });

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.tsx"],
-  "sourcesContent": ["import { useEffect, type ReactNode } from 'react';\n\nimport type { FormFieldMessageBaseItemProps } from './FormFieldMessageBaseItem.js';\nimport { InternalBaseItem as BaseItem } from './FormFieldMessageBaseItem.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\n\n/**\n * @public\n */\nexport type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {\n  /**\n   * Content of the FormFieldMessage\n   */\n  message?: ReactNode;\n  /**\n   * The validity state key set on the form control element.\n   * The automatically supported errors depend on the keys from the browser API (See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).\n   * In case the same key is used for additional validation, the message will be overwritten by the default.\n   *\n   */\n  validityStateKey?: string;\n};\n\n/**\n * Renders a FormFieldMessageItem message if given, otherwise renders the provided children.\n * @public\n */\nexport const FormFieldMessageItem = (props: FormFieldMessageItemProps) => {\n  const generatedId = useId();\n  const {\n    children,\n    variant = 'hint',\n    message,\n    id = generatedId,\n    validityStateKey,\n    ...remainingProps\n  } = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const content = children ?? message;\n  const messageString = typeof content === 'string' ? content : undefined;\n\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        variant,\n        ...(messageString !== undefined && { messageText: messageString }),\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    };\n  }, [variant, id, dispatch, messageString]);\n\n  // Only registered controls use the new validation-message visibility model.\n  const hasFormControlRegistration =\n    state.formControlId !== undefined ||\n    (state.memberFormControlIds !== undefined &&\n      state.memberFormControlIds.length > 0);\n\n  if (\n    dispatch &&\n    hasFormControlRegistration &&\n    !state.showError &&\n    variant === 'error'\n  ) {\n    return null;\n  }\n\n  return (\n    <BaseItem variant={variant} id={id} {...remainingProps}>\n      {children ?? message}\n    </BaseItem>\n  );\n};\n\nFormFieldMessageItem.displayName = 'FormFieldMessageItem';\n"],
-  "mappings": "AA+EI;AA/EJ,SAAS,iBAAiC;AAG1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAuBjC,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,OAAO,SAAS,IAAI,4BAA4B;AAExD,QAAM,UAAU,YAAY;AAC5B,QAAM,gBAAgB,OAAO,YAAY,WAAW,UAAU;AAE9D,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAI,kBAAkB,UAAa,EAAE,aAAa,cAAc;AAAA,MAClE;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,GAAG;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,UAAU,aAAa,CAAC;AAGzC,QAAM,6BACJ,MAAM,kBAAkB,UACvB,MAAM,yBAAyB,UAC9B,MAAM,qBAAqB,SAAS;AAExC,MACE,YACA,8BACA,CAAC,MAAM,aACP,YAAY,SACZ;AACA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,YAAS,SAAkB,IAAS,GAAG,gBACrC,sBAAY,SACf;AAEJ;AAEA,qBAAqB,cAAc;",
+  "sourcesContent": ["import { useEffect, type ReactNode } from 'react';\n\nimport type { FormFieldMessageBaseItemProps } from './FormFieldMessageBaseItem.js';\nimport { InternalBaseItem as BaseItem } from './FormFieldMessageBaseItem.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\n\n/**\n * @public\n */\nexport type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {\n  /**\n   * Content of the FormFieldMessage\n   */\n  message?: ReactNode;\n  /**\n   * The validity state key set on the form control element.\n   * The automatically supported errors depend on the keys from the browser API (See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).\n   * In case the same key is used for additional validation, the message will be overwritten by the default.\n   *\n   */\n  validityStateKey?: string;\n  /**\n   * When `true`, an error item is revealed as soon as it mounts and puts the field into\n   * an error state immediately, bypassing the field's normal reveal gate (first blur, overlay\n   * close, or immediate-on-click, depending on the control). Has no effect on hint items.\n   *\n   * @defaultValue false\n   */\n  showImmediately?: boolean;\n};\n\n/**\n * Renders a FormFieldMessageItem message if given, otherwise renders the provided children.\n * @public\n */\nexport const FormFieldMessageItem = (props: FormFieldMessageItemProps) => {\n  const generatedId = useId();\n  const {\n    children,\n    variant = 'hint',\n    message,\n    id = generatedId,\n    validityStateKey,\n    showImmediately = false,\n    ...remainingProps\n  } = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const content = children ?? message;\n  const messageString = typeof content === 'string' ? content : undefined;\n\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        variant,\n        ...(showImmediately && { showError: variant === 'error' }),\n        ...(messageString !== undefined && { messageText: messageString }),\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    };\n  }, [variant, id, dispatch, messageString, showImmediately]);\n\n  // Only registered controls use the reveal-gated visibility model.\n  const hasFormControlRegistration =\n    state.formControlId !== undefined ||\n    (state.memberFormControlIds !== undefined &&\n      state.memberFormControlIds.length > 0);\n\n  if (\n    !showImmediately &&\n    dispatch &&\n    hasFormControlRegistration &&\n    !state.showError &&\n    variant === 'error'\n  ) {\n    return null;\n  }\n\n  return (\n    <BaseItem variant={variant} id={id} {...remainingProps}>\n      {children ?? message}\n    </BaseItem>\n  );\n};\n\nFormFieldMessageItem.displayName = 'FormFieldMessageItem';\n"],
+  "mappings": "AA0FI;AA1FJ,SAAS,iBAAiC;AAG1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AA+BjC,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,OAAO,SAAS,IAAI,4BAA4B;AAExD,QAAM,UAAU,YAAY;AAC5B,QAAM,gBAAgB,OAAO,YAAY,WAAW,UAAU;AAE9D,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAI,mBAAmB,EAAE,WAAW,YAAY,QAAQ;AAAA,QACxD,GAAI,kBAAkB,UAAa,EAAE,aAAa,cAAc;AAAA,MAClE;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,GAAG;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,UAAU,eAAe,eAAe,CAAC;AAG1D,QAAM,6BACJ,MAAM,kBAAkB,UACvB,MAAM,yBAAyB,UAC9B,MAAM,qBAAqB,SAAS;AAExC,MACE,CAAC,mBACD,YACA,8BACA,CAAC,MAAM,aACP,YAAY,SACZ;AACA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,YAAS,SAAkB,IAAS,GAAG,gBACrC,sBAAY,SACf;AAEJ;AAEA,qBAAqB,cAAc;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -1,7 +1,7 @@
 import "./FormFieldMessageItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-12-1", variantClassNames: { variant: { hint: "_16z6rg11-3-12-1", error: "_16z6rg12-3-12-1" }, disabled: { true: "_16z6rg13-3-12-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-12-1";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-13-0", variantClassNames: { variant: { hint: "_16z6rg11-3-13-0", error: "_16z6rg12-3-13-0" }, disabled: { true: "_16z6rg13-3-13-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-13-0";
 export {
   formFieldMessageItem,
   formFieldMessageItemText

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css.ts"],
-  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-12-1',variantClassNames:{variant:{hint:'_16z6rg11-3-12-1',error:'_16z6rg12-3-12-1'},disabled:{true:'_16z6rg13-3-12-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-12-1';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-13-0',variantClassNames:{variant:{hint:'_16z6rg11-3-13-0',error:'_16z6rg12-3-13-0'},disabled:{true:'_16z6rg13-3-13-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,QAAO,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,2BAA2B;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.css

@@ -1,9 +1,9 @@
-._1l9bja60-3-12-1 {
+._1l9bja60-3-13-0 {
   display: flex;
 }
-._1l9bja60-3-12-1:empty {
+._1l9bja60-3-13-0:empty {
   display: none;
 }
-._1l9bja60-3-12-1[aria-hidden='true'] {
+._1l9bja60-3-13-0[aria-hidden='true'] {
   display: none;
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.js

@@ -5,6 +5,7 @@ import {
   forwardRef,
   useContext,
   useEffect,
+  useMemo,
   useSyncExternalStore
 } from "react";
 import { FormFieldMessageItem } from "./FormFieldMessageItem.js";
@@ -12,6 +13,7 @@ import * as styles from "./FormFieldMessages.sty.js";
 import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { FormContext } from "../../../form/context/FormContext.js";
+import { FormValidationError } from "../../../form/form-error-classes.js";
 import { useFormFieldContext } from "../../hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../hooks/useFormFieldMessagesContext.js";
 import { FormFieldMessagesAction } from "../../state/formfield-messages-state-reducer.js";
@@ -29,6 +31,7 @@ function RuntimeFieldMessageRegistration({
   const { dispatch } = useFormFieldMessagesContext();
   const id = `runtime-${error.validityStateKey.toString()}-${error.message}`;
   useEffect(() => {
+    const source = error instanceof FormValidationError ? "strato" : error.source;
     dispatch?.({
       type: FormFieldMessagesAction.ADDMESSAGE,
       payload: {
@@ -37,7 +40,7 @@ function RuntimeFieldMessageRegistration({
         validityStateKey: error.validityStateKey.toString(),
         messageType: "formcontrol",
         variant: "error",
-        source: error.source,
+        source,
         controlId,
         showError: true
       }
@@ -48,14 +51,7 @@ function RuntimeFieldMessageRegistration({
         payload: { id, messageType: "formcontrol", controlId }
       });
     };
-  }, [
-    controlId,
-    dispatch,
-    error.message,
-    error.source,
-    error.validityStateKey,
-    id
-  ]);
+  }, [controlId, dispatch, error, error.message, error.validityStateKey, id]);
   return null;
 }
 const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps, forwardedRef) => {
@@ -102,6 +98,12 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
     (msg) => !msg.source || msg.source === activeSource
   );
   const formMessages = state.showError ? visibleErrorMessages : internalHintMessages;
+  const showErrors = !state.isDisabled && (state.showError || (state.isTouched ?? false));
+  const isValid = state.isValid ?? true;
+  const validationState = useMemo(
+    () => ({ showErrors, isValid }),
+    [showErrors, isValid]
+  );
   const hasVisibleErrorsToShow = state.showError && suppressedErrorMessages.length > 0;
   const autoErrorItems = state.showError ? suppressedErrorMessages.map((message) => /* @__PURE__ */ createElement(
     FormFieldMessages.Item,
@@ -114,7 +116,7 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
   let content = null;
   let hasConsumerChildren = Boolean(children);
   if (typeof children === "function") {
-    content = children(formMessages);
+    content = children(formMessages, validationState);
     if (content === void 0 || content === null) {
       hasConsumerChildren = false;
     }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessages.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ReactNode,\n  forwardRef,\n  useContext,\n  useEffect,\n  useSyncExternalStore,\n} from 'react';\n\nimport { FormFieldMessageItem } from './FormFieldMessageItem.js';\nimport * as styles from './FormFieldMessages.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { DOMProps } from '../../../../core/types/dom.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { FormContext } from '../../../form/context/FormContext.js';\nimport type {\n  ValidationError,\n  ValidationErrorSource,\n} from '../../../validation/types.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldControlMessage } from '../../types/formfield-messages.types.js';\n\nconst EMPTY_RUNTIME_MESSAGES: ValidationError[] = [];\nconst noopSubscribe = () => () => undefined;\n\nconst SOURCE_PRIORITY: Record<ValidationErrorSource, number> = {\n  custom: 0,\n  strato: 1,\n  native: 2,\n};\n\nfunction RuntimeFieldMessageRegistration({\n  error,\n  controlId,\n}: {\n  error: ValidationError;\n  controlId: string;\n}) {\n  const { dispatch } = useFormFieldMessagesContext();\n  const id = `runtime-${error.validityStateKey.toString()}-${error.message}`;\n\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        message: error.message,\n        validityStateKey: error.validityStateKey.toString(),\n        messageType: 'formcontrol',\n        variant: 'error',\n        source: error.source,\n        controlId,\n        showError: true,\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id, messageType: 'formcontrol', controlId },\n      });\n    };\n  }, [\n    controlId,\n    dispatch,\n    error.message,\n    error.source,\n    error.validityStateKey,\n    id,\n  ]);\n\n  return null;\n}\n\n/**\n * Properties for the FormFieldMessages component.\n * @public\n */\nexport type FormFieldMessageProps = MaskingProps &\n  StylingProps &\n  DataTestId &\n  DOMProps &\n  BehaviorTrackingProps & {\n    children?:\n      | ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode)\n      | ReactNode;\n  };\n\n/**\n * Component to display FormFieldMessages coming from the form control.\n */\nconst FormFieldMessagesRoot = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldMessageProps\n>((FormFieldMessageProps, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-testid': dataTestId,\n    id,\n    ...remainingProps\n  } = FormFieldMessageProps;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { state, fieldMessagesContainerId, routesAwayFromField } =\n    useFormFieldMessagesContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const formContext = useContext(FormContext);\n  const formControlId = state.formControlId;\n\n  const runtimeMessages = useSyncExternalStore(\n    formContext?.runtime.subscribe ?? noopSubscribe,\n    () =>\n      formContext?.runtime && formControlId !== undefined\n        ? formContext.runtime.getFieldMessages(formControlId)\n        : EMPTY_RUNTIME_MESSAGES,\n  );\n\n  const errorMessages = state.formControlMessages.filter(\n    (message) => message.variant === 'error',\n  );\n\n  const visibleErrorMessages = routesAwayFromField\n    ? errorMessages.filter((message) => message.source === 'custom')\n    : errorMessages;\n\n  const internalHintMessages = state.formControlMessages.filter(\n    (message) => message.variant === 'hint',\n  );\n\n  const externalHintMessages = state.customMessages.filter(\n    (message) => message.variant === 'hint',\n  );\n\n  const hintMessages = [...internalHintMessages, ...externalHintMessages];\n\n  const activeSource = visibleErrorMessages.reduce<\n    ValidationErrorSource | undefined\n  >((best, msg) => {\n    if (!msg.source) {\n      return best;\n    }\n    if (best === undefined) {\n      return msg.source;\n    }\n    return SOURCE_PRIORITY[msg.source] < SOURCE_PRIORITY[best]\n      ? msg.source\n      : best;\n  }, undefined);\n  const suppressedErrorMessages =\n    activeSource === undefined\n      ? visibleErrorMessages\n      : visibleErrorMessages.filter(\n          (msg) => !msg.source || msg.source === activeSource,\n        );\n\n  // Render function receives all errors (unsuppressed) so consumers can override suppression.\n  const formMessages = state.showError\n    ? visibleErrorMessages\n    : internalHintMessages;\n\n  // When every error has been routed to another outlet, there is nothing to show\n  // inline even though `showError` is true \u2014 collapse the container in that case.\n  const hasVisibleErrorsToShow =\n    state.showError && suppressedErrorMessages.length > 0;\n\n  const autoErrorItems = state.showError\n    ? suppressedErrorMessages.map((message) => (\n        <FormFieldMessages.Item\n          disabled={disabled || ariaDisabled}\n          {...message}\n          key={message.id}\n        />\n      ))\n    : null;\n\n  let content: ReactNode[] | ReactNode = null;\n  // Check if there is content to render. The content variable can contain:\n  // - Auto-generated error items (when showError && errors exist && no consumer errors)\n  // - Auto-generated hint messages (when showError is false)\n  // - Consumer-provided children/error items (handled by FormFieldMessageItem)\n  // Treat falsy-but-defined content (`false`, `0`, `''`) as absent \u2014 a common\n  // `{condition && <Item/>}` pattern passes `false`, which must not keep the\n  // container visible with nothing inside it.\n  let hasConsumerChildren = Boolean(children);\n  if (typeof children === 'function') {\n    content = children(formMessages);\n\n    if (content === undefined || content === null) {\n      hasConsumerChildren = false;\n    }\n  } else if (children !== undefined && children !== null) {\n    // Errors displace consumer-supplied children so hint slots disappear when\n    // validation fires \u2014 consumers don't have to manage visibility manually.\n    // Exception: when the consumer provides their own error items (registered in\n    // customMessages), those take priority and we keep the consumer's children so\n    // FormFieldMessageItem can handle their own visibility (shown when showError).\n    const hasConsumerErrors = state.customMessages.some(\n      (m) => m.variant === 'error',\n    );\n    content =\n      state.showError &&\n      suppressedErrorMessages.length > 0 &&\n      !hasConsumerErrors\n        ? autoErrorItems\n        : children;\n  } else {\n    const autoMessages = state.showError\n      ? suppressedErrorMessages\n      : internalHintMessages;\n    content = autoMessages.map((message) => (\n      <FormFieldMessages.Item\n        disabled={disabled || ariaDisabled}\n        {...message}\n        key={message.id}\n      />\n    ));\n  }\n\n  const hideMessages =\n    !hasVisibleErrorsToShow &&\n    hintMessages.length === 0 &&\n    !hasConsumerChildren;\n\n  return (\n    <Flex\n      ref={forwardedRef}\n      /**\n       * We always need to render the FormFieldMessageItems so that they can register in the context and update the form state correctly.\n       * However, we only want to display them when they are a hint or if showError is true.\n       */\n      id={id ?? fieldMessagesContainerId}\n      flexDirection=\"column\"\n      aria-live=\"polite\"\n      style={{ ...consumerStyle }}\n      className={clsx(consumerClassName, styles.formFieldMessages)}\n      aria-hidden={hideMessages}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dtrum-mask={dataDtrumMask}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {formControlId !== undefined &&\n        runtimeMessages.map((error) => (\n          <RuntimeFieldMessageRegistration\n            key={`${error.validityStateKey.toString()}:${error.message}`}\n            error={error}\n            controlId={formControlId}\n          />\n        ))}\n      {content}\n    </Flex>\n  );\n});\n\n(\n  FormFieldMessagesRoot as typeof FormFieldMessagesRoot & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessages';\n\n/**\n * @public\n */\nexport const FormFieldMessages = Object.assign(FormFieldMessagesRoot, {\n  Item: FormFieldMessageItem,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ReactNode,\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\n\nimport { FormFieldMessageItem } from './FormFieldMessageItem.js';\nimport * as styles from './FormFieldMessages.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { DOMProps } from '../../../../core/types/dom.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { FormContext } from '../../../form/context/FormContext.js';\nimport { FormValidationError } from '../../../form/form-error-classes.js';\nimport type {\n  ValidationError,\n  ValidationErrorSource,\n} from '../../../validation/types.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldControlMessage } from '../../types/formfield-messages.types.js';\n\nconst EMPTY_RUNTIME_MESSAGES: ValidationError[] = [];\nconst noopSubscribe = () => () => undefined;\n\nconst SOURCE_PRIORITY: Record<ValidationErrorSource, number> = {\n  custom: 0,\n  strato: 1,\n  native: 2,\n};\n\nfunction RuntimeFieldMessageRegistration({\n  error,\n  controlId,\n}: {\n  error: ValidationError;\n  controlId: string;\n}) {\n  const { dispatch } = useFormFieldMessagesContext();\n  const id = `runtime-${error.validityStateKey.toString()}-${error.message}`;\n\n  useEffect(() => {\n    // FormValidationError is already rendered by FormMessages at the form level.\n    // Use 'strato' source so the routesAwayFromField filter suppresses the\n    // inline message while still driving showError = true for error styling.\n    const source =\n      error instanceof FormValidationError ? 'strato' : error.source;\n\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        message: error.message,\n        validityStateKey: error.validityStateKey.toString(),\n        messageType: 'formcontrol',\n        variant: 'error',\n        source,\n        controlId,\n        showError: true,\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id, messageType: 'formcontrol', controlId },\n      });\n    };\n  }, [controlId, dispatch, error, error.message, error.validityStateKey, id]);\n\n  return null;\n}\n\n/**\n * Validation insight passed to the `FormFieldMessages` render function, alongside its messages.\n * @public\n */\nexport type FormFieldValidationState = {\n  /**\n   * Whether a potential error \u2014 internal (formcontrol) or external (custom) \u2014 would now be\n   * visible for this field. This tracks the field's reveal gate (touched/blurred/submitted and\n   * not disabled), not the presence of an error: it stays `true` once revealed even while the\n   * field is currently valid, so a later error shows immediately without a further gate.\n   */\n  showErrors: boolean;\n  /**\n   * Whether the field currently holds at least one error, regardless of `showErrors`.\n   */\n  isValid: boolean;\n};\n\n/**\n * Properties for the FormFieldMessages component.\n * @public\n */\nexport type FormFieldMessageProps = MaskingProps &\n  StylingProps &\n  DataTestId &\n  DOMProps &\n  BehaviorTrackingProps & {\n    children?:\n      | ((\n          messages: FormFieldControlMessage[],\n          validationState: FormFieldValidationState,\n        ) => ReactNode[] | ReactNode)\n      | ReactNode;\n  };\n\n/**\n * Component to display FormFieldMessages coming from the form control.\n */\nconst FormFieldMessagesRoot = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldMessageProps\n>((FormFieldMessageProps, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-testid': dataTestId,\n    id,\n    ...remainingProps\n  } = FormFieldMessageProps;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { state, fieldMessagesContainerId, routesAwayFromField } =\n    useFormFieldMessagesContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const formContext = useContext(FormContext);\n  const formControlId = state.formControlId;\n\n  const runtimeMessages = useSyncExternalStore(\n    formContext?.runtime.subscribe ?? noopSubscribe,\n    () =>\n      formContext?.runtime && formControlId !== undefined\n        ? formContext.runtime.getFieldMessages(formControlId)\n        : EMPTY_RUNTIME_MESSAGES,\n  );\n\n  const errorMessages = state.formControlMessages.filter(\n    (message) => message.variant === 'error',\n  );\n\n  const visibleErrorMessages = routesAwayFromField\n    ? errorMessages.filter((message) => message.source === 'custom')\n    : errorMessages;\n\n  const internalHintMessages = state.formControlMessages.filter(\n    (message) => message.variant === 'hint',\n  );\n\n  const externalHintMessages = state.customMessages.filter(\n    (message) => message.variant === 'hint',\n  );\n\n  const hintMessages = [...internalHintMessages, ...externalHintMessages];\n\n  const activeSource = visibleErrorMessages.reduce<\n    ValidationErrorSource | undefined\n  >((best, msg) => {\n    if (!msg.source) {\n      return best;\n    }\n    if (best === undefined) {\n      return msg.source;\n    }\n    return SOURCE_PRIORITY[msg.source] < SOURCE_PRIORITY[best]\n      ? msg.source\n      : best;\n  }, undefined);\n  const suppressedErrorMessages =\n    activeSource === undefined\n      ? visibleErrorMessages\n      : visibleErrorMessages.filter(\n          (msg) => !msg.source || msg.source === activeSource,\n        );\n\n  // Render function receives all errors (unsuppressed) so consumers can override suppression.\n  const formMessages = state.showError\n    ? visibleErrorMessages\n    : internalHintMessages;\n\n  // Mirrors the reducer's reveal gate (see formfield-messages-state-reducer.ts) but without its\n  // `&& !newIsValid` factor, so this stays `true` once revealed even if the field is currently\n  // valid \u2014 unlike `state.showError`, which is only ever true while an error also exists.\n  const showErrors =\n    !state.isDisabled && (state.showError || (state.isTouched ?? false));\n\n  const isValid = state.isValid ?? true;\n\n  const validationState = useMemo<FormFieldValidationState>(\n    () => ({ showErrors, isValid }),\n    [showErrors, isValid],\n  );\n\n  // When every error has been routed to another outlet, there is nothing to show\n  // inline even though `showError` is true \u2014 collapse the container in that case.\n  const hasVisibleErrorsToShow =\n    state.showError && suppressedErrorMessages.length > 0;\n\n  const autoErrorItems = state.showError\n    ? suppressedErrorMessages.map((message) => (\n        <FormFieldMessages.Item\n          disabled={disabled || ariaDisabled}\n          {...message}\n          key={message.id}\n        />\n      ))\n    : null;\n\n  let content: ReactNode[] | ReactNode = null;\n  // Check if there is content to render. The content variable can contain:\n  // - Auto-generated error items (when showError && errors exist && no consumer errors)\n  // - Auto-generated hint messages (when showError is false)\n  // - Consumer-provided children/error items (handled by FormFieldMessageItem)\n  // Treat falsy-but-defined content (`false`, `0`, `''`) as absent \u2014 a common\n  // `{condition && <Item/>}` pattern passes `false`, which must not keep the\n  // container visible with nothing inside it.\n  let hasConsumerChildren = Boolean(children);\n  if (typeof children === 'function') {\n    content = children(formMessages, validationState);\n\n    if (content === undefined || content === null) {\n      hasConsumerChildren = false;\n    }\n  } else if (children !== undefined && children !== null) {\n    // Errors displace consumer-supplied children so hint slots disappear when\n    // validation fires \u2014 consumers don't have to manage visibility manually.\n    // Exception: when the consumer provides their own error items (registered in\n    // customMessages), those take priority and we keep the consumer's children so\n    // FormFieldMessageItem can handle their own visibility (shown when showError).\n    const hasConsumerErrors = state.customMessages.some(\n      (m) => m.variant === 'error',\n    );\n    content =\n      state.showError &&\n      suppressedErrorMessages.length > 0 &&\n      !hasConsumerErrors\n        ? autoErrorItems\n        : children;\n  } else {\n    const autoMessages = state.showError\n      ? suppressedErrorMessages\n      : internalHintMessages;\n    content = autoMessages.map((message) => (\n      <FormFieldMessages.Item\n        disabled={disabled || ariaDisabled}\n        {...message}\n        key={message.id}\n      />\n    ));\n  }\n\n  const hideMessages =\n    !hasVisibleErrorsToShow &&\n    hintMessages.length === 0 &&\n    !hasConsumerChildren;\n\n  return (\n    <Flex\n      ref={forwardedRef}\n      /**\n       * We always need to render the FormFieldMessageItems so that they can register in the context and update the form state correctly.\n       * However, we only want to display them when they are a hint or if showError is true.\n       */\n      id={id ?? fieldMessagesContainerId}\n      flexDirection=\"column\"\n      aria-live=\"polite\"\n      style={{ ...consumerStyle }}\n      className={clsx(consumerClassName, styles.formFieldMessages)}\n      aria-hidden={hideMessages}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dtrum-mask={dataDtrumMask}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {formControlId !== undefined &&\n        runtimeMessages.map((error) => (\n          <RuntimeFieldMessageRegistration\n            key={`${error.validityStateKey.toString()}:${error.message}`}\n            error={error}\n            controlId={formControlId}\n          />\n        ))}\n      {content}\n    </Flex>\n  );\n});\n\n(\n  FormFieldMessagesRoot as typeof FormFieldMessagesRoot & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessages';\n\n/**\n * @public\n */\nexport const FormFieldMessages = Object.assign(FormFieldMessagesRoot, {\n  Item: FormFieldMessageItem,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -1,5 +1,5 @@
 import "./FormFieldMessages.css";
-var formFieldMessages = "_1l9bja60-3-12-1";
+var formFieldMessages = "_1l9bja60-3-13-0";
 export {
   formFieldMessages
 };

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessages.css.ts"],
-  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-12-1';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/forms/forms-core/components/hint/Hint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/hint/Hint.tsx"],
-  "sourcesContent": ["import { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { InternalBaseItem as BaseItem } from '../form-field-messages/FormFieldMessageBaseItem.js';\n\n/**\n * @public\n * @deprecated in favor of `FormFieldMessages`.\n */\nexport interface HintProps extends WithChildren, StylingProps, DataTestId {\n  /**\n   * Whether the connected input is currently disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Id to link the hint to its corresponding element. */\n  id?: string;\n}\n\n/**\n * Renders a hint message if given, otherwise renders nothing.\n * @deprecated in favor of `FormFieldMessages`.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const Hint = (props: HintProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { children, ...remainingProps }: HintProps = props;\n\n  return children ? (\n    <BaseItem variant=\"hint\" {...remainingProps}>\n      {children}\n    </BaseItem>\n  ) : null;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nHint.displayName = 'Hint';\n"],
+  "sourcesContent": ["import { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { InternalBaseItem as BaseItem } from '../form-field-messages/FormFieldMessageBaseItem.js';\n\n/**\n * @public\n * @deprecated in favor of `FormFieldMessages`.\n */\nexport interface HintProps extends WithChildren, StylingProps, DataTestId {\n  /**\n   * Whether the connected input is currently disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Id to link the hint to its corresponding element. */\n  id?: string;\n}\n\n/**\n * Renders a hint message if given, otherwise renders nothing.\n * @deprecated in favor of `FormFieldMessages`.\n * @public\n */\n// oxlint-disable-next-line typescript/no-deprecated\nexport const Hint = (props: HintProps) => {\n  // oxlint-disable-next-line typescript/no-deprecated\n  const { children, ...remainingProps }: HintProps = props;\n\n  return children ? (\n    <BaseItem variant=\"hint\" {...remainingProps}>\n      {children}\n    </BaseItem>\n  ) : null;\n};\n\n// oxlint-disable-next-line typescript/no-deprecated\nHint.displayName = 'Hint';\n"],
   "mappings": "AA8BI;AA3BJ,SAAS,oBAAoB,gBAAgB;AAsBtC,MAAM,OAAO,CAAC,UAAqB;AAExC,QAAM,EAAE,UAAU,GAAG,eAAe,IAAe;AAEnD,SAAO,WACL,oBAAC,YAAS,SAAQ,QAAQ,GAAG,gBAC1B,UACH,IACE;AACN;AAGA,KAAK,cAAc;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-12-1 {
+._1gxatyo0-3-13-0 {
   display: inline-block;
 }
-._1gxatyo1-3-12-1 {
+._1gxatyo1-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-12-1:after {
+._1gxatyo2-3-13-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-12-1 {
+._1gxatyo3-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-12-1 {
+._1gxatyo4-3-13-0 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/forms/forms-core/components/label/Label.js

@@ -40,7 +40,7 @@ const Label = /* @__PURE__ */ forwardRef(
     const generatedId = useId();
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const {
-      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
       controlId,
       formFieldId,
       required,

package/esm/forms/forms-core/components/label/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Label.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\n\nconst COMPONENT_NAME = 'Label';\n\n/**\n * Available options for the label size\n * @public\n */\nexport interface LabelProps\n  extends WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /** Defines the id of a labelable form related field. */\n  htmlFor?: string;\n\n  /**\n   * If there is a wrapping form field then this label uses the required value\n   * from the form field, otherwise it uses this required value. The label\n   * has a visual style to indicate the associated field is a mandatory field.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * If there is a wrapping form field then this label uses the disabled value\n   * from the form field, otherwise it uses this disabled value. The label\n   * has a visual style to indicate the associated field is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\nconst SimpleLabelText = forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => (\n    <Text\n      ref={forwardedRef}\n      as=\"label\"\n      textStyle=\"small-emphasized\"\n      {...props}\n    />\n  ),\n);\n\n/**\n * The `Label` component allows users to add an associated text to another\n * form control by using the `FormField` component.\n * @public\n */\nexport const Label = /* @__PURE__ */ forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => {\n    const {\n      id,\n      children,\n      htmlFor,\n      disabled: propDisabled,\n      required: propRequired,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    }: LabelProps = props;\n    const generatedId = useId();\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlId,\n      formFieldId,\n      required,\n      disabled,\n      ariaDisabled,\n      readOnly,\n      formControlId,\n      registerFormFieldLabelId,\n    } = useFormFieldContext();\n\n    const labelId = id ?? (formFieldId ? generatedId : undefined);\n\n    useEffect(() => {\n      if (labelId === undefined) {\n        return;\n      }\n\n      return registerFormFieldLabelId(labelId);\n    }, [labelId, registerFormFieldLabelId]);\n\n    const isStringChild = _canReceiveDefaultTextFormat(children);\n    const Component = isStringChild ? SimpleLabelText : 'label';\n\n    const labelFor = htmlFor || formControlId || formFieldId || controlId;\n\n    return (\n      <Component\n        htmlFor={labelFor}\n        id={labelId}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          styles.label({\n            disabled: disabled || propDisabled || ariaDisabled,\n            // Only apply the required styles if we have string children, otherwise block level\n            // elements in children will move the `*` required marker somewhere.\n            required: isStringChild && (required ?? propRequired),\n            readOnly,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n        {isStringChild && readOnly && (\n          <Text textStyle=\"small\" className={clsx(styles.readOnlyLabel)}>\n            <FormattedMessage\n              defaultMessage=\"(read only)\"\n              id=\"hIBEZw/eT6Nb+dz3\"\n              description=\"Text appended to a label when the associated form field is read-only.\"\n            />\n          </Text>\n        )}\n      </Component>\n    );\n  },\n);\n(Label as typeof Label & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAuDI,cA+DE,YA/DF;AAvDJ,OAAO,UAAU;AACjB,SAAS,YAAY,iBAAiB;AACtC,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,MAAM,iBAAiB;AAkCvB,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,iBACN;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAgB;AAChB,UAAM,cAAc,MAAM;AAE1B,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,UAAU,OAAO,cAAc,cAAc;AAEnD,cAAU,MAAM;AACd,UAAI,YAAY,QAAW;AACzB;AAAA,MACF;AAEA,aAAO,yBAAyB,OAAO;AAAA,IACzC,GAAG,CAAC,SAAS,wBAAwB,CAAC;AAEtC,UAAM,gBAAgB,6BAA6B,QAAQ;AAC3D,UAAM,YAAY,gBAAgB,kBAAkB;AAEpD,UAAM,WAAW,WAAW,iBAAiB,eAAe;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO,MAAM;AAAA,YACX,UAAU,YAAY,gBAAgB;AAAA;AAAA;AAAA,YAGtC,UAAU,kBAAkB,YAAY;AAAA,YACxC;AAAA,UACF,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,QACjD,qBAAmB;AAAA,QAElB;AAAA;AAAA,UACA,iBAAiB,YAChB,oBAAC,QAAK,WAAU,SAAQ,WAAW,KAAK,OAAO,aAAa,GAC1D;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,MAAiD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Label.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\n\nconst COMPONENT_NAME = 'Label';\n\n/**\n * Available options for the label size\n * @public\n */\nexport interface LabelProps\n  extends\n    WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /** Defines the id of a labelable form related field. */\n  htmlFor?: string;\n\n  /**\n   * If there is a wrapping form field then this label uses the required value\n   * from the form field, otherwise it uses this required value. The label\n   * has a visual style to indicate the associated field is a mandatory field.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * If there is a wrapping form field then this label uses the disabled value\n   * from the form field, otherwise it uses this disabled value. The label\n   * has a visual style to indicate the associated field is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\nconst SimpleLabelText = forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => (\n    <Text\n      ref={forwardedRef}\n      as=\"label\"\n      textStyle=\"small-emphasized\"\n      {...props}\n    />\n  ),\n);\n\n/**\n * The `Label` component allows users to add an associated text to another\n * form control by using the `FormField` component.\n * @public\n */\nexport const Label = /* @__PURE__ */ forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => {\n    const {\n      id,\n      children,\n      htmlFor,\n      disabled: propDisabled,\n      required: propRequired,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    }: LabelProps = props;\n    const generatedId = useId();\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlId,\n      formFieldId,\n      required,\n      disabled,\n      ariaDisabled,\n      readOnly,\n      formControlId,\n      registerFormFieldLabelId,\n    } = useFormFieldContext();\n\n    const labelId = id ?? (formFieldId ? generatedId : undefined);\n\n    useEffect(() => {\n      if (labelId === undefined) {\n        return;\n      }\n\n      return registerFormFieldLabelId(labelId);\n    }, [labelId, registerFormFieldLabelId]);\n\n    const isStringChild = _canReceiveDefaultTextFormat(children);\n    const Component = isStringChild ? SimpleLabelText : 'label';\n\n    const labelFor = htmlFor || formControlId || formFieldId || controlId;\n\n    return (\n      <Component\n        htmlFor={labelFor}\n        id={labelId}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          styles.label({\n            disabled: disabled || propDisabled || ariaDisabled,\n            // Only apply the required styles if we have string children, otherwise block level\n            // elements in children will move the `*` required marker somewhere.\n            required: isStringChild && (required ?? propRequired),\n            readOnly,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n        {isStringChild && readOnly && (\n          <Text textStyle=\"small\" className={clsx(styles.readOnlyLabel)}>\n            <FormattedMessage\n              defaultMessage=\"(read only)\"\n              id=\"hIBEZw/eT6Nb+dz3\"\n              description=\"Text appended to a label when the associated form field is read-only.\"\n            />\n          </Text>\n        )}\n      </Component>\n    );\n  },\n);\n(Label as typeof Label & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAwDI,cA+DE,YA/DF;AAxDJ,OAAO,UAAU;AACjB,SAAS,YAAY,iBAAiB;AACtC,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,MAAM,iBAAiB;AAmCvB,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,iBACN;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAgB;AAChB,UAAM,cAAc,MAAM;AAE1B,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,UAAU,OAAO,cAAc,cAAc;AAEnD,cAAU,MAAM;AACd,UAAI,YAAY,QAAW;AACzB;AAAA,MACF;AAEA,aAAO,yBAAyB,OAAO;AAAA,IACzC,GAAG,CAAC,SAAS,wBAAwB,CAAC;AAEtC,UAAM,gBAAgB,6BAA6B,QAAQ;AAC3D,UAAM,YAAY,gBAAgB,kBAAkB;AAEpD,UAAM,WAAW,WAAW,iBAAiB,eAAe;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO,MAAM;AAAA,YACX,UAAU,YAAY,gBAAgB;AAAA;AAAA;AAAA,YAGtC,UAAU,kBAAkB,YAAY;AAAA,YACxC;AAAA,UACF,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,QACjD,qBAAmB;AAAA,QAElB;AAAA;AAAA,UACA,iBAAiB,YAChB,oBAAC,QAAK,WAAU,SAAQ,WAAW,KAAK,OAAO,aAAa,GAC1D;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,MAAiD,cAAc;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.sty.js

@@ -1,7 +1,7 @@
 import "./Label.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var label = _7a468({ defaultClassName: "_1gxatyo0-3-12-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-12-1" }, required: { true: "_1gxatyo2-3-12-1" }, readOnly: { true: "_1gxatyo3-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-12-1";
+var label = _7a468({ defaultClassName: "_1gxatyo0-3-13-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-13-0" }, required: { true: "_1gxatyo2-3-13-0" }, readOnly: { true: "_1gxatyo3-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-13-0";
 export {
   label,
   readOnlyLabel

package/esm/forms/forms-core/components/label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-12-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-12-1'},required:{true:'_1gxatyo2-3-12-1'},readOnly:{true:'_1gxatyo3-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-12-1';"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-13-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-13-0'},required:{true:'_1gxatyo2-3-13-0'},readOnly:{true:'_1gxatyo3-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,QAAQ,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5N,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/forms-core/contexts/FormFieldContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/contexts/FormFieldContext.ts"],
-  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  dispatch?: Dispatch<FormFieldReducerAction>;\n  /** @internal */\n  formFieldId?: string;\n  /**\n   * Logical form-control id registered against this FormField.\n   * @internal\n   */\n  formControlId?: string;\n  /**\n   * Native/member input ids belonging to the logical form control.\n   * @internal\n   */\n  memberFormControlIds?: string[];\n  /**\n   * Registers a logical form-control id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerFormControlId?: (id: string) => () => void;\n  /**\n   * Registers a native/member input id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerMemberFormControlId?: (id: string) => () => void;\n  /** @internal */\n  formFieldLabelId?: string;\n  /**\n   * Registers a label id and returns an unregister callback for React effect\n   * cleanup. Custom context consumers may omit this \u2014 `useFormFieldContext`\n   * falls back to a noop.\n   * @internal\n   */\n  registerFormFieldLabelId?: (id: string) => () => void;\n}\n\nconst defaultFormFieldContext: SharedFormFieldContextProps = {\n  controlId: undefined,\n  formFieldId: undefined,\n  formControlId: undefined,\n  memberFormControlIds: [],\n  registerFormControlId: () => () => undefined,\n  registerMemberFormControlId: () => () => undefined,\n  formFieldLabelId: undefined,\n  registerFormFieldLabelId: () => () => undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n};\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>(\n  defaultFormFieldContext,\n);\n"],
+  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n  dispatch?: Dispatch<FormFieldReducerAction>;\n  /** @internal */\n  formFieldId?: string;\n  /**\n   * Logical form-control id registered against this FormField.\n   * @internal\n   */\n  formControlId?: string;\n  /**\n   * Native/member input ids belonging to the logical form control.\n   * @internal\n   */\n  memberFormControlIds?: string[];\n  /**\n   * Registers a logical form-control id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerFormControlId?: (id: string) => () => void;\n  /**\n   * Registers a native/member input id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerMemberFormControlId?: (id: string) => () => void;\n  /** @internal */\n  formFieldLabelId?: string;\n  /**\n   * Registers a label id and returns an unregister callback for React effect\n   * cleanup. Custom context consumers may omit this \u2014 `useFormFieldContext`\n   * falls back to a noop.\n   * @internal\n   */\n  registerFormFieldLabelId?: (id: string) => () => void;\n}\n\nconst defaultFormFieldContext: SharedFormFieldContextProps = {\n  controlId: undefined,\n  formFieldId: undefined,\n  formControlId: undefined,\n  memberFormControlIds: [],\n  registerFormControlId: () => () => undefined,\n  registerMemberFormControlId: () => () => undefined,\n  formFieldLabelId: undefined,\n  registerFormFieldLabelId: () => () => undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n};\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>(\n  defaultFormFieldContext,\n);\n"],
   "mappings": "AAAA,SAAwB,qBAAqB;AAgD7C,MAAM,0BAAuD;AAAA,EAC3D,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,MAAM,MAAM;AAAA,EACnC,6BAA6B,MAAM,MAAM;AAAA,EACzC,kBAAkB;AAAA,EAClB,0BAA0B,MAAM,MAAM;AAAA,EACtC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AAMO,MAAM,oBAAoB;AAAA,EAC/B;AACF;",
   "names": []
 }

package/esm/forms/forms-core/hooks/useFormControl.js

@@ -25,7 +25,7 @@ function useFormControl({
 }) {
   const uniqueId = useId();
   const {
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     controlId,
     formFieldId,
     required: contextRequired,
@@ -88,7 +88,7 @@ function useFormControl({
       setRevealed(nextRevealed);
     }
   }
-  const showValidationError = isAfterBlur ? hasAnyError && nextRevealed : messageState.showError;
+  const showValidationError = isAfterBlur ? hasAnyError && nextRevealed || messageState.showError : messageState.showError;
   const showError = !disabled && (showValidationError || hasLegacyHintError);
   const hintId = useId();
   const inputProps = {