@dynatrace/strato-components 3.11.3 → 3.12.0

package/forms/date-time-picker/DateTimePickerRoot.js

@@ -55,6 +55,7 @@ var import_expression_trigger_helpers = require("../date-time-range-picker/expre
 var import_helpers = require("../date-time-range-picker/helpers.js");
 var import_selection_copy_helpers = require("../date-time-range-picker/selection-copy-helpers.js");
 var import_useSelectionInteractionHandlers = require("../date-time-range-picker/useSelectionInteractionHandlers.js");
+var import_useInternalFormRegistration = require("../form/hooks/useInternalFormRegistration.js");
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useMinMaxLogger = require("../forms-core/hooks/useMinMaxLogger.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
@@ -72,6 +73,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-dtrum-allow": dataDtrumAllow,
     placeholder,
     name,
+    _form,
+    _messageTarget,
     type = "datetime",
     formControl,
     onValidityChange,
@@ -89,6 +92,7 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     hintProps,
     hint,
     showError,
+    messageState,
     messageDispatch: formFieldDispatch
   } = formControl;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -112,6 +116,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
   (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "DateTimePicker");
   const ownerId = (0, import_useId.useId)();
   const touchedContainerRef = (0, import_react.useRef)(null);
+  const customMessagesRef = (0, import_react.useRef)(messageState.customMessages);
+  customMessagesRef.current = messageState.customMessages;
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
   const showDateSelector = type !== "time";
@@ -132,7 +138,10 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     id: "5i26Rr1LLz0OIGNJ",
     description: "Aria label for the DateTimePicker clear button."
   });
-  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const formValidityChangeRef = (0, import_react.useRef)(void 0);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
     _emitValidationState,
     () => buildValidationState("manual", dateTimePickerError)
@@ -166,6 +175,58 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     emitValidationState,
     getBlurValidationState: () => buildValidationState("blur", dateTimePickerError)
   });
+  const validateField = (0, import_react.useCallback)(
+    async ({
+      reveal,
+      trigger
+    }) => {
+      if (reveal) {
+        formFieldDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+      }
+      return emitValidationState(
+        buildValidationState(trigger, dateTimePickerError)
+      );
+    },
+    [
+      formFieldDispatch,
+      emitValidationState,
+      buildValidationState,
+      dateTimePickerError
+    ]
+  );
+  const resetValidation = (0, import_react.useCallback)(() => {
+    formFieldDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: false, resetShowError: true }
+    });
+    if (dateTimePickerError) {
+      formFieldDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: dateTimePickerError, messageType: "formcontrol" }
+      });
+    }
+    for (const msg of customMessagesRef.current) {
+      formFieldDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: msg.id, messageType: "custom" }
+      });
+    }
+  }, [formFieldDispatch, dateTimePickerError]);
+  const formRegistration = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    onValidityChange,
+    getValue: () => value,
+    focus: () => dateInputRef.current?.inputRef?.focus(),
+    validateField,
+    resetValidation
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -202,7 +263,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
       formFieldDispatch,
       dateInputRef,
       emitValidationState,
