ngx-vest-forms 2.6.0 → 2.7.0

package/fesm2022/ngx-vest-forms.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, signal, inject, ElementRef, DestroyRef, ChangeDetectorRef, linkedSignal, computed, input, effect, untracked, Directive, contentChild, Injector, afterEveryRender, ChangeDetectionStrategy, Component, booleanAttribute, Optional } from '@angular/core';
-import { isFormArray, isFormGroup, NgForm, StatusChangeEvent, ValueChangeEvent, PristineChangeEvent, FormGroup, FormArray, NgModel, NgModelGroup, FormSubmittedEvent, FormResetEvent, NG_ASYNC_VALIDATORS, ControlContainer, FormsModule } from '@angular/forms';
+import { InjectionToken, isDevMode, signal, inject, ElementRef, DestroyRef, ChangeDetectorRef, linkedSignal, computed, input, output, effect, untracked, Directive, contentChild, Injector, afterNextRender, afterEveryRender, isSignal, ChangeDetectionStrategy, Component, booleanAttribute, Optional } from '@angular/core';
+import { isFormArray, isFormGroup, NgForm, ValueChangeEvent, StatusChangeEvent, PristineChangeEvent, FormGroup, FormArray, NgModel, NgModelGroup, FormSubmittedEvent, FormResetEvent, NG_ASYNC_VALIDATORS, ControlContainer, FormsModule } from '@angular/forms';
 import { toSignal, outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import { startWith, merge, filter, map, switchMap, take, of, scan, distinctUntilChanged, timer, Observable, catchError, EMPTY, debounceTime, tap, race, from } from 'rxjs';
+import { filter, scan, startWith, merge, map, switchMap, take, of, distinctUntilChanged, timer, Observable, catchError, EMPTY, debounceTime, tap, race, from } from 'rxjs';
 
 /**
  * @deprecated Use NGX_ERROR_DISPLAY_MODE_TOKEN instead
@@ -113,6 +113,20 @@ const NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN = new InjectionToken('NgxValidationCo
 function isPrimitive$1(value) {
     return (value === null || (typeof value !== 'object' && typeof value !== 'function'));
 }
+/**
+ * Records that we've started comparing the pair (a, b). Re-entering the same
+ * pair during recursion (cycle, or repeated DAG path) short-circuits to `true`
+ * — correct because if the prior descent had returned `false`, the outer call
+ * would already have short-circuited before we reach the second visit.
+ */
+function rememberPair(seen, a, b) {
+    let targets = seen.get(a);
+    if (!targets) {
+        targets = new WeakSet();
+        seen.set(a, targets);
+    }
+    targets.add(b);
+}
 /**
  * @internal
  * Internal utility for shallow equality checks.
@@ -207,11 +221,13 @@ function shallowEqual(obj1, obj2) {
  * - Plain objects (with recursive deep comparison)
  * - Date objects (by timestamp comparison)
  * - RegExp objects (by source and flags comparison)
- * - Set objects (by size and value membership)
- * - Map objects (by size and key-value pairs)
+ * - Set objects (reference equality only)
+ * - Map objects (reference equality only)
+ * - Functions (reference equality only — distinct function instances are never equal,
+ *   even if their source code is identical)
  *
  * **Safety Features:**
- * - **Circular reference protection**: MaxDepth parameter prevents infinite recursion
+ * - **Circular reference handling**: Tracks visited object pairs with `WeakMap<object, WeakSet<object>>`
  * - **Type coercion prevention**: Strict type checking before comparison
  * - **Null safety**: Proper handling of null and undefined values
  *
@@ -223,7 +239,8 @@ function shallowEqual(obj1, obj2) {
  * ///
  * /// Memory usage:
  * /// JSON.stringify:    Creates temporary strings (high GC pressure)
- * /// fastDeepEqual:     Zero allocations during comparison
+ * /// fastDeepEqual:     One small WeakMap of visited object pairs is allocated lazily on
+ * ///                    first nested-container descent; primitive-only comparisons allocate nothing.
  * ```
  *
  * **Typical Usage in Forms:**
@@ -239,91 +256,222 @@ function shallowEqual(obj1, obj2) {
  *
  * @param obj1 - First object to compare
  * @param obj2 - Second object to compare
- * @param maxDepth - Maximum recursion depth to prevent infinite loops (default: 10)
+ *
+ * Cyclic arrays and plain objects are compared structurally by tracking visited object
+ * pairs. Distinct cyclic graphs with the same structure compare equal. `Date` and
+ * `RegExp` values compare structurally. `Map` and `Set` values compare by reference
+ * only, so distinct instances are considered different even if their contents match.
+ *
  * @returns true if objects are deeply equal by value
  */
-function fastDeepEqual(obj1, obj2, maxDepth = 10) {
-    if (maxDepth <= 0) {
-        // Fallback to shallow comparison at max depth to prevent infinite recursion
-        return obj1 === obj2;
-    }
-    if (obj1 === obj2) {
+function fastDeepEqual(obj1, obj2) {
+    return fastDeepEqualInternal(obj1, obj2, undefined);
+}
+function fastDeepEqualInternal(obj1, obj2, seen) {
+    // Object.is gives correct semantics for NaN and ±0 — important for numeric
+    // form values where `fastDeepEqual(NaN, NaN)` should be true.
+    if (Object.is(obj1, obj2)) {
         return true;
     }
     if (obj1 == null || obj2 == null) {
-        return obj1 === obj2;
+        return false;
     }
     if (typeof obj1 !== typeof obj2) {
         return false;
     }
+    // Functions use reference-only equality. Object.is at the top already returned
+    // true for identical references, so reaching here means the references differ.
+    if (typeof obj1 === 'function') {
+        return false;
+    }
     if (isPrimitive$1(obj1) || isPrimitive$1(obj2)) {
-        return obj1 === obj2;
+        return false;
+    }
+    // Handle Date / RegExp first — they have value semantics and can't contain cycles,
+    // so they don't need pair tracking.
+    if (obj1 instanceof Date || obj2 instanceof Date) {
+        return (obj1 instanceof Date &&
+            obj2 instanceof Date &&
+            obj1.getTime() === obj2.getTime());
+    }
+    if (obj1 instanceof RegExp || obj2 instanceof RegExp) {
+        return (obj1 instanceof RegExp &&
+            obj2 instanceof RegExp &&
+            obj1.source === obj2.source &&
+            obj1.flags === obj2.flags);
+    }
+    // Intentional contract: distinct Set / Map instances compare by reference only.
+    if (obj1 instanceof Set || obj2 instanceof Set) {
+        return false;
+    }
+    if (obj1 instanceof Map || obj2 instanceof Map) {
+        return false;
     }
-    // Handle arrays early for performance (common in forms)
     if (Array.isArray(obj1) !== Array.isArray(obj2)) {
         return false;
     }
+    // Cycle / repeated-pair guard for traversable containers.
+    // Allocates lazily on first nested-object descent.
+    const a = obj1;
+    const b = obj2;
+    if (seen?.get(a)?.has(b)) {
+        return true;
+    }
+    seen ??= new WeakMap();
+    rememberPair(seen, a, b);
     if (Array.isArray(obj1)) {
-        // We know obj2 is also an array here
         const arr2 = obj2;
         if (obj1.length !== arr2.length) {
             return false;
         }
         for (let i = 0; i < obj1.length; i++) {
-            if (!fastDeepEqual(obj1[i], arr2[i], maxDepth - 1)) {
+            if (!fastDeepEqualInternal(obj1[i], arr2[i], seen)) {
                 return false;
             }
         }
         return true;
     }
-    // Handle Date objects
-    if (obj1 instanceof Date) {
-        return obj2 instanceof Date && obj1.getTime() === obj2.getTime();
-    }
-    // Handle RegExp objects
-    if (obj1 instanceof RegExp) {
-        return (obj2 instanceof RegExp &&
-            obj1.source === obj2.source &&
-            obj1.flags === obj2.flags);
+    // Plain objects
+    const keys1 = Object.keys(a);
+    const o2 = b;
+    if (keys1.length !== Object.keys(o2).length) {
+        return false;
     }
-    // Handle Set objects (common in forms)
-    if (obj1 instanceof Set) {
-        if (!(obj2 instanceof Set) || obj1.size !== obj2.size) {
+    for (const key of keys1) {
+        if (!Object.hasOwn(o2, key)) {
             return false;
         }
-        for (const value of obj1) {
-            if (!obj2.has(value)) {
-                return false;
-            }
+        if (!fastDeepEqualInternal(a[key], o2[key], seen)) {
+            return false;
         }
-        return true;
     }
-    // Handle Map objects (common in forms)
-    if (obj1 instanceof Map) {
-        if (!(obj2 instanceof Map) || obj1.size !== obj2.size) {
-            return false;
+    return true;
+}
+
+/**
+ * Injection token for the deep-equality function used internally by
+ * {@link FormDirective} for change detection — `formValueChange`
+ * `distinctUntilChanged`, the form↔model two-way sync effect, and the
+ * `formState` signal's structural comparator.
+ *
+ * The default factory returns {@link fastDeepEqual}. Override this token to
+ * plug in a smaller or differently-tuned comparator (e.g. `dequal/lite`,
+ * `lodash.isEqual`) without forking the directive.
+ *
+ * @example Bring-your-own equality at the application level
+ * ```ts
+ * import { dequal } from 'dequal/lite';
+ * import { NGX_EQUALITY_FN } from 'ngx-vest-forms';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     { provide: NGX_EQUALITY_FN, useValue: dequal },
+ *   ],
+ * };
+ * ```
+ *
+ * @example Per-component override (e.g. for tests)
+ * ```ts
+ * @Component({
+ *   providers: [
+ *     { provide: NGX_EQUALITY_FN, useValue: (a, b) => a === b },
+ *   ],
+ * })
+ * export class TestFormComponent {}
+ * ```
+ *
+ * @default {@link fastDeepEqual}
+ */
+const NGX_EQUALITY_FN = new InjectionToken('NgxEqualityFn', {
+    providedIn: 'root',
+    factory: () => fastDeepEqual,
+});
+
+/**
+ * Schedules a callback to run after a delay, automatically cancelling it if the
+ * provided `DestroyRef` fires before the timer expires.
+ *
+ * @param callback - Function to invoke after the delay.
+ * @param delayMs - Delay in milliseconds (passed to `setTimeout`).
+ * @param destroyRef - Angular `DestroyRef` to register auto-cancellation against.
+ * @returns A cancel function; calling it before the timer fires prevents the
+ *          callback from running and unregisters the destroy listener.
+ */
+function scheduleTimeout(callback, delayMs, destroyRef) {
+    let cancelled = false;
+    let unregisterCalled = false;
+    // eslint-disable-next-line prefer-const -- assigned after onDestroy returns
+    let unregisterDestroy;
+    // Idempotent unregister wrapper so all paths (timer-fires, explicit-cancel,
+    // and onDestroy) can call it safely without double-removal.
+    const safeUnregister = () => {
+        if (unregisterCalled)
+            return;
+        unregisterCalled = true;
+        unregisterDestroy?.();
+    };
+    const handle = setTimeout(() => {
+        safeUnregister();
+        if (!cancelled) {
+            callback();
         }
-        for (const [key, value] of obj1) {
-            if (!obj2.has(key) ||
-                !fastDeepEqual(value, obj2.get(key), maxDepth - 1)) {
-                return false;
-            }
+    }, delayMs);
+    unregisterDestroy = destroyRef.onDestroy(() => {
+        cancelled = true;
+        clearTimeout(handle);
+        safeUnregister();
+    });
+    return () => {
+        if (!cancelled) {
+            cancelled = true;
+            clearTimeout(handle);
+            safeUnregister();
         }
-        return true;
-    }
-    // Handle plain objects
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length) {
-        return false;
+    };
+}
+/**
+ * Schedules a microtask callback, automatically suppressing it if the provided
+ * `DestroyRef` fires before the microtask runs.
+ *
+ * Since `queueMicrotask` has no native cancellation API, this relies on a
+ * destroyed flag that is set inside the registered `onDestroy` hook.
+ *
+ * @param callback - Function to invoke in the next microtask checkpoint.
+ * @param destroyRef - Angular `DestroyRef` to register auto-cancellation against.
+ * @returns A cancel function; calling it before the microtask runs prevents the
+ *          callback from executing and unregisters the destroy listener.
+ */
+function scheduleMicrotask(callback, destroyRef) {
+    let cancelled = false;
+    let unregisterCalled = false;
+    // Register the onDestroy listener before queuing the microtask so that
+    // `unregisterDestroy` is always defined when the microtask fires.
+    const unregisterDestroy = destroyRef.onDestroy(() => {
+        cancelled = true;
+        safeUnregister();
+    });
+    // Idempotent unregister wrapper so all paths (microtask-fires, explicit-cancel,
+    // and onDestroy) can call it safely without double-removal.
+    function safeUnregister() {
+        if (unregisterCalled)
+            return;
+        unregisterCalled = true;
+        unregisterDestroy();
     }
-    for (const key of keys1) {
-        if (!Object.hasOwn(obj2, key) ||
-            !fastDeepEqual(obj1[key], obj2[key], maxDepth - 1)) {
-            return false;
+    queueMicrotask(() => {
+        // Always clean up the destroy listener when the microtask fires,
+        // regardless of whether the callback is suppressed.
+        safeUnregister();
+        if (!cancelled) {
+            callback();
         }
-    }
-    return true;
+    });
+    return () => {
+        if (!cancelled) {
+            cancelled = true;
+            safeUnregister();
+        }
+    };
 }
 
 /**
@@ -345,6 +493,7 @@ function fastDeepEqual(obj1, obj2, maxDepth = 10) {
  * ```
  */
 const UNSAFE_PATH_SEGMENTS = new Set(['__proto__', 'prototype', 'constructor']);
+const LOG_PREFIX$1 = '[ngx-vest-forms] field-path.utils';
 /**
  * @internal
  * Returns whether a path segment is unsafe for object writes/merges.
@@ -391,11 +540,26 @@ function isUnsafePathSegment(segment) {
 function parseFieldPath(path) {
     if (!path)
         return [];
-    return path
-        .replaceAll(/\[(\d+)\]/g, '.$1') // Convert brackets to dots: items[0] → items.0
-        .split('.') // Split by dots
-        .filter((part) => part !== '') // Remove empty strings from leading brackets
-        .map((part) => (/^\d+$/.test(part) ? Number(part) : part)); // Convert numeric strings to numbers
+    // Normalize bracket notation to dot notation first so malformed inputs like
+    // 'a.[0]' (which becomes 'a..0') are caught alongside 'a..b', '.a', 'a.', '.'.
+    const startsWithBracket = path.startsWith('[');
+    const segments = path
+        .replaceAll(/\[(\d+)\]/g, '.$1')
+        .split('.');
+    // Empty segments after normalization signal a malformed path. The single
+    // legitimate case is a leading empty produced by a path that originally
+    // started with '[' (e.g. '[0].x' → '.0.x' → ['', '0', 'x']).
+    for (let i = 0; i < segments.length; i++) {
+        if (segments[i] === '' && !(i === 0 && startsWithBracket)) {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                console.warn(`${LOG_PREFIX$1}: Invalid field path '${path}'. Leading dots, trailing dots, consecutive dots, and '.[' separators are not allowed.`);
+            }
+            return [];
+        }
+    }
+    return segments
+        .filter((part) => part !== '')
+        .map((part) => (/^\d+$/.test(part) ? Number(part) : part));
 }
 /**
  * Converts a Standard Schema path array (e.g. `['addresses', 0, 'street']`)
@@ -654,8 +818,9 @@ function mergeValuesAndRawValues(form) {
             }
             const sourceValue = source[key];
             const targetValue = target[key];
-            if (targetValue === undefined) {
-                // If the key is not in the target, add it directly (for disabled fields)
+            if (targetValue === undefined || targetValue === null) {
+                // Key missing from target (e.g. disabled field) or set to null —
+                // copy source so raw values from disabled controls aren't dropped.
                 target[key] = sourceValue;
             }
             else if (isRecord(sourceValue) && isRecord(targetValue)) {
@@ -678,15 +843,30 @@ function getStringArrayError(errors, key) {
         : undefined;
 }
 /**
- * Performs a deep-clone of an object
- * @param obj
+ * Performs a deep-clone of an object.
+ *
+ * @deprecated Use the standard {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone structuredClone} instead.
  *
- * @deprecated Use official ES {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone structuredClone} instead
+ * `structuredClone` correctly handles `Map`, `Set`, `RegExp`, typed arrays, and
+ * cyclic references; this implementation silently drops `Map` / `Set` / `RegExp`
+ * data and produces incorrect results on cycles. Scheduled for removal in a
+ * future major; see `docs/prd/PRD-bug-sweep.md` (Bundle D) for tracking.
  *
- * Browser Support: structuredClone is available in all modern browsers (Chrome 98+, Firefox 94+, Safari 15.4+, Edge 98+)
- * and Node.js 17+. A polyfill is provided in test-setup.ts for Jest test environments.
+ * Browser Support: `structuredClone` is available in all modern browsers
+ * (Chrome 98+, Firefox 94+, Safari 15.4+, Edge 98+) and Node.js 17+.
  */
+let cloneDeepDeprecationWarned = false;
 function cloneDeep(object) {
+    // NOTE: `typeof ngDevMode !== 'undefined' && ngDevMode` is kept inline
+    // (not extracted to a helper) because Angular's build optimizer relies on
+    // this exact pattern for tree-shaking dev-only code from production bundles.
+    if (!cloneDeepDeprecationWarned &&
+        typeof ngDevMode !== 'undefined' &&
+        ngDevMode) {
+        cloneDeepDeprecationWarned = true;
+        console.warn('[ngx-vest-forms] cloneDeep is deprecated and silently drops Map/Set/RegExp values. ' +
+            'Use the standard structuredClone() instead.');
+    }
     // Handle primitives (null, undefined, boolean, string, number, function)
     if (isPrimitive(object)) {
         return object;
@@ -732,6 +912,7 @@ function setValueAtPath(obj, path, value) {
     let current = obj;
     for (let i = 0; i < keys.length - 1; i++) {
         const segment = keys[i];
+        const nextSegment = keys[i + 1];
         if (segment === undefined) {
             continue;
         }
@@ -740,8 +921,10 @@ function setValueAtPath(obj, path, value) {
         }
         const key = String(segment);
         const next = current[key];
-        if (!isRecord(next)) {
-            current[key] = {};
+        if (!Array.isArray(next) && !isRecord(next)) {
+            const shouldCreateArray = typeof nextSegment === 'number' ||
+                (typeof nextSegment === 'string' && /^\d+$/.test(nextSegment));
+            current[key] = shouldCreateArray ? [] : {};
         }
         current = current[key];
     }
@@ -836,6 +1019,18 @@ function getAllFormErrors(form) {
     return errors;
 }
 
+const NUMERIC_PATH_SEGMENT = /^\d+$/;
+function isOpaqueLeafValue(value) {
+    return (value instanceof Date ||
+        value instanceof Map ||
+        value instanceof Set ||
+        value instanceof RegExp ||
+        (typeof File !== 'undefined' && value instanceof File) ||
+        (typeof Blob !== 'undefined' && value instanceof Blob));
+}
+function isTraversableValue(value) {
+    return typeof value === 'object' && value !== null && !isOpaqueLeafValue(value);
+}
 /**
  * Validates a form value against a shape to catch typos in `name` or `ngModelGroup` attributes.
  *
@@ -871,26 +1066,41 @@ function validateFormValueAgainstShape(formValue, shape, path = '') {
         }
         // For array items (numeric keys > 0), compare against the first item in shape
         // since we only define one example item in the shape for arrays
-        const isNumericKey = !isNaN(parseFloat(key));
-        const shapeKey = isNumericKey && parseFloat(key) > 0 ? '0' : key;
+        const isNumericKey = NUMERIC_PATH_SEGMENT.test(key);
+        // Array shapes provide one example item at index 0, so every numeric key maps to '0'.
+        const shapeKey = isNumericKey && key !== '0' ? '0' : key;
         const shapeValue = shape?.[shapeKey];
+        const hasShapeKey = shape != null && shapeKey in shape;
         // Skip Date fields receiving empty strings (common in date picker libraries)
         if (shapeValue instanceof Date && value === '') {
             continue;
         }
         // Handle object values (recurse into nested objects)
         if (typeof value === 'object') {
+            if (!isTraversableValue(value)) {
+                if (!isNumericKey && !hasShapeKey) {
+                    logWarning(NGX_VEST_FORMS_ERRORS.EXTRA_PROPERTY, fieldPath);
+                }
+                else if (!isNumericKey &&
+                    hasShapeKey &&
+                    (shapeValue === null || typeof shapeValue !== 'object')) {
+                    // Type mismatch: formValue holds an opaque object (Date, Map, etc.)
+                    // but shape declares a primitive. Recursion is intentionally skipped
+                    // for opaque leaves, but the user still benefits from a warning.
+                    logWarning(NGX_VEST_FORMS_ERRORS.TYPE_MISMATCH, fieldPath, 'primitive', 'object');
+                }
+                continue;
+            }
             // Type mismatch: formValue has object, but shape expects primitive
-            if (!isNumericKey &&
-                (typeof shapeValue !== 'object' || shapeValue === null)) {
+            if (!isNumericKey && !isTraversableValue(shapeValue)) {
                 logWarning(NGX_VEST_FORMS_ERRORS.TYPE_MISMATCH, fieldPath, 'primitive', 'object');
             }
             // Recurse into nested object
-            validateFormValueAgainstShape(value, shapeValue ?? {}, fieldPath);
+            validateFormValueAgainstShape(value, isTraversableValue(shapeValue) ? shapeValue : {}, fieldPath);
             continue;
         }
         // Extra property: key exists in formValue but not in shape (likely a typo)
-        if (!isNumericKey && shape && !(shapeKey in shape)) {
+        if (!isNumericKey && !hasShapeKey) {
             logWarning(NGX_VEST_FORMS_ERRORS.EXTRA_PROPERTY, fieldPath);
         }
     }
@@ -981,12 +1191,22 @@ const VALIDATION_IN_PROGRESS_TIMEOUT_MS = 500;
  * @publicApi
  */
 class FormDirective {
-    // Track last linked value to prevent unnecessary updates
-    #lastLinkedValue;
+    /**
+     * Deep-equality comparator. Defaults to `fastDeepEqual`; can be overridden
+     * application-wide or per-component via {@link NGX_EQUALITY_FN}.
+     */
+    #equal;
+    /**
+     * Set to true by the onDestroy hook. Used to guard async callbacks
+     * (e.g. Vest `done()`) that cannot be cancelled via RxJS operators.
+     */
+    #destroyed;
     #lastSyncedFormValue;
     #lastSyncedModelValue;
-    // Internal signal tracking form value changes via statusChanges
-    #value;
+    // Internal signal tracking changes that can affect the merged form snapshot.
+    // ValueChangeEvent keeps the cache fresh for blur-driven consumers like
+    // draft auto-save, even when a value update doesn't change form validity.
+    #formSnapshotTick;
     /**
      * LinkedSignal that computes form values from Angular form state.
      * This eliminates timing issues with the previous dual-effect pattern.
@@ -1013,36 +1233,43 @@ class FormDirective {
         this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
         this.configDebounceTime = inject(NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN);
+        /**
+         * Deep-equality comparator. Defaults to `fastDeepEqual`; can be overridden
+         * application-wide or per-component via {@link NGX_EQUALITY_FN}.
+         */
+        this.#equal = inject(NGX_EQUALITY_FN);
         /**
          * Public signal storing field warnings keyed by field path.
          * This allows warnings to be stored and displayed without affecting field validity.
          * Angular's control.errors !== null marks a field as invalid, so we store warnings
          * separately when they exist without errors.
          */
-        this.fieldWarnings = signal(new Map(), ...(ngDevMode ? [{ debugName: "fieldWarnings" }] : []));
-        // Track last linked value to prevent unnecessary updates
-        this.#lastLinkedValue = null;
+        this.fieldWarnings = signal(new Map(), ...(ngDevMode ? [{ debugName: "fieldWarnings" }] : /* istanbul ignore next */ []));
+        /**
+         * Set to true by the onDestroy hook. Used to guard async callbacks
+         * (e.g. Vest `done()`) that cannot be cancelled via RxJS operators.
+         */
+        this.#destroyed = false;
         this.#lastSyncedFormValue = null;
         this.#lastSyncedModelValue = null;
-        // Internal signal tracking form value changes via statusChanges
-        this.#value = toSignal(this.ngForm.form.statusChanges.pipe(startWith(this.ngForm.form.status)), { initialValue: this.ngForm.form.status });
+        // Internal signal tracking changes that can affect the merged form snapshot.
+        // ValueChangeEvent keeps the cache fresh for blur-driven consumers like
+        // draft auto-save, even when a value update doesn't change form validity.
+        this.#formSnapshotTick = toSignal(this.ngForm.form.events.pipe(filter((event) => event instanceof ValueChangeEvent || event instanceof StatusChangeEvent), scan((count) => count + 1, 0), startWith(0)), { initialValue: 0 });
         /**
          * LinkedSignal that computes form values from Angular form state.
          * This eliminates timing issues with the previous dual-effect pattern.
          */
         this.#formValueSignal = linkedSignal(() => {
-            // Track form value changes
-            this.#value();
-            const raw = mergeValuesAndRawValues(this.ngForm.form);
-            if (Object.keys(this.ngForm.form.controls).length > 0) {
-                this.#lastLinkedValue = raw;
-                return raw;
-            }
-            else if (this.#lastLinkedValue !== null) {
-                return this.#lastLinkedValue;
+            // Track changes that affect the merged form snapshot.
+            this.#formSnapshotTick();
+            if (Object.keys(this.ngForm.form.controls).length === 0) {
+                // No controls remain (e.g. dynamic group removal): expose `null` so
+                // consumers don't see ghost data from a previous form shape.
+                return null;
             }
-            return null;
-        }, ...(ngDevMode ? [{ debugName: "#formValueSignal" }] : []));
+            return mergeValuesAndRawValues(this.ngForm.form);
+        }, ...(ngDevMode ? [{ debugName: "#formValueSignal" }] : /* istanbul ignore next */ []));
         /**
          * Track the Angular form status as a signal for advanced status flags
          */
@@ -1052,7 +1279,7 @@ class FormDirective {
          * This guarantees recomputation for every blur/tab interaction,
          * even when the form's aggregate touched flag is already true.
          */
-        this.#blurTick = signal(0, ...(ngDevMode ? [{ debugName: "#blurTick" }] : []));
+        this.#blurTick = signal(0, ...(ngDevMode ? [{ debugName: "#blurTick" }] : /* istanbul ignore next */ []));
         /**
          * Computed signal that returns field paths for all touched (or submitted) leaf controls.
          * Updates reactively when controls are touched (blur) or when form status changes.
@@ -1066,7 +1293,7 @@ class FormDirective {
             this.#blurTick();
             this.#statusSignal();
             return this.#collectTouchedPaths(this.ngForm.form, this.ngForm.submitted);
-        }, ...(ngDevMode ? [{ debugName: "touchedFieldPaths" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "touchedFieldPaths" }] : /* istanbul ignore next */ []));
         /**
          * Computed signal for form state with validity and errors.
          * Used by templates and tests as vestForm.formState().valid/errors
@@ -1083,7 +1310,7 @@ class FormDirective {
                 errors: getAllFormErrors(this.ngForm.form),
                 value: this.#formValueSignal(),
             };
-        }, { ...(ngDevMode ? { debugName: "formState" } : {}), equal: (a, b) => {
+        }, { ...(ngDevMode ? { debugName: "formState" } : /* istanbul ignore next */ {}), equal: (a, b) => {
                 // Fast path: reference equality
                 if (a === b)
                     return true;
@@ -1092,29 +1319,29 @@ class FormDirective {
                     return false;
                 // Deep equality check for form state properties
                 return (a.valid === b.valid &&
-                    fastDeepEqual(a.errors, b.errors) &&
-                    fastDeepEqual(a.value, b.value));
+                    this.#equal(a.errors, b.errors) &&
+                    this.#equal(a.value, b.value));
             } });
         /**
          * The value of the form, this is needed for the validation part.
          * Using input() here because two-way binding is provided via formValueChange output.
          * In the minimal core directive (form-core.directive.ts), this would be model() instead.
          */
-        this.formValue = input(null, ...(ngDevMode ? [{ debugName: "formValue" }] : []));
+        this.formValue = input(null, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
         /**
          * Static vest suite that will be used to feed our angular validators.
          * Accepts both NgxVestSuite and NgxTypedVestSuite through compatible type signatures.
          * NgxTypedVestSuite<T> is assignable to NgxVestSuite<T> due to bivariance and
          * FormFieldName<T> (string literal union) being assignable to string.
          */
-        this.suite = input(null, ...(ngDevMode ? [{ debugName: "suite" }] : []));
+        this.suite = input(null, ...(ngDevMode ? [{ debugName: "suite" }] : /* istanbul ignore next */ []));
         /**
          * The shape of our form model. This is a deep required version of the form model
          * The goal is to add default values to the shape so when the template-driven form
          * contains values that shouldn't be there (typo's) that the developer gets run-time
          * errors in dev mode
          */
-        this.formShape = input(null, ...(ngDevMode ? [{ debugName: "formShape" }] : []));
+        this.formShape = input(null, ...(ngDevMode ? [{ debugName: "formShape" }] : /* istanbul ignore next */ []));
         /**
          * Updates the validation config which is a dynamic object that will be used to
          * trigger validations on the dependant fields
@@ -1128,7 +1355,7 @@ class FormDirective {
          *
          * @param v
          */
-        this.validationConfig = input(null, ...(ngDevMode ? [{ debugName: "validationConfig" }] : []));
+        this.validationConfig = input(null, ...(ngDevMode ? [{ debugName: "validationConfig" }] : /* istanbul ignore next */ []));
         /**
          * Emits whenever validation feedback may have changed, even if the aggregate
          * root form status string stays the same.
@@ -1159,7 +1386,7 @@ class FormDirective {
          */
         this.formValueChange = outputFromObservable(this.ngForm.form.events.pipe(filter((v) => v instanceof ValueChangeEvent), map((v) => v.value), distinctUntilChanged((prev, curr) => {
             // Use efficient deep equality instead of JSON.stringify for better performance
-            return fastDeepEqual(prev, curr);
+            return this.#equal(prev, curr);
         }), map(() => mergeValuesAndRawValues(this.ngForm.form)), takeUntilDestroyed(this.destroyRef)));
         /**
          * Emits an object with all the errors of the form
@@ -1187,11 +1414,18 @@ class FormDirective {
          * Cleanup is handled automatically by the directive when it's destroyed.
          */
         this.validChange = outputFromObservable(this.statusChanges$.pipe(filter((e) => e === 'VALID' || e === 'INVALID'), map((v) => v === 'VALID'), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)));
+        /**
+         * Emits when a named control inside the form loses focus.
+         *
+         * Useful for application-level workflows such as draft auto-save on blur.
+         */
+        this.fieldBlur = output();
         /**
          * Track validation in progress to prevent circular triggering (Issue #19)
          */
         this.validationInProgress = new Set();
         this.destroyRef.onDestroy(() => {
+            this.#destroyed = true;
             this.fieldWarnings.set(new Map());
         });
         /**
@@ -1227,8 +1461,8 @@ class FormDirective {
             if (!formValue && !modelValue)
                 return;
             // Compute change flags first
-            const formChanged = !fastDeepEqual(formValue, this.#lastSyncedFormValue);
-            const modelChanged = !fastDeepEqual(modelValue, this.#lastSyncedModelValue);
+            const formChanged = !this.#equal(formValue, this.#lastSyncedFormValue);
+            const modelChanged = !this.#equal(modelValue, this.#lastSyncedModelValue);
             // Early return if nothing changed
             if (!formChanged && !modelChanged) {
                 return;
@@ -1262,7 +1496,7 @@ class FormDirective {
             else if (formChanged && modelChanged) {
                 // Both form and model changed simultaneously
                 // Check if they changed to the same value (synchronized change) or different values (conflict)
-                const valuesEqual = fastDeepEqual(formValue, modelValue);
+                const valuesEqual = this.#equal(formValue, modelValue);
                 if (valuesEqual) {
                     // Both changed to the same value - this is a synchronized change, not a conflict
                     // Just update tracking to acknowledge the change
@@ -1494,13 +1728,98 @@ class FormDirective {
      * Host handler: called whenever any descendant field loses focus.
      * Used to make touched-path tracking react immediately on blur/tab.
      */
-    onFormFocusOut() {
+    onFormFocusOut(event) {
         // Run on the next microtask to ensure Angular has already applied
         // control.touched changes for the field that just blurred.
-        queueMicrotask(() => {
+        scheduleMicrotask(() => {
             this.#blurTick.update((v) => v + 1);
+            this.#emitFieldBlurEvent(event);
+        }, this.destroyRef);
+    }
+    #emitFieldBlurEvent(event) {
+        const resolved = this.#resolveFieldFromFocusEvent(event);
+        if (!resolved) {
+            return;
+        }
+        const { field, control, element } = resolved;
+        // Read the latest value directly from the DOM element when it can be
+        // trusted. For radio groups Angular keeps the bound `control.value` in
+        // sync with the *selected* option, while a focused-but-unchecked radio
+        // would expose its own option value via the DOM — so radios must always
+        // fall back to `control.value`. For text/textarea/select we prefer the
+        // element value to avoid `ngModelOptions.updateOn: 'submit'` staleness.
+        const domValue = readElementValueForBlur(element);
+        const value = domValue !== undefined ? domValue : control.value;
+        // Prefer the cached linked-signal snapshot when it exists. Both code
+        // paths produce a deep-cloned snapshot, but reusing the cached value
+        // saves one of the two `structuredClone` passes performed by
+        // `mergeValuesAndRawValues()` on every blur.
+        const cachedSnapshot = this.#formValueSignal();
+        const formValue = cachedSnapshot !== null
+            ? structuredClone(cachedSnapshot)
+            : mergeValuesAndRawValues(this.ngForm.form);
+        setValueAtPath(formValue, field, value);
+        this.fieldBlur.emit({
+            field,
+            value,
+            formValue,
+            dirty: control.dirty,
+            touched: control.touched,
+            valid: control.valid,
+            pending: control.pending,
         });
     }
+    #resolveFieldFromFocusEvent(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return null;
+        }
+        const fieldElement = target.closest('[name]');
+        if (!(fieldElement instanceof HTMLElement)) {
+            return null;
+        }
+        const name = fieldElement.getAttribute('name')?.trim();
+        if (!name) {
+            return null;
+        }
+        const formEl = this.elementRef.nativeElement;
+        // Authoritative path: ask the registered NgModel directive whose value
+        // accessor is bound to this exact element. This handles all forms of
+        // grouping uniformly — static `ngModelGroup="key"`, dynamic
+        // `[ngModelGroup]="expr"`, repeated leaf names across siblings — because
+        // the directive's `path` is computed from the live ControlContainer tree.
+        const directiveMatch = resolveControlPathByNgModelDirective(this.ngForm, fieldElement);
+        if (directiveMatch) {
+            return {
+                field: directiveMatch.path,
+                control: directiveMatch.control,
+                element: fieldElement,
+            };
+        }
+        // Fallback: walk DOM ancestors collecting any `ngModelGroup` attribute
+        // values, producing the canonical dotted path for the static attribute
+        // form (e.g. `<div ngModelGroup="passwords"><input name="password">` →
+        // `passwords.password`). Used when the directive lookup misses (e.g. the
+        // value accessor doesn't expose its element ref in some custom CVAs).
+        const staticGroups = collectNgModelGroupAttributes(fieldElement, formEl);
+        const staticPath = [...staticGroups, name].join('.');
+        const staticControl = this.ngForm.form.get(staticPath);
+        if (staticControl) {
+            return { field: staticPath, control: staticControl, element: fieldElement };
+        }
+        // Last-resort fallback for ambiguous DOM structures: probe each ancestor
+        // element as a potential group boundary, querying the form tree until we
+        // find a child that owns this DOM element.
+        const dynamicMatch = resolveControlPathByDomAncestors(this.ngForm.form, fieldElement, formEl, name);
+        if (dynamicMatch) {
+            return {
+                field: dynamicMatch.path,
+                control: dynamicMatch.control,
+                element: fieldElement,
+            };
+        }
+        return null;
+    }
     /**
      * Resets the form to a pristine, untouched state with optional new values.
      *
@@ -1561,7 +1880,6 @@ class FormDirective {
         // is treated as a model change (not a conflict with stale form values)
         this.#lastSyncedFormValue = null;
         this.#lastSyncedModelValue = null;
-        this.#lastLinkedValue = null;
         // Force change detection to ensure DOM updates are reflected
         // Note: This is still needed even with signals because we're modifying NgForm
         // (reactive forms), not signals. The formValue signal updates happen in the
@@ -1602,6 +1920,18 @@ class FormDirective {
                     // Both NgxVestSuite and NgxTypedVestSuite work with string at runtime
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     suite(snap, field).done((result) => {
+                        // Guard: bail out if the directive was destroyed while
+                        // validation was in flight to avoid writing to disposed
+                        // signals or a torn-down view.
+                        if (this.#destroyed) {
+                            // Emit a neutral `null` before completing so async
+                            // validators always emit exactly once. Completing without
+                            // emission can leave consumers (e.g. a control's status)
+                            // in an unexpected `PENDING` state.
+                            observer.next(null);
+                            observer.complete();
+                            return;
+                        }
                         const errors = result.getErrors()[field];
                         const warnings = result.getWarnings()[field];
                         // Store warnings in the fieldWarnings signal for access by control wrappers.
@@ -1638,8 +1968,9 @@ class FormDirective {
                         // visual state (even though the control status has updated).
                         //
                         // We schedule a detectChanges() on the next microtask to avoid calling it
-                        // synchronously inside Angular's own validation pipeline.
-                        queueMicrotask(() => {
+                        // synchronously inside Angular's own validation pipeline. The scheduleMicrotask
+                        // primitive auto-cancels if the directive is destroyed before it fires.
+                        scheduleMicrotask(() => {
                             try {
                                 this.cdr.detectChanges();
                             }
@@ -1648,7 +1979,7 @@ class FormDirective {
                                 // This keeps behavior resilient in edge cases.
                                 this.cdr.markForCheck();
                             }
-                        });
+                        }, this.destroyRef);
                         observer.next(out);
                         observer.complete();
                     });
@@ -1687,10 +2018,7 @@ class FormDirective {
             this.validationInProgress.clear();
             return EMPTY;
         }
-        const streams = Object.keys(config).map((triggerField) => {
-            const dependents = config[triggerField] || [];
-            return this.#createTriggerStream(form, triggerField, dependents);
-        });
+        const streams = Object.entries(config).map(([triggerField, dependents]) => this.#createTriggerStream(form, triggerField, dependents || []));
         return streams.length > 0 ? merge(...streams) : EMPTY;
     }
     /**
@@ -1805,20 +2133,6 @@ class FormDirective {
                 // CRITICAL: Mark the dependent field as in-progress BEFORE calling updateValueAndValidity
                 // This prevents the dependent field's valueChanges from triggering its own validationConfig
                 this.validationInProgress.add(depField);
-                // NOTE: Touch propagation removed (PR #78)
-                // Previously, we propagated touch state from trigger to dependent fields.
-                // This caused UX issues where dependent fields showed errors immediately
-                // after being revealed by a toggle, even though the user never interacted with them.
-                //
-                // With this change:
-                // - Errors on dependent fields only show after the user directly touches/blurs them
-                // - ARIA attributes (aria-invalid) still work correctly via isInvalid check
-                // - Warnings still show after validation via hasBeenValidated check
-                //
-                // The removed code was:
-                // if (control.touched && !dependentControl.touched) {
-                //   dependentControl.markAsTouched({ onlySelf: true });
-                // }
                 // emitEvent: true is REQUIRED for async validators to actually run
                 // The validationInProgress Set prevents infinite loops:
                 // 1. Field A changes → triggers validation on dependent field B
@@ -1842,13 +2156,14 @@ class FormDirective {
             }
         }
         // Keep fields marked as in-progress for a short time to prevent immediate re-triggering
-        // Use setTimeout to ensure async validators have time to complete before allowing new triggers
-        setTimeout(() => {
+        // Use scheduleTimeout to ensure async validators have time to complete before allowing
+        // new triggers. The timer auto-cancels on directive destroy so no timers leak.
+        scheduleTimeout(() => {
             this.validationInProgress.delete(triggerField);
             for (const depField of dependents) {
                 this.validationInProgress.delete(depField);
             }
-        }, VALIDATION_IN_PROGRESS_TIMEOUT_MS);
+        }, VALIDATION_IN_PROGRESS_TIMEOUT_MS, this.destroyRef);
     }
     /**
      * Collects field paths of all touched (or submitted) leaf controls
@@ -1876,19 +2191,180 @@ class FormDirective {
         collect(control, []);
         return fields;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormDirective, isStandalone: true, selector: "form[scVestForm], form[ngxVestForm]", inputs: { formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, formShape: { classPropertyName: "formShape", publicName: "formShape", isSignal: true, isRequired: false, transformFunction: null }, validationConfig: { classPropertyName: "validationConfig", publicName: "validationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChange: "formValueChange", errorsChange: "errorsChange", dirtyChange: "dirtyChange", validChange: "validChange" }, host: { listeners: { "focusout": "onFormFocusOut()" } }, exportAs: ["scVestForm", "ngxVestForm"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FormDirective, isStandalone: true, selector: "form[scVestForm], form[ngxVestForm]", inputs: { formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, formShape: { classPropertyName: "formShape", publicName: "formShape", isSignal: true, isRequired: false, transformFunction: null }, validationConfig: { classPropertyName: "validationConfig", publicName: "validationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChange: "formValueChange", errorsChange: "errorsChange", dirtyChange: "dirtyChange", validChange: "validChange", fieldBlur: "fieldBlur" }, host: { listeners: { "focusout": "onFormFocusOut($event)" } }, exportAs: ["scVestForm", "ngxVestForm"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[scVestForm], form[ngxVestForm]',
                     exportAs: 'scVestForm, ngxVestForm',
                     host: {
-                        '(focusout)': 'onFormFocusOut()',
+                        '(focusout)': 'onFormFocusOut($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { formValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValue", required: false }] }], suite: [{ type: i0.Input, args: [{ isSignal: true, alias: "suite", required: false }] }], formShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "formShape", required: false }] }], validationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConfig", required: false }] }], formValueChange: [{ type: i0.Output, args: ["formValueChange"] }], errorsChange: [{ type: i0.Output, args: ["errorsChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], validChange: [{ type: i0.Output, args: ["validChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { formValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValue", required: false }] }], suite: [{ type: i0.Input, args: [{ isSignal: true, alias: "suite", required: false }] }], formShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "formShape", required: false }] }], validationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConfig", required: false }] }], formValueChange: [{ type: i0.Output, args: ["formValueChange"] }], errorsChange: [{ type: i0.Output, args: ["errorsChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], validChange: [{ type: i0.Output, args: ["validChange"] }], fieldBlur: [{ type: i0.Output, args: ["fieldBlur"] }] } });
+/**
+ * Reads the user-entered value from a blurred form element. Returns
+ * `undefined` for radio inputs (caller must fall back to the bound
+ * `control.value`, since the focused radio is not necessarily the
+ * group's selected option) and for elements we don't handle.
+ */
+function readElementValueForBlur(element) {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === 'radio')
+            return undefined;
+        if (element.type === 'checkbox')
+            return element.checked;
+        if (element.type === 'number') {
+            return element.value === '' ? null : element.valueAsNumber;
+        }
+        return element.value;
+    }
+    if (element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement) {
+        return element.value;
+    }
+    return undefined;
+}
+/**
+ * Walks DOM ancestors between `start` (exclusive) and `formEl` (exclusive),
+ * collecting any preserved `ngModelGroup` attribute values into a path
+ * suitable for `FormGroup.get()`. Only the static attribute form is
+ * preserved on the DOM; dynamically-bound `[ngModelGroup]` is handled by
+ * `resolveControlPathByDomAncestors`.
+ */
+function collectNgModelGroupAttributes(start, formEl) {
+    const groups = [];
+    let current = start.parentElement;
+    while (current && current !== formEl && formEl.contains(current)) {
+        const groupName = current.getAttribute('ngModelGroup')?.trim();
+        if (groupName) {
+            groups.unshift(groupName);
+        }
+        current = current.parentElement;
+    }
+    return groups;
+}
+/**
+ * Resolves the dotted control path for a blurred element when the static
+ * `ngModelGroup` attribute walk failed (typically because the host used
+ * `[ngModelGroup]="expr"`, which Angular does not always preserve as a
+ * DOM attribute). Walks the control tree top-down and at each FormGroup
+ * boundary tries to descend into a child whose subtree contains an element
+ * with the matching `name` — disambiguating repeated leaf names by DOM
+ * containment instead of giving up.
+ */
+function resolveControlPathByDomAncestors(root, fieldElement, formEl, leafName) {
+    const descend = (frame) => {
+        if (frame.control instanceof FormGroup) {
+            for (const [key, child] of Object.entries(frame.control.controls)) {
+                if (key === leafName && !(child instanceof FormGroup)) {
+                    return { control: child, path: [...frame.path, key] };
+                }
+            }
+            const candidates = [];
+            for (const [key, child] of Object.entries(frame.control.controls)) {
+                if (child instanceof FormGroup || child instanceof FormArray) {
+                    if (subtreeContainsElement(child, fieldElement, formEl, key)) {
+                        candidates.push({ control: child, path: [...frame.path, key] });
+                    }
+                }
+            }
+            if (candidates.length === 1 && candidates[0])
+                return descend(candidates[0]);
+            return null;
+        }
+        if (frame.control instanceof FormArray) {
+            const candidates = [];
+            frame.control.controls.forEach((child, index) => {
+                if (child instanceof FormGroup || child instanceof FormArray) {
+                    if (subtreeContainsElement(child, fieldElement, formEl, index)) {
+                        candidates.push({ control: child, path: [...frame.path, index] });
+                    }
+                }
+            });
+            if (candidates.length === 1 && candidates[0])
+                return descend(candidates[0]);
+        }
+        return null;
+    };
+    const result = descend({ control: root, path: [] });
+    if (!result)
+        return null;
+    return { path: stringifyFieldPath(result.path), control: result.control };
+}
+/**
+ * Best-effort check: does the DOM subtree rooted at any element annotated
+ * with `ngModelGroup="<key>"` contain `fieldElement`? Used by
+ * `resolveControlPathByDomAncestors` to disambiguate repeated leaf names.
+ * For dynamic `[ngModelGroup]` with no preserved attribute we cannot
+ * disambiguate from DOM alone — those cases return `false`, matching the
+ * documented limitation.
+ */
+function subtreeContainsElement(_child, fieldElement, formEl, key) {
+    if (typeof key !== 'string')
+        return false;
+    const selector = `[ngModelGroup="${CSS.escape(key)}"]`;
+    const candidates = formEl.querySelectorAll(selector);
+    for (const candidate of candidates) {
+        if (candidate.contains(fieldElement))
+            return true;
+    }
+    return false;
+}
+/**
+ * Resolves the control + dotted path for a blurred element by consulting the
+ * `NgModel` directives Angular registered with this `NgForm`. Each registered
+ * directive carries a live `path` (the full ControlContainer chain) and a
+ * value accessor whose element ref is the input the directive is hosted on.
+ *
+ * This handles all grouping shapes uniformly — static `ngModelGroup="key"`,
+ * dynamic `[ngModelGroup]="expr"`, and repeated leaf names across siblings —
+ * because the path comes from the live form tree rather than DOM heuristics.
+ * Returns `null` when the directive can't be matched (e.g. a custom CVA that
+ * doesn't store an element ref), so the caller can fall back to DOM probes.
+ */
+function resolveControlPathByNgModelDirective(ngForm, fieldElement) {
+    const directives = readNgFormDirectives(ngForm);
+    if (!directives)
+        return null;
+    for (const directive of directives) {
+        const accessorEl = readValueAccessorElement(directive.valueAccessor);
+        if (accessorEl !== fieldElement)
+            continue;
+        const control = directive.control ?? ngForm.form.get(directive.path);
+        if (!control)
+            return null;
+        return { path: directive.path.join('.'), control };
+    }
+    return null;
+}
+/**
+ * Reads the registered `NgModel` directives from `NgForm`. Angular forms keeps
+ * them in a private `_directives: Set<NgModel>`. The field name is stable
+ * across all Angular versions that ship `ngModel`, but is not part of the
+ * public type — callers must tolerate `null`.
+ */
+function readNgFormDirectives(ngForm) {
+    const set = ngForm._directives;
+    return set ?? null;
+}
+/**
+ * Reads the host element of a `ControlValueAccessor`. The standard accessors
+ * shipped by Angular forms (default, number, select, radio, checkbox, range)
+ * all store an `ElementRef` injected at construction as `_elementRef`. This
+ * is private but stable; custom accessors that don't follow the convention
+ * will simply miss the fast path.
+ */
+function readValueAccessorElement(accessor) {
+    if (!accessor)
+        return null;
+    const elementRef = accessor
+        ._elementRef;
+    const native = elementRef?.nativeElement;
+    return native instanceof HTMLElement ? native : null;
+}
 
 const INITIAL_FORM_CONTROL_STATE = {
     status: 'INVALID',
@@ -1929,9 +2405,22 @@ class FormControlStateDirective {
      * Internal signal for control state (updated reactively)
      */
     #controlStateSignal;
+    /**
+     * Tick bumped once via `afterNextRender` if `control.control` is undefined
+     * at the first effect run (NgModel registers asynchronously). Reading this
+     * signal inside the effect causes a re-evaluation after the next render so
+     * we pick up the late-attached `FormControl`. Bookkeeping below ensures we
+     * only schedule a single retry — no permanent polling.
+     */
+    #controlAttachTick;
+    // Latch is scoped to the *current* `#activeControl` instance. When the
+    // active control changes (e.g. host swaps an `@if` block, NgModel
+    // recreates), the latch resets so a fresh late-attach gets one retry.
+    #controlAttachRetryScheduled;
+    #lastSeenActiveControl;
     constructor() {
-        this.contentNgModel = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "contentNgModel" }] : []));
-        this.contentNgModelGroup = contentChild(NgModelGroup, ...(ngDevMode ? [{ debugName: "contentNgModelGroup" }] : []));
+        this.contentNgModel = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "contentNgModel" }] : /* istanbul ignore next */ []));
+        this.contentNgModelGroup = contentChild(NgModelGroup, ...(ngDevMode ? [{ debugName: "contentNgModelGroup" }] : /* istanbul ignore next */ []));
         this.#hostNgModel = inject(NgModel, { self: true, optional: true });
         this.#hostNgModelGroup = inject(NgModelGroup, {
             self: true,
@@ -1950,7 +2439,7 @@ class FormControlStateDirective {
             this.#hostNgModelGroup ||
             this.contentNgModel() ||
             this.contentNgModelGroup() ||
-            null, ...(ngDevMode ? [{ debugName: "#activeControl" }] : []));
+            null, ...(ngDevMode ? [{ debugName: "#activeControl" }] : /* istanbul ignore next */ []));
         /**
          * Consolidated internal signal for interaction state tracking.
          * Combines touched, dirty, and hasBeenValidated into a single signal
@@ -1960,7 +2449,7 @@ class FormControlStateDirective {
             isTouched: false,
             isDirty: false,
             hasBeenValidated: false,
-        }, ...(ngDevMode ? [{ debugName: "#interactionState" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#interactionState" }] : /* istanbul ignore next */ []));
         /**
          * Track the previous status to detect actual status changes (not just status emissions).
          * This helps distinguish between initial control creation and actual re-validation.
@@ -1969,11 +2458,24 @@ class FormControlStateDirective {
         /**
          * Internal signal for control state (updated reactively)
          */
