@dynatrace/strato-components 3.12.2 → 3.13.0

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-12-2";
-var dateTimeInputRoot = "_5u9o250-3-12-2";
-var expression = "_5u9o252-3-12-2";
+var dateTimeInput = "_5u9o251-3-13-0";
+var dateTimeInputRoot = "_5u9o250-3-13-0";
+var expression = "_5u9o252-3-13-0";

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

@@ -1,49 +1,49 @@
-._1vlwkc20-3-12-2 {
+._1vlwkc20-3-13-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-12-2);
+  box-shadow: var(--_bx32h4-3-13-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-12-2);
-  background: var(--_bx32h3-3-12-2);
+  color: var(--_bx32h0-3-13-0);
+  background: var(--_bx32h3-3-13-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-12-2._1vlwkc20-3-12-2 {
+._1vlwkc20-3-13-0._1vlwkc20-3-13-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2) {
+._1vlwkc20-3-13-0:has(._1i883gjd-3-13-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2:hover) {
-  --_bx32h3-3-12-2: var(--_bx32h2-3-12-2);
+._1vlwkc20-3-13-0:has(._1i883gjd-3-13-0:hover) {
+  --_bx32h3-3-13-0: var(--_bx32h2-3-13-0);
 }
-._1vlwkc20-3-12-2:has(._1i883gjd-3-12-2:focus-visible) {
-  box-shadow: var(--_bx32h4-3-12-2, none);
+._1vlwkc20-3-13-0:has(._1i883gjd-3-13-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-13-0, none);
 }
-._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc20-3-12-2:active {
-  --_bx32h3-3-12-2: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-13-0 ._1vlwkc20-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc20-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc20-3-13-0:active {
+  --_bx32h3-3-13-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-12-2 {
+._1vlwkc22-3-13-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-13-0 {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc23-3-12-2:active {
-  --_bx32h4-3-12-2: 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-13-0 ._1vlwkc23-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc23-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc23-3-13-0:active {
+  --_bx32h4-3-13-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-12-2 {
-  --_bx32h3-3-12-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-13-0 {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2, ._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2:hover, ._1jgl8s50-3-12-2 ._1vlwkc24-3-12-2:active {
-  --_bx32h4-3-12-2: 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-13-0 ._1vlwkc24-3-13-0, ._1jgl8s50-3-13-0 ._1vlwkc24-3-13-0:hover, ._1jgl8s50-3-13-0 ._1vlwkc24-3-13-0:active {
+  --_bx32h4-3-13-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-12-2 {
+._1vlwkc25-3-13-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-12-2._1vlwkc25-3-12-2 {
+._1vlwkc25-3-13-0._1vlwkc25-3-13-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-12-2::-webkit-scrollbar {
+._1vlwkc25-3-13-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-12-2._1vlwkc26-3-12-2 {
+._1vlwkc26-3-13-0._1vlwkc26-3-13-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-12-2 {
+._1vlwkc27-3-13-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-12-2::selection {
+._1vlwkc27-3-13-0::selection {
   background: transparent;
 }

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

@@ -109,7 +109,7 @@ const DateTimeRangePicker = (0, import_react.forwardRef)(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     onBlur,
     ...remainingProps
@@ -123,7 +123,7 @@ const DateTimeRangePicker = (0, import_react.forwardRef)(
     const memoedDefaultValue = (0, import_react.useMemo)(
       () => (0, import_timeParser.mapToPartialTimeframe)(propDefaultValue, precision),
       /** We're ignoring updates to defaultValue as it only considers the initial state. */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     const { min, max } = (0, import_useMinMax.useMinMax)(propMin, propMax);

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-12-2";
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-12-2", variantClassNames: { showError: { true: "_1vlwkc21-3-12-2" }, disabled: { true: "_1vlwkc22-3-12-2" }, readOnly: { true: "_1vlwkc23-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-12-2"]] });
-var scrollContainer = "_1vlwkc25-3-12-2";
-var timeframeSeparator = "_1vlwkc27-3-12-2";
+var dateTimeInput = "_1vlwkc26-3-13-0";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-13-0", variantClassNames: { showError: { true: "_1vlwkc21-3-13-0" }, disabled: { true: "_1vlwkc22-3-13-0" }, readOnly: { true: "_1vlwkc23-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-13-0"]] });
+var scrollContainer = "_1vlwkc25-3-13-0";
+var timeframeSeparator = "_1vlwkc27-3-13-0";

package/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -201,7 +201,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     },
     // no use in adding the expressionInputRef to the dep. array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const spinButtonHandlersRef = (0, import_react.useRef)(spinButtonHandlers);

package/forms/form/hooks/useInternalFormRegistration.js

@@ -88,7 +88,7 @@ function useInternalFormRegistration(options) {
     );
   };
   const resolvedId = id ?? formFieldContext.formFieldId ?? // DEPRECATION: APPDEV-18319 - Remove deprecated `controlId`.
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  // oxlint-disable-next-line typescript/no-deprecated
   formFieldContext.controlId ?? generatedId;
   const wrappedValidateField = (0, import_react.useCallback)(
     async (validateOptions) => {

package/forms/form/runtime/createFormRuntime.js

@@ -46,6 +46,7 @@ const SOURCE_PRIORITY = {
   strato: 1,
   native: 2
 };
+const NO_ERRORS = [];
 function createFormRuntime(getConfig) {
   const config = { validators: [] };
   const controls = /* @__PURE__ */ new Map();
@@ -53,8 +54,8 @@ function createFormRuntime(getConfig) {
   let manualErrors = [];
   let formValidatorErrors = [];
   let isSubmitted = false;
-  let activeValidationRuns = 0;
   let validationRunId = 0;
+  const unsettledRunIds = /* @__PURE__ */ new Set();
   let readConfig = getConfig ?? (() => config);
   const listeners = /* @__PURE__ */ new Set();
   const warnedDuplicateNames = /* @__PURE__ */ new Set();
@@ -71,7 +72,7 @@ function createFormRuntime(getConfig) {
     return [...fieldStates.values()].some(stateIsPending);
   }
   function isPending() {
-    return activeValidationRuns > 0 || hasPendingFields();
+    return unsettledRunIds.has(validationRunId) || hasPendingFields();
   }
   function aggregateErrors() {
     const seen = /* @__PURE__ */ new Set();
@@ -147,7 +148,7 @@ function createFormRuntime(getConfig) {
   async function runValidation(trigger, reveal) {
     const runId = ++validationRunId;
     const runControls = [...controls.values()];
-    activeValidationRuns += 1;
+    unsettledRunIds.add(runId);
     emitValidityChange(trigger);
     notify();
     try {
@@ -176,7 +177,7 @@ function createFormRuntime(getConfig) {
         );
       }
     } finally {
-      activeValidationRuns -= 1;
+      unsettledRunIds.delete(runId);
       emitValidityChange(trigger);
       notify();
     }
@@ -188,7 +189,11 @@ function createFormRuntime(getConfig) {
     validate: () => runValidation("manual", true),
     submit: async () => {
       isSubmitted = true;
+      const submitRunId = validationRunId + 1;
       const status = await runValidation("submit", true);
+      if (validationRunId !== submitRunId) {
+        return buildStatus();
+      }
       if (!status.isValid) {
         focusFirstInvalid(controls, status.errors);
         readConfig().onInvalid?.({
@@ -204,7 +209,7 @@ function createFormRuntime(getConfig) {
     },
     resetValidation: () => {
       validationRunId += 1;
-      activeValidationRuns = 0;
+      unsettledRunIds.clear();
       manualErrors = [];
       formValidatorErrors = [];
       isSubmitted = false;
@@ -267,6 +272,9 @@ function createFormRuntime(getConfig) {
     // signature actually changed — a fresh array on every read forces a re-render and
     // can loop.
     getFormMessages: () => {
+      if (isPending()) {
+        return NO_ERRORS;
+      }
       const current = aggregateErrors().filter(
         (error) => error instanceof import_form_error_classes.FormValidationError || (0, import_message_routing.routesTo)(error, "form")
       );
@@ -278,6 +286,9 @@ function createFormRuntime(getConfig) {
       return formMessagesCache;
     },
     getFieldMessages: (controlId) => {
+      if (isPending()) {
+        return NO_ERRORS;
+      }
       const current = errorsForField(controlId);
       const signature = errorSetSignature(current);
       const cached = fieldMessagesCache.get(controlId);
@@ -327,7 +338,7 @@ function cloneWithCustomSource(error) {
   });
 }
 function matchesTarget(error, target, validityStateKey) {
-  const routedTo = error instanceof import_form_error_classes.FormValidationError ? error.formId === target : Array.isArray(error.formControlId) ? error.formControlId.includes(target) : error.formControlId === target;
+  const routedTo = error instanceof import_form_error_classes.FormValidationError && error.formId === target || (Array.isArray(error.formControlId) ? error.formControlId.includes(target) : error.formControlId === target);
   if (!routedTo) {
     return false;
   }
@@ -339,6 +350,9 @@ function focusFirstInvalid(controls, errors) {
       (error) => error.formControlId === void 0 ? [] : Array.isArray(error.formControlId) ? error.formControlId : [error.formControlId]
     )
   );
+  if (invalidIds.size === 0) {
+    return;
+  }
   for (const { control } of controls.values()) {
     if (invalidIds.has(control.id)) {
       control.focus();

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

@@ -1,4 +1,4 @@
-._1dphm0f0-3-12-2 {
+._1dphm0f0-3-13-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-12-2 {
+._1dphm0f1-3-13-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-12-2";
-var legend = "_1dphm0f1-3-12-2";
+var fieldset = "_1dphm0f0-3-13-0";
+var legend = "_1dphm0f1-3-13-0";

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

@@ -50,7 +50,7 @@ const FormField = /* @__PURE__ */ (0, import_react.forwardRef)((formFieldProps,
     disabled,
     required,
     readOnly,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     controlId: _controlId,
     className: consumerClassName,
     style: consumerStyle,

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-12-2";
+var formField = "_mvcxum0-3-13-0";

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

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

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

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

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.d.ts

@@ -15,6 +15,14 @@ export type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {
      *
      */
     validityStateKey?: string;
+    /**
+     * When `true`, an error item is revealed as soon as it mounts and puts the field into
+     * an error state immediately, bypassing the field's normal reveal gate (first blur, overlay
+     * close, or immediate-on-click, depending on the control). Has no effect on hint items.
+     *
+     * @defaultValue false
+     */
+    showImmediately?: boolean;
 };
 /**
  * Renders a FormFieldMessageItem message if given, otherwise renders the provided children.

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

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

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

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-12-2", variantClassNames: { variant: { hint: "_16z6rg11-3-12-2", error: "_16z6rg12-3-12-2" }, disabled: { true: "_16z6rg13-3-12-2" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-12-2";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-13-0", variantClassNames: { variant: { hint: "_16z6rg11-3-13-0", error: "_16z6rg12-3-13-0" }, disabled: { true: "_16z6rg13-3-13-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-13-0";

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

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

package/forms/forms-core/components/form-field-messages/FormFieldMessages.d.ts

@@ -5,18 +5,35 @@ import type { DOMProps } from '../../../../core/types/dom.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { FormFieldControlMessage } from '../../types/formfield-messages.types.js';
+/**
+ * Validation insight passed to the `FormFieldMessages` render function, alongside its messages.
+ * @public
+ */
+export type FormFieldValidationState = {
+    /**
+     * Whether a potential error — internal (formcontrol) or external (custom) — would now be
+     * visible for this field. This tracks the field's reveal gate (touched/blurred/submitted and
+     * not disabled), not the presence of an error: it stays `true` once revealed even while the
+     * field is currently valid, so a later error shows immediately without a further gate.
+     */
+    showErrors: boolean;
+    /**
+     * Whether the field currently holds at least one error, regardless of `showErrors`.
+     */
+    isValid: boolean;
+};
 /**
  * Properties for the FormFieldMessages component.
  * @public
  */
 export type FormFieldMessageProps = MaskingProps & StylingProps & DataTestId & DOMProps & BehaviorTrackingProps & {
-    children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
+    children?: ((messages: FormFieldControlMessage[], validationState: FormFieldValidationState) => ReactNode[] | ReactNode) | ReactNode;
 };
 /**
  * @public
  */
 export declare const FormFieldMessages: ((props: MaskingProps & StylingProps & DataTestId & DOMProps & BehaviorTrackingProps & {
-    children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
+    children?: ((messages: FormFieldControlMessage[], validationState: FormFieldValidationState) => ReactNode[] | ReactNode) | ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Item: {
         (props: import("./FormFieldMessageItem.js").FormFieldMessageItemProps): import("react").JSX.Element | null;

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

@@ -39,6 +39,7 @@ var styles = __toESM(require("./FormFieldMessages.sty.js"));
 var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_FormContext = require("../../../form/context/FormContext.js");
+var import_form_error_classes = require("../../../form/form-error-classes.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");
@@ -56,6 +57,7 @@ function RuntimeFieldMessageRegistration({
   const { dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const id = `runtime-${error.validityStateKey.toString()}-${error.message}`;
   (0, import_react2.useEffect)(() => {
+    const source = error instanceof import_form_error_classes.FormValidationError ? "strato" : error.source;
     dispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
       payload: {
@@ -64,7 +66,7 @@ function RuntimeFieldMessageRegistration({
         validityStateKey: error.validityStateKey.toString(),
         messageType: "formcontrol",
         variant: "error",
-        source: error.source,
+        source,
         controlId,
         showError: true
       }
@@ -75,14 +77,7 @@ function RuntimeFieldMessageRegistration({
         payload: { id, messageType: "formcontrol", controlId }
       });
     };
-  }, [
-    controlId,
-    dispatch,
-    error.message,
-    error.source,
-    error.validityStateKey,
-    id
-  ]);
+  }, [controlId, dispatch, error, error.message, error.validityStateKey, id]);
   return null;
 }
 const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((FormFieldMessageProps, forwardedRef) => {
@@ -129,6 +124,12 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
     (msg) => !msg.source || msg.source === activeSource
   );
   const formMessages = state.showError ? visibleErrorMessages : internalHintMessages;
+  const showErrors = !state.isDisabled && (state.showError || (state.isTouched ?? false));
+  const isValid = state.isValid ?? true;
+  const validationState = (0, import_react2.useMemo)(
+    () => ({ showErrors, isValid }),
+    [showErrors, isValid]
+  );
   const hasVisibleErrorsToShow = state.showError && suppressedErrorMessages.length > 0;
   const autoErrorItems = state.showError ? suppressedErrorMessages.map((message) => /* @__PURE__ */ (0, import_react.createElement)(
     FormFieldMessages.Item,
@@ -141,7 +142,7 @@ const FormFieldMessagesRoot = /* @__PURE__ */ (0, import_react2.forwardRef)((For
   let content = null;
   let hasConsumerChildren = Boolean(children);
   if (typeof children === "function") {
-    content = children(formMessages);
+    content = children(formMessages, validationState);
     if (content === void 0 || content === null) {
       hasConsumerChildren = false;
     }

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

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-12-2";
+var formFieldMessages = "_1l9bja60-3-13-0";

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

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

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

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

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

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-12-2", variantClassNames: { disabled: { true: "_1gxatyo1-3-12-2" }, required: { true: "_1gxatyo2-3-12-2" }, readOnly: { true: "_1gxatyo3-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-12-2";
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-13-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-13-0" }, required: { true: "_1gxatyo2-3-13-0" }, readOnly: { true: "_1gxatyo3-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-13-0";

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

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

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

@@ -31,22 +31,22 @@ function _formFieldReducer(state, action) {
     return {
       ...state,
       required: (
-        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
         payload.required !== void 0 ? payload.required : state.required
       ),
       disabled: (
-        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
         payload.disabled !== void 0 ? payload.disabled : state.disabled
       ),
       ariaDisabled: (
-        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
         payload.ariaDisabled !== void 0 ? (
-          // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+          // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
           payload.ariaDisabled
         ) : state.ariaDisabled
       ),
       readOnly: (
-        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
         payload.readOnly !== void 0 ? payload.readOnly : state.readOnly
       )
     };

package/forms/hooks/useAutofillEvent.css

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