@dynatrace/strato-components 3.13.3 → 3.14.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-group/FormFieldGroup.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useReducer,\n  useState,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from '../../../../core/types/a11y-props.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 { PolymorphicComponentProps } from '../../../../core/types/polymorph.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport {\n  _FormFieldContext as FormFieldContext,\n  type SharedFormFieldContextProps,\n} from '../../contexts/FormFieldContext.js';\nimport { _formFieldReducer } from '../../state/formfield-state-reducer.js';\n\nconst COMPONENT_NAME = '_FormFieldGroup';\n\nexport interface FormFieldGroupOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaLabelingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /**\n   * Logical id of the grouped form control. Used as the group root id and as\n   * the label target for a nested `Label`.\n   */\n  formControlId: string;\n\n  /**\n   * Whether the group and descendant form controls are disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether descendant form controls are required.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * Whether descendant form controls are read-only.\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n}\n\nexport type FormFieldGroupProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, FormFieldGroupOwnProps>,\n  'id'\n>;\n\nconst RootFormFieldGroup: <E extends ElementType = 'fieldset'>(\n  props: FormFieldGroupProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FormFieldGroupProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      as,\n      formControlId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-labelledby': ariaLabelledby,\n      'aria-disabled': ariaDisabledProp,\n      disabled,\n      required,\n      readOnly,\n      ...remainingProps\n    } = props;\n    const Component: ElementType = as ?? 'fieldset';\n    const isFieldset = Component === 'fieldset';\n    const ariaDisabled = _parseBoolean(ariaDisabledProp);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const [formFieldState, formFieldDispatch] = useReducer(\n      _formFieldReducer,\n      {},\n    );\n    const [memberFormControlIds, setMemberFormControlIds] = useState<string[]>(\n      [],\n    );\n    const [formFieldLabelIds, setFormFieldLabelIds] = useState<string[]>([]);\n\n    const registerMemberFormControlId = useCallback((id: string) => {\n      setMemberFormControlIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setMemberFormControlIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const registerFormFieldLabelId = useCallback((id: string) => {\n      setFormFieldLabelIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setFormFieldLabelIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const contextValue = useMemo<SharedFormFieldContextProps>(\n      () => ({\n        controlId: formControlId,\n        formFieldId: formControlId,\n        formControlId,\n        memberFormControlIds,\n        registerFormControlId: () => () => undefined,\n        registerMemberFormControlId,\n        formFieldLabelId: formFieldLabelIds[0],\n        registerFormFieldLabelId,\n        disabled: formFieldState.disabled ?? disabled,\n        required: formFieldState.required ?? required,\n        readOnly: formFieldState.readOnly ?? readOnly,\n        dispatch: formFieldDispatch,\n        ariaDisabled: formFieldState.ariaDisabled ?? ariaDisabled,\n      }),\n      [\n        ariaDisabled,\n        disabled,\n        formControlId,\n        formFieldLabelIds,\n        formFieldState.ariaDisabled,\n        formFieldState.disabled,\n        formFieldState.readOnly,\n        formFieldState.required,\n        memberFormControlIds,\n        readOnly,\n        registerFormFieldLabelId,\n        registerMemberFormControlId,\n        required,\n      ],\n    );\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <Component\n          ref={forwardedRef}\n          id={formControlId}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-labelledby={ariaLabelledby ?? formFieldLabelIds[0]}\n          aria-disabled={ariaDisabledProp}\n          disabled={isFieldset ? disabled : undefined}\n          {...restProps}\n          {...behavioralTrackingProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Component>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\n(\n  RootFormFieldGroup as typeof RootFormFieldGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\nexport interface FormFieldGroupLegendProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {}\n\nconst Legend = /* @__PURE__ */ forwardRef<\n  HTMLLegendElement,\n  FormFieldGroupLegendProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <legend\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...restProps}\n      {...behavioralTrackingProps}\n    >\n      {children}\n    </legend>\n  );\n});\n\n(Legend as typeof Legend & { displayName: string }).displayName =\n  '_FormFieldGroup.Legend';\n\n/**\n * Internal grouped-control primitive: renders the wrapping `<fieldset>`/legend\n * DOM and provides the FormField contexts a grouped control needs to register\n * its member ids and messages. Used today by RadioGroup and ToggleButtonGroup.\n *\n * Not exported publicly \u2014 the public grouped-control API and its wiring into\n * the Form runtime aggregator will be introduced by the upcoming Form API work\n * (APPDEV-10376). Consumers should keep using `RadioGroup` / `ToggleButtonGroup`.\n * @internal\n */\nexport const _FormFieldGroup = Object.assign(RootFormFieldGroup, {\n  Legend,\n});\n"],
-  "mappings": "AAwKQ;AAxKR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,kCAAkC;AAY3C,SAAS,gBAAgB,qBAAqB;AAC9C;AAAA,EACE,qBAAqB;AAAA,OAEhB;AACP,SAAS,yBAAyB;AAElC,MAAM,iBAAiB;AAyCvB,MAAM,qBAEqC;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,YAAyB,MAAM;AACrC,UAAM,aAAa,cAAc;AACjC,UAAM,eAAe,cAAc,gBAAgB;AAEnD,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAC1C;AAAA,MACA,CAAC;AAAA,IACH;AACA,UAAM,CAAC,sBAAsB,uBAAuB,IAAI;AAAA,MACtD,CAAC;AAAA,IACH;AACA,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmB,CAAC,CAAC;AAEvE,UAAM,8BAA8B,YAAY,CAAC,OAAe;AAC9D;AAAA,QAAwB,CAAC,eACvB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX;AAAA,UAAwB,CAAC,eACvB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,QACnD;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,2BAA2B,YAAY,CAAC,OAAe;AAC3D;AAAA,QAAqB,CAAC,eACpB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX;AAAA,UAAqB,CAAC,eACpB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,QACnD;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,QACL,WAAW;AAAA,QACX,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,uBAAuB,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,kBAAkB,kBAAkB,CAAC;AAAA,QACrC;AAAA,QACA,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU;AAAA,QACV,cAAc,eAAe,gBAAgB;AAAA,MAC/C;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAChC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,mBAAiB,kBAAkB,kBAAkB,CAAC;AAAA,QACtD,iBAAe;AAAA,QACf,UAAU,aAAa,WAAW;AAAA,QACjC,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAGE,mBACA,cAAc;AAQhB,MAAM,SAAyB,2BAG7B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;AAYK,MAAM,kBAAkB,OAAO,OAAO,oBAAoB;AAAA,EAC/D;AACF,CAAC;",
+  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useReducer,\n  useState,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from '../../../../core/types/a11y-props.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 { PolymorphicComponentProps } from '../../../../core/types/polymorph.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport {\n  _FormFieldContext as FormFieldContext,\n  type SharedFormFieldContextProps,\n} from '../../contexts/FormFieldContext.js';\nimport { _formFieldReducer } from '../../state/formfield-state-reducer.js';\n\nconst COMPONENT_NAME = '_FormFieldGroup';\n\nexport interface FormFieldGroupOwnProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaLabelingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /**\n   * Logical id of the grouped form control. Used as the group root id and as\n   * the label target for a nested `Label`.\n   */\n  formControlId: string;\n\n  /**\n   * Whether the group and descendant form controls are disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether descendant form controls are required.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * Whether descendant form controls are read-only.\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n}\n\nexport type FormFieldGroupProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, FormFieldGroupOwnProps>,\n  'id'\n>;\n\nconst RootFormFieldGroup: <E extends ElementType = 'fieldset'>(\n  props: FormFieldGroupProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FormFieldGroupProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      as,\n      formControlId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-labelledby': ariaLabelledby,\n      'aria-disabled': ariaDisabledProp,\n      disabled,\n      required,\n      readOnly,\n      ...remainingProps\n    } = props;\n    const Component: ElementType = as ?? 'fieldset';\n    const isFieldset = Component === 'fieldset';\n    const ariaDisabled = _parseBoolean(ariaDisabledProp);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const [formFieldState, formFieldDispatch] = useReducer(\n      _formFieldReducer,\n      {},\n    );\n    const [memberFormControlIds, setMemberFormControlIds] = useState<string[]>(\n      [],\n    );\n    const [formFieldLabelIds, setFormFieldLabelIds] = useState<string[]>([]);\n\n    const registerMemberFormControlId = useCallback((id: string) => {\n      setMemberFormControlIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setMemberFormControlIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const registerFormFieldLabelId = useCallback((id: string) => {\n      setFormFieldLabelIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setFormFieldLabelIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const contextValue = useMemo<SharedFormFieldContextProps>(\n      () => ({\n        controlId: formControlId,\n        formFieldId: formControlId,\n        formControlId,\n        memberFormControlIds,\n        registerFormControlId: () => () => undefined,\n        registerMemberFormControlId,\n        formFieldLabelId: formFieldLabelIds[0],\n        registerFormFieldLabelId,\n        disabled: formFieldState.disabled ?? disabled,\n        required: formFieldState.required ?? required,\n        readOnly: formFieldState.readOnly ?? readOnly,\n        dispatch: formFieldDispatch,\n        ariaDisabled: formFieldState.ariaDisabled ?? ariaDisabled,\n      }),\n      [\n        ariaDisabled,\n        disabled,\n        formControlId,\n        formFieldLabelIds,\n        formFieldState.ariaDisabled,\n        formFieldState.disabled,\n        formFieldState.readOnly,\n        formFieldState.required,\n        memberFormControlIds,\n        readOnly,\n        registerFormFieldLabelId,\n        registerMemberFormControlId,\n        required,\n      ],\n    );\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <Component\n          ref={forwardedRef}\n          id={formControlId}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-labelledby={ariaLabelledby ?? formFieldLabelIds[0]}\n          aria-disabled={ariaDisabledProp}\n          disabled={isFieldset ? disabled : undefined}\n          {...restProps}\n          {...behavioralTrackingProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Component>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\n(\n  RootFormFieldGroup as typeof RootFormFieldGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\nexport interface FormFieldGroupLegendProps\n  extends WithChildren, StylingProps, DataTestId, BehaviorTrackingProps {}\n\nconst Legend = /* @__PURE__ */ forwardRef<\n  HTMLLegendElement,\n  FormFieldGroupLegendProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <legend\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...restProps}\n      {...behavioralTrackingProps}\n    >\n      {children}\n    </legend>\n  );\n});\n\n(Legend as typeof Legend & { displayName: string }).displayName =\n  '_FormFieldGroup.Legend';\n\n/**\n * Internal grouped-control primitive: renders the wrapping `<fieldset>`/legend\n * DOM and provides the FormField contexts a grouped control needs to register\n * its member ids and messages. Used today by RadioGroup and ToggleButtonGroup.\n *\n * Not exported publicly \u2014 the public grouped-control API and its wiring into\n * the Form runtime aggregator will be introduced by the upcoming Form API work\n * (APPDEV-10376). Consumers should keep using `RadioGroup` / `ToggleButtonGroup`.\n * @internal\n */\nexport const _FormFieldGroup = Object.assign(RootFormFieldGroup, {\n  Legend,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { CriticalIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './FormFieldMessageItem.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.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 { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\n\n/**\n * @public\n */\nexport interface FormFieldMessageBaseItemProps\n  extends WithChildren,\n    StylingProps,\n    DOMProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Determines the style of the message (text color, icon).\n   * Error messages additionally prevent the form component\n   * from being submitted in a form.\n   */\n  variant?: 'error' | 'hint';\n  /**\n   * Whether the connected input is currently disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders a Form Field Message.\n * @internal\n */\nexport const InternalBaseItem = (props: FormFieldMessageBaseItemProps) => {\n  const {\n    children,\n    variant = 'hint',\n    className: consumerClassName,\n    style: consumerStyle,\n    disabled: propDisabled = false,\n    'data-testid': dataTestId,\n    id: propId,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { disabled: contextDisabled } = useFormFieldMessagesContext();\n  const disabled = propDisabled || contextDisabled;\n\n  return (\n    <Flex\n      className={clsx(\n        styles.formFieldMessageItem({ variant, disabled }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      alignItems=\"flex-start\"\n      gap={4}\n      data-testid={dataTestId}\n      id={propId}\n      {...behavioralTrackingProps}\n    >\n      {variant === 'error' && (\n        <Flex>\n          <CriticalIcon size=\"small\" />\n        </Flex>\n      )}\n      <div className={styles.formFieldMessageItemText}>{children}</div>\n    </Flex>\n  );\n};\n\nInternalBaseItem.displayName = 'FormFieldMessageItem';\n"],
-  "mappings": "AA0DI,SAcM,KAdN;AA1DJ,OAAO,UAAU;AAEjB,SAAS,oBAAoB;AAE7B,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AACrB,SAAS,mCAAmC;AA4BrC,MAAM,mBAAmB,CAAC,UAAyC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU,eAAe;AAAA,IACzB,eAAe;AAAA,IACf,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAE3E,QAAM,EAAE,UAAU,gBAAgB,IAAI,4BAA4B;AAClE,QAAM,WAAW,gBAAgB;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO,qBAAqB,EAAE,SAAS,SAAS,CAAC;AAAA,QACjD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,YAAW;AAAA,MACX,KAAK;AAAA,MACL,eAAa;AAAA,MACb,IAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,oBAAY,WACX,oBAAC,QACC,8BAAC,gBAAa,MAAK,SAAQ,GAC7B;AAAA,QAEF,oBAAC,SAAI,WAAW,OAAO,0BAA2B,UAAS;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEA,iBAAiB,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { CriticalIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './FormFieldMessageItem.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.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 { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\n\n/**\n * @public\n */\nexport interface FormFieldMessageBaseItemProps\n  extends\n    WithChildren,\n    StylingProps,\n    DOMProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Determines the style of the message (text color, icon).\n   * Error messages additionally prevent the form component\n   * from being submitted in a form.\n   */\n  variant?: 'error' | 'hint';\n  /**\n   * Whether the connected input is currently disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders a Form Field Message.\n * @internal\n */\nexport const InternalBaseItem = (props: FormFieldMessageBaseItemProps) => {\n  const {\n    children,\n    variant = 'hint',\n    className: consumerClassName,\n    style: consumerStyle,\n    disabled: propDisabled = false,\n    'data-testid': dataTestId,\n    id: propId,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { disabled: contextDisabled } = useFormFieldMessagesContext();\n  const disabled = propDisabled || contextDisabled;\n\n  return (\n    <Flex\n      className={clsx(\n        styles.formFieldMessageItem({ variant, disabled }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      alignItems=\"flex-start\"\n      gap={4}\n      data-testid={dataTestId}\n      id={propId}\n      {...behavioralTrackingProps}\n    >\n      {variant === 'error' && (\n        <Flex>\n          <CriticalIcon size=\"small\" />\n        </Flex>\n      )}\n      <div className={styles.formFieldMessageItemText}>{children}</div>\n    </Flex>\n  );\n};\n\nInternalBaseItem.displayName = 'FormFieldMessageItem';\n"],
+  "mappings": "AA2DI,SAcM,KAdN;AA3DJ,OAAO,UAAU;AAEjB,SAAS,oBAAoB;AAE7B,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AACrB,SAAS,mCAAmC;AA6BrC,MAAM,mBAAmB,CAAC,UAAyC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU,eAAe;AAAA,IACzB,eAAe;AAAA,IACf,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAE3E,QAAM,EAAE,UAAU,gBAAgB,IAAI,4BAA4B;AAClE,QAAM,WAAW,gBAAgB;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO,qBAAqB,EAAE,SAAS,SAAS,CAAC;AAAA,QACjD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,YAAW;AAAA,MACX,KAAK;AAAA,MACL,eAAa;AAAA,MACb,IAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,oBAAY,WACX,oBAAC,QACC,8BAAC,gBAAa,MAAK,SAAQ,GAC7B;AAAA,QAEF,oBAAC,SAAI,WAAW,OAAO,0BAA2B,UAAS;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEA,iBAAiB,cAAc;",
   "names": []
 }

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

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

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { InternalBaseItem as BaseItem } from "./FormFieldMessageBaseItem.js";
 import { useId } from "../../../../core/hooks/useId.js";
+import { ValidationError } from "../../../validation/types.js";
 import { useFormFieldMessagesContext } from "../../hooks/useFormFieldMessagesContext.js";
 import { FormFieldMessagesAction } from "../../state/formfield-messages-state-reducer.js";
 const FormFieldMessageItem = (props) => {
@@ -11,7 +12,7 @@ const FormFieldMessageItem = (props) => {
     variant = "hint",
     message,
     id = generatedId,
-    validityStateKey,
+    validityStateKey = id,
     showImmediately = false,
     ...remainingProps
   } = props;
@@ -21,12 +22,11 @@ const FormFieldMessageItem = (props) => {
   useEffect(() => {
     dispatch?.({
       type: FormFieldMessagesAction.ADDMESSAGE,
-      payload: {
+      payload: variant === "error" ? {
         id,
-        variant,
-        ...showImmediately && { showError: variant === "error" },
-        ...messageString !== void 0 && { messageText: messageString }
-      }
+        error: new ValidationError(messageString ?? ""),
+        ...showImmediately && { showError: true }
+      } : { id, hint: messageString, source: "custom" }
     });
     return () => {
       dispatch?.({
@@ -34,7 +34,7 @@ const FormFieldMessageItem = (props) => {
         payload: { id }
       });
     };
-  }, [variant, id, dispatch, messageString, showImmediately]);
+  }, [variant, id, validityStateKey, dispatch, messageString, showImmediately]);
   const hasFormControlRegistration = state.formControlId !== void 0 || state.memberFormControlIds !== void 0 && state.memberFormControlIds.length > 0;
   if (!showImmediately && dispatch && hasFormControlRegistration && !state.showError && variant === "error") {
     return null;

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   * 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;",
+  "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 { ValidationError } from '../../../validation/types.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 = id,\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        variant === 'error'\n          ? {\n              id,\n              error: new ValidationError(messageString ?? ''),\n              ...(showImmediately && { showError: true }),\n            }\n          : { id, hint: messageString, source: 'custom' },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    };\n  }, [variant, id, validityStateKey, 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": "AA6FI;AA7FJ,SAAS,iBAAiC;AAG1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,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,mBAAmB;AAAA,IACnB,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,SACE,YAAY,UACR;AAAA,QACE;AAAA,QACA,OAAO,IAAI,gBAAgB,iBAAiB,EAAE;AAAA,QAC9C,GAAI,mBAAmB,EAAE,WAAW,KAAK;AAAA,MAC3C,IACA,EAAE,IAAI,MAAM,eAAe,QAAQ,SAAS;AAAA,IACpD,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,kBAAkB,UAAU,eAAe,eAAe,CAAC;AAG5E,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-13-3", variantClassNames: { variant: { hint: "_16z6rg11-3-13-3", error: "_16z6rg12-3-13-3" }, disabled: { true: "_16z6rg13-3-13-3" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-13-3";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-14-1", variantClassNames: { variant: { hint: "_16z6rg11-3-14-1", error: "_16z6rg12-3-14-1" }, disabled: { true: "_16z6rg13-3-14-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-14-1";
 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-13-3',variantClassNames:{variant:{hint:'_16z6rg11-3-13-3',error:'_16z6rg12-3-13-3'},disabled:{true:'_16z6rg13-3-13-3'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-13-3';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-14-1',variantClassNames:{variant:{hint:'_16z6rg11-3-14-1',error:'_16z6rg12-3-14-1'},disabled:{true:'_16z6rg13-3-14-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-14-1';"],
   "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-13-3 {
+._1l9bja60-3-14-1 {
   display: flex;
 }
-._1l9bja60-3-13-3:empty {
+._1l9bja60-3-14-1:empty {
   display: none;
 }
-._1l9bja60-3-13-3[aria-hidden='true'] {
+._1l9bja60-3-14-1[aria-hidden='true'] {
   display: none;
 }

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

@@ -14,8 +14,10 @@ import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioral
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { FormContext } from "../../../form/context/FormContext.js";
 import { FormValidationError } from "../../../form/form-error-classes.js";
+import { withSource } from "../../../validation/validation-builders.js";
 import { useFormFieldContext } from "../../hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../hooks/useFormFieldMessagesContext.js";
+import { isInternalErrorEntry } from "../../state/formfield-messages-selectors.js";
 import { FormFieldMessagesAction } from "../../state/formfield-messages-state-reducer.js";
 const EMPTY_RUNTIME_MESSAGES = [];
 const noopSubscribe = () => () => void 0;
@@ -24,34 +26,54 @@ const SOURCE_PRIORITY = {
   strato: 1,
   native: 2
 };
+function toControlMessage(entry) {
+  const { formControlId } = entry.error;
+  return {
+    id: entry.id,
+    variant: "error",
+    message: entry.error.message,
+    validityStateKey: entry.error.validityStateKey.toString(),
+    source: entry.error.source,
+    messageType: isInternalErrorEntry(entry) ? "formcontrol" : "custom",
+    ...typeof formControlId === "string" && { controlId: formControlId }
+  };
+}
+function toHintMessage(hint) {
+  return {
+    id: hint.id,
+    variant: "hint",
+    message: hint.message,
+    validityStateKey: "",
+    messageType: hint.source === "custom" ? "custom" : "formcontrol",
+    ...hint.controlId !== void 0 && { controlId: hint.controlId }
+  };
+}
 function RuntimeFieldMessageRegistration({
   error,
+  isManual,
   controlId
 }) {
   const { dispatch } = useFormFieldMessagesContext();
-  const id = `runtime-${error.validityStateKey.toString()}-${error.message}`;
+  const id = `runtime-${error.validityStateKey.toString()}-${controlId}`;
   useEffect(() => {
-    const source = error instanceof FormValidationError ? "strato" : error.source;
+    const errorToDispatch = error instanceof FormValidationError ? withSource(error, "strato") : error;
     dispatch?.({
       type: FormFieldMessagesAction.ADDMESSAGE,
       payload: {
         id,
-        message: error.message,
-        validityStateKey: error.validityStateKey.toString(),
-        messageType: "formcontrol",
-        variant: "error",
-        source,
-        controlId,
-        showError: true
+        error: errorToDispatch,
+        // Only `form.setError()` bypasses the touched-gate; form-level validator
+        // errors stay gated like any other validation result (APPDEV-19298).
+        showError: isManual ? true : void 0
       }
     });
     return () => {
       dispatch?.({
         type: FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: { id, messageType: "formcontrol", controlId }
+        payload: { id, source: errorToDispatch.source }
       });
     };
-  }, [controlId, dispatch, error, error.message, error.validityStateKey, id]);
+  }, [controlId, dispatch, error, id, isManual]);
   return null;
 }
 const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps, forwardedRef) => {
@@ -74,15 +96,11 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
     formContext?.runtime.subscribe ?? noopSubscribe,
     () => formContext?.runtime && formControlId !== void 0 ? formContext.runtime.getFieldMessages(formControlId) : EMPTY_RUNTIME_MESSAGES
   );
-  const errorMessages = state.formControlMessages.filter(
-    (message) => message.variant === "error"
-  );
+  const errorMessages = state.errors.filter((entry) => isInternalErrorEntry(entry)).map(toControlMessage);
   const visibleErrorMessages = routesAwayFromField ? errorMessages.filter((message) => message.source === "custom") : errorMessages;
-  const internalHintMessages = state.formControlMessages.filter(
-    (message) => message.variant === "hint"
-  );
-  const externalHintMessages = state.customMessages.filter(
-    (message) => message.variant === "hint"
+  const internalHintMessages = state.hints.filter((hint) => hint.source !== "custom").map(toHintMessage);
+  const externalHintMessages = state.hints.filter(
+    (hint) => hint.source === "custom"
   );
   const hintMessages = [...internalHintMessages, ...externalHintMessages];
   const activeSource = visibleErrorMessages.reduce((best, msg) => {
@@ -121,8 +139,8 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
       hasConsumerChildren = false;
     }
   } else if (children !== void 0 && children !== null) {
-    const hasConsumerErrors = state.customMessages.some(
-      (m) => m.variant === "error"
+    const hasConsumerErrors = state.errors.some(
+      (entry) => !isInternalErrorEntry(entry)
     );
     content = state.showError && suppressedErrorMessages.length > 0 && !hasConsumerErrors ? autoErrorItems : children;
   } else {
@@ -152,10 +170,11 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
       "data-testid": dataTestId,
       ...behavioralTrackingProps,
       children: [
-        formControlId !== void 0 && runtimeMessages.map((error) => /* @__PURE__ */ jsx(
+        formControlId !== void 0 && runtimeMessages.map(({ error, isManual }) => /* @__PURE__ */ jsx(
           RuntimeFieldMessageRegistration,
           {
             error,
+            isManual,
             controlId: formControlId
           },
           `${error.validityStateKey.toString()}:${error.message}`

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  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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",
+  "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 { withSource } from '../../../validation/validation-builders.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { isInternalErrorEntry } from '../../state/formfield-messages-selectors.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\nimport type {\n  FormFieldControlMessage,\n  ValidationErrorEntry,\n  ValidationHint,\n} from '../../types/formfield-messages.types.js';\n\ntype RuntimeFieldMessage = { error: ValidationError; isManual: boolean };\n\nconst EMPTY_RUNTIME_MESSAGES: RuntimeFieldMessage[] = [];\nconst noopSubscribe = () => () => undefined;\n\nconst SOURCE_PRIORITY: Record<ValidationErrorSource, number> = {\n  custom: 0,\n  strato: 1,\n  native: 2,\n};\n\nfunction toControlMessage(\n  entry: ValidationErrorEntry,\n): FormFieldControlMessage {\n  const { formControlId } = entry.error;\n\n  return {\n    id: entry.id,\n    variant: 'error',\n    message: entry.error.message,\n    validityStateKey: entry.error.validityStateKey.toString(),\n    source: entry.error.source,\n    messageType: isInternalErrorEntry(entry) ? 'formcontrol' : 'custom',\n    ...(typeof formControlId === 'string' && { controlId: formControlId }),\n  };\n}\n\nfunction toHintMessage(hint: ValidationHint): FormFieldControlMessage {\n  return {\n    id: hint.id,\n    variant: 'hint',\n    message: hint.message,\n    validityStateKey: '',\n    messageType: hint.source === 'custom' ? 'custom' : 'formcontrol',\n    ...(hint.controlId !== undefined && { controlId: hint.controlId }),\n  };\n}\n\nfunction RuntimeFieldMessageRegistration({\n  error,\n  isManual,\n  controlId,\n}: {\n  error: ValidationError;\n  isManual: boolean;\n  controlId: string;\n}) {\n  const { dispatch } = useFormFieldMessagesContext();\n  // Deterministic and idempotent: the message text can vary with locale or\n  // interpolation, the key/control pair cannot.\n  const id = `runtime-${error.validityStateKey.toString()}-${controlId}`;\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 errorToDispatch =\n      error instanceof FormValidationError\n        ? withSource(error, 'strato')\n        : error;\n\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        error: errorToDispatch,\n        // Only `form.setError()` bypasses the touched-gate; form-level validator\n        // errors stay gated like any other validation result (APPDEV-19298).\n        showError: isManual ? true : undefined,\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id, source: errorToDispatch.source },\n      });\n    };\n  }, [controlId, dispatch, error, id, isManual]);\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.errors\n    .filter((entry) => isInternalErrorEntry(entry))\n    .map(toControlMessage);\n\n  const visibleErrorMessages = routesAwayFromField\n    ? errorMessages.filter((message) => message.source === 'custom')\n    : errorMessages;\n\n  const internalHintMessages = state.hints\n    .filter((hint) => hint.source !== 'custom')\n    .map(toHintMessage);\n\n  const externalHintMessages = state.hints.filter(\n    (hint) => hint.source === 'custom',\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.errors.some(\n      (entry) => !isInternalErrorEntry(entry),\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, isManual }) => (\n          <RuntimeFieldMessageRegistration\n            key={`${error.validityStateKey.toString()}:${error.message}`}\n            error={error}\n            isManual={isManual}\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-13-3";
+var formFieldMessages = "_1l9bja60-3-14-1";
 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-13-3';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

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

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

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-13-3", variantClassNames: { disabled: { true: "_1gxatyo1-3-13-3" }, required: { true: "_1gxatyo2-3-13-3" }, readOnly: { true: "_1gxatyo3-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-13-3";
+var label = _7a468({ defaultClassName: "_1gxatyo0-3-14-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-14-1" }, required: { true: "_1gxatyo2-3-14-1" }, readOnly: { true: "_1gxatyo3-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-14-1";
 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-13-3',variantClassNames:{disabled:{true:'_1gxatyo1-3-13-3'},required:{true:'_1gxatyo2-3-13-3'},readOnly:{true:'_1gxatyo3-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-13-3';"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-14-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-14-1'},required:{true:'_1gxatyo2-3-14-1'},readOnly:{true:'_1gxatyo3-3-14-1'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-14-1';"],
   "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/FormFieldMessageContext.js

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 const initialState = {
-  formControlMessages: [],
-  customMessages: [],
+  errors: [],
+  hints: [],
   isTouched: false,
   showError: false,
   isValid: void 0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/contexts/FormFieldMessageContext.ts"],
-  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldMessagesReducerAction } from '../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../types/formfield-messages.types.js';\n\n/**\n * @internal\n */\nexport interface FormFieldMessageContextProps {\n  /** @defaultValue false */\n  disabled?: boolean;\n  dispatch?: Dispatch<FormFieldMessagesReducerAction>;\n  state: FormFieldMessageContextState;\n  fieldMessagesContainerId?: string;\n  formMessagesContainerId?: string;\n  routesAwayFromField?: boolean;\n}\n\nconst initialState: FormFieldMessageContextState = {\n  formControlMessages: [],\n  customMessages: [],\n  isTouched: false,\n  showError: false,\n  isValid: undefined,\n};\n\n/**\n * Context provider for `FormFieldMessageContextProps` to connect form controls to the applied errors and error messages.\n * @internal\n */\nexport const FormFieldMessageContext =\n  createContext<FormFieldMessageContextProps>({\n    state: initialState,\n  });\n"],
-  "mappings": "AAAA,SAAwB,qBAAqB;AAkB7C,MAAM,eAA6C;AAAA,EACjD,qBAAqB,CAAC;AAAA,EACtB,gBAAgB,CAAC;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAMO,MAAM,0BACX,cAA4C;AAAA,EAC1C,OAAO;AACT,CAAC;",
+  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldMessagesReducerAction } from '../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../types/formfield-messages.types.js';\n\n/**\n * @internal\n */\nexport interface FormFieldMessageContextProps {\n  /** @defaultValue false */\n  disabled?: boolean;\n  dispatch?: Dispatch<FormFieldMessagesReducerAction>;\n  state: FormFieldMessageContextState;\n  fieldMessagesContainerId?: string;\n  formMessagesContainerId?: string;\n  routesAwayFromField?: boolean;\n}\n\nconst initialState: FormFieldMessageContextState = {\n  errors: [],\n  hints: [],\n  isTouched: false,\n  showError: false,\n  isValid: undefined,\n};\n\n/**\n * Context provider for `FormFieldMessageContextProps` to connect form controls to the applied errors and error messages.\n * @internal\n */\nexport const FormFieldMessageContext =\n  createContext<FormFieldMessageContextProps>({\n    state: initialState,\n  });\n"],
+  "mappings": "AAAA,SAAwB,qBAAqB;AAkB7C,MAAM,eAA6C;AAAA,EACjD,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAMO,MAAM,0BACX,cAA4C;AAAA,EAC1C,OAAO;AACT,CAAC;",
   "names": []
 }

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

@@ -35,7 +35,8 @@ function useFormControl({
     dispatch: formFieldDispatch,
     registerFormControlId
   } = useFormFieldContext();
-  const { state: messageState, dispatch: messageDispatch } = useFormFieldMessagesContext();
+  const { state: messageState, dispatch: rawMessageDispatch } = useFormFieldMessagesContext();
+  const messageDispatch = controlState ? void 0 : rawMessageDispatch;
   const disabled = propDisabled ?? contextDisabled;
   const ariaDisabled = parseBoolean(propAriaDisabled) ?? contextAriaDisabled;
   const required = propRequired ?? contextRequired;
@@ -72,11 +73,11 @@ function useFormControl({
       payload: { formControlId: id }
     });
   }, [messageDispatch, id]);
-  const [hasLegacyHintError, hint] = useFormControlState(controlState);
+  const [showLegacyError, hint] = useFormControlState(controlState);
   const isAfterBlur = validationVisibility === "after-blur";
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
   const [revealed, setRevealed] = useState(false);
-  const hasAnyError = messageState.showError || hasLegacyHintError || isAfterBlur && hasValidationError;
+  const hasAnyError = !controlState && messageState.showError || showLegacyError || isAfterBlur && hasValidationError;
   let nextRevealed = revealed;
   if (isAfterBlur) {
     if (revealed && !hasAnyError) {
@@ -88,17 +89,33 @@ function useFormControl({
       setRevealed(nextRevealed);
     }
   }
-  const showValidationError = isAfterBlur ? hasAnyError && nextRevealed || messageState.showError : messageState.showError;
-  const showError = !disabled && (showValidationError || hasLegacyHintError);
+  const showValidationError = controlState ? false : isAfterBlur ? hasAnyError && nextRevealed || messageState.showError : messageState.showError;
+  const showError = !disabled && (showValidationError || showLegacyError);
+  const resolvedMessageState = useMemo(
+    () => controlState ? {
+      errors: [],
+      hints: [],
+      isTouched: false,
+      showError: showLegacyError,
+      isValid: !showLegacyError
+    } : messageState,
+    [controlState, showLegacyError, messageState]
+  );
   const hintId = useId();
   const inputProps = {
     "aria-describedby": hint ? hintId : void 0,
-    "aria-invalid": showValidationError || hasLegacyHintError
+    "aria-invalid": showValidationError || showLegacyError
   };
   const hintProps = { id: hintId, "aria-live": "polite" };
   const focusHandlers = useMemo(
     () => isAfterBlur ? {
-      onFocus: () => setHasFocusWithin(true),
+      onFocus: () => {
+        setHasFocusWithin(true);
+        messageDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: false }
+        });
+      },
       onBlur: (event) => {
         if (!event.currentTarget.contains(event.relatedTarget)) {
           setHasFocusWithin(false);
@@ -131,7 +148,7 @@ function useFormControl({
     hintProps,
     hint,
     showError,
-    messageState,
+    messageState: resolvedMessageState,
     messageDispatch,
     focusHandlers,
     markTouched