-        this.#controlStateSignal = signal(INITIAL_FORM_CONTROL_STATE, ...(ngDevMode ? [{ debugName: "#controlStateSignal" }] : []));
+        this.#controlStateSignal = signal(INITIAL_FORM_CONTROL_STATE, ...(ngDevMode ? [{ debugName: "#controlStateSignal" }] : /* istanbul ignore next */ []));
+        /**
+         * Tick bumped once via `afterNextRender` if `control.control` is undefined
+         * at the first effect run (NgModel registers asynchronously). Reading this
+         * signal inside the effect causes a re-evaluation after the next render so
+         * we pick up the late-attached `FormControl`. Bookkeeping below ensures we
+         * only schedule a single retry — no permanent polling.
+         */
+        this.#controlAttachTick = signal(0, ...(ngDevMode ? [{ debugName: "#controlAttachTick" }] : /* istanbul ignore next */ []));
+        // Latch is scoped to the *current* `#activeControl` instance. When the
+        // active control changes (e.g. host swaps an `@if` block, NgModel
+        // recreates), the latch resets so a fresh late-attach gets one retry.
+        this.#controlAttachRetryScheduled = false;
+        this.#lastSeenActiveControl = null;
         /**
          * Main control state computed signal (merges robust touched/dirty)
          */
