@dynatrace/strato-components 3.7.0 → 3.8.0

package/forms/checkbox/Checkbox.css

@@ -1,67 +1,67 @@
-._qmw7sp0-3-7-0 {
+._qmw7sp0-3-8-0 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-7-0 {
+._qmw7sp1-3-8-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-7-0:after {
+._qmw7sp2-3-8-0:after {
   content: "*";
 }
-._qmw7sp3-3-7-0 {
+._qmw7sp3-3-8-0 {
   cursor: default;
 }
-._qmw7sp4-3-7-0 {
+._qmw7sp4-3-8-0 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-7-0);
+  background-color: var(--_bx32h3-3-8-0);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-7-0 {
+._qmw7sp5-3-8-0 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-7-0 {
+._qmw7sp6-3-8-0 {
   margin-right: 0;
 }
-._qmw7spg-3-7-0 {
+._qmw7spg-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._qmw7spg-3-7-0:not(:has(:focus-visible)) {
+._qmw7spg-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._qmw7sph-3-7-0 {
+._qmw7sph-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._qmw7sph-3-7-0:not(:has(:focus-visible)) {
+._qmw7sph-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spi-3-7-0:not(:has(:focus-visible)) {
+._qmw7spi-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7spj-3-7-0:not(:has(:focus-visible)) {
+._qmw7spj-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spk-3-7-0:not(:has(:focus-visible)) {
+._qmw7spk-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spl-3-7-0:not(:has(:focus-visible)) {
+._qmw7spl-3-8-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spm-3-7-0 {
+._qmw7spm-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-7-0);
+  color: var(--_bx32h1-3-8-0);
 }
-._qmw7spn-3-7-0 {
+._qmw7spn-3-8-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._qmw7spp-3-7-0 {
+._qmw7spp-3-8-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/checkbox/Checkbox.js

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(Checkbox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_Checkbox_css = require("./Checkbox.sty.js");
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
@@ -52,6 +53,8 @@ var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldVal
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 const COMPONENT_NAME = "Checkbox";
 const Checkbox = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -64,6 +67,7 @@ const Checkbox = (0, import_react.forwardRef)(
       value,
       name,
       formValue,
+      onValidityChange,
       onChange,
       children,
       controlState,
@@ -92,14 +96,26 @@ const Checkbox = (0, import_react.forwardRef)(
       propAriaDisabled: ariaDisabledProp,
       propReadOnly
     });
+    const intl = (0, import_react_intl.useIntl)();
     const rootRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
+    const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+    const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+      _emitValidationState,
+      () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+    );
     const {
       onChange: validationOnChange,
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = (0, import_useFormFieldValidation.useFormFieldValidation)(inputRef, { required }, ariaLabelingProps);
+    } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+      inputRef,
+      { required, value: String(value) },
+      ariaLabelingProps,
+      void 0,
+      _emitValidationState
+    );
     (0, import_react.useImperativeHandle)(forwardedRef, () => {
       return {
         element: rootRef.current,
@@ -114,7 +130,21 @@ const Checkbox = (0, import_react.forwardRef)(
               type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
               payload: { isTouched: true }
             });
+            emitValidationState(
+              (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+            );
           }
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return emitValidationState(
+            (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+          );
         }
       };
     });
@@ -144,12 +174,6 @@ const Checkbox = (0, import_react.forwardRef)(
       setState(newValue);
       onChange?.(newValue, e);
       validationOnChange();
-      if (!messagesContextState.isTouched) {
-        messagesContextDispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-      }
     };
     (0, import_react.useEffect)(() => {
       if (inputRef.current) {

package/forms/checkbox/Checkbox.sty.js

@@ -26,6 +26,6 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Checkbox_css_ts_vanilla = require("./Checkbox.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checkboxIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7spm-3-7-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-7-0" }, hasError: { true: "_qmw7spo-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-7-0"]] });
-var checkboxKnobCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp4-3-7-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-7-0", false: "_qmw7sp6-3-7-0" }, disabled: { true: "_qmw7sp7-3-7-0", false: "_qmw7sp8-3-7-0" }, hasError: { true: "_qmw7sp9-3-7-0", false: "_qmw7spa-3-7-0" }, checked: { true: "_qmw7spb-3-7-0", false: "_qmw7spc-3-7-0", indeterminate: "_qmw7spd-3-7-0", undefined: "_qmw7spe-3-7-0" }, readOnly: { true: "_qmw7spf-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-7-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-7-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-7-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-7-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-7-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-7-0"]] });
-var checkboxLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp0-3-7-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-7-0" }, required: { true: "_qmw7sp2-3-7-0" }, readOnly: { true: "_qmw7sp3-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7spm-3-8-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-8-0" }, hasError: { true: "_qmw7spo-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-8-0"]] });
+var checkboxKnobCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp4-3-8-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-8-0", false: "_qmw7sp6-3-8-0" }, disabled: { true: "_qmw7sp7-3-8-0", false: "_qmw7sp8-3-8-0" }, hasError: { true: "_qmw7sp9-3-8-0", false: "_qmw7spa-3-8-0" }, checked: { true: "_qmw7spb-3-8-0", false: "_qmw7spc-3-8-0", indeterminate: "_qmw7spd-3-8-0", undefined: "_qmw7spe-3-8-0" }, readOnly: { true: "_qmw7spf-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-8-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-8-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-8-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-8-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-8-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-8-0"]] });
+var checkboxLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_qmw7sp0-3-8-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-8-0" }, required: { true: "_qmw7sp2-3-8-0" }, readOnly: { true: "_qmw7sp3-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -26,7 +26,7 @@ var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_Button = require("../../buttons/button/Button.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_is_visual_refresh_enabled = require("../../core/utils/is-visual-refresh-enabled.js");
+var import_useVisualRefreshEnabled = require("../../core/hooks/useVisualRefreshEnabled.js");
 var import_useOverlayWithTrigger = require("../../overlays/hooks/useOverlayWithTrigger.js");
 var import_Overlay = require("../../overlays/overlay/Overlay.js");
 var import_safe_sprinkles = require("../../styles/safe-sprinkles.js");
@@ -94,7 +94,7 @@ const DateSelector = (0, import_react.forwardRef)(
           ...overlayTriggerProps,
           size: "condensed",
           color: error ? "critical" : "neutral",
-          variant: (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? "emphasized" : "default",
+          variant: (0, import_useVisualRefreshEnabled.useVisualRefreshEnabled)() ? "emphasized" : "default",
           "data-dt-name": "ShowCalendar",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CalendarIcon, {}) })
         }

package/forms/date-time-picker/DateTimePicker.css

@@ -1,121 +1,121 @@
-._1i883gj7-3-7-0 {
-  --_1i883gj0-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-7-0: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-7-0: var(--_1i883gj0-3-7-0);
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-8-0 {
+  --_1i883gj0-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-8-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-8-0: var(--_1i883gj0-3-8-0);
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj5-3-8-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-8-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1jgl8s50-3-7-0 ._1i883gj7-3-7-0 {
-  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-8-0 ._1i883gj7-3-8-0 {
+  --_1i883gj3-3-8-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gj8-3-7-0 {
-  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
-  --_1i883gj2-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1i883gj8-3-8-0 {
+  --_1i883gj5-3-8-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-8-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+  --_1i883gj2-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._1jgl8s50-3-7-0 ._1i883gj8-3-7-0 {
-  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gj9-3-7-0 {
-  --_1i883gj0-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj5-3-7-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj6-3-7-0: var(--dt-colors-background-field-critical-accent, #c62239);
-}
-._1jgl8s50-3-7-0 ._1i883gj9-3-7-0 {
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._1i883gja-3-7-0 {
-  --_1i883gj0-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1jgl8s50-3-8-0 ._1i883gj8-3-8-0 {
+  --_1i883gj3-3-8-0: var(--dt-colors-background-surface-default, #fff);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1i883gj9-3-8-0 {
+  --_1i883gj0-3-8-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-8-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj5-3-8-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj6-3-8-0: var(--dt-colors-background-field-critical-accent, #c62239);
+}
+._1jgl8s50-3-8-0 ._1i883gj9-3-8-0 {
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1i883gja-3-8-0 {
+  --_1i883gj0-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj5-3-8-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj6-3-8-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjc-3-7-0 {
+._1i883gjc-3-8-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gje-3-7-0 {
-  --_1i883gj2-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+._1i883gje-3-8-0 {
+  --_1i883gj2-3-8-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-8-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1i883gj4-3-8-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-0 ._1i883gje-3-7-0 {
-  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-8-0 ._1i883gje-3-8-0 {
+  --_1i883gj3-3-8-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gjf-3-7-0 {
+._1i883gjf-3-8-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-7-0);
+  color: var(--_1i883gj1-3-8-0);
   white-space-collapse: preserve;
 }
-._1i883gjg-3-7-0 {
+._1i883gjg-3-8-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj2-3-7-0);
-  background-color: var(--_1i883gj3-3-7-0);
+  color: var(--_1i883gj2-3-8-0);
+  background-color: var(--_1i883gj3-3-8-0);
 }
-._1i883gjg-3-7-0:hover {
-  background-color: var(--_1i883gj4-3-7-0);
+._1i883gjg-3-8-0:hover {
+  background-color: var(--_1i883gj4-3-8-0);
 }
-._r47o0w0-3-7-0 ._r47o0w1-3-7-0 {
-  color: var(--_1i883gj0-3-7-0);
+._r47o0w0-3-8-0 ._r47o0w1-3-8-0 {
+  color: var(--_1i883gj0-3-8-0);
 }
-._r47o0w0-3-7-0 ._r47o0w1-3-7-0::before {
-  color: var(--_1i883gj1-3-7-0);
+._r47o0w0-3-8-0 ._r47o0w1-3-8-0::before {
+  color: var(--_1i883gj1-3-8-0);
 }
-._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus {
-  background-color: var(--_1i883gj6-3-7-0);
-  color: var(--_1i883gj5-3-7-0);
+._r47o0w0-3-8-0 ._r47o0w1-3-8-0:focus {
+  background-color: var(--_1i883gj6-3-8-0);
+  color: var(--_1i883gj5-3-8-0);
 }
-._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus::before {
-  color: var(--_1i883gj5-3-7-0);
+._r47o0w0-3-8-0 ._r47o0w1-3-8-0:focus::before {
+  color: var(--_1i883gj5-3-8-0);
 }
-._r47o0w0-3-7-0 *::selection {
+._r47o0w0-3-8-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus::selection, ._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus *::selection {
+._r47o0w0-3-8-0 ._r47o0w1-3-8-0:focus::selection, ._r47o0w0-3-8-0 ._r47o0w1-3-8-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj5-3-7-0);
+  color: var(--_1i883gj5-3-8-0);
 }
-._r47o0w0-3-7-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-7-0[data-drag-selected]::before {
-  background-color: var(--_1i883gj6-3-7-0);
-  color: var(--_1i883gj5-3-7-0);
+._r47o0w0-3-8-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-8-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj6-3-8-0);
+  color: var(--_1i883gj5-3-8-0);
 }
-._r47o0w0-3-7-0 [data-drag-selected]::selection, ._r47o0w0-3-7-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-8-0 [data-drag-selected]::selection, ._r47o0w0-3-8-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-7-0:focus {
+[data-shift-selection=true] ._r47o0w1-3-8-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-7-0);
+  color: var(--_1i883gj0-3-8-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-7-0:focus::before {
-  color: var(--_1i883gj1-3-7-0);
+[data-shift-selection=true] ._r47o0w1-3-8-0:focus::before {
+  color: var(--_1i883gj1-3-8-0);
 }
-._1i883gjh-3-7-0 {
+._1i883gjh-3-8-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjh-3-7-0:is(button._1i883gjh-3-7-0._1i883gjh-3-7-0) {
+._1i883gjh-3-8-0:is(button._1i883gjh-3-8-0._1i883gjh-3-8-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-7-0 ._1i883gjh-3-7-0._1i883gjh-3-7-0._1i883gjh-3-7-0 {
+._1jgl8s50-3-8-0 ._1i883gjh-3-8-0._1i883gjh-3-8-0._1i883gjh-3-8-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

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

@@ -51,7 +51,8 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
         checkOrder: true,
         ref: dateTimePickerRef,
         expectedFormat: state.formatString,
-        valueMode: "single"
+        valueMode: "single",
+        required
       });
       const value = (0, import_timeParser.removePrecisionFromTimeValue)(
         memoedValue ?? null,
@@ -176,7 +177,8 @@ const DateTimePicker = (0, import_react.forwardRef)(
         checkOrder: true,
         ref: dateTimePickerRef,
         expectedFormat: formatString,
-        valueMode: "single"
+        valueMode: "single",
+        required
       });
       const calendarValue = (0, import_helpers.toCalendarValue)(value, precision);
       return {
@@ -185,12 +187,14 @@ const DateTimePicker = (0, import_react.forwardRef)(
         min,
         max,
         precision,
+        formatString,
         calendarRef,
         dateTimeInputRef,
         dateTimePickerRef,
         calendarError: error,
         dateTimePickerError: error,
-        timeOffset
+        timeOffset,
+        required
       };
     });
     const [store] = (0, import_react.useState)(
@@ -227,7 +231,8 @@ const DateTimePicker = (0, import_react.forwardRef)(
             checkOrder: true,
             ref: dateTimePickerRef,
             expectedFormat: state.formatString,
-            valueMode: "single"
+            valueMode: "single",
+            required: state.required
           });
           return { calendarError: error, dateTimePickerError: error };
         },

package/forms/date-time-picker/DateTimePicker.sty.js

@@ -30,9 +30,9 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css");
 var import_DateTimePicker_css_ts_vanilla = require("./DateTimePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearIconButton = "_1i883gjh-3-7-0";
-var dateSelector = "_1i883gjg-3-7-0";
-var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj7-3-7-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-7-0" }, showError: { true: "_1i883gj9-3-7-0" }, disabled: { true: "_1i883gja-3-7-0" }, type: { date: "_1i883gjb-3-7-0", time: "_1i883gjc-3-7-0", datetime: "_1i883gjd-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-7-0"]] });
-var spinButtonGroup = "_1i883gjf-3-7-0 _da9a8v0-3-7-0 _da9a8v2-3-7-0 _da9a8v3-3-7-0 _da9a8vb-3-7-0";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-7-0)";
-var spinButtonSelectionColorVar = "var(--_1i883gj5-3-7-0)";
+var clearIconButton = "_1i883gjh-3-8-0";
+var dateSelector = "_1i883gjg-3-8-0";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj7-3-8-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-8-0" }, showError: { true: "_1i883gj9-3-8-0" }, disabled: { true: "_1i883gja-3-8-0" }, type: { date: "_1i883gjb-3-8-0", time: "_1i883gjc-3-8-0", datetime: "_1i883gjd-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-8-0"]] });
+var spinButtonGroup = "_1i883gjf-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-8-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj5-3-8-0)";

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

@@ -44,6 +44,7 @@ var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralT
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
+var import_validation = require("../../core/time/validation.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
 var import_InputGroup = require("../../layouts/input-group/InputGroup.js");
@@ -60,6 +61,9 @@ var import_useMinMaxLogger = require("../forms-core/hooks/useMinMaxLogger.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 const COMPONENT_NAME = "DateTimePicker";
 const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -77,12 +81,18 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     name,
     type = "datetime",
     controlState,
+    onValidityChange,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const min = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.min);
   const max = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.max);
+  const precision = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.precision);
+  const formatString = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.formatString);
   const value = (0, import_useTimeframeStore.useDateTimePickerStore)((state) => state.dateTimePickerValue);
+  const dateTimePickerError = (0, import_useTimeframeStore.useDateTimePickerStore)(
+    (state) => state.dateTimePickerError
+  );
   const setValue = (0, import_useTimeframeStore.useDateTimePickerStore)(
     (state) => state.setDateTimePickerValue
   );
@@ -95,7 +105,7 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
   (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "DateTimePicker");
   const touchedContainerRef = (0, import_react.useRef)(null);
   const { state: formFieldState, dispatch: formFieldDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
-  const { showError: showFormFieldError } = formFieldState;
+  const { showError: showFormFieldError, isTouched } = formFieldState;
   const [hasFormControlError, hint] = (0, import_useFormControlState.useFormControlState)(controlState);
   const { hintProps } = (0, import_useInputHint.useInputHint)({
     hint,
@@ -128,6 +138,32 @@ 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 emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => buildValidationState("manual", dateTimePickerError)
+  );
+  const buildValidationState = (0, import_react.useCallback)(
+    (trigger, key) => {
+      if (key === void 0) {
+        return { status: "done", trigger, errors: [] };
+      }
+      const keyInstance = (0, import_validation.getValidityStateKeyForTimeError)(key);
+      return (0, import_validation_builders.getValidationState)(
+        keyInstance,
+        trigger,
+        (0, import_validation.formatTimeValidationMessage)(key, intl, {
+          value,
+          min,
+          max,
+          precision,
+          expectedFormat: formatString
+        }),
+        id || void 0
+      );
+    },
+    [intl, value, min, max, precision, formatString, id]
+  );
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -145,9 +181,27 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          buildValidationState("manual", dateTimePickerError)
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        dateInputRef.current?.validate();
+        formFieldDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const state = buildValidationState("manual", dateTimePickerError);
+        return emitValidationState(state);
       }
     }),
-    [formFieldDispatch, dateInputRef]
+    [
+      formFieldDispatch,
+      dateInputRef,
+      emitValidationState,
+      buildValidationState
+    ]
   );
   const onBlurTouched = (0, import_react.useCallback)(
     (e) => {
@@ -156,15 +210,25 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(buildValidationState("blur", dateTimePickerError));
       }
     },
-    [formFieldDispatch]
+    [
+      formFieldDispatch,
+      isTouched,
+      dateTimePickerError,
+      emitValidationState,
+      buildValidationState
+    ]
   );
   (0, import_react.useEffect)(() => {
     if (value === null && dateInputRef.current?.expressionInputRef && dateInputRef.current.expressionInputRef.textContent !== "" && dateInputRef.current.element?.getAttribute("data-valuetype") !== "expression") {
       dateInputRef.current.expressionInputRef.textContent = "";
     }
   }, [value, dateInputRef]);
+  (0, import_react.useEffect)(() => {
+    emitValidationState(buildValidationState("change", dateTimePickerError));
+  }, [value, emitValidationState, buildValidationState, dateTimePickerError]);
   const {
     onMouseDown,
     onKeyDown: handleSelectionKeyDown,

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

@@ -1,4 +1,4 @@
-._1uftu980-3-7-0 {
+._1uftu980-3-8-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.js

@@ -40,8 +40,8 @@ var styles = __toESM(require("./DateRangeSelector.sty.js"));
 var import_Button = require("../../buttons/button/Button.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_useVisualRefreshEnabled = require("../../core/hooks/useVisualRefreshEnabled.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
-var import_is_visual_refresh_enabled = require("../../core/utils/is-visual-refresh-enabled.js");
 var import_useOverlayWithTrigger = require("../../overlays/hooks/useOverlayWithTrigger.js");
 var import_Overlay = require("../../overlays/overlay/Overlay.js");
 var import_safe_sprinkles = require("../../styles/safe-sprinkles.js");
@@ -121,7 +121,7 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
     }),
     [error, disabled]
   );
-  const isCritical = (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? error && !disabled && !readOnly : error;
+  const isCritical = (0, import_useVisualRefreshEnabled.useVisualRefreshEnabled)() ? error && !disabled && !readOnly : error;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Button.Button,

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-7-0";
+var selector = "_1uftu980-3-8-0";