@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -66,10 +66,11 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
     "data-dtrum-allow": dataDtrumAllow,
     "data-dtrum-mask": dataDtrumMask,
     "data-testid": dataTestId,
+    id,
     ...remainingProps
   } = FormFieldMessageProps;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
-  const { state } = useFormFieldMessagesContext();
+  const { state, fieldMessagesContainerId, routesAwayFromField } = useFormFieldMessagesContext();
   const { disabled, ariaDisabled } = useFormFieldContext();
   const formContext = useContext(FormContext);
   const formControlId = state.formControlId;
@@ -80,7 +81,6 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
   const errorMessages = state.formControlMessages.filter(
     (message) => message.variant === "error"
   );
-  const routesAwayFromField = formContext !== void 0 && state.messageTarget !== void 0 && !state.messageTarget.includes("field");
   const visibleErrorMessages = routesAwayFromField ? errorMessages.filter((message) => message.source === "custom") : errorMessages;
   const internalHintMessages = state.formControlMessages.filter(
     (message) => message.variant === "hint"
@@ -139,6 +139,7 @@ const FormFieldMessagesRoot = /* @__PURE__ */ forwardRef((FormFieldMessageProps,
     Flex,
     {
       ref: forwardedRef,
+      id: id ?? fieldMessagesContainerId,
       flexDirection: "column",
       "aria-live": "polite",
       style: { ...consumerStyle },

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 { 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  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    ...remainingProps\n  } = FormFieldMessageProps;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const { state } = 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  // 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  const routesAwayFromField =\n    formContext !== undefined &&\n    state.messageTarget !== undefined &&\n    !state.messageTarget.includes('field');\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      flexDirection=\"column\"\n      aria-live=\"polite\"\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      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  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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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./FormFieldMessages.css";
-var formFieldMessages = "_1l9bja60-3-11-2";
+var formFieldMessages = "_1l9bja60-3-12-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-11-2';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-12-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 */\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 * @public\n */\nexport const Hint = (props: HintProps) => {\n  const { children, ...remainingProps }: HintProps = props;\n\n  return children ? (\n    <BaseItem variant=\"hint\" {...remainingProps}>\n      {children}\n    </BaseItem>\n  ) : null;\n};\n\nHint.displayName = 'Hint';\n"],
-  "mappings": "AA0BI;AAvBJ,SAAS,oBAAoB,gBAAgB;AAmBtC,MAAM,OAAO,CAAC,UAAqB;AACxC,QAAM,EAAE,UAAU,GAAG,eAAe,IAAe;AAEnD,SAAO,WACL,oBAAC,YAAS,SAAQ,QAAQ,GAAG,gBAC1B,UACH,IACE;AACN;AAEA,KAAK,cAAc;",
+  "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"],
+  "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-11-2 {
+._1gxatyo0-3-12-0 {
   display: inline-block;
 }
-._1gxatyo1-3-11-2 {
+._1gxatyo1-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-11-2:after {
+._1gxatyo2-3-12-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-11-2 {
+._1gxatyo3-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-11-2 {
+._1gxatyo4-3-12-0 {
   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-11-2", variantClassNames: { disabled: { true: "_1gxatyo1-3-11-2" }, required: { true: "_1gxatyo2-3-11-2" }, readOnly: { true: "_1gxatyo3-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-11-2";
+var label = _7a468({ defaultClassName: "_1gxatyo0-3-12-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-12-0" }, required: { true: "_1gxatyo2-3-12-0" }, readOnly: { true: "_1gxatyo3-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-12-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-11-2',variantClassNames:{disabled:{true:'_1gxatyo1-3-11-2'},required:{true:'_1gxatyo2-3-11-2'},readOnly:{true:'_1gxatyo3-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-11-2';"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-12-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-12-0'},required:{true:'_1gxatyo2-3-12-0'},readOnly:{true:'_1gxatyo3-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-12-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/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}\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;AAe7C,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  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;",
   "names": []
 }

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

@@ -207,21 +207,48 @@ function getI18nValidationState(intl, element, trigger) {
   );
 }
 function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
-  const { state } = useFormFieldMessagesContext();
+  const {
+    state,
+    fieldMessagesContainerId,
+    formMessagesContainerId,
+    routesAwayFromField
+  } = useFormFieldMessagesContext();
   const _ariaProps = useMemo(() => {
-    let messageIdsString;
-    let errorMessageIdsString;
-    if (state.customMessages.length > 0 || state.formControlMessages.length > 0) {
-      const messages = [...state.customMessages, ...state.formControlMessages];
-      errorMessageIdsString = messages.filter((msg) => msg.variant === "error").map((msg) => msg.id).join(" ");
-      messageIdsString = messages.map((msg) => msg.id).join(" ");
+    const hasHints = state.customMessages.some((m) => m.variant === "hint") || state.formControlMessages.some((m) => m.variant === "hint");
+    const hasInlineErrors = state.customMessages.some((m) => m.variant === "error") || state.formControlMessages.some(
+      (m) => m.variant === "error" && (!routesAwayFromField || m.source === "custom")
+    );
+    const hasRoutedErrors = routesAwayFromField && state.formControlMessages.some(
+      (m) => m.variant === "error" && m.source !== "custom"
+    );
+    const hasInlineContent = hasHints || state.showError && hasInlineErrors;
+    let activeErrorContainerId;
+    if (state.showError && hasInlineErrors) {
+      activeErrorContainerId = fieldMessagesContainerId;
+    } else if (state.showError && hasRoutedErrors) {
+      activeErrorContainerId = formMessagesContainerId;
+    }
+    const ariaDescribedByParts = [];
+    if (hasInlineContent && fieldMessagesContainerId) {
+      ariaDescribedByParts.push(fieldMessagesContainerId);
+    }
+    if (state.showError && hasRoutedErrors && formMessagesContainerId) {
+      ariaDescribedByParts.push(formMessagesContainerId);
     }
+    const ariaDescribedBy = ariaDescribedByParts.length > 0 ? ariaDescribedByParts.join(" ") : void 0;
     return {
-      "aria-errormessage": state.showError ? errorMessageIdsString : void 0,
+      "aria-errormessage": activeErrorContainerId,
       "aria-invalid": state.showError,
-      "aria-describedby": messageIdsString
+      "aria-describedby": ariaDescribedBy
     };
-  }, [state.customMessages, state.formControlMessages, state.showError]);
+  }, [
+    routesAwayFromField,
+    formMessagesContainerId,
+    state.customMessages,
+    state.formControlMessages,
+    state.showError,
+    fieldMessagesContainerId
+  ]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
   return ariaProps;
 }
@@ -235,7 +262,7 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
   const updateErrorMessages = useCallback(() => {
     const errorType = getErrorType(ref.current?.validity);
     formControlMessagesRef.current.forEach((message) => {
-      if (message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
+      if (message.id === errorId && message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
         dispatch?.({
           type: FormFieldMessagesAction.REMOVEMESSAGE,
           payload: {

package/esm/forms/forms-core/hooks/useFormFieldValidation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/hooks/useFormFieldValidation.tsx"],
-  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type SyntheticEvent,\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useMemo,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  FormattedMessage,\n  defineMessages,\n  useIntl,\n  type IntlShape,\n} from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport type {\n  ValidationState,\n  ValidationTrigger,\n} from '../../validation/types.js';\nimport { useCustomMessageEmitter } from '../../validation/useCustomMessageEmitter.js';\nimport { getValidationState } from '../../validation/validation-builders.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\ntype FormFieldElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\nconst validationMessages = defineMessages({\n  badInput: {\n    id: '/cwiOkubC69MZmRu',\n    defaultMessage: 'Please provide input in a valid format.',\n    description:\n      'Error message for input that the browser is unable to convert, e.g. string for a number input.',\n  },\n  patternMismatch: {\n    id: 'qPeX7AgKbKzBFqGZ',\n    defaultMessage: 'Please match the format requested.',\n    description:\n      \"Error message for input that doesn't follow the requested pattern.\",\n  },\n  rangeOverflow: {\n    id: '14mVeqEFpqD2fpev',\n    defaultMessage: 'Value must be less or equal to {max}.',\n    description: 'Error message for input that value is higher then the max.',\n  },\n  rangeUnderflow: {\n    id: '5XoVjJUQ5b86MLW+',\n    defaultMessage: 'Value must be higher or equal to {min}.',\n    description: 'Error message for input that value is lower then the max.',\n  },\n  stepMismatch: {\n    id: 'MYfVMxPsAgOn8JSP',\n    defaultMessage: 'Value must be a multiple of {step}, starting from {min}.',\n    description:\n      'Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.',\n  },\n  tooLong: {\n    id: 'JOIA3jQfIIkgnW04',\n    defaultMessage:\n      'Please shorten this text to {maxLength} characters or less.',\n    description: 'Error message for input that is shorter than the maxLength.',\n  },\n  tooShort: {\n    id: 'sJeuQTGrzcMvd6fY',\n    defaultMessage:\n      'Please lengthen this text to {minLength} characters or more.',\n    description: 'Error message for input that is shorter than the minLength.',\n  },\n  typeMismatch: {\n    id: 'fLfhKO8cXlo3vW5M',\n    defaultMessage:\n      'Please provide a value that matches the requested type ({type}).',\n    description:\n      \"Error message for input that doesn't match the expected type.\",\n  },\n  valueMissing: {\n    id: 'laIylhVFbIvEZrxt',\n    defaultMessage: 'Please fill in this field.',\n    description: 'Error message for missing input.',\n  },\n});\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return <FormattedMessage {...validationMessages.badInput} />;\n    case 'patternMismatch':\n      return <FormattedMessage {...validationMessages.patternMismatch} />;\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeOverflow}\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeUnderflow}\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.stepMismatch}\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooLong}\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooShort}\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.typeMismatch}\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return <FormattedMessage {...validationMessages.valueMissing} />;\n    case 'customError':\n    case 'valid':\n    default:\n      return null;\n  }\n}\n\n/**\n * Returns the translated plain-string validation message for a given validity\n * state key. Mirrors the JSX messages in {@link getI18nErrorMessage} using the\n * same descriptors so both the UI and `ValidationError.message` stay in sync.\n *\n * @internal\n */\nexport function getI18nValidationMessage(\n  intl: IntlShape,\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n): string {\n  switch (key) {\n    case 'badInput':\n      return intl.formatMessage(validationMessages.badInput);\n    case 'patternMismatch':\n      return intl.formatMessage(validationMessages.patternMismatch);\n    case 'rangeOverflow':\n      return intl.formatMessage(validationMessages.rangeOverflow, {\n        max: ref?.getAttribute('max'),\n      });\n    case 'rangeUnderflow':\n      return intl.formatMessage(validationMessages.rangeUnderflow, {\n        min: ref?.getAttribute('min'),\n      });\n    case 'stepMismatch':\n      return intl.formatMessage(validationMessages.stepMismatch, {\n        step: ref?.getAttribute('step'),\n        min: ref?.getAttribute('min') ?? '0',\n      });\n    case 'tooLong':\n      return intl.formatMessage(validationMessages.tooLong, {\n        maxLength: ref?.getAttribute('maxLength'),\n      });\n    case 'tooShort':\n      return intl.formatMessage(validationMessages.tooShort, {\n        minLength: ref?.getAttribute('minLength'),\n      });\n    case 'typeMismatch':\n      return intl.formatMessage(validationMessages.typeMismatch, {\n        type: ref?.getAttribute('type'),\n      });\n    case 'valueMissing':\n      return intl.formatMessage(validationMessages.valueMissing);\n    default:\n      return '';\n  }\n}\n\n/**\n * Builds a ValidationState with an i18n message for the current validity of\n * `element`, bypassing the corrupted `element.validationMessage` that\n * `setCustomValidity` produces.\n * @internal\n */\nexport function getI18nValidationState(\n  intl: IntlShape,\n  element: FormFieldElement | null | undefined,\n  trigger: ValidationTrigger,\n): ValidationState {\n  const errorType = getErrorType(element?.validity);\n  return getValidationState(\n    element,\n    trigger,\n    errorType ? getI18nValidationMessage(intl, errorType, element) : undefined,\n  );\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (event: SyntheticEvent<FormFieldElement>) => void;\n  onChange: (event?: ChangeEvent<FormFieldElement>) => void;\n  onBlur: (event?: FocusEvent<FormFieldElement>) => void;\n  emitValidationState: (state: ValidationState) => ValidationState;\n}\n\n/**\n * Hook to generate ARIA props based on the form field messages\n * @param ariaLabelingProps - ARIA labeling properties\n * @returns ARIA props for the form field\n * @internal\n */\nexport function useFormFieldValidationAriaProps(\n  ariaLabelingProps: AriaLabelingProps = {},\n) {\n  const { state } = useFormFieldMessagesContext();\n\n  const _ariaProps = useMemo(() => {\n    let messageIdsString;\n    let errorMessageIdsString;\n\n    if (\n      state.customMessages.length > 0 ||\n      state.formControlMessages.length > 0\n    ) {\n      const messages = [...state.customMessages, ...state.formControlMessages];\n      errorMessageIdsString = messages\n        .filter((msg) => msg.variant === 'error')\n        .map((msg) => msg.id)\n        .join(' ');\n\n      messageIdsString = messages.map((msg) => msg.id).join(' ');\n    }\n\n    return {\n      'aria-errormessage': state.showError ? errorMessageIdsString : undefined,\n      'aria-invalid': state.showError,\n      'aria-describedby': messageIdsString,\n    };\n  }, [state.customMessages, state.formControlMessages, state.showError]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  return ariaProps;\n}\n\n/**\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n * @internal\n */\nexport function useFormFieldValidation(\n  ref: RefObject<FormFieldElement | null>,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n  emitValidationStateProp?: (state: ValidationState) => void,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const intl = useIntl();\n  const errorId = useId();\n\n  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  // Keep a ref to the current formControlMessages so `updateErrorMessages`\n  // can read the latest list without listing it as a reactive dependency.\n  // If it were a dependency, any dispatch (add/remove message) would recreate\n  // the callback, re-trigger the useEffect below, which would dispatch again \u2014\n  // causing an infinite loop.\n  const formControlMessagesRef = useRef(state.formControlMessages);\n  formControlMessagesRef.current = state.formControlMessages;\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    formControlMessagesRef.current.forEach((message) => {\n      if (\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref]); // formControlMessages intentionally excluded \u2014 read via ref above\n\n  const onInvalid = useCallback(\n    (event: SyntheticEvent<FormFieldElement>) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    emitValidationStateProp,\n    () => getI18nValidationState(intl, ref.current, 'manual'),\n  );\n\n  // Remove once useContainerFocus is correctly implemented and used in all form controls.\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n    if (!state.isTouched) {\n      emitValidationState(getI18nValidationState(intl, ref.current, 'blur'));\n    }\n  }, [dispatch, emitValidationState, intl, ref, state.isTouched]);\n\n  const onChange = useCallback(() => {\n    updateErrorMessages();\n    emitValidationState(getI18nValidationState(intl, ref.current, 'change'));\n  }, [updateErrorMessages, emitValidationState, intl, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    onChange();\n  }, [validationDepsKey, onChange]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange,\n    onBlur,\n    emitValidationState,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type SyntheticEvent,\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useMemo,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  FormattedMessage,\n  defineMessages,\n  useIntl,\n  type IntlShape,\n} from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport type {\n  ValidationState,\n  ValidationTrigger,\n} from '../../validation/types.js';\nimport { useCustomMessageEmitter } from '../../validation/useCustomMessageEmitter.js';\nimport { getValidationState } from '../../validation/validation-builders.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\ntype FormFieldElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\nconst validationMessages = defineMessages({\n  badInput: {\n    id: '/cwiOkubC69MZmRu',\n    defaultMessage: 'Please provide input in a valid format.',\n    description:\n      'Error message for input that the browser is unable to convert, e.g. string for a number input.',\n  },\n  patternMismatch: {\n    id: 'qPeX7AgKbKzBFqGZ',\n    defaultMessage: 'Please match the format requested.',\n    description:\n      \"Error message for input that doesn't follow the requested pattern.\",\n  },\n  rangeOverflow: {\n    id: '14mVeqEFpqD2fpev',\n    defaultMessage: 'Value must be less or equal to {max}.',\n    description: 'Error message for input that value is higher then the max.',\n  },\n  rangeUnderflow: {\n    id: '5XoVjJUQ5b86MLW+',\n    defaultMessage: 'Value must be higher or equal to {min}.',\n    description: 'Error message for input that value is lower then the max.',\n  },\n  stepMismatch: {\n    id: 'MYfVMxPsAgOn8JSP',\n    defaultMessage: 'Value must be a multiple of {step}, starting from {min}.',\n    description:\n      'Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.',\n  },\n  tooLong: {\n    id: 'JOIA3jQfIIkgnW04',\n    defaultMessage:\n      'Please shorten this text to {maxLength} characters or less.',\n    description: 'Error message for input that is shorter than the maxLength.',\n  },\n  tooShort: {\n    id: 'sJeuQTGrzcMvd6fY',\n    defaultMessage:\n      'Please lengthen this text to {minLength} characters or more.',\n    description: 'Error message for input that is shorter than the minLength.',\n  },\n  typeMismatch: {\n    id: 'fLfhKO8cXlo3vW5M',\n    defaultMessage:\n      'Please provide a value that matches the requested type ({type}).',\n    description:\n      \"Error message for input that doesn't match the expected type.\",\n  },\n  valueMissing: {\n    id: 'laIylhVFbIvEZrxt',\n    defaultMessage: 'Please fill in this field.',\n    description: 'Error message for missing input.',\n  },\n});\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return <FormattedMessage {...validationMessages.badInput} />;\n    case 'patternMismatch':\n      return <FormattedMessage {...validationMessages.patternMismatch} />;\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeOverflow}\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeUnderflow}\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.stepMismatch}\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooLong}\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooShort}\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.typeMismatch}\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return <FormattedMessage {...validationMessages.valueMissing} />;\n    case 'customError':\n    case 'valid':\n    default:\n      return null;\n  }\n}\n\n/**\n * Returns the translated plain-string validation message for a given validity\n * state key. Mirrors the JSX messages in {@link getI18nErrorMessage} using the\n * same descriptors so both the UI and `ValidationError.message` stay in sync.\n *\n * @internal\n */\nexport function getI18nValidationMessage(\n  intl: IntlShape,\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n): string {\n  switch (key) {\n    case 'badInput':\n      return intl.formatMessage(validationMessages.badInput);\n    case 'patternMismatch':\n      return intl.formatMessage(validationMessages.patternMismatch);\n    case 'rangeOverflow':\n      return intl.formatMessage(validationMessages.rangeOverflow, {\n        max: ref?.getAttribute('max'),\n      });\n    case 'rangeUnderflow':\n      return intl.formatMessage(validationMessages.rangeUnderflow, {\n        min: ref?.getAttribute('min'),\n      });\n    case 'stepMismatch':\n      return intl.formatMessage(validationMessages.stepMismatch, {\n        step: ref?.getAttribute('step'),\n        min: ref?.getAttribute('min') ?? '0',\n      });\n    case 'tooLong':\n      return intl.formatMessage(validationMessages.tooLong, {\n        maxLength: ref?.getAttribute('maxLength'),\n      });\n    case 'tooShort':\n      return intl.formatMessage(validationMessages.tooShort, {\n        minLength: ref?.getAttribute('minLength'),\n      });\n    case 'typeMismatch':\n      return intl.formatMessage(validationMessages.typeMismatch, {\n        type: ref?.getAttribute('type'),\n      });\n    case 'valueMissing':\n      return intl.formatMessage(validationMessages.valueMissing);\n    default:\n      return '';\n  }\n}\n\n/**\n * Builds a ValidationState with an i18n message for the current validity of\n * `element`, bypassing the corrupted `element.validationMessage` that\n * `setCustomValidity` produces.\n * @internal\n */\nexport function getI18nValidationState(\n  intl: IntlShape,\n  element: FormFieldElement | null | undefined,\n  trigger: ValidationTrigger,\n): ValidationState {\n  const errorType = getErrorType(element?.validity);\n  return getValidationState(\n    element,\n    trigger,\n    errorType ? getI18nValidationMessage(intl, errorType, element) : undefined,\n  );\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (event: SyntheticEvent<FormFieldElement>) => void;\n  onChange: (event?: ChangeEvent<FormFieldElement>) => void;\n  onBlur: (event?: FocusEvent<FormFieldElement>) => void;\n  emitValidationState: (state: ValidationState) => ValidationState;\n}\n\n/**\n * Hook to generate ARIA props based on the form field messages\n * @param ariaLabelingProps - ARIA labeling properties\n * @returns ARIA props for the form field\n * @internal\n */\nexport function useFormFieldValidationAriaProps(\n  ariaLabelingProps: AriaLabelingProps = {},\n) {\n  const {\n    state,\n    fieldMessagesContainerId,\n    formMessagesContainerId,\n    routesAwayFromField,\n  } = useFormFieldMessagesContext();\n\n  const _ariaProps = useMemo(() => {\n    const hasHints =\n      state.customMessages.some((m) => m.variant === 'hint') ||\n      state.formControlMessages.some((m) => m.variant === 'hint');\n    // Errors visible in the inline FormFieldMessages container (custom source always stays).\n    const hasInlineErrors =\n      state.customMessages.some((m) => m.variant === 'error') ||\n      state.formControlMessages.some(\n        (m) =>\n          m.variant === 'error' &&\n          (!routesAwayFromField || m.source === 'custom'),\n      );\n    // Native errors routed to the form-wide outlet instead of the inline container.\n    const hasRoutedErrors =\n      routesAwayFromField &&\n      state.formControlMessages.some(\n        (m) => m.variant === 'error' && m.source !== 'custom',\n      );\n    const hasInlineContent = hasHints || (state.showError && hasInlineErrors);\n\n    let activeErrorContainerId: string | undefined;\n    if (state.showError && hasInlineErrors) {\n      activeErrorContainerId = fieldMessagesContainerId;\n    } else if (state.showError && hasRoutedErrors) {\n      activeErrorContainerId = formMessagesContainerId;\n    }\n\n    const ariaDescribedByParts: string[] = [];\n    if (hasInlineContent && fieldMessagesContainerId) {\n      ariaDescribedByParts.push(fieldMessagesContainerId);\n    }\n    if (state.showError && hasRoutedErrors && formMessagesContainerId) {\n      ariaDescribedByParts.push(formMessagesContainerId);\n    }\n    const ariaDescribedBy =\n      ariaDescribedByParts.length > 0\n        ? ariaDescribedByParts.join(' ')\n        : undefined;\n\n    return {\n      'aria-errormessage': activeErrorContainerId,\n      'aria-invalid': state.showError,\n      'aria-describedby': ariaDescribedBy,\n    };\n  }, [\n    routesAwayFromField,\n    formMessagesContainerId,\n    state.customMessages,\n    state.formControlMessages,\n    state.showError,\n    fieldMessagesContainerId,\n  ]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  return ariaProps;\n}\n\n/**\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n * @internal\n */\nexport function useFormFieldValidation(\n  ref: RefObject<FormFieldElement | null>,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n  emitValidationStateProp?: (state: ValidationState) => void,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const intl = useIntl();\n  const errorId = useId();\n\n  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  // Keep a ref to the current formControlMessages so `updateErrorMessages`\n  // can read the latest list without listing it as a reactive dependency.\n  // If it were a dependency, any dispatch (add/remove message) would recreate\n  // the callback, re-trigger the useEffect below, which would dispatch again \u2014\n  // causing an infinite loop.\n  const formControlMessagesRef = useRef(state.formControlMessages);\n  formControlMessagesRef.current = state.formControlMessages;\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    formControlMessagesRef.current.forEach((message) => {\n      if (\n        message.id === errorId &&\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref]); // formControlMessages intentionally excluded \u2014 read via ref above\n\n  const onInvalid = useCallback(\n    (event: SyntheticEvent<FormFieldElement>) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    emitValidationStateProp,\n    () => getI18nValidationState(intl, ref.current, 'manual'),\n  );\n\n  // Remove once useContainerFocus is correctly implemented and used in all form controls.\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n    if (!state.isTouched) {\n      emitValidationState(getI18nValidationState(intl, ref.current, 'blur'));\n    }\n  }, [dispatch, emitValidationState, intl, ref, state.isTouched]);\n\n  const onChange = useCallback(() => {\n    updateErrorMessages();\n    emitValidationState(getI18nValidationState(intl, ref.current, 'change'));\n  }, [updateErrorMessages, emitValidationState, intl, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    onChange();\n  }, [validationDepsKey, onChange]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange,\n    onBlur,\n    emitValidationState,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js

@@ -106,7 +106,7 @@ function formFieldMessagesReducer(state, action) {
     ) && !state.customMessages.some(
       (message) => message.id === remainingPayload.id
     )) {
-      newState.customMessages.push(remainingPayload);
+      newState.customMessages = [...newState.customMessages, remainingPayload];
       if (payload.messageText !== void 0) {
         newState.customMessageTexts = {
           ...newState.customMessageTexts ?? {},

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/state/formfield-messages-state-reducer.ts"],
-  "sourcesContent": ["import type { MessageTarget } from '../../validation/message-routing.js';\nimport { NativeValidityStateKeys } from '../../validation/types.js';\nimport type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  SETFORMCONTROLID = 'setformcontrolid',\n  SETMESSAGETARGET = 'setmessagetarget',\n  ADDMEMBERFORMCONTROLID = 'addmemberformcontrolid',\n  REMOVEMEMBERFORMCONTROLID = 'removememberformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean; messageText?: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean; resetShowError?: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.SETFORMCONTROLID;\n      payload: { formControlId: string | undefined };\n    }\n  | {\n      type: FormFieldMessagesAction.SETMESSAGETARGET;\n      payload: { messageTarget: MessageTarget[] | undefined };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID;\n      payload: { formControlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID;\n      payload: { formControlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n// All native ValidityState keys that the browser tracks itself, excluding 'customError'\n// which we always set explicitly via setCustomValidity().\nconst BROWSER_NATIVE_VALIDITY_KEYS: ReadonlySet<string> = new Set(\n  Object.entries(NativeValidityStateKeys)\n    .filter(([key]) => key !== 'customError')\n    .map(([, v]) => v.toString()),\n);\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Pick the ids that should receive native `setCustomValidity()` updates.\n * Grouped controls (Radio, ToggleButtonGroup) target each member input; single\n * controls target the logical form-control id.\n */\nfunction pickNativeValidityTargets(\n  state: FormFieldMessageContextState,\n): string[] | undefined {\n  if (state.memberFormControlIds && state.memberFormControlIds.length > 0) {\n    return state.memberFormControlIds;\n  }\n  if (state.formControlId !== undefined) {\n    return [state.formControlId];\n  }\n  return undefined;\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  // Only errors the browser has no native knowledge of should be reflected via\n  // setCustomValidity(). These are:\n  //   1. Developer-added errors (customMessages)\n  //   2. Strato-internal errors whose validityStateKey is not a browser-native key\n  //      (e.g. 'syntaxError', 'invalidOrder', 'customError', \u2026)\n  //\n  // Browser-native errors (valueMissing, typeMismatch, patternMismatch, \u2026) must NOT be\n  // passed to setCustomValidity() \u2014 the browser already tracks them, and adding a\n  // redundant customError would prevent checkValidity() from returning true once\n  // the native constraint is satisfied.\n  // 'customError' is excluded from BROWSER_NATIVE_VALIDITY_KEYS because it is only set\n  // by us via setCustomValidity, so it always requires our explicit call to maintain.\n  const hasStratoCustomError = formControlMessages.some(\n    (message) =>\n      message.variant === 'error' &&\n      !BROWSER_NATIVE_VALIDITY_KEYS.has(message.validityStateKey),\n  );\n  const nativeValidityIsValid = !hasCustomError && !hasStratoCustomError;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, nativeValidityIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  const targetControlIds = pickNativeValidityTargets(state);\n\n  targetControlIds?.forEach((id) =>\n    setHTMLElementValidity(id, nativeValidityIsValid),\n  );\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      if (\n        remainingPayload.validityStateKey === 'customError' &&\n        remainingPayload.variant === 'error' &&\n        'id' in remainingPayload\n      ) {\n        const { id: internalId, ...internalRest } =\n          remainingPayload as typeof remainingPayload & { id: string };\n\n        const customErrors = state.formControlMessages.filter(\n          (m) => m.validityStateKey === 'customError',\n        );\n\n        // If the same sole customError is already present and showError won't\n        // change, return early to keep the array reference stable and prevent\n        // a useEffect re-run \u2192 re-dispatch \u2192 infinite-render loop.\n        if (customErrors.length === 1 && customErrors[0].id === internalId) {\n          if ((payload.showError ?? state.showError) === state.showError) {\n            return state;\n          }\n        } else {\n          // Replace all existing customErrors with the new one so only one\n          // internal error is shown at a time.\n          newState.formControlMessages = [\n            ...state.formControlMessages.filter(\n              (m) => m.validityStateKey !== 'customError',\n            ),\n            { id: internalId, ...internalRest },\n          ];\n        }\n      } else {\n        // Browser validity errors are keyed by validityStateKey; only add once.\n        const isNewBrowserError =\n          remainingPayload.validityStateKey !== undefined &&\n          !state.formControlMessages.some(\n            (message) =>\n              message.validityStateKey === remainingPayload.validityStateKey,\n          );\n\n        if (!isNewBrowserError) {\n          return state;\n        }\n\n        newState.formControlMessages = [\n          ...newState.formControlMessages,\n          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload },\n        ];\n      }\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages.push(remainingPayload);\n      if (payload.messageText !== undefined) {\n        newState.customMessageTexts = {\n          ...(newState.customMessageTexts ?? {}),\n          [remainingPayload.id]: payload.messageText,\n        };\n      }\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n      if (newState.customMessageTexts?.[payload.id] !== undefined) {\n        const { [payload.id]: _, ...remaining } = newState.customMessageTexts;\n        newState.customMessageTexts = remaining;\n      }\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n    // A validation reset (resetValidation) must also suppress error display\n    // immediately so hints re-appear in the same render pass rather than after\n    // cleanup effects. Controls that merely un-touch on focus while editing\n    // (e.g. FilterField) omit `resetShowError`, so a pending error stays shown\n    // until the next validation cycle recomputes it \u2014 matching prior behavior.\n    if (!payload.isTouched && payload.resetShowError) {\n      newState.showError = false;\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.SETFORMCONTROLID) {\n    newState.formControlId = action.payload.formControlId;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETMESSAGETARGET) {\n    const next = action.payload.messageTarget;\n    const current = state.messageTarget;\n    // Keep the reference stable when nothing changed so the effect that dispatches\n    // this action does not spin (fresh state \u2192 re-render \u2192 re-dispatch).\n    const unchanged =\n      (next === undefined && current === undefined) ||\n      (next !== undefined &&\n        current !== undefined &&\n        next.length === current.length &&\n        next.every((target, index) => target === current[index]));\n    if (unchanged) {\n      return state;\n    }\n    newState.messageTarget = next;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDMEMBERFORMCONTROLID) {\n    const {\n      payload: { formControlId },\n    } = action;\n\n    newState.memberFormControlIds ??= [];\n\n    if (!newState.memberFormControlIds.includes(formControlId)) {\n      newState.memberFormControlIds.push(formControlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID) {\n    const {\n      payload: { formControlId },\n    } = action;\n\n    newState.memberFormControlIds = state.memberFormControlIds?.filter(\n      (id) => id !== formControlId,\n    );\n  }\n\n  return updateValidity(newState);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MessageTarget } from '../../validation/message-routing.js';\nimport { NativeValidityStateKeys } from '../../validation/types.js';\nimport type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  SETFORMCONTROLID = 'setformcontrolid',\n  SETMESSAGETARGET = 'setmessagetarget',\n  ADDMEMBERFORMCONTROLID = 'addmemberformcontrolid',\n  REMOVEMEMBERFORMCONTROLID = 'removememberformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean; messageText?: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean; resetShowError?: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.SETFORMCONTROLID;\n      payload: { formControlId: string | undefined };\n    }\n  | {\n      type: FormFieldMessagesAction.SETMESSAGETARGET;\n      payload: { messageTarget: MessageTarget[] | undefined };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID;\n      payload: { formControlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID;\n      payload: { formControlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n// All native ValidityState keys that the browser tracks itself, excluding 'customError'\n// which we always set explicitly via setCustomValidity().\nconst BROWSER_NATIVE_VALIDITY_KEYS: ReadonlySet<string> = new Set(\n  Object.entries(NativeValidityStateKeys)\n    .filter(([key]) => key !== 'customError')\n    .map(([, v]) => v.toString()),\n);\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Pick the ids that should receive native `setCustomValidity()` updates.\n * Grouped controls (Radio, ToggleButtonGroup) target each member input; single\n * controls target the logical form-control id.\n */\nfunction pickNativeValidityTargets(\n  state: FormFieldMessageContextState,\n): string[] | undefined {\n  if (state.memberFormControlIds && state.memberFormControlIds.length > 0) {\n    return state.memberFormControlIds;\n  }\n  if (state.formControlId !== undefined) {\n    return [state.formControlId];\n  }\n  return undefined;\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  // Only errors the browser has no native knowledge of should be reflected via\n  // setCustomValidity(). These are:\n  //   1. Developer-added errors (customMessages)\n  //   2. Strato-internal errors whose validityStateKey is not a browser-native key\n  //      (e.g. 'syntaxError', 'invalidOrder', 'customError', \u2026)\n  //\n  // Browser-native errors (valueMissing, typeMismatch, patternMismatch, \u2026) must NOT be\n  // passed to setCustomValidity() \u2014 the browser already tracks them, and adding a\n  // redundant customError would prevent checkValidity() from returning true once\n  // the native constraint is satisfied.\n  // 'customError' is excluded from BROWSER_NATIVE_VALIDITY_KEYS because it is only set\n  // by us via setCustomValidity, so it always requires our explicit call to maintain.\n  const hasStratoCustomError = formControlMessages.some(\n    (message) =>\n      message.variant === 'error' &&\n      !BROWSER_NATIVE_VALIDITY_KEYS.has(message.validityStateKey),\n  );\n  const nativeValidityIsValid = !hasCustomError && !hasStratoCustomError;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, nativeValidityIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  const targetControlIds = pickNativeValidityTargets(state);\n\n  targetControlIds?.forEach((id) =>\n    setHTMLElementValidity(id, nativeValidityIsValid),\n  );\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      if (\n        remainingPayload.validityStateKey === 'customError' &&\n        remainingPayload.variant === 'error' &&\n        'id' in remainingPayload\n      ) {\n        const { id: internalId, ...internalRest } =\n          remainingPayload as typeof remainingPayload & { id: string };\n\n        const customErrors = state.formControlMessages.filter(\n          (m) => m.validityStateKey === 'customError',\n        );\n\n        // If the same sole customError is already present and showError won't\n        // change, return early to keep the array reference stable and prevent\n        // a useEffect re-run \u2192 re-dispatch \u2192 infinite-render loop.\n        if (customErrors.length === 1 && customErrors[0].id === internalId) {\n          if ((payload.showError ?? state.showError) === state.showError) {\n            return state;\n          }\n        } else {\n          // Replace all existing customErrors with the new one so only one\n          // internal error is shown at a time.\n          newState.formControlMessages = [\n            ...state.formControlMessages.filter(\n              (m) => m.validityStateKey !== 'customError',\n            ),\n            { id: internalId, ...internalRest },\n          ];\n        }\n      } else {\n        // Browser validity errors are keyed by validityStateKey; only add once.\n        const isNewBrowserError =\n          remainingPayload.validityStateKey !== undefined &&\n          !state.formControlMessages.some(\n            (message) =>\n              message.validityStateKey === remainingPayload.validityStateKey,\n          );\n\n        if (!isNewBrowserError) {\n          return state;\n        }\n\n        newState.formControlMessages = [\n          ...newState.formControlMessages,\n          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload },\n        ];\n      }\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages = [...newState.customMessages, remainingPayload];\n      if (payload.messageText !== undefined) {\n        newState.customMessageTexts = {\n          ...(newState.customMessageTexts ?? {}),\n          [remainingPayload.id]: payload.messageText,\n        };\n      }\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n      if (newState.customMessageTexts?.[payload.id] !== undefined) {\n        const { [payload.id]: _, ...remaining } = newState.customMessageTexts;\n        newState.customMessageTexts = remaining;\n      }\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n    // A validation reset (resetValidation) must also suppress error display\n    // immediately so hints re-appear in the same render pass rather than after\n    // cleanup effects. Controls that merely un-touch on focus while editing\n    // (e.g. FilterField) omit `resetShowError`, so a pending error stays shown\n    // until the next validation cycle recomputes it \u2014 matching prior behavior.\n    if (!payload.isTouched && payload.resetShowError) {\n      newState.showError = false;\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.SETFORMCONTROLID) {\n    newState.formControlId = action.payload.formControlId;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETMESSAGETARGET) {\n    const next = action.payload.messageTarget;\n    const current = state.messageTarget;\n    // Keep the reference stable when nothing changed so the effect that dispatches\n    // this action does not spin (fresh state \u2192 re-render \u2192 re-dispatch).\n    const unchanged =\n      (next === undefined && current === undefined) ||\n      (next !== undefined &&\n        current !== undefined &&\n        next.length === current.length &&\n        next.every((target, index) => target === current[index]));\n    if (unchanged) {\n      return state;\n    }\n    newState.messageTarget = next;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDMEMBERFORMCONTROLID) {\n    const {\n      payload: { formControlId },\n    } = action;\n\n    newState.memberFormControlIds ??= [];\n\n    if (!newState.memberFormControlIds.includes(formControlId)) {\n      newState.memberFormControlIds.push(formControlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID) {\n    const {\n      payload: { formControlId },\n    } = action;\n\n    newState.memberFormControlIds = state.memberFormControlIds?.filter(\n      (id) => id !== formControlId,\n    );\n  }\n\n  return updateValidity(newState);\n}\n"],
+  "mappings": "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",
   "names": ["FormFieldMessagesAction"]
 }

package/esm/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-11-2 {
+@keyframes _yfwka31-3-12-0 {
 
 }
-@keyframes _yfwka32-3-11-2 {
+@keyframes _yfwka32-3-12-0 {
 
 }
-._yfwka33-3-11-2:-webkit-autofill:is(._yfwka33-3-11-2,:hover,:focus) {
+._yfwka33-3-12-0:-webkit-autofill:is(._yfwka33-3-12-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-11-2) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-12-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-11-2:-webkit-autofill {
-  animation-name: _yfwka31-3-11-2;
+._yfwka33-3-12-0:-webkit-autofill {
+  animation-name: _yfwka31-3-12-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-11-2:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-11-2;
+._yfwka33-3-12-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-12-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/esm/forms/hooks/useAutofillEvent.sty.js

@@ -1,8 +1,8 @@
 import "./useAutofillEvent.css";
-var autofillBackground = "var(--_yfwka30-3-11-2)";
-var autofillCSS = "_yfwka33-3-11-2";
-var end = "_yfwka32-3-11-2";
-var start = "_yfwka31-3-11-2";
+var autofillBackground = "var(--_yfwka30-3-12-0)";
+var autofillCSS = "_yfwka33-3-12-0";
+var end = "_yfwka32-3-12-0";
+var start = "_yfwka31-3-12-0";
 export {
   autofillBackground,
   autofillCSS,

package/esm/forms/hooks/useAutofillEvent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/hooks/useAutofillEvent.css.ts"],
-  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-11-2)';\nexport var autofillCSS = '_yfwka33-3-11-2';\nexport var end = '_yfwka32-3-11-2';\nexport var start = '_yfwka31-3-11-2';"],
+  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-12-0)';\nexport var autofillCSS = '_yfwka33-3-12-0';\nexport var end = '_yfwka32-3-12-0';\nexport var start = '_yfwka31-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,cAAc;AAClB,IAAI,MAAM;AACV,IAAI,QAAQ;",
   "names": []
 }

package/esm/forms/hooks/useContainerFocus.css

@@ -1,3 +1,3 @@
-._la3ex60-3-11-2:focus {
+._la3ex60-3-12-0:focus {
   outline: none;
 }

package/esm/forms/hooks/useContainerFocus.sty.js

@@ -1,5 +1,5 @@
 import "./useContainerFocus.css";
-var containerRoot = "_la3ex60-3-11-2";
+var containerRoot = "_la3ex60-3-12-0";
 export {
   containerRoot
 };

package/esm/forms/hooks/useContainerFocus.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/hooks/useContainerFocus.css.ts"],
-  "sourcesContent": ["import './useContainerFocus.css';\nexport var containerRoot = '_la3ex60-3-11-2';"],
+  "sourcesContent": ["import './useContainerFocus.css';\nexport var containerRoot = '_la3ex60-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }