@dynatrace/strato-components 3.7.0 → 3.8.0

package/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh1-3-7-0 {
-  --_w5wkeh0-3-7-0: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
+._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh5-3-7-0:not(._w5wkeh4-3-7-0) {
+._w5wkeh5-3-8-0:not(._w5wkeh4-3-8-0) {
   cursor: not-allowed;
 }
-._w5wkeh6-3-7-0 {
+._w5wkeh6-3-8-0 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh7-3-7-0 {
+._w5wkeh7-3-8-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -23,40 +23,40 @@
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._1jgl8s50-3-7-0 ._w5wkeh7-3-7-0 {
+._1jgl8s50-3-8-0 ._w5wkeh7-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-emphasized, #ebecf0);
 }
-._w5wkeh7-3-7-0._w5wkeh2-3-7-0 {
+._w5wkeh7-3-8-0._w5wkeh2-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh7-3-7-0._w5wkeh5-3-7-0 {
+._w5wkeh7-3-8-0._w5wkeh5-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkeh7-3-7-0._w5wkeh4-3-7-0 {
+._w5wkeh7-3-8-0._w5wkeh4-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkeh7-3-7-0._w5wkeh4-3-7-0._w5wkeh2-3-7-0 {
+._w5wkeh7-3-8-0._w5wkeh4-3-8-0._w5wkeh2-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh8-3-7-0 {
+._w5wkeh8-3-8-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh2-3-7-0:not(._w5wkeh5-3-7-0) ._w5wkeh8-3-7-0 {
+._w5wkeh2-3-8-0:not(._w5wkeh5-3-8-0) ._w5wkeh8-3-8-0 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh9-3-7-0 {
+._w5wkeh9-3-8-0 {
   width: 100%;
 }
-._w5wkeha-3-7-0 {
+._w5wkeha-3-8-0 {
   width: fit-content;
 }
-._w5wkehb-3-7-0 {
+._w5wkehb-3-8-0 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -64,36 +64,36 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkehb-3-7-0::-webkit-scrollbar {
+._w5wkehb-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._w5wkehc-3-7-0 {
+._w5wkehc-3-8-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-7-0 {
+._w5wkehd-3-8-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehe-3-7-0 {
+._w5wkehe-3-8-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehf-3-7-0 {
+._w5wkehf-3-8-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._1jgl8s50-3-7-0 ._w5wkehf-3-7-0:hover:not(._w5wkeh2-3-7-0 ._w5wkehf-3-7-0) {
-  --_bx32h3-3-7-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-8-0 ._w5wkehf-3-8-0:hover:not(._w5wkeh2-3-8-0 ._w5wkehf-3-8-0) {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-7-0 ._w5wkehf-3-7-0:active:not(._w5wkeh2-3-7-0 ._w5wkehf-3-7-0) {
-  --_bx32h3-3-7-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-8-0 ._w5wkehf-3-8-0:active:not(._w5wkeh2-3-8-0 ._w5wkehf-3-8-0) {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._w5wkehg-3-7-0 {
+._w5wkehg-3-8-0 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -109,93 +109,93 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
-  box-shadow: var(--_w5wkeh0-3-7-0);
+  box-shadow: var(--_w5wkeh0-3-8-0);
 }
-._w5wkehg-3-7-0:hover {
+._w5wkehg-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._w5wkehg-3-7-0:active {
+._w5wkehg-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-7-0 ._w5wkehg-3-7-0 {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0 {
   margin: 0;
   padding: 5px var(--dt-spacings-size-6, 6px);
   border-radius: 5px;
 }
-._w5wkeh2-3-7-0 ._w5wkehg-3-7-0 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkeh2-3-7-0 ._w5wkehg-3-7-0:hover {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0:hover {
   background-color: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
 }
-._w5wkeh2-3-7-0 ._w5wkehg-3-7-0:active {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0:active {
   background-color: var(--dt-colors-background-field-critical-default-active, #f5cac9);
 }
-._w5wkehg-3-7-0._w5wkeh3-3-7-0 {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0 {
   cursor: not-allowed;
   background-color: transparent;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._w5wkehg-3-7-0._w5wkeh3-3-7-0:hover {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0:hover {
   background-color: transparent;
 }
-._w5wkehg-3-7-0._w5wkeh3-3-7-0:active {
+._w5wkehg-3-8-0._w5wkeh3-3-8-0:active {
   background-color: transparent;
 }
-._w5wkeh2-3-7-0 ._w5wkehg-3-7-0._w5wkeh3-3-7-0 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh3-3-8-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._w5wkehg-3-7-0._w5wkeh4-3-7-0 {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0 {
   cursor: default;
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._w5wkehg-3-7-0._w5wkeh4-3-7-0:hover {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkehg-3-7-0._w5wkeh4-3-7-0:active {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._w5wkeh2-3-7-0 ._w5wkehg-3-7-0._w5wkeh4-3-7-0 {
+._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh4-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._w5wkehg-3-7-0._w5wkeh1-3-7-0 {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-0._w5wkeh1-3-7-0:hover {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0:hover {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-0._w5wkeh1-3-7-0:active {
+._w5wkehg-3-8-0._w5wkeh1-3-8-0:active {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehg-3-7-0._w5wkeh4-3-7-0._w5wkeh1-3-7-0:not(._w5wkeh2-3-7-0 ._w5wkehg-3-7-0) {
+._w5wkehg-3-8-0._w5wkeh4-3-8-0._w5wkeh1-3-8-0:not(._w5wkeh2-3-8-0 ._w5wkehg-3-8-0) {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jgl8s50-3-7-0 ._w5wkehg-3-7-0._w5wkeh1-3-7-0 {
-  --_w5wkeh0-3-7-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-7-0 ._w5wkehg-3-7-0._w5wkeh1-3-7-0._w5wkeh3-3-7-0 {
-  --_w5wkeh0-3-7-0: 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-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0._w5wkeh3-3-8-0 {
+  --_w5wkeh0-3-8-0: 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-7-0 ._w5wkeh2-3-7-0 ._w5wkehg-3-7-0._w5wkeh1-3-7-0 {
-  --_w5wkeh0-3-7-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-8-0 ._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0 {
+  --_w5wkeh0-3-8-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }
-._1jgl8s50-3-7-0 ._w5wkeh2-3-7-0 ._w5wkehg-3-7-0._w5wkeh1-3-7-0._w5wkeh3-3-7-0 {
-  --_w5wkeh0-3-7-0: 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-8-0 ._w5wkeh2-3-8-0 ._w5wkehg-3-8-0._w5wkeh1-3-8-0._w5wkeh3-3-8-0 {
+  --_w5wkeh0-3-8-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._w5wkehg-3-7-0:first-child {
+._w5wkehg-3-8-0:first-child {
   margin-left: 1px;
 }
-._w5wkehg-3-7-0:last-child {
+._w5wkehg-3-8-0:last-child {
   margin-right: 1px;
 }
-._1jgl8s50-3-7-0 ._w5wkehg-3-7-0:first-child {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0:first-child {
   margin-left: 0;
 }
-._1jgl8s50-3-7-0 ._w5wkehg-3-7-0:last-child {
+._1jgl8s50-3-8-0 ._w5wkehg-3-8-0:last-child {
   margin-right: 0;
 }
-._w5wkehh-3-7-0 {
+._w5wkehh-3-8-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -203,7 +203,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehi-3-7-0 {
+._w5wkehi-3-8-0 {
   min-width: 0;
   align-items: center;
 }

package/forms/toggle-button-group/styles.sty.js

@@ -37,18 +37,18 @@ module.exports = __toCommonJS(styles_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
-var checked = "_w5wkeh1-3-7-0";
-var container = "_w5wkeh7-3-7-0";
-var containerWidths = { full: "_w5wkeh9-3-7-0", content: "_w5wkeha-3-7-0" };
-var disabled = "_w5wkeh3-3-7-0";
-var disabledGroup = "_w5wkeh5-3-7-0";
-var divider = "_w5wkeh8-3-7-0";
-var error = "_w5wkeh2-3-7-0";
-var hidden = "_w5wkeh6-3-7-0";
-var item = "_w5wkehg-3-7-0";
-var readOnly = "_w5wkeh4-3-7-0";
-var scrollButton = "_w5wkehf-3-7-0";
-var scrollContainer = "_w5wkehb-3-7-0";
-var scrollVariants = { both: "_w5wkehc-3-7-0", left: "_w5wkehd-3-7-0", right: "_w5wkehe-3-7-0" };
-var text = "_w5wkehh-3-7-0";
-var textContainer = "_w5wkehi-3-7-0";
+var checked = "_w5wkeh1-3-8-0";
+var container = "_w5wkeh7-3-8-0";
+var containerWidths = { full: "_w5wkeh9-3-8-0", content: "_w5wkeha-3-8-0" };
+var disabled = "_w5wkeh3-3-8-0";
+var disabledGroup = "_w5wkeh5-3-8-0";
+var divider = "_w5wkeh8-3-8-0";
+var error = "_w5wkeh2-3-8-0";
+var hidden = "_w5wkeh6-3-8-0";
+var item = "_w5wkehg-3-8-0";
+var readOnly = "_w5wkeh4-3-8-0";
+var scrollButton = "_w5wkehf-3-8-0";
+var scrollContainer = "_w5wkehb-3-8-0";
+var scrollVariants = { both: "_w5wkehc-3-8-0", left: "_w5wkehd-3-8-0", right: "_w5wkehe-3-8-0" };
+var text = "_w5wkehh-3-8-0";
+var textContainer = "_w5wkehi-3-8-0";

package/forms/validation/types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Lifecycle state of a validation run.
+ * @public
+ */
+export type ValidationStatus = 'pending' | 'done' | 'aborted';
+/**
+ * Why a validation run was triggered.
+ * @public
+ */
+export type ValidationTrigger = 'change' | 'blur' | 'manual' | 'submit' | 'initial';
+/**
+ * Where a {@link ValidationError} originated.
+ * @public
+ */
+export type ValidationErrorSource = 'native' | 'strato' | 'custom';
+/**
+ * Stable, comparable identity for a validity key.
+ *
+ * @remarks
+ * Use {@link ValidityStateKey.equals} for comparisons. `===` fails across
+ * module boundaries since each instance is a distinct object reference.
+ *
+ * @public
+ */
+export declare class ValidityStateKey<T extends string = string> {
+    readonly value: T;
+    constructor(value: T);
+    /** Value equality check. Safe across module boundaries. */
+    equals(other: ValidityStateKey): boolean;
+    toString(): string;
+}
+/**
+ * Browser-native validity keys, wrapping the same values as the native
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState | ValidityState}.
+ * @public
+ */
+export declare const NativeValidityStateKeys: {
+    readonly valueMissing: ValidityStateKey<"valueMissing">;
+    readonly typeMismatch: ValidityStateKey<"typeMismatch">;
+    readonly patternMismatch: ValidityStateKey<"patternMismatch">;
+    readonly tooLong: ValidityStateKey<"tooLong">;
+    readonly tooShort: ValidityStateKey<"tooShort">;
+    readonly rangeUnderflow: ValidityStateKey<"rangeUnderflow">;
+    readonly rangeOverflow: ValidityStateKey<"rangeOverflow">;
+    readonly stepMismatch: ValidityStateKey<"stepMismatch">;
+    readonly badInput: ValidityStateKey<"badInput">;
+    readonly customError: ValidityStateKey<"customError">;
+};
+/**
+ * Union of the browser-native validity keys.
+ * @public
+ */
+export type NativeValidityStateKey = (typeof NativeValidityStateKeys)[keyof typeof NativeValidityStateKeys];
+/**
+ * Strato-specific validity keys used by components whose validation cannot be
+ * represented by browser-native validity states.
+ * @public
+ */
+export declare const StratoValidityStateKeys: {
+    readonly syntaxError: ValidityStateKey<"syntaxError">;
+    readonly minMaxBoundary: ValidityStateKey<"minMaxBoundary">;
+    readonly invalidOrder: ValidityStateKey<"invalidOrder">;
+    readonly invalid: ValidityStateKey<"invalid">;
+    readonly invalidFrom: ValidityStateKey<"invalidFrom">;
+    readonly invalidTo: ValidityStateKey<"invalidTo">;
+    readonly invalidFromTo: ValidityStateKey<"invalidFromTo">;
+    readonly missingFrom: ValidityStateKey<"missingFrom">;
+    readonly missingTo: ValidityStateKey<"missingTo">;
+    readonly arrayIdentifierError: ValidityStateKey<"arrayIdentifierError">;
+    readonly unavailable: ValidityStateKey<"unavailable">;
+    readonly needsUpdate: ValidityStateKey<"needs-update">;
+    readonly missingVariables: ValidityStateKey<"missing-variables">;
+    readonly genericError: ValidityStateKey<"genericError">;
+};
+/**
+ * Union of Strato-specific validity keys.
+ * @public
+ */
+export type StratoValidityStateKey = (typeof StratoValidityStateKeys)[keyof typeof StratoValidityStateKeys];
+/**
+ * Options accepted by the {@link ValidationError} constructor.
+ * @public
+ */
+export type ValidationErrorOptions = ErrorOptions & {
+    /** Where the error came from. @defaultValue `'custom'` */
+    source?: ValidationErrorSource;
+    /** Stable error identity. @defaultValue `NativeValidityStateKeys.customError` */
+    validityStateKey?: ValidityStateKey;
+    /** ID(s) of all form control inputs affected by this error. */
+    formControlId?: string | string[];
+};
+/**
+ * A single validation error.
+ *
+ * @remarks
+ * Extends `Error` so that `instanceof` narrowing works across package
+ * boundaries and the original async failure can be preserved via `Error.cause`.
+ *
+ * @public
+ */
+export declare class ValidationError extends Error {
+    /** Where the error came from. */
+    readonly source: ValidationErrorSource;
+    /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */
+    readonly validityStateKey: ValidityStateKey;
+    /** ID(s) of all form control inputs affected by this error. */
+    readonly formControlId: string | string[] | undefined;
+    constructor(message: string, options?: ValidationErrorOptions);
+}
+/**
+ * Shared validation result type returned by `validateAsync()` and passed to
+ * `onValidityChange`.
+ * @public
+ */
+export type ValidationState = {
+    /** Validation lifecycle state. */
+    status: ValidationStatus;
+    /** Why validation fired. */
+    trigger: ValidationTrigger;
+    /** Validation errors. Empty when the control is valid or still `'pending'`. */
+    errors: ValidationError[];
+};

package/forms/validation/types.js

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+__export(types_exports, {
+  NativeValidityStateKeys: () => NativeValidityStateKeys,
+  StratoValidityStateKeys: () => StratoValidityStateKeys,
+  ValidationError: () => ValidationError,
+  ValidityStateKey: () => ValidityStateKey
+});
+module.exports = __toCommonJS(types_exports);
+class ValidityStateKey {
+  constructor(value) {
+    this.value = value;
+  }
+  value;
+  /** Value equality check. Safe across module boundaries. */
+  equals(other) {
+    return this.value === other.value;
+  }
+  toString() {
+    return this.value;
+  }
+}
+const NativeValidityStateKeys = {
+  valueMissing: new ValidityStateKey("valueMissing"),
+  typeMismatch: new ValidityStateKey("typeMismatch"),
+  patternMismatch: new ValidityStateKey("patternMismatch"),
+  tooLong: new ValidityStateKey("tooLong"),
+  tooShort: new ValidityStateKey("tooShort"),
+  rangeUnderflow: new ValidityStateKey("rangeUnderflow"),
+  rangeOverflow: new ValidityStateKey("rangeOverflow"),
+  stepMismatch: new ValidityStateKey("stepMismatch"),
+  badInput: new ValidityStateKey("badInput"),
+  customError: new ValidityStateKey("customError")
+};
+const StratoValidityStateKeys = {
+  syntaxError: new ValidityStateKey("syntaxError"),
+  minMaxBoundary: new ValidityStateKey("minMaxBoundary"),
+  invalidOrder: new ValidityStateKey("invalidOrder"),
+  invalid: new ValidityStateKey("invalid"),
+  invalidFrom: new ValidityStateKey("invalidFrom"),
+  invalidTo: new ValidityStateKey("invalidTo"),
+  invalidFromTo: new ValidityStateKey("invalidFromTo"),
+  missingFrom: new ValidityStateKey("missingFrom"),
+  missingTo: new ValidityStateKey("missingTo"),
+  arrayIdentifierError: new ValidityStateKey("arrayIdentifierError"),
+  unavailable: new ValidityStateKey("unavailable"),
+  needsUpdate: new ValidityStateKey("needs-update"),
+  missingVariables: new ValidityStateKey("missing-variables"),
+  genericError: new ValidityStateKey("genericError")
+};
+class ValidationError extends Error {
+  /** Where the error came from. */
+  source;
+  /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */
+  validityStateKey;
+  /** ID(s) of all form control inputs affected by this error. */
+  formControlId;
+  constructor(message, options = {}) {
+    super(message, { cause: options.cause });
+    this.name = "ValidationError";
+    this.source = options.source ?? "custom";
+    this.validityStateKey = options.validityStateKey ?? NativeValidityStateKeys.customError;
+    this.formControlId = options.formControlId;
+  }
+}

package/forms/validation/useCustomMessageEmitter.d.ts

@@ -0,0 +1,9 @@
+import { type ValidationState } from './types.js';
+/**
+ * Returns a wrapped `emitValidationState` that always merges current custom
+ * error messages into every emitted state. Also fires when the set of custom
+ * errors changes (added or removed), using `getBaseState` to determine the
+ * underlying native/Strato errors at that point.
+ * @internal
+ */
+export declare function useCustomMessageEmitter(emitValidationState: ((state: ValidationState) => void) | undefined, getBaseState?: () => ValidationState | Promise<ValidationState>): (state: ValidationState) => ValidationState;

package/forms/validation/useCustomMessageEmitter.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useCustomMessageEmitter_exports = {};
+__export(useCustomMessageEmitter_exports, {
+  useCustomMessageEmitter: () => useCustomMessageEmitter
+});
+module.exports = __toCommonJS(useCustomMessageEmitter_exports);
+var import_react = require("react");
+var import_types = require("./types.js");
+var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+function useCustomMessageEmitter(emitValidationState, getBaseState) {
+  const { state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const customErrorKey = state.customMessages.filter((m) => m.variant === "error").map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ""}`).sort((a, b) => a.localeCompare(b)).join(",");
+  const customMessagesRef = (0, import_react.useRef)(state.customMessages);
+  customMessagesRef.current = state.customMessages;
+  const customMessageTextsRef = (0, import_react.useRef)(state.customMessageTexts);
+  customMessageTextsRef.current = state.customMessageTexts;
+  const controlIdsRef = (0, import_react.useRef)(state.controlIds);
+  controlIdsRef.current = state.controlIds;
+  const isTouchedRef = (0, import_react.useRef)(state.isTouched);
+  isTouchedRef.current = state.isTouched;
+  const getBaseStateRef = (0, import_react.useRef)(getBaseState);
+  getBaseStateRef.current = getBaseState;
+  const emitWithCustomErrors = (0, import_react.useCallback)(
+    (validationState) => {
+      const customErrors = customMessagesRef.current.filter(
+        (m) => m.variant === "error"
+      );
+      const baseErrors = validationState.errors.filter(
+        (e) => !e.validityStateKey.equals(import_types.NativeValidityStateKeys.customError)
+      );
+      const baseControlId = baseErrors.find((e) => e.formControlId !== void 0)?.formControlId ?? controlIdsRef.current;
+      const merged = {
+        ...validationState,
+        errors: [
+          ...baseErrors,
+          ...customErrors.map(
+            (m) => new import_types.ValidationError(customMessageTextsRef.current?.[m.id] ?? "", {
+              source: "custom",
+              formControlId: m.controlId ?? baseControlId
+            })
+          )
+        ]
+      };
+      emitValidationState?.(merged);
+      return merged;
+    },
+    [emitValidationState]
+  );
+  const customErrorKeyRef = (0, import_react.useRef)(customErrorKey);
+  customErrorKeyRef.current = customErrorKey;
+  const scheduleEmit = (0, import_react.useCallback)(() => {
+    let cancelled = false;
+    const run = async () => {
+      const baseState = await getBaseStateRef.current?.() ?? {
+        status: "done",
+        trigger: "manual",
+        errors: []
+      };
+      if (cancelled) {
+        return;
+      }
+      emitWithCustomErrors(baseState);
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [emitWithCustomErrors]);
+  (0, import_react.useEffect)(() => {
+    if (!emitValidationState || !isTouchedRef.current) {
+      return;
+    }
+    return scheduleEmit();
+  }, [customErrorKey, emitValidationState, scheduleEmit]);
+  (0, import_react.useEffect)(() => {
+    if (!emitValidationState || !isTouchedRef.current || !customErrorKeyRef.current) {
+      return;
+    }
+    return scheduleEmit();
+  }, [state.isTouched, emitValidationState, scheduleEmit]);
+  return emitWithCustomErrors;
+}

package/forms/validation/useValidationStateEmitter.d.ts

@@ -0,0 +1,7 @@
+import type { ValidationState } from './types.js';
+/**
+ * Emits validation changes only when the public validation summary changes.
+ *
+ * @internal
+ */
+export declare function useValidationStateEmitter(onValidityChange: ((state: ValidationState) => void) | undefined): (state: ValidationState) => void;

package/forms/validation/useValidationStateEmitter.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useValidationStateEmitter_exports = {};
+__export(useValidationStateEmitter_exports, {
+  useValidationStateEmitter: () => useValidationStateEmitter
+});
+module.exports = __toCommonJS(useValidationStateEmitter_exports);
+var import_react = require("react");
+var import_useCallbackRef = require("../../core/hooks/useCallbackRef.js");
+function useValidationStateEmitter(onValidityChange) {
+  const lastSignatureRef = (0, import_react.useRef)();
+  const onValidityChangeCallback = (0, import_useCallbackRef.useCallbackRef)(onValidityChange);
+  return (0, import_react.useCallback)(
+    (state) => {
+      const lastSignature = lastSignatureRef.current;
+      const nextSignature = {
+        errorKeys: state.errors.map((e) => e.validityStateKey.toString()).sort((a, b) => a.localeCompare(b)),
+        trigger: state.trigger
+      };
+      if (lastSignature === void 0 && nextSignature.trigger === "change") {
+        return;
+      }
+      const sameErrors = lastSignature !== void 0 && lastSignature.errorKeys.length === nextSignature.errorKeys.length && lastSignature.errorKeys.every(
+        (key, i) => key === nextSignature.errorKeys[i]
+      );
+      if (sameErrors && nextSignature.trigger !== "manual") {
+        return;
+      }
+      lastSignatureRef.current = nextSignature;
+      onValidityChangeCallback(state);
+    },
+    [onValidityChangeCallback]
+  );
+}