-      buildValidationState
+      buildValidationState,
+      dateTimePickerError
     ]
   );
   (0, import_react.useEffect)(() => {
@@ -334,6 +396,7 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
                         readOnly,
                         placeholder,
                         name,
+                        form: _form,
                         value,
                         onChange: (newValue) => {
                           if (typeof newValue !== "string") {

package/forms/date-time-picker/types.d.ts

@@ -5,6 +5,7 @@ import type { FormControlProps } from '../../core/types/form-control-props.js';
 import { MaskingProps } from '../../core/types/masking-props.js';
 import { StylingProps } from '../../core/types/styling-props.js';
 import type { TimeValue } from '../../core/types/time.js';
+import type { MessageTarget } from '../validation/message-routing.js';
 /**
  * Determines what datetime parts to show.
  * @public
@@ -42,6 +43,18 @@ export type DateTimePickerProps = FormControlProps<TimeValue | string | null, (v
      * The placeholder that's shown in the input field if the content is empty.
      */
     placeholder?: string;
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _form?: string;
+    /**
+     * Internal: routes this control's native/Strato validation messages to the
+     * field outlet (default), the enclosing form's outlet, or both. Unstable.
+     * @internal
+     */
+    _messageTarget?: MessageTarget | MessageTarget[];
 };
 /**
  * Props or the DateSelector component.

package/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,4 +1,4 @@
-._1uftu980-3-11-3 {
+._1uftu980-3-12-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

package/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -21,4 +21,4 @@ __export(DateRangeSelector_css_exports, {
 });
 module.exports = __toCommonJS(DateRangeSelector_css_exports);
 var import_DateRangeSelector_css_ts_vanilla = require("./DateRangeSelector.css");
-var selector = "_1uftu980-3-11-3";
+var selector = "_1uftu980-3-12-0";

package/forms/date-time-range-picker/DateTimeInput.css

@@ -1,33 +1,33 @@
-._5u9o250-3-11-3 {
+._5u9o250-3-12-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-11-3::-webkit-scrollbar {
+._5u9o250-3-12-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-11-3 {
+._5u9o252-3-12-0 {
   outline: none;
 }
-._5u9o252-3-11-3:not(:focus-visible) {
+._5u9o252-3-12-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-11-3:empty::before {
+._5u9o252-3-12-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc21-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc22-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-11-3._1vlwkc21-3-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc22-3-12-0._1vlwkc21-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-11-3::selection {
-  color: var(--_1i883gj2-3-11-3);
-  background-color: var(--_1i883gj3-3-11-3);
+._5u9o252-3-12-0::selection {
+  color: var(--_1i883gj2-3-12-0);
+  background-color: var(--_1i883gj3-3-12-0);
 }

package/forms/date-time-range-picker/DateTimeInput.js

@@ -79,6 +79,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       "aria-disabled": ariaDisabledProp,
       controlId,
+      form,
       required,
       type = "datetime",
       inputProps: formControlInputProps,
@@ -265,13 +266,14 @@ const DateTimeInput = (0, import_react.forwardRef)(
               onInvalid,
               disabled,
               tabIndex: -1,
-              required: validationValueMode === "single" ? false : required,
+              required,
               readOnly,
               "aria-disabled": ariaDisabledProp,
               ...(0, import_merge_props.mergeProps)(
                 formControlInputProps ?? ariaFormProps,
                 ariaLabelingProps
-              )
+              ),
+              form
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -29,6 +29,6 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var dateTimeInput = "_5u9o251-3-11-3";
-var dateTimeInputRoot = "_5u9o250-3-11-3";
-var expression = "_5u9o252-3-11-3";
+var dateTimeInput = "_5u9o251-3-12-0";
+var dateTimeInputRoot = "_5u9o250-3-12-0";
+var expression = "_5u9o252-3-12-0";

package/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,49 +1,49 @@
-._1vlwkc20-3-11-3 {
+._1vlwkc20-3-12-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-11-3);
+  box-shadow: var(--_bx32h4-3-12-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-11-3);
-  background: var(--_bx32h3-3-11-3);
+  color: var(--_bx32h0-3-12-0);
+  background: var(--_bx32h3-3-12-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-11-3._1vlwkc20-3-11-3 {
+._1vlwkc20-3-12-0._1vlwkc20-3-12-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3) {
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3:hover) {
-  --_bx32h3-3-11-3: var(--_bx32h2-3-11-3);
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0:hover) {
+  --_bx32h3-3-12-0: var(--_bx32h2-3-12-0);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3:focus-visible) {
-  box-shadow: var(--_bx32h4-3-11-3, none);
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-12-0, none);
 }
-._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3:active {
-  --_bx32h3-3-11-3: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0:active {
+  --_bx32h3-3-12-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-11-3 {
+._1vlwkc22-3-12-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-11-3 {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-12-0 {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3:active {
-  --_bx32h4-3-11-3: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-12-0 ._1vlwkc23-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc23-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc23-3-12-0:active {
+  --_bx32h4-3-12-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-11-3 {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-12-0 {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3:active {
-  --_bx32h4-3-11-3: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-12-0 ._1vlwkc24-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc24-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc24-3-12-0:active {
+  --_bx32h4-3-12-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-11-3 {
+._1vlwkc25-3-12-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-11-3._1vlwkc25-3-11-3 {
+._1vlwkc25-3-12-0._1vlwkc25-3-12-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-11-3::-webkit-scrollbar {
+._1vlwkc25-3-12-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-11-3._1vlwkc26-3-11-3 {
+._1vlwkc26-3-12-0._1vlwkc26-3-12-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-11-3 {
+._1vlwkc27-3-12-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-11-3::selection {
+._1vlwkc27-3-12-0::selection {
   background: transparent;
 }

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -30,7 +30,7 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeInput = "_1vlwkc26-3-11-3";
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-11-3", variantClassNames: { showError: { true: "_1vlwkc21-3-11-3" }, disabled: { true: "_1vlwkc22-3-11-3" }, readOnly: { true: "_1vlwkc23-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-11-3"]] });
-var scrollContainer = "_1vlwkc25-3-11-3";
-var timeframeSeparator = "_1vlwkc27-3-11-3";
+var dateTimeInput = "_1vlwkc26-3-12-0";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-12-0", variantClassNames: { showError: { true: "_1vlwkc21-3-12-0" }, disabled: { true: "_1vlwkc22-3-12-0" }, readOnly: { true: "_1vlwkc23-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-12-0"]] });
+var scrollContainer = "_1vlwkc25-3-12-0";
+var timeframeSeparator = "_1vlwkc27-3-12-0";

package/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -57,6 +57,7 @@ var import_field_css = require("../../styles/field.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
 var import_DateTimePicker_css = require("../date-time-picker/DateTimePicker.sty.js");
 var import_focusDateTimeInput = require("../date-time-picker/utils/focusDateTimeInput.js");
+var import_useInternalFormRegistration = require("../form/hooks/useInternalFormRegistration.js");
 var import_FormFieldMessageContext = require("../forms-core/contexts/FormFieldMessageContext.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useContainerFocus = require("../hooks/useContainerFocus.js");
@@ -104,6 +105,8 @@ function getOffsetWithinElement(element, container, offset) {
 const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     name,
+    _form,
+    _messageTarget,
     style: consumerStyle,
     className: consumerClassName,
     "data-testid": dataTestId,
@@ -125,6 +128,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     ariaDisabled,
     inputProps,
     showError,
+    messageState,
     messageDispatch: formMessageDispatch
   } = formControl;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -159,8 +163,13 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     dateTimeToRef
   });
   const intl = (0, import_react_intl.useIntl)();
+  const customMessagesRef = (0, import_react.useRef)(messageState.customMessages);
+  customMessagesRef.current = messageState.customMessages;
   const lastValidationErrorRef = (0, import_react.useRef)(void 0);
-  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const formValidityChangeRef = (0, import_react.useRef)(void 0);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const buildValidationState = (0, import_react.useCallback)(
     (trigger, key) => {
       if (key === void 0) {
@@ -275,6 +284,51 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     getBlurValidationState: () => buildValidationState("blur", getErrorKey()),
     shouldSuppressBlur
   });
+  const validateField = (0, import_react.useCallback)(
+    async ({
+      reveal,
+      trigger
+    }) => {
+      if (reveal) {
+        formMessageDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+      }
+      const errorKey = getErrorKey();
+      return emitValidationState(buildValidationState(trigger, errorKey));
+    },
+    [
+      formMessageDispatch,
+      getErrorKey,
+      emitValidationState,
+      buildValidationState
+    ]
+  );
+  const resetValidation = (0, import_react.useCallback)(() => {
+    formMessageDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: false }
+    });
+    for (const msg of customMessagesRef.current) {
+      formMessageDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: msg.id, messageType: "custom" }
+      });
+    }
+  }, [formMessageDispatch]);
+  const formRegistration = (0, import_useInternalFormRegistration.useInternalFormRegistration)({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    onValidityChange,
+    getValue: () => value,
+    focus: () => dateTimeFromRef.current?.focus?.(),
+    validateField,
+    resetValidation
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   (0, import_react.useEffect)(() => {
     emitValidationState(buildValidationState("change", getErrorKey()));
   }, [value, emitValidationState, buildValidationState, getErrorKey]);
@@ -513,6 +567,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
                     readOnly,
                     placeholder: placeholder.from,
                     name: name === void 0 ? void 0 : `${name}-from`,
+                    form: _form,
                     value: value === null ? null : value.from,
                     onChange: (newValue) => {
                       if (typeof newValue !== "string") {
@@ -542,6 +597,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
                     readOnly,
                     placeholder: placeholder.to,
                     name: name === void 0 ? void 0 : `${name}-to`,
+                    form: _form,
                     value: value === null ? null : value.to,
                     onChange: (newValue) => {
                       if (typeof newValue !== "string") {

package/forms/date-time-range-picker/types.d.ts

@@ -10,6 +10,7 @@ import type { DateTimePickerPrecision, DateTimePickerType } from '../date-time-p
 import type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';
 import type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';
 import type { SpinButtonHandler } from '../spin-buttons/spin-button-group/types.js';
+import type { MessageTarget } from '../validation/message-routing.js';
 /**
  * Possible DateTimeInput error states
  * @internal
@@ -50,6 +51,18 @@ export type DateTimeRangePickerProps = FormControlProps<RequireAtLeastOne<{
         from?: string;
         to?: string;
     };
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _form?: string;
+    /**
+     * Internal: routes this control's native/Strato validation messages to the
+     * field outlet (default), the enclosing form's outlet, or both. Unstable.
+     * @internal
+     */
+    _messageTarget?: MessageTarget | MessageTarget[];
 };
 /**
  * Imperative handler to give access to the DOM elements of the DateTimeRangePicker.
@@ -93,6 +106,13 @@ export type DateTimeInputProps = FormControlProps<TimeValue | null, (value: Time
      * Used to connect the hidden input with the form field context
      */
     controlId?: string;
+    /**
+     * Internal: forwarded to the hidden native input's `form` attribute to
+     * associate it with a `_Form` rendered outside its React subtree.
+     * Unstable.
+     * @internal
+     */
+    form?: string;
     /** Internal: validation mode used when required empty values are checked. */
     validationValueMode?: 'single';
     /** Internal: ARIA props from the owning form control. */

package/forms/form/Form.js

@@ -28,6 +28,7 @@ var import_createFormRuntime = require("./runtime/createFormRuntime.js");
 var import_formRegistry = require("./runtime/formRegistry.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
+var import_useId = require("../../core/hooks/useId.js");
 var import_useSafeLayoutEffect = require("../../core/hooks/useSafeLayoutEffect.js");
 const EMPTY_VALIDATORS = [];
 function isFormRuntime(value) {
@@ -51,6 +52,7 @@ const FormRoot = /* @__PURE__ */ (0, import_react.forwardRef)(function Form(prop
     "data-testid": dataTestId,
     ...remainingProps
   } = props;
+  const formMessagesId = (0, import_useId.useId)();
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
   const configRef = (0, import_react.useRef)({
@@ -91,8 +93,8 @@ const FormRoot = /* @__PURE__ */ (0, import_react.forwardRef)(function Form(prop
     return (0, import_formRegistry.registerFormById)(id, runtime);
   }, [id, runtime]);
   const contextValue = (0, import_react.useMemo)(
-    () => ({ runtime, formId: id }),
-    [runtime, id]
+    () => ({ runtime, formId: id, formMessagesId }),
+    [runtime, id, formMessagesId]
   );
   const handleSubmit = (event) => {
     event.preventDefault();

package/forms/form/FormMessages.js

@@ -43,6 +43,7 @@ const FormMessages = /* @__PURE__ */ (0, import_react.forwardRef)(
     } = props;
     const [behavioralTrackingProps, extraProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const context = (0, import_react.useContext)(import_FormContext.FormContext);
+    const formMessagesId = context?.formMessagesId;
     const byIdRuntime = (0, import_react.useSyncExternalStore)(
       form ? (listener) => (0, import_formRegistry.subscribeToFormById)(form, listener) : noopSubscribe,
       () => form ? (0, import_formRegistry.getFormById)(form) : void 0
@@ -64,6 +65,7 @@ const FormMessages = /* @__PURE__ */ (0, import_react.forwardRef)(
       `${error.validityStateKey.toString()}:${error.message}`
     ));
     const commonProps = {
+      id: formMessagesId,
       "aria-live": "polite",
       className,
       style,

package/forms/form/context/FormContext.d.ts

@@ -10,6 +10,8 @@ export interface FormContextValue {
     runtime: FormRuntime;
     /** The nearest `<Form>`'s `id`, if it set one. */
     formId?: string;
+    /** Stable ID shared with `FormMessages` so fields can point aria-describedby at it. */
+    formMessagesId: string;
 }
 /**
  * @internal

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-11-3 {
+._1dphm0f0-3-12-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-11-3 {
+._1dphm0f1-3-12-0 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-11-3";
-var legend = "_1dphm0f1-3-11-3";
+var fieldset = "_1dphm0f0-3-12-0";
+var legend = "_1dphm0f1-3-12-0";

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

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-11-3";
+var formField = "_mvcxum0-3-12-0";

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

@@ -25,12 +25,15 @@ module.exports = __toCommonJS(FormFieldMessageContextProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_useId = require("../../../../core/hooks/useId.js");
+var import_FormContext = require("../../../form/context/FormContext.js");
 var import_FormFieldMessageContext = require("../../contexts/FormFieldMessageContext.js");
 var import_useFormFieldContext = require("../../hooks/useFormFieldContext.js");
 var import_useFormFieldMessagesContext = require("../../hooks/useFormFieldMessagesContext.js");
 var import_formfield_messages_state_reducer = require("../../state/formfield-messages-state-reducer.js");
 const FormFieldMessageContextProvider = (formFieldProps) => {
   const generatedId = (0, import_useId.useId)();
+  const messagesContainerId = (0, import_useId.useId)();
+  const formContext = (0, import_react.useContext)(import_FormContext.FormContext);
   const {
     children,
     id: propId = generatedId,
@@ -90,15 +93,26 @@ const FormFieldMessageContextProvider = (formFieldProps) => {
       state: {
         ...state,
         showError: (propShowError ?? false) || state.showError
-      }
+      },
+      fieldMessagesContainerId: messagesContainerId,
+      formMessagesContainerId: formContext?.formMessagesId,
+      // A control can route its native/Strato messages to the form-wide outlet via
+      // `_messageTarget`. When the field is not among the targets, those messages are
+      // dropped from the inline render here (a pure render-time filter, so they never
+      // flash inline first). Validity is unaffected, and consumer-authored errors
+      // (source 'custom') always stay at the field. With no enclosing <Form>, 'form'
+      // falls back to the field, so nothing is suppressed.
+      routesAwayFromField: formContext !== void 0 && state.messageTarget !== void 0 && !state.messageTarget.includes("field")
     }),
     [
+      formContext,
       formFieldState.disabled,
       legacyFormFieldId,
       propDisabled,
       dispatch,
       state,
-      propShowError
+      propShowError,
+      messagesContainerId
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessageContext.FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children });