-        this.controlState = computed(() => this.#controlStateSignal(), ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+        this.controlState = computed(() => this.#controlStateSignal(), ...(ngDevMode ? [{ debugName: "controlState" }] : /* istanbul ignore next */ []));
         /**
          * Extracts error messages from Angular/Vest errors (recursively flattens)
          */
@@ -1993,20 +2495,20 @@ class FormControlStateDirective {
             const errorsWithoutWarnings = { ...errors };
             delete errorsWithoutWarnings['warnings'];
             return this.#flattenAngularErrors(errorsWithoutWarnings);
-        }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
         /**
          * ADVANCED: updateOn strategy (change/blur/submit) if available
          */
         this.updateOn = computed(() => {
             const ngModel = this.contentNgModel() || this.#hostNgModel;
             return ngModel?.options?.updateOn ?? 'change';
-        }, ...(ngDevMode ? [{ debugName: "updateOn" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "updateOn" }] : /* istanbul ignore next */ []));
         /**
          * ADVANCED: Composite/derived signals for advanced error display logic
          */
-        this.isValidTouched = computed(() => this.isValid() && this.isTouched(), ...(ngDevMode ? [{ debugName: "isValidTouched" }] : []));
-        this.isInvalidTouched = computed(() => this.isInvalid() && this.isTouched(), ...(ngDevMode ? [{ debugName: "isInvalidTouched" }] : []));
-        this.shouldShowErrors = computed(() => this.isInvalid() && this.isTouched() && !this.isPending(), ...(ngDevMode ? [{ debugName: "shouldShowErrors" }] : []));
+        this.isValidTouched = computed(() => this.isValid() && this.isTouched(), ...(ngDevMode ? [{ debugName: "isValidTouched" }] : /* istanbul ignore next */ []));
+        this.isInvalidTouched = computed(() => this.isInvalid() && this.isTouched(), ...(ngDevMode ? [{ debugName: "isInvalidTouched" }] : /* istanbul ignore next */ []));
+        this.shouldShowErrors = computed(() => this.isInvalid() && this.isTouched() && !this.isPending(), ...(ngDevMode ? [{ debugName: "shouldShowErrors" }] : /* istanbul ignore next */ []));
         /**
          * Extracts warning messages from Vest validation results.
          * Checks two sources:
@@ -2041,36 +2543,59 @@ class FormControlStateDirective {
                 }
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "warningMessages" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "warningMessages" }] : /* istanbul ignore next */ []));
         /**
          * Whether async validation is in progress
          */
-        this.hasPendingValidation = computed(() => this.controlState().isPending, ...(ngDevMode ? [{ debugName: "hasPendingValidation" }] : []));
+        this.hasPendingValidation = computed(() => this.controlState().isPending, ...(ngDevMode ? [{ debugName: "hasPendingValidation" }] : /* istanbul ignore next */ []));
         /**
          * Convenience signals for common state checks
          */
-        this.isValid = computed(() => this.controlState().isValid, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
-        this.isInvalid = computed(() => this.controlState().isInvalid, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
-        this.isPending = computed(() => this.controlState().isPending, ...(ngDevMode ? [{ debugName: "isPending" }] : []));
-        this.isTouched = computed(() => this.controlState().isTouched, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
-        this.isDirty = computed(() => this.controlState().isDirty, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
-        this.isPristine = computed(() => this.controlState().isPristine, ...(ngDevMode ? [{ debugName: "isPristine" }] : []));
-        this.isDisabled = computed(() => this.controlState().isDisabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.hasErrors = computed(() => this.errorMessages().length > 0, ...(ngDevMode ? [{ debugName: "hasErrors" }] : []));
+        this.isValid = computed(() => this.controlState().isValid, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        this.isInvalid = computed(() => this.controlState().isInvalid, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+        this.isPending = computed(() => this.controlState().isPending, ...(ngDevMode ? [{ debugName: "isPending" }] : /* istanbul ignore next */ []));
+        this.isTouched = computed(() => this.controlState().isTouched, ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+        this.isDirty = computed(() => this.controlState().isDirty, ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+        this.isPristine = computed(() => this.controlState().isPristine, ...(ngDevMode ? [{ debugName: "isPristine" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.controlState().isDisabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.hasErrors = computed(() => this.errorMessages().length > 0, ...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
         /**
          * Whether this control has been validated at least once.
          * True after the first validation completes, even if the user hasn't touched the field.
-         * This enables showing errors for validationConfig-triggered validations.
+         * This is primarily used for warning display and other derived state that should react
+         * to validationConfig-triggered validation even before the user touches the field.
          */
-        this.hasBeenValidated = computed(() => this.#interactionState().hasBeenValidated, ...(ngDevMode ? [{ debugName: "hasBeenValidated" }] : []));
+        this.hasBeenValidated = computed(() => this.#interactionState().hasBeenValidated, ...(ngDevMode ? [{ debugName: "hasBeenValidated" }] : /* istanbul ignore next */ []));
         // Update control state reactively with proper cleanup
         effect((onCleanup) => {
             const control = this.#activeControl();
             const interaction = this.#interactionState();
+            // Track the retry tick so a late-attached `control.control` re-runs this
+            // effect after the next render.
+            this.#controlAttachTick();
+            // Re-arm the late-attach latch whenever the active control identity
+            // changes — including transitions to/from null — so a newly mounted
+            // directive whose `FormControl` registers asynchronously gets its own
+            // single retry.
+            if (control !== this.#lastSeenActiveControl) {
+                this.#lastSeenActiveControl = control;
+                this.#controlAttachRetryScheduled = false;
+            }
             if (!control) {
                 this.#controlStateSignal.set(INITIAL_FORM_CONTROL_STATE);
                 return;
             }
+            // NgModel attaches its `FormControl` during its own ngOnInit, which can
+            // run after this effect's first execution in some host orderings. If
+            // `control.control` isn't there yet, schedule a single `afterNextRender`
+            // retry so we re-evaluate once Angular finishes wiring directives.
+            if (!control.control && !this.#controlAttachRetryScheduled) {
+                this.#controlAttachRetryScheduled = true;
+                afterNextRender(() => {
+                    this.#controlAttachTick.update((v) => v + 1);
+                }, { injector: this.#injector });
+                return;
+            }
             // Listen to control changes
             const sub = control.control?.statusChanges?.subscribe(() => {
                 const { status, valid, invalid, pending, disabled, pristine, errors, touched, } = control;
@@ -2168,6 +2693,23 @@ class FormControlStateDirective {
                                 ? true
                                 : state.hasBeenValidated,
                     }));
+                    // Keep the derived control-state signal in sync even when blur/dirty
+                    // changes do not produce a statusChanges emission.
+                    //
+                    // This happens when a control is already INVALID due to dependent-field
+                    // validation and the user then blurs it. Error display modes that depend
+                    // on `isTouched()` must still update immediately in that case.
+                    this.#controlStateSignal.set({
+                        status: control.status,
+                        isValid: control.valid ?? false,
+                        isInvalid: control.invalid ?? false,
+                        isPending: control.pending ?? false,
+                        isDisabled: control.disabled ?? false,
+                        isTouched: newTouched,
+                        isDirty: newDirty,
+                        isPristine: control.pristine ?? true,
+                        errors: control.errors,
+                    });
                 }
                 // Sync pending state only when it transitions from true to false
                 // This fixes "Validating..." being stuck when statusChanges misses the transition
@@ -2218,10 +2760,10 @@ class FormControlStateDirective {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormControlStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: FormControlStateDirective, isStandalone: true, selector: "[formControlState], [ngxControlState]", queries: [{ propertyName: "contentNgModel", first: true, predicate: NgModel, descendants: true, isSignal: true }, { propertyName: "contentNgModelGroup", first: true, predicate: NgModelGroup, descendants: true, isSignal: true }], exportAs: ["formControlState", "ngxControlState"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormControlStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.11", type: FormControlStateDirective, isStandalone: true, selector: "[formControlState], [ngxControlState]", queries: [{ propertyName: "contentNgModel", first: true, predicate: NgModel, descendants: true, isSignal: true }, { propertyName: "contentNgModelGroup", first: true, predicate: NgModelGroup, descendants: true, isSignal: true }], exportAs: ["formControlState", "ngxControlState"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormControlStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormControlStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formControlState], [ngxControlState]',
@@ -2278,13 +2820,13 @@ class FormErrorDisplayDirective {
          */
         this.errorDisplayMode = input(inject(NGX_ERROR_DISPLAY_MODE_TOKEN, { optional: true }) ??
             inject(SC_ERROR_DISPLAY_MODE_TOKEN, { optional: true }) ??
-            SC_ERROR_DISPLAY_MODE_DEFAULT, ...(ngDevMode ? [{ debugName: "errorDisplayMode" }] : []));
+            SC_ERROR_DISPLAY_MODE_DEFAULT, ...(ngDevMode ? [{ debugName: "errorDisplayMode" }] : /* istanbul ignore next */ []));
         /**
          * Input signal for warning display mode.
          * Controls whether warnings are shown only after touch or also after validation.
          */
         this.warningDisplayMode = input(inject(NGX_WARNING_DISPLAY_MODE_TOKEN, { optional: true }) ??
-            SC_WARNING_DISPLAY_MODE_DEFAULT, ...(ngDevMode ? [{ debugName: "warningDisplayMode" }] : []));
+            SC_WARNING_DISPLAY_MODE_DEFAULT, ...(ngDevMode ? [{ debugName: "warningDisplayMode" }] : /* istanbul ignore next */ []));
         // Expose state signals from FormControlStateDirective
         this.controlState = this.#formControlState.controlState;
         this.errorMessages = this.#formControlState.errorMessages;
@@ -2309,20 +2851,25 @@ class FormErrorDisplayDirective {
          * This keeps programmatic `NgForm.onSubmit()` reactive in zoneless mode and
          * avoids depending on `NgForm.submitted`, whose getter intentionally reads an
          * internal signal with `untracked()`.
+         *
+         * Note: when this directive is used outside an `NgForm` (no parent form), no
+         * subscription is wired up and this signal stays `false` for the lifetime of
+         * the directive. Consumers relying on submitted state must host the field
+         * inside an `NgForm` (or `ngxVestForm`).
          */
         this.formSubmitted = this.#formSubmittedState;
         /**
          * Determines if errors should be shown based on the specified display mode
-         * and the control's state (touched/submitted/validated).
+         * and the control's state (touched/submitted/dirty).
          *
          * Note: We check both hasErrors (extracted error messages) AND isInvalid (Angular's validation state)
          * because in some cases (like conditional validations via validationConfig), the control is marked
          * as invalid by Angular before error messages are extracted from Vest. This ensures aria-invalid
          * is set correctly even during the validation propagation delay.
          *
-         * For validationConfig-triggered validations: A field can be validated without being touched
-         * (e.g., confirmPassword validated when password changes). We check hasBeenValidated to show
-         * errors in these scenarios, providing better UX and proper ARIA attributes.
+         * For validationConfig-triggered validations, a field may become invalid before it has been
+         * touched. Error visibility still respects the field's own `errorDisplayMode`, so untouched
+         * dependent fields can remain visually quiet until blur or submit.
          */
         this.shouldShowErrors = computed(() => {
             const mode = this.errorDisplayMode();
@@ -2358,7 +2905,7 @@ class FormErrorDisplayDirective {
                     // Show after blur (touch) OR submit (default behavior)
                     return !!((isTouched || formSubmitted) && hasErrorState);
             }
-        }, ...(ngDevMode ? [{ debugName: "shouldShowErrors" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "shouldShowErrors" }] : /* istanbul ignore next */ []));
         /**
          * Errors to display (filtered for pending state)
          */
@@ -2366,7 +2913,7 @@ class FormErrorDisplayDirective {
             if (this.hasPendingValidation())
                 return [];
             return this.errorMessages();
-        }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /**
          * Warnings to display (filtered for pending state)
          */
@@ -2374,7 +2921,7 @@ class FormErrorDisplayDirective {
             if (this.hasPendingValidation())
                 return [];
             return this.warningMessages();
-        }, ...(ngDevMode ? [{ debugName: "warnings" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "warnings" }] : /* istanbul ignore next */ []));
         /**
          * Whether the control is currently being validated (pending)
          * Excludes pristine+untouched controls to prevent "Validating..." on initial load
@@ -2387,7 +2934,7 @@ class FormErrorDisplayDirective {
                 return false;
             }
             return this.hasPendingValidation();
-        }, ...(ngDevMode ? [{ debugName: "isPending" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isPending" }] : /* istanbul ignore next */ []));
         /**
          * Determines if warnings should be shown based on the specified display mode
          * and the control's state (touched/validated/dirty).
@@ -2428,7 +2975,7 @@ class FormErrorDisplayDirective {
                     // Show after validation runs or after touch/submit (default behavior)
                     return hasBeenValidated || isTouched || formSubmitted;
             }
-        }, ...(ngDevMode ? [{ debugName: "shouldShowWarnings" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "shouldShowWarnings" }] : /* istanbul ignore next */ []));
         const ngForm = this.#ngForm;
         if (ngForm) {
             ngForm.form.events
@@ -2448,10 +2995,10 @@ class FormErrorDisplayDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormErrorDisplayDirective, isStandalone: true, selector: "[formErrorDisplay], [ngxErrorDisplay]", inputs: { errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, warningDisplayMode: { classPropertyName: "warningDisplayMode", publicName: "warningDisplayMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorDisplay", "ngxErrorDisplay"], hostDirectives: [{ directive: FormControlStateDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormErrorDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FormErrorDisplayDirective, isStandalone: true, selector: "[formErrorDisplay], [ngxErrorDisplay]", inputs: { errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, warningDisplayMode: { classPropertyName: "warningDisplayMode", publicName: "warningDisplayMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorDisplay", "ngxErrorDisplay"], hostDirectives: [{ directive: FormControlStateDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormErrorDisplayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formErrorDisplay], [ngxErrorDisplay]',
@@ -2536,9 +3083,17 @@ function resolveAssociationTargets(controls, mode) {
  * @returns Object containing the debounced showPendingMessage signal and cleanup function
  */
 function createDebouncedPendingState(isPending, options = {}) {
-    const { showAfter = 200, minimumDisplay = 500 } = options;
+    // Reading the options inside the effect makes the timings reactive: when
+    // a consumer passes an `input()` accessor (a Signal), changes propagate at
+    // runtime rather than getting captured once at construction.
+    const optionsSignal = isSignal(options)
+        ? options
+        : null;
+    const staticOptions = optionsSignal
+        ? {}
+        : options;
     // Create writable signal for debounced state
-    const showPendingMessageSignal = signal(false, ...(ngDevMode ? [{ debugName: "showPendingMessageSignal" }] : []));
+    const showPendingMessageSignal = signal(false, ...(ngDevMode ? [{ debugName: "showPendingMessageSignal" }] : /* istanbul ignore next */ []));
     // Track timeouts
     let pendingTimeout = null;
     let minimumDisplayTimeout = null;
@@ -2556,6 +3111,9 @@ function createDebouncedPendingState(isPending, options = {}) {
     // Effect to manage debounced pending message display
     effect((onCleanup) => {
         const pending = isPending();
+        const current = optionsSignal ? optionsSignal() : staticOptions;
+        const showAfter = current.showAfter ?? 200;
+        const minimumDisplay = current.minimumDisplay ?? 500;
         if (pending) {
             // Clear any existing minimum display timeout
             if (minimumDisplayTimeout) {
@@ -2740,16 +3298,16 @@ class ControlWrapperComponent {
          *   across multiple child controls.
          * - This does not affect whether messages render; it only affects ARIA wiring.
          */
-        this.ariaAssociationMode = input('all-controls', ...(ngDevMode ? [{ debugName: "ariaAssociationMode" }] : []));
+        this.ariaAssociationMode = input('all-controls', ...(ngDevMode ? [{ debugName: "ariaAssociationMode" }] : /* istanbul ignore next */ []));
         // Generate unique IDs for ARIA associations
         this.uniqueId = `ngx-control-wrapper-${nextUniqueId$2++}`;
         this.errorId = `${this.uniqueId}-error`;
         this.warningId = `${this.uniqueId}-warning`;
         this.pendingId = `${this.uniqueId}-pending`;
         // Track form controls found in the wrapper
-        this.formControls = signal([], ...(ngDevMode ? [{ debugName: "formControls" }] : []));
+        this.formControls = signal([], ...(ngDevMode ? [{ debugName: "formControls" }] : /* istanbul ignore next */ []));
         // Signals when content is initialized so effects can safely touch the DOM.
-        this.contentInitialized = signal(false, ...(ngDevMode ? [{ debugName: "contentInitialized" }] : []));
+        this.contentInitialized = signal(false, ...(ngDevMode ? [{ debugName: "contentInitialized" }] : /* istanbul ignore next */ []));
         // MutationObserver to detect dynamically added/removed controls
         this.mutationObserver = null;
         /**
@@ -2781,7 +3339,7 @@ class ControlWrapperComponent {
                 ids.push(this.pendingId);
             }
             return ids.length > 0 ? ids.join(' ') : null;
-        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
         /**
          * IDs managed by this wrapper when composing aria-describedby.
          *
@@ -2874,10 +3432,10 @@ class ControlWrapperComponent {
         const controls = this.elementRef.nativeElement.querySelectorAll('input, select, textarea');
         this.formControls.set(Array.from(controls));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ControlWrapperComponent, isStandalone: true, selector: "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-control-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-control-wrapper sc-control-wrapper" }, hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-control-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  WCAG 2.2 AA Compliance for Inline Field Validation:\n\n  IMPORTANT DISTINCTION - Field-level vs Form-level errors:\n  - FIELD-LEVEL errors (this component): Use role=\"status\" with aria-live=\"polite\"\n    These are inline validation messages that appear as users interact with fields.\n    Using \"assertive\" would be too disruptive when users are filling out multiple fields.\n  - FORM-LEVEL blocking errors (e.g., submission failed): Should use role=\"alert\" with\n    aria-live=\"assertive\" in a separate form-level error summary component.\n\n  This component handles FIELD-LEVEL messages:\n  - Errors: role=\"status\" with aria-live=\"polite\" (non-disruptive, field is already\n    marked with aria-invalid=\"true\" and aria-describedby points here)\n  - Warnings: role=\"status\" with aria-live=\"polite\" (informational, doesn't block)\n  - Pending: role=\"status\" with aria-live=\"polite\" (status update)\n\n  The aria-invalid=\"true\" + aria-describedby association on the input provides\n  the primary accessibility pathway; the live region is supplementary.\n\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA21 - Using aria-invalid\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 - Using role=status\n-->\n<div\n  [id]=\"errorId\"\n  class=\"text-sm text-red-600\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (errorDisplay.shouldShowErrors()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!--\n  Warnings: Non-blocking validation messages (Vest warn())\n  - Use role=\"status\" with aria-live=\"polite\" per WCAG ARIA22\n  - Default: show after validation runs or touch; configurable to require touch only\n  - Warnings do NOT affect field validity - they're informational only\n-->\n<div\n  [id]=\"warningId\"\n  class=\"text-sm text-yellow-700\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (shouldShowWarnings()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!-- Pending state is also stable; content appears only after the debounce delay -->\n<div\n  [id]=\"pendingId\"\n  class=\"absolute top-0 right-0 flex items-center gap-1 text-xs text-gray-500\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (showPendingMessage()) {\n    <span\n      class=\"inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-400 border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n    Validating\u2026\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ControlWrapperComponent, isStandalone: true, selector: "ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-control-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-control-wrapper sc-control-wrapper" }, hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-control-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  WCAG 2.2 AA Compliance for Inline Field Validation:\n\n  IMPORTANT DISTINCTION - Field-level vs Form-level errors:\n  - FIELD-LEVEL errors (this component): Use role=\"status\" with aria-live=\"polite\"\n    These are inline validation messages that appear as users interact with fields.\n    Using \"assertive\" would be too disruptive when users are filling out multiple fields.\n  - FORM-LEVEL blocking errors (e.g., submission failed): Should use role=\"alert\" with\n    aria-live=\"assertive\" in a separate form-level error summary component.\n\n  This component handles FIELD-LEVEL messages:\n  - Errors: role=\"status\" with aria-live=\"polite\" (non-disruptive, field is already\n    marked with aria-invalid=\"true\" and aria-describedby points here)\n  - Warnings: role=\"status\" with aria-live=\"polite\" (informational, doesn't block)\n  - Pending: role=\"status\" with aria-live=\"polite\" (status update)\n\n  The aria-invalid=\"true\" + aria-describedby association on the input provides\n  the primary accessibility pathway; the live region is supplementary.\n\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA21 - Using aria-invalid\n  @see https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22 - Using role=status\n-->\n<div\n  [id]=\"errorId\"\n  class=\"text-sm text-red-600\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (errorDisplay.shouldShowErrors()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!--\n  Warnings: Non-blocking validation messages (Vest warn())\n  - Use role=\"status\" with aria-live=\"polite\" per WCAG ARIA22\n  - Default: show after validation runs or touch; configurable to require touch only\n  - Warnings do NOT affect field validity - they're informational only\n-->\n<div\n  [id]=\"warningId\"\n  class=\"text-sm text-yellow-700\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (shouldShowWarnings()) {\n    <ul class=\"m-0 mt-1 list-none space-y-1 p-0\">\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<!-- Pending state is also stable; content appears only after the debounce delay -->\n<div\n  [id]=\"pendingId\"\n  class=\"absolute top-0 right-0 flex items-center gap-1 text-xs text-gray-500\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  @if (showPendingMessage()) {\n    <span\n      class=\"inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-400 border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n    Validating\u2026\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ControlWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ControlWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-control-wrapper, sc-control-wrapper, [scControlWrapper], [ngxControlWrapper], [ngx-control-wrapper], [sc-control-wrapper]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-control-wrapper sc-control-wrapper',
@@ -2913,12 +3471,12 @@ class FormGroupWrapperComponent {
         this.pendingDebounce = input({
             showAfter: 500,
             minimumDisplay: 500,
-        }, ...(ngDevMode ? [{ debugName: "pendingDebounce" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "pendingDebounce" }] : /* istanbul ignore next */ []));
         this.uniqueId = `ngx-form-group-wrapper-${nextUniqueId$1++}`;
         this.errorId = `${this.uniqueId}-error`;
         this.warningId = `${this.uniqueId}-warning`;
         this.pendingId = `${this.uniqueId}-pending`;
-        this.pendingState = createDebouncedPendingState(this.errorDisplay.isPending, this.pendingDebounce());
+        this.pendingState = createDebouncedPendingState(this.errorDisplay.isPending, this.pendingDebounce);
         this.showPendingMessage = this.pendingState.showPendingMessage;
         /**
          * Helpful if consumers want to wire aria-describedby manually (e.g. fieldset/legend pattern).
@@ -2935,12 +3493,12 @@ class FormGroupWrapperComponent {
                 ids.push(this.pendingId);
             }
             return ids.length > 0 ? ids.join(' ') : null;
-        }, ...(ngDevMode ? [{ debugName: "describedByIds" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "describedByIds" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormGroupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FormGroupWrapperComponent, isStandalone: true, selector: "ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper]", inputs: { pendingDebounce: { classPropertyName: "pendingDebounce", publicName: "pendingDebounce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-form-group-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-form-group-wrapper sc-form-group-wrapper" }, exportAs: ["ngxFormGroupWrapper"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowWarnings()) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormGroupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FormGroupWrapperComponent, isStandalone: true, selector: "ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper]", inputs: { pendingDebounce: { classPropertyName: "pendingDebounce", publicName: "pendingDebounce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-form-group-wrapper--invalid": "errorDisplay.shouldShowErrors()", "attr.aria-busy": "errorDisplay.isPending() ? 'true' : null" }, classAttribute: "ngx-form-group-wrapper sc-form-group-wrapper" }, exportAs: ["ngxFormGroupWrapper"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0, template: "<div class=\"ngx-form-group-wrapper__content\">\n  <ng-content />\n</div>\n\n<!--\n  Keep regions stable in the DOM so IDs are always valid targets.\n  This wrapper does NOT modify descendant controls.\n-->\n<div [id]=\"errorId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowErrors() && errorDisplay.errors().length > 0) {\n    <ul>\n      @for (error of errorDisplay.errors(); track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"warningId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (errorDisplay.shouldShowWarnings()) {\n    <ul>\n      @for (warn of errorDisplay.warnings(); track warn) {\n        <li>{{ warn }}</li>\n      }\n    </ul>\n  }\n</div>\n\n<div [id]=\"pendingId\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  @if (showPendingMessage()) {\n    <span aria-hidden=\"true\">Validating\u2026</span>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormGroupWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormGroupWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-form-group-wrapper, sc-form-group-wrapper, [ngxFormGroupWrapper], [scFormGroupWrapper]', exportAs: 'ngxFormGroupWrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-form-group-wrapper sc-form-group-wrapper',
@@ -2977,7 +3535,7 @@ class FormErrorControlDirective {
          * - `single-control`: apply ARIA attributes only when exactly one control is found.
          * - `none`: do not mutate descendant controls.
          */
-        this.ariaAssociationMode = input('all-controls', ...(ngDevMode ? [{ debugName: "ariaAssociationMode" }] : []));
+        this.ariaAssociationMode = input('all-controls', ...(ngDevMode ? [{ debugName: "ariaAssociationMode" }] : /* istanbul ignore next */ []));
         /**
          * Unique ID prefix for this instance.
          * Use these IDs to render message regions and to support aria-describedby.
@@ -2986,8 +3544,8 @@ class FormErrorControlDirective {
         this.errorId = `${this.uniqueId}-error`;
         this.warningId = `${this.uniqueId}-warning`;
         this.pendingId = `${this.uniqueId}-pending`;
-        this.formControls = signal([], ...(ngDevMode ? [{ debugName: "formControls" }] : []));
-        this.contentInitialized = signal(false, ...(ngDevMode ? [{ debugName: "contentInitialized" }] : []));
+        this.formControls = signal([], ...(ngDevMode ? [{ debugName: "formControls" }] : /* istanbul ignore next */ []));
+        this.contentInitialized = signal(false, ...(ngDevMode ? [{ debugName: "contentInitialized" }] : /* istanbul ignore next */ []));
         this.mutationObserver = null;
         this.pendingState = createDebouncedPendingState(this.errorDisplay.isPending, { showAfter: 500, minimumDisplay: 500 });
         this.showPendingMessage = this.pendingState.showPendingMessage;
@@ -3006,7 +3564,7 @@ class FormErrorControlDirective {
                 ids.push(this.pendingId);
             }
             return ids.length > 0 ? ids.join(' ') : null;
-        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
         this.ownedDescribedByIds = [
             this.errorId,
             this.warningId,
@@ -3080,10 +3638,10 @@ class FormErrorControlDirective {
         const controls = this.elementRef.nativeElement.querySelectorAll('input, select, textarea');
         this.formControls.set(Array.from(controls));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormErrorControlDirective, isStandalone: true, selector: "[formErrorControl], [ngxErrorControl]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorControl", "ngxErrorControl"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormErrorControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FormErrorControlDirective, isStandalone: true, selector: "[formErrorControl], [ngxErrorControl]", inputs: { ariaAssociationMode: { classPropertyName: "ariaAssociationMode", publicName: "ariaAssociationMode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["formErrorControl", "ngxErrorControl"], hostDirectives: [{ directive: FormErrorDisplayDirective, inputs: ["errorDisplayMode", "errorDisplayMode", "warningDisplayMode", "warningDisplayMode"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormErrorControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormErrorControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formErrorControl], [ngxErrorControl]',
@@ -3147,7 +3705,7 @@ class FormModelGroupDirective {
          *
          * Defaults to no debounce (`{ debounceTime: 0 }`).
          */
-        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : []));
+        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : /* istanbul ignore next */ []));
         this.formDirective = inject(FormDirective, { optional: true });
     }
     /**
@@ -3163,8 +3721,8 @@ class FormModelGroupDirective {
             return getFormGroupField(context.ngForm.control, currentControl);
         }, this.validationOptions(), 'FormModelGroupDirective');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormModelGroupDirective, isStandalone: true, selector: "[ngModelGroup],[ngxModelGroup]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormModelGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FormModelGroupDirective, isStandalone: true, selector: "[ngModelGroup],[ngxModelGroup]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: FormModelGroupDirective,
@@ -3172,7 +3730,7 @@ class FormModelGroupDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormModelGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModelGroup],[ngxModelGroup]',
@@ -3197,7 +3755,7 @@ class FormModelDirective {
          *
          * Defaults to no debounce (`{ debounceTime: 0 }`).
          */
-        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : []));
+        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the form that needs to be validated
          * Injected optionally so that using ngModel outside of an ngxVestForm
@@ -3220,8 +3778,8 @@ class FormModelDirective {
             return getFormControlField(context.ngForm.control, currentControl);
         }, this.validationOptions(), 'FormModelDirective');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: FormModelDirective, isStandalone: true, selector: "[ngModel],[ngxModel]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FormModelDirective, isStandalone: true, selector: "[ngModel],[ngxModel]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: FormModelDirective,
@@ -3229,7 +3787,7 @@ class FormModelDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FormModelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FormModelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[ngxModel]',
@@ -3318,26 +3876,30 @@ class ValidateRootFormDirective {
     constructor() {
         this.injector = inject(Injector);
         this.destroyRef = inject(DestroyRef);
-        this.lastControl = signal(null, ...(ngDevMode ? [{ debugName: "lastControl" }] : []));
-        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : []));
-        this.hasSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "hasSubmitted" }] : []));
-        this.formValue = input(null, ...(ngDevMode ? [{ debugName: "formValue" }] : []));
-        this.suite = input(null, ...(ngDevMode ? [{ debugName: "suite" }] : []));
+        this.lastControl = signal(null, ...(ngDevMode ? [{ debugName: "lastControl" }] : /* istanbul ignore next */ []));
+        this.validationOptions = input({ debounceTime: 0 }, ...(ngDevMode ? [{ debugName: "validationOptions" }] : /* istanbul ignore next */ []));
+        this.hasSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "hasSubmitted" }] : /* istanbul ignore next */ []));
+        this.formValue = input(null, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+        this.suite = input(null, ...(ngDevMode ? [{ debugName: "suite" }] : /* istanbul ignore next */ []));
         /**
          * Whether the root form should be validated or not
          * This will use the field rootForm
          * Accepts both validateRootForm and ngxValidateRootForm
          */
-        this.validateRootForm = input(false, { ...(ngDevMode ? { debugName: "validateRootForm" } : {}), transform: booleanAttribute });
-        this.ngxValidateRootForm = input(false, { ...(ngDevMode ? { debugName: "ngxValidateRootForm" } : {}), transform: booleanAttribute });
+        this.validateRootForm = input(false, { ...(ngDevMode ? { debugName: "validateRootForm" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.ngxValidateRootForm = input(false, { ...(ngDevMode ? { debugName: "ngxValidateRootForm" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Validation mode:
-         * - 'submit' (default): Only validates after form submission
-         * - 'live': Validates on every value change
-         * Accepts both validateRootFormMode and ngxValidateRootFormMode
+         * - `'submit'` (effective default): Only validates after form submission.
+         * - `'live'`: Validates on every value change.
+         *
+         * Both inputs default to `undefined` so we can detect whether the consumer
+         * set them explicitly. Precedence is `ngx ?? legacy ?? 'submit'`, which
+         * matches the documented behavior — observable only when both attributes
+         * are set explicitly on the same form.
          */
-        this.validateRootFormMode = input('submit', ...(ngDevMode ? [{ debugName: "validateRootFormMode" }] : []));
-        this.ngxValidateRootFormMode = input('submit', ...(ngDevMode ? [{ debugName: "ngxValidateRootFormMode" }] : []));
+        this.validateRootFormMode = input(undefined, ...(ngDevMode ? [{ debugName: "validateRootFormMode" }] : /* istanbul ignore next */ []));
+        this.ngxValidateRootFormMode = input(undefined, ...(ngDevMode ? [{ debugName: "ngxValidateRootFormMode" }] : /* istanbul ignore next */ []));
         // Convert signals to Observables in injection context
         this.hasSubmitted$ = toObservable(this.hasSubmitted);
         this.formValue$ = toObservable(this.formValue);
@@ -3362,7 +3924,9 @@ class ValidateRootFormDirective {
             if (ngForm?.control) {
                 // Defer to the next microtask so Angular has a chance to finish
                 // wiring up controls/groups (ngModel/ngModelGroup) on initial render.
-                queueMicrotask(() => ngForm.control.updateValueAndValidity());
+                // The scheduleMicrotask primitive auto-cancels if the directive is
+                // destroyed before the microtask fires.
+                scheduleMicrotask(() => ngForm.control.updateValueAndValidity(), this.destroyRef);
             }
         });
     }
@@ -3384,7 +3948,7 @@ class ValidateRootFormDirective {
         // Ensure we run at least one validation pass after the form is ready.
         // This matters for 'live' mode root-form errors that should appear
         // without requiring a user interaction.
-        queueMicrotask(() => ngForm.control.updateValueAndValidity());
+        scheduleMicrotask(() => ngForm.control.updateValueAndValidity(), this.destroyRef);
         // Subscribe to form submission to set hasSubmitted flag
         ngForm.ngSubmit
             .pipe(tap(() => {
@@ -3402,10 +3966,12 @@ class ValidateRootFormDirective {
         if (!isEnabled) {
             return of(null);
         }
-        // Get mode from either input (ngx prefix takes precedence if both set)
-        const mode = this.ngxValidateRootFormMode() !== 'submit'
-            ? this.ngxValidateRootFormMode()
-            : this.validateRootFormMode();
+        // Mode precedence: ngx-prefixed input wins over legacy input; both default
+        // to `undefined` so the precedence rule is implementable without losing
+        // the legacy attribute when the new one is not set.
+        const mode = this.ngxValidateRootFormMode() ??
+            this.validateRootFormMode() ??
+            'submit';
         // In 'submit' mode, skip validation until form is submitted
         if (mode === 'submit' && !this.hasSubmitted()) {
             return of(null);
@@ -3466,8 +4032,8 @@ class ValidateRootFormDirective {
             }), take(1), takeUntilDestroyed(this.destroyRef));
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ValidateRootFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: ValidateRootFormDirective, isStandalone: true, selector: "form[validateRootForm], form[ngxValidateRootForm]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, validateRootForm: { classPropertyName: "validateRootForm", publicName: "validateRootForm", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootForm: { classPropertyName: "ngxValidateRootForm", publicName: "ngxValidateRootForm", isSignal: true, isRequired: false, transformFunction: null }, validateRootFormMode: { classPropertyName: "validateRootFormMode", publicName: "validateRootFormMode", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootFormMode: { classPropertyName: "ngxValidateRootFormMode", publicName: "ngxValidateRootFormMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ValidateRootFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: ValidateRootFormDirective, isStandalone: true, selector: "form[validateRootForm], form[ngxValidateRootForm]", inputs: { validationOptions: { classPropertyName: "validationOptions", publicName: "validationOptions", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null }, suite: { classPropertyName: "suite", publicName: "suite", isSignal: true, isRequired: false, transformFunction: null }, validateRootForm: { classPropertyName: "validateRootForm", publicName: "validateRootForm", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootForm: { classPropertyName: "ngxValidateRootForm", publicName: "ngxValidateRootForm", isSignal: true, isRequired: false, transformFunction: null }, validateRootFormMode: { classPropertyName: "validateRootFormMode", publicName: "validateRootFormMode", isSignal: true, isRequired: false, transformFunction: null }, ngxValidateRootFormMode: { classPropertyName: "ngxValidateRootFormMode", publicName: "ngxValidateRootFormMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: ValidateRootFormDirective,
@@ -3475,7 +4041,7 @@ class ValidateRootFormDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ValidateRootFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ValidateRootFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[validateRootForm], form[ngxValidateRootForm]',
@@ -3702,7 +4268,7 @@ class ValidationConfigBuilder {
      */
     whenChanged(trigger, revalidate) {
         const deps = Array.isArray(revalidate) ? revalidate : [revalidate];
-        const existing = this.config[trigger] || [];
+        const existing = (this.config[trigger] || []);
         // Development mode warning for duplicate dependents
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
             const duplicates = deps.filter((d) => existing.includes(d));
@@ -4324,7 +4890,7 @@ function keepFieldsWhen(currentState, conditions) {
     const result = {};
     for (const fieldName of Object.keys(conditions)) {
         const shouldKeep = conditions[fieldName];
-        if (shouldKeep && fieldName in currentState) {
+        if (shouldKeep && Object.hasOwn(currentState, fieldName)) {
             result[fieldName] = currentState[fieldName];
         }
     }
@@ -4339,5 +4905,5 @@ function keepFieldsWhen(currentState, conditions) {
  * Generated bundle index. Do not edit.
  */
 
-export { ControlWrapperComponent, DEFAULT_FOCUS_SELECTOR, DEFAULT_INVALID_SELECTOR, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NGX_WARNING_DISPLAY_MODE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeAriaDescribedBy, mergeValuesAndRawValues, objectToArray, parseAriaIdTokens, parseFieldPath, resolveAssociationTargets, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
+export { ControlWrapperComponent, DEFAULT_FOCUS_SELECTOR, DEFAULT_INVALID_SELECTOR, FormControlStateDirective, FormDirective, FormErrorControlDirective, FormErrorDisplayDirective, FormGroupWrapperComponent, FormModelDirective, FormModelGroupDirective, NGX_EQUALITY_FN, NGX_ERROR_DISPLAY_MODE_TOKEN, NGX_VALIDATION_CONFIG_DEBOUNCE_TOKEN, NGX_WARNING_DISPLAY_MODE_TOKEN, NgxVestForms, ROOT_FORM, ROOT_FORM as ROOT_FORM_CONSTANT, SC_ERROR_DISPLAY_MODE_TOKEN, ValidateRootFormDirective, ValidationConfigBuilder, arrayToObject, clearFields, clearFieldsWhen, cloneDeep, createDebouncedPendingState, createEmptyFormState, createValidationConfig, deepArrayToObject, fastDeepEqual, getAllFormErrors, getFormControlField, getFormGroupField, keepFieldsWhen, mergeAriaDescribedBy, mergeValuesAndRawValues, objectToArray, parseAriaIdTokens, parseFieldPath, resolveAssociationTargets, set, setValueAtPath, shallowEqual, stringifyFieldPath, validateShape, vestForms, vestFormsViewProviders };
 //# sourceMappingURL=ngx-vest-forms.mjs.map