@ng-forge/dynamic-forms 0.1.3 → 0.3.0

package/fesm2022/{ng-forge-dynamic-forms-ng-forge-dynamic-forms-B_676NHl.mjs → ng-forge-dynamic-forms-ng-forge-dynamic-forms-CMSmISSp.mjs}

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { isSignal, computed, runInInjectionContext, InjectionToken, inject, isDevMode, signal, Injectable, untracked, input, linkedSignal, ChangeDetectionStrategy, Component, DestroyRef, Injector, model, afterNextRender, makeEnvironmentProviders, Pipe } from '@angular/core';
+import { isSignal, computed, runInInjectionContext, InjectionToken, inject, signal, Injectable, untracked, input, linkedSignal, ChangeDetectionStrategy, Component, DestroyRef, Injector, model, afterNextRender, makeEnvironmentProviders, Pipe } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
-import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateTree, form } from '@angular/forms/signals';
+import { submit, email, min, max, minLength, maxLength, pattern, required, validate, validateAsync, validateHttp, disabled, readonly, hidden, applyEach, applyWhenValue, applyWhen, apply, schema, validateTree, form, provideSignalFormsConfig } from '@angular/forms/signals';
 import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { defer, combineLatest, from, map, catchError, of, pipe, switchMap, forkJoin, scan, isObservable, firstValueFrom, EMPTY, Subject, filter } from 'rxjs';
 import { scan as scan$1, map as map$1, filter as filter$1, take, switchMap as switchMap$1, shareReplay } from 'rxjs/operators';
 import { explicitEffect } from 'ngxtension/explicit-effect';
+import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
 
 /**
  * Type guard to check if a value is an array of Signals.
@@ -73,27 +74,12 @@ function derivedFromDeferred(source, operator, options) {
  * // Returns: ''
  * ```
  *
- * @example
- * ```typescript
- * // Usage in component template
- * @Component({
- *   template: `
- *     <div [class]="getGridClassString(field)" class="form-field">
- *       <!-- Field content -->
- *     </div>
- *   `
- * })
- * export class FieldComponent {
- *   field: FieldDef<unknown>;
- *   getGridClassString = getGridClassString;
- * }
- * ```
- *
  * @public
  */
 function getGridClassString(fieldDef) {
-    if (typeof fieldDef.col === 'number' && Number.isInteger(fieldDef.col) && fieldDef.col > 0 && fieldDef.col <= 12) {
-        return `df-col-${fieldDef.col}`;
+    const col = fieldDef.col;
+    if (typeof col === 'number' && Number.isInteger(col) && col > 0 && col <= 12) {
+        return `df-col-${col}`;
     }
     return '';
 }
@@ -108,7 +94,7 @@ function getGridClassString(fieldDef) {
  * @returns Record of input names to values
  */
 function buildBaseInputs(fieldDef) {
-    const { key, label, className, tabIndex, props } = fieldDef;
+    const { key, label, className, tabIndex, props, meta } = fieldDef;
     const inputs = {};
     // Always include key - required by components for accessibility and identification
     inputs['key'] = key;
@@ -133,6 +119,9 @@ function buildBaseInputs(fieldDef) {
     if (props !== undefined) {
         inputs['props'] = props;
     }
+    if (meta !== undefined) {
+        inputs['meta'] = meta;
+    }
     return inputs;
 }
 /**
@@ -150,6 +139,43 @@ function baseFieldMapper(fieldDef) {
     return computed(() => buildBaseInputs(fieldDef));
 }
 
+/**
+ * Merges forwarded props into meta, with meta taking precedence.
+ *
+ * @param inputs The current inputs record
+ * @param propsToMeta Array of prop keys to forward to meta
+ * @returns Updated inputs record with merged meta
+ */
+function mergeForwardedPropsToMeta(inputs, propsToMeta) {
+    const props = inputs['props'];
+    if (!props || propsToMeta.length === 0) {
+        return inputs;
+    }
+    // Extract values to forward from props
+    // Values are typed as FieldMeta-compatible since they're forwarded attributes (type, rows, cols, etc.)
+    const forwardedValues = {};
+    for (const key of propsToMeta) {
+        const value = props[key];
+        if (value !== undefined && value !== null) {
+            // Props being forwarded are known HTML attributes (string, number, boolean)
+            forwardedValues[key] = value;
+        }
+    }
+    // If nothing to forward, return inputs unchanged
+    if (Object.keys(forwardedValues).length === 0) {
+        return inputs;
+    }
+    // Merge: forwarded props first, then meta (meta wins)
+    const existingMeta = inputs['meta'];
+    const mergedMeta = {
+        ...forwardedValues,
+        ...existingMeta,
+    };
+    return {
+        ...inputs,
+        meta: mergedMeta,
+    };
+}
 /**
  * Main field mapper function that uses the field registry to get the appropriate mapper
  * based on the field's type property.
@@ -157,30 +183,49 @@ function baseFieldMapper(fieldDef) {
  * This function must be called within an injection context where FIELD_SIGNAL_CONTEXT
  * is provided, as mappers inject the context to access form state.
  *
+ * For componentless fields (no loadComponent and no mapper), returns undefined
+ * since there's no component to bind inputs to. Callers should check for undefined
+ * and skip rendering logic for such fields.
+ *
+ * If the field type definition specifies `propsToMeta`, the specified props
+ * will be merged into the meta object (with meta taking precedence).
+ *
  * @param fieldDef The field definition to map
  * @param fieldRegistry The registry of field type definitions
- * @returns Signal containing Record of input names to values for ngComponentOutlet
+ * @returns Signal containing Record of input names to values, or undefined for componentless fields
  */
 function mapFieldToInputs(fieldDef, fieldRegistry) {
     // Get the field type definition from registry
     const fieldType = fieldRegistry.get(fieldDef.type);
-    if (fieldType?.mapper) {
-        // Use the registered mapper for this field type
-        // Mapper will inject FIELD_SIGNAL_CONTEXT internally
-        return fieldType.mapper(fieldDef);
+    // Componentless field (no mapper and no loadComponent) - nothing to map
+    if (fieldType && !fieldType.loadComponent && !fieldType.mapper) {
+        return undefined;
+    }
+    // Get the base mapper result
+    const mapperResult = fieldType?.mapper ? fieldType.mapper(fieldDef) : baseFieldMapper(fieldDef);
+    // If no props forwarding configured, return as-is
+    const propsToMeta = fieldType?.propsToMeta;
+    if (!propsToMeta || propsToMeta.length === 0) {
+        return mapperResult;
     }
-    // Fallback to base mapper
-    // Mapper will inject FIELD_SIGNAL_CONTEXT internally
-    return baseFieldMapper(fieldDef);
+    // Wrap in computed to merge forwarded props into meta
+    return computed(() => {
+        const inputs = mapperResult();
+        return mergeForwardedPropsToMeta(inputs, propsToMeta);
+    });
 }
 
 /**
  * Resolves a single field definition to a ResolvedField using RxJS.
  * Loads the component asynchronously and maps inputs in the injection context.
  *
+ * For componentless fields (e.g., hidden fields), returns undefined since
+ * there's nothing to render. These fields still contribute to form values
+ * through the form schema.
+ *
  * @param fieldDef - The field definition to resolve
  * @param context - The context containing dependencies for resolution
- * @returns Observable that emits ResolvedField or undefined on error
+ * @returns Observable that emits ResolvedField or undefined (for componentless fields or on error)
  */
 function resolveField(fieldDef, context) {
     return from(context.loadTypeComponent(fieldDef.type)).pipe(map((component) => {
@@ -188,8 +233,16 @@ function resolveField(fieldDef, context) {
         if (context.destroyRef.destroyed) {
             return undefined;
         }
+        // Componentless fields (e.g., hidden) return undefined - nothing to render
+        if (!component) {
+            return undefined;
+        }
         // Run mapper in injection context
         const inputs = runInInjectionContext(context.injector, () => mapFieldToInputs(fieldDef, context.registry));
+        // Fields with components should always have inputs (componentless fields are handled above)
+        if (!inputs) {
+            return undefined;
+        }
         return {
             key: fieldDef.key,
             component,
@@ -248,7 +301,7 @@ function createFieldResolutionPipe(getContext) {
  * @param action - The submission action function
  * @returns A wrapped function that always returns a Promise
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Form tree type is dynamic, action signatures vary
 function wrapSubmissionAction(action) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (formTree) => {
@@ -399,11 +452,11 @@ function memoize(fn, resolverOrOptions) {
     const cache = new Map();
     return ((...args) => {
         const key = resolver ? resolver(...args) : JSON.stringify(args);
-        if (cache.has(key)) {
-            const value = cache.get(key);
+        const cachedValue = cache.get(key);
+        if (cachedValue !== undefined) {
             cache.delete(key);
-            cache.set(key, value);
-            return value;
+            cache.set(key, cachedValue);
+            return cachedValue;
         }
         const result = fn(...args);
         if (cache.size >= maxSize) {
@@ -534,6 +587,21 @@ const FIELD_SIGNAL_CONTEXT = new InjectionToken('FIELD_SIGNAL_CONTEXT', {
  */
 const ARRAY_CONTEXT = new InjectionToken('ARRAY_CONTEXT');
 
+/**
+ * Base error class for all Dynamic Forms errors.
+ *
+ * This class centralizes the `[Dynamic Forms]` prefix, ensuring consistent
+ * error messaging across the library without requiring each error site to
+ * manually include the prefix.
+ */
+class DynamicFormError extends Error {
+    static PREFIX = '[Dynamic Forms]';
+    constructor(message) {
+        super(`${DynamicFormError.PREFIX} ${message}`);
+        this.name = 'DynamicFormError';
+    }
+}
+
 /**
  * Injection token for the global field type registry.
  *
@@ -646,37 +714,41 @@ function injectFieldRegistry() {
          * Handles both synchronous component references and asynchronous
          * dynamic imports. Automatically extracts default exports from ES modules.
          *
+         * Returns `undefined` for componentless field types (e.g., hidden fields)
+         * that only contribute to form values without rendering UI.
+         *
          * @param name - The name of the field type to load
-         * @returns Promise resolving to the component constructor
+         * @returns Promise resolving to the component constructor, or undefined for componentless fields
          * @throws {Error} When field type is not registered or loading fails
          *
          * @example
          * ```typescript
-         * try {
-         *   const InputComponent = await fieldRegistry.loadTypeComponent('input');
-         *   const componentRef = vcr.createComponent(InputComponent);
-         * } catch (error) {
-         *   console.error('Failed to load component:', error);
+         * const component = await fieldRegistry.loadTypeComponent('input');
+         * if (component) {
+         *   const componentRef = vcr.createComponent(component);
          * }
+         * // For componentless fields like 'hidden', component will be undefined
          * ```
          */
         async loadTypeComponent(name) {
             const fieldType = registry.get(name);
             if (!fieldType) {
-                throw new Error(`[Dynamic Forms] Field type "${name}" is not registered`);
+                throw new DynamicFormError(`Field type "${name}" is not registered`);
+            }
+            // Componentless field types (e.g., hidden) don't have loadComponent
+            if (!fieldType.loadComponent) {
+                return undefined;
             }
             // Handle async loading
-            if (fieldType.loadComponent) {
-                try {
-                    const result = await fieldType.loadComponent();
-                    // Handle ES module imports - extract default export if needed
-                    return result?.default || result;
-                }
-                catch (error) {
-                    throw new Error(`[Dynamic Forms] Failed to load component for field type "${name}": ${error}`);
-                }
+            try {
+                const result = await fieldType.loadComponent();
+                // Handle ES module imports - extract default export if needed
+                const moduleResult = result;
+                return (typeof moduleResult === 'object' && 'default' in moduleResult && moduleResult.default) || result;
+            }
+            catch (error) {
+                throw new DynamicFormError(`Failed to load component for field type "${name}": ${error}`);
             }
-            throw new Error(`[Dynamic Forms] Field type "${name}" has no component or loadComponent function`);
         },
         /**
          * Gets all registered field type definitions.
@@ -735,100 +807,13 @@ function injectFieldRegistry() {
     };
 }
 
-/**
- * Log levels for the dynamic forms logger.
- * Each level includes all levels above it (more severe).
- *
- * - Off: No logging
- * - Error: Only errors
- * - Warn: Errors + warnings
- * - Info: Errors + warnings + info
- * - Debug: All messages including debug
- */
-var LogLevel;
-(function (LogLevel) {
-    /** Disable all logging */
-    LogLevel[LogLevel["Off"] = 0] = "Off";
-    /** Only log errors */
-    LogLevel[LogLevel["Error"] = 1] = "Error";
-    /** Log errors and warnings */
-    LogLevel[LogLevel["Warn"] = 2] = "Warn";
-    /** Log errors, warnings, and info messages */
-    LogLevel[LogLevel["Info"] = 3] = "Info";
-    /** Log all messages including debug */
-    LogLevel[LogLevel["Debug"] = 4] = "Debug";
-})(LogLevel || (LogLevel = {}));
-
-/**
- * Console-based logger implementation.
- * Respects log level configuration to filter messages.
- */
-class ConsoleLogger {
-    level;
-    prefix = '[Dynamic Forms]';
-    constructor(level) {
-        this.level = level;
-    }
-    debug(message, ...args) {
-        if (this.level >= LogLevel.Debug) {
-            console.debug(this.prefix, message, ...args);
-        }
-    }
-    info(message, ...args) {
-        if (this.level >= LogLevel.Info) {
-            console.info(this.prefix, message, ...args);
-        }
-    }
-    warn(message, ...args) {
-        if (this.level >= LogLevel.Warn) {
-            console.warn(this.prefix, message, ...args);
-        }
-    }
-    error(message, ...args) {
-        if (this.level >= LogLevel.Error) {
-            console.error(this.prefix, message, ...args);
-        }
-    }
-}
-
-/**
- * No-operation logger implementation.
- * All methods are no-ops - used in production by default.
- */
-class NoopLogger {
-    debug() {
-        // Intentionally empty
-    }
-    info() {
-        // Intentionally empty
-    }
-    warn() {
-        // Intentionally empty
-    }
-    error() {
-        // Intentionally empty
-    }
-}
-
 /**
  * Injection token for the dynamic forms logger.
  *
- * Default behavior:
- * - Development mode: ConsoleLogger with LogLevel.Warn
- * - Production mode: NoopLogger (silent)
- *
- * Override by providing a custom logger via withLogger() feature
- * or by providing directly to this token.
+ * Provided by provideDynamicForm() with ConsoleLogger as default.
+ * Override with withLoggerConfig(false) to disable logging.
  */
-const DYNAMIC_FORM_LOGGER = new InjectionToken('DYNAMIC_FORM_LOGGER', {
-    providedIn: 'root',
-    factory: () => {
-        if (isDevMode()) {
-            return new ConsoleLogger(LogLevel.Warn);
-        }
-        return new NoopLogger();
-    },
-});
+const DynamicFormLogger = new InjectionToken('DynamicFormLogger');
 
 /**
  * Registry service that maintains references to root form fields.
@@ -987,10 +972,10 @@ class RootFormRegistryService {
         this._formValueSignals.set(new Map());
         this.formContexts.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RootFormRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RootFormRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RootFormRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RootFormRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1006,7 +991,7 @@ function isChildFieldContext(context) {
  */
 class FieldContextRegistryService {
     rootFormRegistry = inject(RootFormRegistryService);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     /**
      * Creates an evaluation context for a field by combining:
      * - The field's current value
@@ -1114,10 +1099,10 @@ class FieldContextRegistryService {
             logger: this.logger,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FieldContextRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FieldContextRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FieldContextRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FieldContextRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1457,10 +1442,10 @@ class FunctionRegistryService {
         this.clearAsyncValidators();
         this.clearHttpValidators();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FunctionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FunctionRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FunctionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FunctionRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -1607,7 +1592,7 @@ var TokenType;
 /**
  * Parser error with position information
  */
-class ExpressionParserError extends Error {
+class ExpressionParserError extends DynamicFormError {
     position;
     expression;
     constructor(message, position, expression) {
@@ -1705,7 +1690,7 @@ class Tokenizer {
                 this.position++;
             }
         }
-        throw new ExpressionParserError('[Dynamic Forms] Unterminated string literal', start, this.expression);
+        throw new ExpressionParserError('Unterminated string literal', start, this.expression);
     }
     readNumber() {
         const start = this.position;
@@ -1810,7 +1795,7 @@ class Tokenizer {
             case ']':
                 return { type: TokenType.RBRACKET, value: ']', position: start };
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unexpected character: ${char}`, start, this.expression);
+                throw new ExpressionParserError(`Unexpected character: ${char}`, start, this.expression);
         }
     }
 }
@@ -1834,7 +1819,7 @@ class Parser {
         this.tokens = tokenizer.tokenize();
         this.current = 0;
         if (this.isAtEnd()) {
-            throw new ExpressionParserError('[Dynamic Forms] Empty expression', 0, this.expression);
+            throw new ExpressionParserError('Empty expression', 0, this.expression);
         }
         return this.parseExpression();
     }
@@ -1909,7 +1894,7 @@ class Parser {
             if (this.match(TokenType.DOT)) {
                 // Member access: obj.property
                 if (!this.check(TokenType.IDENTIFIER)) {
-                    throw new ExpressionParserError('[Dynamic Forms] Expected property name after "."', this.peek().position, this.expression);
+                    throw new ExpressionParserError('Expected property name after "."', this.peek().position, this.expression);
                 }
                 const property = this.advance().value;
                 node = { type: 'MemberAccess', object: node, property };
@@ -1962,7 +1947,7 @@ class Parser {
             this.consume(TokenType.RPAREN, 'Expected ")" after expression');
             return expr;
         }
-        throw new ExpressionParserError(`[Dynamic Forms] Unexpected token: ${this.peek().value}`, this.peek().position, this.expression);
+        throw new ExpressionParserError(`Unexpected token: ${this.peek().value}`, this.peek().position, this.expression);
     }
     parseArgumentList() {
         const args = [];
@@ -2013,7 +1998,7 @@ class Parser {
     consume(type, message) {
         if (this.check(type))
             return this.advance();
-        throw new ExpressionParserError(`[Dynamic Forms] ${message}`, this.peek().position, this.expression);
+        throw new ExpressionParserError(message, this.peek().position, this.expression);
     }
 }
 
@@ -2165,7 +2150,7 @@ class Evaluator {
             case 'ArrayLiteral':
                 return this.evaluateArrayLiteral(node);
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unknown node type: ${node.type}`, 0, this.expression);
+                throw new ExpressionParserError(`Unknown node type: ${node.type}`, 0, this.expression);
         }
     }
     evaluateIdentifier(name) {
@@ -2181,7 +2166,7 @@ class Evaluator {
         }
         // Block access to dangerous properties that could leak information or enable attacks
         if (BLOCKED_PROPERTIES.has(node.property)) {
-            throw new ExpressionParserError(`[Dynamic Forms] Property "${node.property}" is not accessible for security reasons`, 0, this.expression);
+            throw new ExpressionParserError(`Property "${node.property}" is not accessible for security reasons`, 0, this.expression);
         }
         // Allow property access on plain objects and primitives
         if (typeof obj === 'object' || typeof obj === 'string' || typeof obj === 'number') {
@@ -2236,7 +2221,7 @@ class Evaluator {
             case '<=':
                 return left <= right;
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unknown binary operator: ${node.operator}`, 0, this.expression);
+                throw new ExpressionParserError(`Unknown binary operator: ${node.operator}`, 0, this.expression);
         }
     }
     evaluateUnaryOp(node) {
@@ -2249,23 +2234,23 @@ class Evaluator {
             case '+':
                 return +operand;
             default:
-                throw new ExpressionParserError(`[Dynamic Forms] Unknown unary operator: ${node.operator}`, 0, this.expression);
+                throw new ExpressionParserError(`Unknown unary operator: ${node.operator}`, 0, this.expression);
         }
     }
     evaluateCallExpression(node) {
         // Only allow method calls (member access), not arbitrary function calls
         if (node.callee.type !== 'MemberAccess') {
-            throw new ExpressionParserError('[Dynamic Forms] Only method calls are allowed, not arbitrary function calls', 0, this.expression);
+            throw new ExpressionParserError('Only method calls are allowed, not arbitrary function calls', 0, this.expression);
         }
         const obj = this.evaluate(node.callee.object);
         const methodName = node.callee.property;
         // Block access to dangerous properties (must check before method call)
         if (BLOCKED_PROPERTIES.has(methodName)) {
-            throw new ExpressionParserError(`[Dynamic Forms] Property "${methodName}" is not accessible for security reasons`, 0, this.expression);
+            throw new ExpressionParserError(`Property "${methodName}" is not accessible for security reasons`, 0, this.expression);
         }
         // Check if the method is in the instance method whitelist
         if (!this.isMethodSafe(obj, methodName)) {
-            throw new ExpressionParserError(`[Dynamic Forms] Method "${methodName}" is not allowed for security reasons`, 0, this.expression);
+            throw new ExpressionParserError(`Method "${methodName}" is not allowed for security reasons`, 0, this.expression);
         }
         // Evaluate arguments
         const args = node.arguments.map((arg) => this.evaluate(arg));
@@ -2383,7 +2368,7 @@ class ExpressionParser {
                 throw error;
             }
             // Wrap other errors for consistency
-            throw new ExpressionParserError(`[Dynamic Forms] Error evaluating expression: ${error instanceof Error ? error.message : String(error)}`, 0, expression);
+            throw new ExpressionParserError(`Error evaluating expression: ${error instanceof Error ? error.message : String(error)}`, 0, expression);
         }
     }
     /**
@@ -2478,6 +2463,56 @@ function evaluateOrCondition(expression, context) {
     return expression.conditions.some((condition) => evaluateCondition(condition, context));
 }
 
+/**
+ * Cache for memoized logic functions, keyed by injection context.
+ * Uses WeakMap with FunctionRegistryService as outer key to automatically clean up.
+ * Inner structure: Map<FieldContextRegistryService, Map<expressionKey, LogicFn>>
+ */
+const logicFunctionCache = new WeakMap();
+/**
+ * Serializes a value to a deterministic string for cache key generation.
+ * Unlike JSON.stringify, this sorts object keys to ensure consistent output
+ * regardless of property insertion order.
+ */
+function stableStringify(value) {
+    if (value === null || value === undefined) {
+        return String(value);
+    }
+    if (typeof value !== 'object') {
+        return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+        return '[' + value.map(stableStringify).join(',') + ']';
+    }
+    const obj = value;
+    const sortedKeys = Object.keys(obj).sort();
+    const pairs = sortedKeys.map((key) => JSON.stringify(key) + ':' + stableStringify(obj[key]));
+    return '{' + pairs.join(',') + '}';
+}
+/**
+ * Serializes a conditional expression to a deterministic string key for caching.
+ * Uses stable stringification to ensure equivalent objects produce the same key
+ * regardless of property order.
+ */
+function serializeExpression(expression) {
+    return stableStringify(expression);
+}
+/**
+ * Gets or creates the cache map for a specific injection context.
+ */
+function getContextCache(ctx) {
+    let outerCache = logicFunctionCache.get(ctx.functionRegistry);
+    if (!outerCache) {
+        outerCache = new WeakMap();
+        logicFunctionCache.set(ctx.functionRegistry, outerCache);
+    }
+    let innerCache = outerCache.get(ctx.fieldContextRegistry);
+    if (!innerCache) {
+        innerCache = new Map();
+        outerCache.set(ctx.fieldContextRegistry, innerCache);
+    }
+    return innerCache;
+}
 /**
  * Create a logic function from a conditional expression.
  *
@@ -2489,17 +2524,32 @@ function evaluateOrCondition(expression, context) {
  * NOTE: For validators, use createEvaluationContext directly (with untracked) to prevent
  * infinite reactive loops. Validators with cross-field dependencies should be hoisted
  * to form-level using validateTree.
+ *
+ * @param expression The conditional expression to evaluate
+ * @returns A LogicFn that evaluates the condition in the context of a field
  */
 function createLogicFunction(expression) {
     // Inject services during factory creation, not during execution
     const functionRegistry = inject(FunctionRegistryService);
     const fieldContextRegistry = inject(FieldContextRegistryService);
-    return (ctx) => {
+    // Get cache for this injection context
+    const contextCache = getContextCache({ functionRegistry, fieldContextRegistry });
+    // Generate cache key from serialized expression
+    const cacheKey = serializeExpression(expression);
+    // Check cache first
+    const cached = contextCache.get(cacheKey);
+    if (cached) {
+        return cached;
+    }
+    const fn = (ctx) => {
         // Create REACTIVE evaluation context for logic functions
         // This allows logic to re-evaluate when dependent fields change
         const evaluationContext = fieldContextRegistry.createReactiveEvaluationContext(ctx, functionRegistry.getCustomFunctions());
         return evaluateCondition(expression, evaluationContext);
     };
+    // Cache the function
+    contextCache.set(cacheKey, fn);
+    return fn;
 }
 
 /**
@@ -2512,11 +2562,6 @@ const dynamicValueFunctionCache = new WeakMap();
  * Create a dynamic value function from an expression string.
  * Uses secure AST-based parsing instead of eval() or new Function().
  *
- * Optimizations:
- * - Injects FieldContextRegistryService at creation time, not execution time
- * - Caches created functions by expression string per injection context
- * - Expression parsing is already cached by ExpressionParser's LRU cache
- *
  * @param expression The expression string to evaluate
  * @returns A LogicFn that evaluates the expression in the context of a field
  */
@@ -2524,7 +2569,7 @@ function createDynamicValueFunction(expression) {
     // Inject services during factory creation, not during execution
     // This captures the service instance in the closure
     const fieldContextRegistry = inject(FieldContextRegistryService);
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     // Get or create cache for this injection context
     let contextCache = dynamicValueFunctionCache.get(fieldContextRegistry);
     if (!contextCache) {
@@ -2891,7 +2936,7 @@ function applyCustomValidator(config, fieldPath) {
         validatorFn = createFunctionValidator(config);
     }
     else {
-        const logger = inject(DYNAMIC_FORM_LOGGER);
+        const logger = inject(DynamicFormLogger);
         logger.warn('Custom validator must have either "expression" or "functionName"');
         return;
     }
@@ -2903,7 +2948,7 @@ function applyCustomValidator(config, fieldPath) {
     });
 }
 function createFunctionValidator(config) {
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     const functionName = config.functionName;
     if (!functionName) {
         logger.warn('Custom validator missing functionName');
@@ -2919,7 +2964,7 @@ function createFunctionValidator(config) {
     return (ctx) => validatorFn(ctx, config.params);
 }
 function createExpressionValidator(config) {
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     const expression = config.expression;
     if (!expression) {
         logger.warn('Custom validator missing expression');
@@ -2930,7 +2975,7 @@ function createExpressionValidator(config) {
     return (ctx) => {
         try {
             const evaluationContext = fieldContextRegistry.createEvaluationContext(ctx, functionRegistry.getCustomFunctions());
-            const result = ExpressionParser.evaluate(config.expression, evaluationContext);
+            const result = ExpressionParser.evaluate(expression, evaluationContext);
             if (result) {
                 return null;
             }
@@ -2966,7 +3011,7 @@ function createExpressionValidator(config) {
  * - onError: Optional handler for resource errors
  */
 function applyAsyncValidator(config, fieldPath) {
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     const registry = inject(FunctionRegistryService);
     const validatorConfig = registry.getAsyncValidator(config.functionName);
     if (!validatorConfig) {
@@ -2996,7 +3041,7 @@ function applyAsyncValidator(config, fieldPath) {
  * - onError: Optional handler for HTTP errors
  */
 function applyHttpValidator(config, fieldPath) {
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     const registry = inject(FunctionRegistryService);
     const httpValidatorConfig = registry.getHttpValidator(config.functionName);
     if (!httpValidatorConfig) {
@@ -3085,10 +3130,10 @@ class SchemaRegistryService {
         }
         return schema;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaRegistryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SchemaRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaRegistryService, decorators: [{
             type: Injectable
         }] });
 
@@ -3135,7 +3180,7 @@ function createTypePredicateFunction(predicate, logger) {
  * 3. The actual schema application happens at runtime via the schema function
  */
 function applySchema(config, fieldPath) {
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     const schemaRegistry = inject(SchemaRegistryService);
     const schema = schemaRegistry.resolveSchema(config.schema);
     if (!schema) {
@@ -3196,6 +3241,7 @@ function createSchemaFunction(schema) {
 /**
  * Type guard for GroupField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isGroupField(field) {
     return field.type === 'group' && 'fields' in field;
 }
@@ -3203,16 +3249,58 @@ function isGroupField(field) {
 /**
  * Type guard for ArrayField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isArrayField(field) {
     return field.type === 'array' && 'fields' in field;
 }
 
+/**
+ * Type guard to check if a field is a hidden field.
+ *
+ * @param field - The field to check
+ * @returns True if the field is a HiddenField
+ */
+function isHiddenField(field) {
+    return field.type === 'hidden';
+}
+
 /**
  * Type guard for RowField with proper type narrowing
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type guard must accept any field type
 function isRowField(field) {
     return field.type === 'row' && 'fields' in field && Array.isArray(field.fields);
 }
+/**
+ * Validates that a row field doesn't contain hidden fields.
+ * Hidden fields are not allowed in rows because rows are for horizontal layouts,
+ * and hidden fields don't render anything.
+ *
+ * @param rowField The row field to validate
+ * @returns true if valid (no hidden fields), false otherwise
+ */
+function validateRowNesting(rowField) {
+    return !hasHiddenFields(rowField.fields);
+}
+/**
+ * Recursively checks if fields contain any hidden fields
+ * @param fields Array of field definitions to check
+ * @returns true if hidden fields found, false otherwise
+ */
+function hasHiddenFields(fields) {
+    for (const field of fields) {
+        if (isHiddenField(field)) {
+            return true;
+        }
+        // Check group fields for nested hidden fields
+        if (isGroupField(field)) {
+            if (hasHiddenFields(field.fields)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
 
 /**
  * Type guard for PageField with proper type narrowing
@@ -3610,74 +3698,9 @@ function isDisplayOnlyField(field) {
     return field.type === 'text' || isContainerField(field);
 }
 
-/**
- * Type guard to check if a value is a DynamicFormFeature
- */
-function isDynamicFormFeature(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        'ɵkind' in value &&
-        typeof value.ɵkind === 'string' &&
-        'ɵproviders' in value &&
-        Array.isArray(value.ɵproviders));
-}
-/**
- * Helper to create a feature with proper typing
- */
-function createFeature(kind, providers) {
-    return {
-        ɵkind: kind,
-        ɵproviders: providers,
-    };
-}
-
-/**
- * Configure logging for dynamic forms.
- *
- * @example
- * ```typescript
- * // Set log level
- * provideDynamicForm(
- *   ...withMaterialFields(),
- *   withLogger({ level: LogLevel.Debug })
- * )
- *
- * // Disable logging entirely
- * provideDynamicForm(
- *   ...withMaterialFields(),
- *   withLogger({ level: LogLevel.Off })
- * )
- *
- * // Custom logger implementation
- * provideDynamicForm(
- *   ...withMaterialFields(),
- *   withLogger({ logger: mySentryLogger })
- * )
- * ```
- *
- * @param options - Logger configuration options
- * @returns A DynamicFormFeature that configures logging
- */
-function withLogger(options = {}) {
-    let logger;
-    if (options.logger) {
-        // Use custom logger implementation
-        logger = options.logger;
-    }
-    else if (options.level === LogLevel.Off) {
-        // Explicit disable - use noop
-        logger = new NoopLogger();
-    }
-    else {
-        // Use console logger with specified level (default to Warn)
-        logger = new ConsoleLogger(options.level ?? LogLevel.Warn);
-    }
-    return createFeature('logger', [{ provide: DYNAMIC_FORM_LOGGER, useValue: logger }]);
-}
-
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function getFieldTreeByKey(ctx, key) {
-    return ctx.field[key];
+    return ctx.fieldTree[key];
 }
 /**
  * Creates an Angular signal forms schema from field definitions
@@ -3697,7 +3720,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
     // Inject services for cross-field validation
     // These will be available because createSchemaFromFields is called within runInInjectionContext
     const functionRegistry = inject(FunctionRegistryService);
-    const logger = inject(DYNAMIC_FORM_LOGGER);
+    const logger = inject(DynamicFormLogger);
     return schema((path) => {
         for (const fieldDef of fields) {
             const valueHandling = getFieldValueHandling(fieldDef.type, registry);
@@ -3739,7 +3762,7 @@ function createSchemaFromFields(fields, registry, crossFieldValidators) {
  * This is the key integration point that routes cross-field validation errors
  * to the appropriate target fields via Angular's form state system.
  *
- * The validateTree function allows returning errors with a `field` property
+ * The validateTree function allows returning errors with a `fieldTree` property
  * that targets specific fields, which Angular automatically routes to those
  * fields' errors() signal.
  *
@@ -3765,7 +3788,7 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, lo
         for (const entry of validators) {
             const { sourceFieldKey, config } = entry;
             try {
-                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions);
+                const error = evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger);
                 if (error) {
                     errors.push(error);
                 }
@@ -3778,7 +3801,7 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, lo
                     const customConfig = config;
                     errors.push({
                         kind: customConfig.kind || config.type || 'custom',
-                        field: targetField,
+                        fieldTree: targetField,
                     });
                 }
             }
@@ -3789,7 +3812,7 @@ function applyCrossFieldTreeValidator(rootPath, validators, functionRegistry, lo
 /**
  * Evaluates a single cross-field validator entry and returns an error if validation fails.
  */
-function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions) {
+function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, customFunctions, logger) {
     const { config } = entry;
     const fieldValue = formValue[sourceFieldKey];
     // Create evaluation context for condition/expression evaluation
@@ -3798,6 +3821,7 @@ function evaluateCrossFieldValidator(entry, formValue, sourceFieldKey, ctx, cust
         formValue,
         fieldPath: sourceFieldKey,
         customFunctions,
+        logger,
     };
     // Check if this is a custom validator (with expression) or a built-in validator (with when condition)
     if (config.type === 'custom') {
@@ -3815,7 +3839,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
     if (!config.expression) {
         return null;
     }
-    const { fieldValue, formValue } = evaluationContext;
+    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
     // First, evaluate the when condition if present
     // If the condition is false, the validator doesn't apply (validation passes)
     if (config.when) {
@@ -3823,8 +3847,8 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
             fieldValue,
             formValue,
             fieldPath: sourceFieldKey,
-            customFunctions: evaluationContext.customFunctions || {},
-            logger: evaluationContext.logger,
+            customFunctions: customFunctions || {},
+            logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3843,7 +3867,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
     }
     const errorObj = {
         kind: config.kind || 'custom',
-        field: targetField,
+        fieldTree: targetField,
     };
     // Evaluate and include errorParams for message interpolation
     if (config.errorParams) {
@@ -3863,7 +3887,7 @@ function evaluateCustomCrossFieldValidator(config, evaluationContext, sourceFiel
  * First checks the when condition, then applies the built-in validation logic.
  */
 function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFieldKey, ctx) {
-    const { fieldValue, formValue } = evaluationContext;
+    const { fieldValue, formValue, logger, customFunctions } = evaluationContext;
     // First, evaluate the when condition
     // If the condition is false, the validator doesn't apply (validation passes)
     if (config.when) {
@@ -3871,8 +3895,8 @@ function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFie
             fieldValue,
             formValue,
             fieldPath: sourceFieldKey,
-            customFunctions: evaluationContext.customFunctions || {},
-            logger: evaluationContext.logger,
+            customFunctions: customFunctions || {},
+            logger,
         });
         if (!conditionMet) {
             return null; // Condition not met, skip validation
@@ -3890,7 +3914,7 @@ function evaluateBuiltInCrossFieldValidator(config, evaluationContext, sourceFie
     }
     return {
         kind: config.type,
-        field: targetField,
+        fieldTree: targetField,
     };
 }
 /**
@@ -4038,6 +4062,7 @@ class EventBus {
      * eventBus.dispatch(CustomFormEvent);
      * ```
      */
+    // TypeScript limitation: Must use ConstructorParameters which relies on `any` in FormEventConstructor
     dispatch(eventConstructor, ...args) {
         this.pipeline$.next(new eventConstructor(...args));
     }
@@ -4079,10 +4104,10 @@ class EventBus {
         }
         return this.pipeline$.pipe(filter((event) => event.type === eventType));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EventBus });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EventBus, decorators: [{
             type: Injectable
         }] });
 
@@ -4126,7 +4151,7 @@ class ComponentInitializedEvent {
  * ```
  */
 function createInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan$1((count, _event) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
+    return eventBus.on('component-initialized').pipe(scan$1((count) => count + 1, 0), map$1((currentCount) => currentCount >= expectedCount), filter$1((isComplete) => isComplete));
 }
 /**
  * Creates an observable that tracks component initialization progress with detailed status.
@@ -4151,7 +4176,7 @@ function createInitializationTracker(eventBus, expectedCount) {
  * ```
  */
 function createDetailedInitializationTracker(eventBus, expectedCount) {
-    return eventBus.on('component-initialized').pipe(scan$1((count, _event) => count + 1, 0), map$1((currentCount) => ({
+    return eventBus.on('component-initialized').pipe(scan$1((count) => count + 1, 0), map$1((currentCount) => ({
         currentCount,
         expectedCount,
         isComplete: currentCount >= expectedCount,
@@ -4584,6 +4609,9 @@ function tryCreateSchemaEntry(fieldKey, config) {
 /** Converts a built-in validator with cross-field expression to a custom validator. */
 function convertBuiltInToCustomValidator(config) {
     const expression = config.expression;
+    if (!expression) {
+        throw new Error(`Built-in validator ${config.type} missing required expression for cross-field conversion`);
+    }
     let validationExpression;
     switch (config.type) {
         case 'min':
@@ -4619,7 +4647,8 @@ function convertBuiltInToCustomValidator(config) {
  * Comprehensive form configuration validator that checks:
  * 1. Form mode consistency (paged vs non-paged)
  * 2. Page nesting rules
- * 3. Field placement constraints
+ * 3. Row nesting rules (no hidden fields in rows)
+ * 4. Field placement constraints
  */
 class FormModeValidator {
     /**
@@ -4659,11 +4688,8 @@ class FormModeValidator {
     static validateFormConfigurationOrThrow(fields) {
         const result = this.validateFormConfiguration(fields);
         if (!result.isValid) {
-            const errorMessage = [
-                `[Dynamic Forms] Invalid form configuration (${result.mode} mode):`,
-                ...result.errors.map((error) => `  - ${error}`),
-            ].join('\n');
-            throw new Error(errorMessage);
+            const errorMessage = [`Invalid form configuration (${result.mode} mode):`, ...result.errors.map((error) => `  - ${error}`)].join('\n');
+            throw new DynamicFormError(errorMessage);
         }
     }
     /**
@@ -4689,6 +4715,47 @@ class FormModeValidator {
                 }
             }
         }
+        // Warn about hidden fields in rows (they work but don't render, which may be confusing)
+        const rowWarnings = this.collectRowHiddenFieldWarnings(fields);
+        warnings.push(...rowWarnings);
+        return warnings;
+    }
+    /**
+     * Recursively collects warnings for hidden fields inside rows
+     * @param fields The form field definitions to check
+     * @param path Current path for warning messages
+     * @returns Array of warning messages
+     */
+    static collectRowHiddenFieldWarnings(fields, path = '') {
+        if (!fields) {
+            return [];
+        }
+        const warnings = [];
+        for (let i = 0; i < fields.length; i++) {
+            const field = fields[i];
+            const fieldPath = path ? `${path}.fields[${i}]` : `fields[${i}]`;
+            const fieldKey = field.key || 'unknown';
+            if (isRowField(field)) {
+                if (!validateRowNesting(field)) {
+                    warnings.push(`Row field at ${fieldPath} (key: "${fieldKey}") contains hidden fields. ` +
+                        `Hidden fields in rows don't render anything - consider placing them outside the row.`);
+                }
+                // Continue checking nested rows within the row's children
+                warnings.push(...this.collectRowHiddenFieldWarnings(field.fields, fieldPath));
+            }
+            else if (isPageField(field)) {
+                // Check rows within pages
+                warnings.push(...this.collectRowHiddenFieldWarnings(field.fields, fieldPath));
+            }
+            else if (isGroupField(field)) {
+                // Check rows within groups
+                warnings.push(...this.collectRowHiddenFieldWarnings(field.fields, fieldPath));
+            }
+            else if (isArrayField(field)) {
+                // Check rows within array templates
+                warnings.push(...this.collectRowHiddenFieldWarnings(field.fields, fieldPath));
+            }
+        }
         return warnings;
     }
 }
@@ -4885,7 +4952,7 @@ class PageOrchestratorComponent {
     eventBus = inject(EventBus);
     fieldContextRegistry = inject(FieldContextRegistryService);
     functionRegistry = inject(FunctionRegistryService);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     /**
      * Array of page field definitions to render
      */
@@ -4898,6 +4965,7 @@ class PageOrchestratorComponent {
     /**
      * Field signal context for child fields
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- FieldSignalContext is contravariant in TModel, using any allows accepting any form type
     fieldSignalContext = input.required(...(ngDevMode ? [{ debugName: "fieldSignalContext" }] : []));
     /**
      * Computed signal that tracks which pages are hidden.
@@ -4978,7 +5046,7 @@ class PageOrchestratorComponent {
             const fieldKey = fieldDef.key;
             if (!fieldKey)
                 continue;
-            // Access the field from the form using dynamic key access
+            // Access the field from the form using bracket notation
             const field = form[fieldKey];
             if (field && typeof field === 'function') {
                 const fieldState = field();
@@ -5143,7 +5211,7 @@ class PageOrchestratorComponent {
         }
         // Check each hidden logic - if ANY condition is true, the page is hidden
         for (const logic of hiddenLogic) {
-            // Handle static boolean conditions
+            // Handle static boolean conditions (fast path)
             if (typeof logic.condition === 'boolean') {
                 if (logic.condition) {
                     return true;
@@ -5159,8 +5227,8 @@ class PageOrchestratorComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PageOrchestratorComponent, isStandalone: true, selector: "div[page-orchestrator]", inputs: { pageFields: { classPropertyName: "pageFields", publicName: "pageFields", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldSignalContext: { classPropertyName: "fieldSignalContext", publicName: "fieldSignalContext", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-current-page": "state().currentPageIndex", "attr.data-total-pages": "state().totalPages" }, classAttribute: "df-page-orchestrator" }, providers: [
             {
                 provide: FIELD_SIGNAL_CONTEXT,
                 useFactory: (orchestrator) => orchestrator.extendedFieldSignalContext(),
@@ -5190,9 +5258,9 @@ class PageOrchestratorComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs').then(m => m.default)]] });
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ng-forge-dynamic-forms-page-field.component-rdGD8A9d.mjs').then(m => m.default)], () => [import('./ng-forge-dynamic-forms-page-field.component-rdGD8A9d.mjs').then(m => m.default)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ngImport: i0, type: PageOrchestratorComponent, resolveDeferredDeps: () => [import('./ng-forge-dynamic-forms-page-field.component-rdGD8A9d.mjs').then(m => m.default)], resolveMetadata: PageFieldComponent => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'div[page-orchestrator]', imports: [PageFieldComponent], template: `
     @for (pageField of pageFields(); track pageField.key; let i = $index) {
@@ -5261,7 +5329,7 @@ class DynamicForm {
     rootFormRegistry = inject(RootFormRegistryService);
     functionRegistry = inject(FunctionRegistryService);
     schemaRegistry = inject(SchemaRegistryService);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -5629,13 +5697,13 @@ class DynamicForm {
     }
     onFormReset() {
         const defaults = this.defaultValues();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // Type assertion is necessary: Angular Signal Forms expects exact form value type
         this.form()().value.set(defaults);
         this.value.set(defaults);
     }
     onFormClear() {
         const emptyValue = {};
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // Type assertion is necessary: Angular Signal Forms expects exact form value type
         this.form()().value.set(emptyValue);
         this.value.set(emptyValue);
     }
@@ -5645,8 +5713,8 @@ class DynamicForm {
     ngOnDestroy() {
         this.rootFormRegistry.unregisterForm();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DynamicForm, isStandalone: true, selector: "form[dynamic-form]", inputs: { config: { classPropertyName: "config", publicName: "dynamic-form", isSignal: true, isRequired: true, transformFunction: null }, formOptions: { classPropertyName: "formOptions", publicName: "formOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted", reset: "reset", cleared: "cleared", events: "events", initialized: "initialized", onPageChange: "onPageChange", onPageNavigationStateChange: "onPageNavigationStateChange" }, host: { attributes: { "novalidate": "" }, listeners: { "submit": "onNativeSubmit($event)" }, properties: { "class.disabled": "disabled()", "class.df-form-paged": "formModeDetection().mode === \"paged\"", "class.df-form-non-paged": "formModeDetection().mode === \"non-paged\"", "attr.data-form-mode": "formModeDetection().mode" }, classAttribute: "df-dynamic-form df-form" }, providers: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], ngImport: i0, template: `
     @if (formModeDetection().mode === 'paged') {
       <div page-orchestrator [pageFields]="pageFieldDefinitions()" [form]="form()" [fieldSignalContext]="fieldSignalContext()"></div>
     } @else {
@@ -5656,7 +5724,7 @@ class DynamicForm {
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}:host>*{grid-column:1/-1}:host.df-form-spacing-custom{--df-grid-row-gap: var(--form-custom-spacing, 1.5rem)}:host.df-form-gap-none{--df-grid-row-gap: 0}:host.df-form-gap-xs{--df-grid-row-gap: .25rem}:host.df-form-gap-sm{--df-grid-row-gap: .5rem}:host.df-form-gap-md{--df-grid-row-gap: 1rem}:host.df-form-gap-lg{--df-grid-row-gap: 1.5rem}:host.df-form-gap-xl{--df-grid-row-gap: 2rem}:host.df-form-paged{--df-grid-row-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: PageOrchestratorComponent, selector: "div[page-orchestrator]", inputs: ["pageFields", "form", "fieldSignalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
             args: [{ selector: 'form[dynamic-form]', imports: [NgComponentOutlet, PageOrchestratorComponent], template: `
     @if (formModeDetection().mode === 'paged') {
@@ -5668,6 +5736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
     }
   `, providers: [EventBus, SchemaRegistryService, FunctionRegistryService, RootFormRegistryService, FieldContextRegistryService], host: {
                         class: 'df-dynamic-form df-form',
+                        novalidate: '', // Disable browser validation - Angular Signal Forms handles validation
                         '[class.disabled]': 'disabled()',
                         '[class.df-form-paged]': 'formModeDetection().mode === "paged"',
                         '[class.df-form-non-paged]': 'formModeDetection().mode === "non-paged"',
@@ -5759,7 +5828,6 @@ function pageFieldMapper(fieldDef) {
 function textFieldMapper(fieldDef) {
     const fieldContextRegistry = inject(FieldContextRegistryService);
     const functionRegistry = inject(FunctionRegistryService);
-    const logger = inject(DYNAMIC_FORM_LOGGER);
     // Build base inputs (static, from field definition)
     const baseInputs = buildBaseInputs(fieldDef);
     // Create computed signal for hidden state based on logic configuration
@@ -5814,6 +5882,13 @@ function textFieldMapper(fieldDef) {
  * { type: 'page', key: 'step1', fields: [...] }
  * ```
  */
+/**
+ * Built-in field types provided by the dynamic form library.
+ *
+ * Each field type is validated at compile time using satisfies, ensuring
+ * type safety of the mapper function while allowing the array to be typed
+ * as FieldTypeDefinition[] for consumer flexibility.
+ */
 const BUILT_IN_FIELDS = [
     {
         name: 'row',
@@ -5835,25 +5910,70 @@ const BUILT_IN_FIELDS = [
     },
     {
         name: 'page',
-        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-YHFQcpCS.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-page-field.component-rdGD8A9d.mjs'),
         mapper: pageFieldMapper,
         valueHandling: 'flatten',
     },
     {
         name: 'text',
-        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-CiYq73aF.mjs'),
+        loadComponent: () => import('./ng-forge-dynamic-forms-text-field.component-CDxka2KD.mjs'),
         mapper: textFieldMapper,
         valueHandling: 'exclude',
     },
+    {
+        name: 'hidden',
+        // Componentless field - no loadComponent or mapper needed
+        valueHandling: 'include',
+    },
 ];
 
+/**
+ * Type guard to check if a value is a DynamicFormFeature
+ */
+function isDynamicFormFeature(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'ɵkind' in value &&
+        typeof value.ɵkind === 'string' &&
+        'ɵproviders' in value &&
+        Array.isArray(value.ɵproviders));
+}
+/**
+ * Helper to create a feature with proper typing
+ */
+function createFeature(kind, providers) {
+    return {
+        ɵkind: kind,
+        ɵproviders: providers,
+    };
+}
+
+/**
+ * Console-based logger implementation.
+ */
+class ConsoleLogger {
+    prefix = '[Dynamic Forms]';
+    debug(message, ...args) {
+        console.debug(this.prefix, message, ...args);
+    }
+    info(message, ...args) {
+        console.info(this.prefix, message, ...args);
+    }
+    warn(message, ...args) {
+        console.warn(this.prefix, message, ...args);
+    }
+    error(message, ...args) {
+        console.error(this.prefix, message, ...args);
+    }
+}
+
 /**
  * Provider function to configure the dynamic form system with field types and options.
  *
  * This function creates environment providers that can be used at application or route level
  * to register field types. It provides type-safe field registration with automatic type inference.
  *
- * @param items - Field type definitions and/or features (like withLogger)
+ * @param items - Field type definitions and/or features (like withLoggerConfig)
  * @returns Environment providers for dependency injection with type inference
  *
  * @example
@@ -5868,12 +5988,12 @@ const BUILT_IN_FIELDS = [
  *
  * @example
  * ```typescript
- * // With logging configuration
+ * // Disable logging
  * bootstrapApplication(AppComponent, {
  *   providers: [
  *     provideDynamicForm(
  *       ...withMaterialFields(),
- *       withLogger({ level: LogLevel.Debug })
+ *       withLoggerConfig(false)
  *     )
  *   ]
  * });
@@ -5881,18 +6001,6 @@ const BUILT_IN_FIELDS = [
  *
  * @example
  * ```typescript
- * // Route-level setup
- * const routes: Routes = [
- *   {
- *     path: 'form',
- *     component: FormComponent,
- *     providers: [provideDynamicForm(...withMaterialFields())]
- *   }
- * ];
- * ```
- *
- * @example
- * ```typescript
  * // Custom field types with type inference
  * import { CustomFieldType, AnotherFieldType } from './custom-fields';
  *
@@ -5922,14 +6030,20 @@ function provideDynamicForm(...items) {
     });
     // Extract providers from features
     const featureProviders = [];
+    const hasLoggerFeature = features.some((feature) => feature.ɵkind === 'logger');
     features.forEach((feature) => {
         featureProviders.push(...feature.ɵproviders);
     });
+    // Default logger provider (ConsoleLogger) if no logger feature was provided
+    const defaultLoggerProvider = hasLoggerFeature ? [] : [{ provide: DynamicFormLogger, useValue: new ConsoleLogger() }];
     return makeEnvironmentProviders([
+        ...defaultLoggerProvider,
+        // Always provide default Signal Forms classes (ng-touched, ng-invalid, etc.)
+        provideSignalFormsConfig({ classes: NG_STATUS_CLASSES }),
         {
             provide: FIELD_REGISTRY,
             useFactory: () => {
-                const logger = inject(DYNAMIC_FORM_LOGGER);
+                const logger = inject(DynamicFormLogger);
                 const registry = new Map();
                 // Add custom field types
                 fields.forEach((fieldType) => {
@@ -5946,6 +6060,55 @@ function provideDynamicForm(...items) {
     ]);
 }
 
+/**
+ * No-operation logger implementation.
+ * All methods are no-ops - used in production by default.
+ */
+class NoopLogger {
+    debug() {
+        // Intentionally empty
+    }
+    info() {
+        // Intentionally empty
+    }
+    warn() {
+        // Intentionally empty
+    }
+    error() {
+        // Intentionally empty
+    }
+}
+
+/**
+ * Configure logging for dynamic forms.
+ *
+ * By default, logging is enabled (ConsoleLogger). Use this feature to disable logging
+ * or configure it conditionally.
+ *
+ * @example
+ * ```typescript
+ * // Disable logging
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLoggerConfig(false)
+ * )
+ *
+ * // Conditional logging (e.g., only in dev mode)
+ * provideDynamicForm(
+ *   ...withMaterialFields(),
+ *   withLoggerConfig(() => isDevMode())
+ * )
+ * ```
+ *
+ * @param enabled - Whether logging is enabled. Can be a boolean or a function that returns a boolean. Defaults to true.
+ * @returns A DynamicFormFeature that configures logging
+ */
+function withLoggerConfig(enabled = true) {
+    const isEnabled = typeof enabled === 'function' ? enabled() : enabled;
+    const logger = isEnabled ? new ConsoleLogger() : new NoopLogger();
+    return createFeature('logger', [{ provide: DynamicFormLogger, useValue: logger }]);
+}
+
 /**
  * No-op logger for when no logger is provided.
  * Used as fallback in button logic evaluation to avoid breaking downstream packages.
@@ -6222,6 +6385,51 @@ function dynamicTextToObservable(value, injector) {
     return of(String(value));
 }
 
+/**
+ * Applies meta attributes to a DOM element and tracks which attributes were applied.
+ *
+ * This utility handles:
+ * - Removing previously applied attributes that are no longer in meta
+ * - Setting new attributes from meta
+ * - Converting all values to strings via String()
+ *
+ * @param element - The DOM element to apply attributes to
+ * @param meta - The meta object containing attributes to apply
+ * @param previouslyApplied - Set of attribute names that were previously applied
+ * @returns A new Set containing the attribute names that were applied
+ *
+ * @example
+ * ```typescript
+ * private appliedAttrs = new Set<string>();
+ *
+ * explicitEffect([this.meta], ([meta]) => {
+ *   const input = this.el.nativeElement.querySelector('input');
+ *   if (input) {
+ *     this.appliedAttrs = applyMetaToElement(input, meta, this.appliedAttrs);
+ *   }
+ * });
+ * ```
+ */
+function applyMetaToElement(element, meta, previouslyApplied) {
+    const newApplied = new Set();
+    // Remove old attributes no longer in meta
+    for (const attr of previouslyApplied) {
+        if (!meta || !(attr in meta) || meta[attr] === undefined) {
+            element.removeAttribute(attr);
+        }
+    }
+    if (!meta)
+        return newApplied;
+    // Apply new attributes
+    for (const [key, value] of Object.entries(meta)) {
+        if (value === undefined || value === null)
+            continue;
+        element.setAttribute(key, String(value));
+        newApplied.add(key);
+    }
+    return newApplied;
+}
+
 /**
  * Pipe that handles dynamic text resolution with support for static strings,
  * Observables, and Signals.
@@ -6262,10 +6470,10 @@ class DynamicTextPipe {
         }
         return of(value || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DynamicTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: DynamicTextPipe, isStandalone: true, name: "dynamicText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DynamicTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DynamicTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicText',
@@ -6311,7 +6519,7 @@ class RowFieldComponent {
     fieldRegistry = injectFieldRegistry();
     injector = inject(Injector);
     eventBus = inject(EventBus);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6368,14 +6576,14 @@ class RowFieldComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-row" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RowFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RowFieldComponent, isStandalone: true, selector: "div[row-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-row" }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:flex;flex-wrap:wrap;gap:var(--df-grid-gap);align-items:flex-start;width:100%}:host ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto}:host ::ng-deep>.df-col-1{flex:0 0 calc(8.3333333333% - var(--df-grid-gap) * .9166666667);max-width:calc(8.3333333333% - var(--df-grid-gap) * .9166666667)}:host ::ng-deep>.df-col-2{flex:0 0 calc(16.6666666667% - var(--df-grid-gap) * .8333333333);max-width:calc(16.6666666667% - var(--df-grid-gap) * .8333333333)}:host ::ng-deep>.df-col-3{flex:0 0 calc(25% - var(--df-grid-gap) * .75);max-width:calc(25% - var(--df-grid-gap) * .75)}:host ::ng-deep>.df-col-4{flex:0 0 calc(33.3333333333% - var(--df-grid-gap) * .6666666667);max-width:calc(33.3333333333% - var(--df-grid-gap) * .6666666667)}:host ::ng-deep>.df-col-5{flex:0 0 calc(41.6666666667% - var(--df-grid-gap) * .5833333333);max-width:calc(41.6666666667% - var(--df-grid-gap) * .5833333333)}:host ::ng-deep>.df-col-6{flex:0 0 calc(50% - var(--df-grid-gap) * .5);max-width:calc(50% - var(--df-grid-gap) * .5)}:host ::ng-deep>.df-col-7{flex:0 0 calc(58.3333333333% - var(--df-grid-gap) * .4166666667);max-width:calc(58.3333333333% - var(--df-grid-gap) * .4166666667)}:host ::ng-deep>.df-col-8{flex:0 0 calc(66.6666666667% - var(--df-grid-gap) * .3333333333);max-width:calc(66.6666666667% - var(--df-grid-gap) * .3333333333)}:host ::ng-deep>.df-col-9{flex:0 0 calc(75% - var(--df-grid-gap) * .25);max-width:calc(75% - var(--df-grid-gap) * .25)}:host ::ng-deep>.df-col-10{flex:0 0 calc(83.3333333333% - var(--df-grid-gap) * .1666666667);max-width:calc(83.3333333333% - var(--df-grid-gap) * .1666666667)}:host ::ng-deep>.df-col-11{flex:0 0 calc(91.6666666667% - var(--df-grid-gap) * .0833333333);max-width:calc(91.6666666667% - var(--df-grid-gap) * .0833333333)}:host ::ng-deep>.df-col-12{flex:0 0 calc(100% - var(--df-grid-gap) * 0);max-width:calc(100% - var(--df-grid-gap) * 0)}:host.df-gap-custom{--df-grid-gap: var(--row-custom-gap, 1rem)}@media(max-width:576px){:host.df-row-mobile-stack{flex-direction:column}:host.df-row-mobile-stack ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:577px)and (max-width:768px){:host.df-row-tablet-2col ::ng-deep>*{flex:0 0 calc(50% - var(--df-grid-gap) / 2);max-width:calc(50% - var(--df-grid-gap) / 2)}}@media(max-width:576px){:host{flex-direction:column}:host ::ng-deep>*{flex:0 0 100%!important;max-width:100%!important}:host.df-row-mobile-keep-cols{flex-direction:row}:host.df-row-mobile-keep-cols ::ng-deep>*:not([class*=df-col-]){flex:0 0 auto!important;max-width:none!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RowFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RowFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[row-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6411,7 +6619,7 @@ class GroupFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     injector = inject(Injector);
     eventBus = inject(EventBus);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Memoized Functions
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6490,7 +6698,7 @@ class GroupFieldComponent {
         const groupKey = this.field().key;
         const child = parentForm[groupKey];
         if (!child) {
-            throw new Error(`[Dynamic Forms] Group field "${groupKey}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
+            throw new DynamicFormError(`Group field "${groupKey}" not found in parent form. ` + `Ensure the parent form schema includes this group field.`);
         }
         return child;
     }, ...(ngDevMode ? [{ debugName: "nestedFieldTree" }] : []));
@@ -6545,14 +6753,14 @@ class GroupFieldComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: GroupFieldComponent, isStandalone: true, selector: "fieldset[group-field]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { validityChange: "validityChange", dirtyChange: "dirtyChange", submitted: "submitted" }, host: { attributes: { "role": "group" }, properties: { "class.disabled": "disabled()", "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-group" }, ngImport: i0, template: `
     @for (field of resolvedFields(); track field.key) {
       <ng-container *ngComponentOutlet="field.component; injector: field.injector; inputs: field.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{border:none;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[group-field]', imports: [NgComponentOutlet], template: `
     @for (field of resolvedFields(); track field.key) {
@@ -6754,6 +6962,10 @@ function resolveArrayItem(options) {
         if (destroyRef.destroyed) {
             return undefined;
         }
+        // Componentless fields (e.g., hidden) return undefined - nothing to render
+        if (!component) {
+            return undefined;
+        }
         const itemId = generateArrayItemId();
         const indexSignal = linkedSignal(() => {
             const order = itemOrderSignal();
@@ -6769,16 +6981,19 @@ function resolveArrayItem(options) {
             registry,
             arrayField,
         });
+        // Array item templates should always have inputs (componentless fields are handled above)
+        if (!inputs) {
+            return undefined;
+        }
         return {
             id: itemId,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            component: component,
+            component,
             injector,
             inputs,
         };
     }), catchError((error) => {
         if (!destroyRef.destroyed) {
-            const logger = parentInjector.get(DYNAMIC_FORM_LOGGER);
+            const logger = parentInjector.get(DynamicFormLogger);
             logger.error(`Failed to load component for field type '${template.type}' at index ${index} ` +
                 `within array '${arrayField.key}'. Ensure the field type is registered in your field registry.`, error);
         }
@@ -6802,7 +7017,7 @@ class ArrayFieldComponent {
     parentFieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     parentInjector = inject(Injector);
     eventBus = inject(EventBus);
-    logger = inject(DYNAMIC_FORM_LOGGER);
+    logger = inject(DynamicFormLogger);
     // ─────────────────────────────────────────────────────────────────────────────
     // Inputs
     // ─────────────────────────────────────────────────────────────────────────────
@@ -6978,14 +7193,14 @@ class ArrayFieldComponent {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         parentForm().value.set({ ...currentValue, [arrayKey]: newArray });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-array" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()" }, classAttribute: "df-field df-array" }, ngImport: i0, template: `
     @for (item of resolvedItems(); track item.id) {
       <ng-container *ngComponentOutlet="item.component; injector: item.injector; inputs: item.inputs()" />
     }
   `, isInline: true, styles: [":host,.df-form{--df-grid-columns: 12;--df-grid-gap: .5rem;--df-grid-row-gap: .5rem;--df-breakpoint-sm: 576px;--df-breakpoint-md: 768px;--df-breakpoint-lg: 992px;--df-breakpoint-xl: 1200px;--df-grid-gap-sm: .5rem;--df-grid-gap-md: .5rem;--df-grid-gap-lg: .5rem;--df-grid-gap-xl: .5rem;--df-grid-row-gap-sm: .5rem;--df-grid-row-gap-md: .5rem;--df-grid-row-gap-lg: .5rem;--df-grid-row-gap-xl: .5rem;--df-group-gap: var(--df-grid-gap);--df-group-padding: var(--df-grid-gap)}.df-form{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap);width:100%}.df-form>*{grid-column:1/-1}.df-row{display:grid;grid-template-columns:repeat(var(--df-grid-columns, 12),1fr);gap:var(--df-grid-gap);align-items:start;width:100%}.df-row>*:not([class*=df-col-]){grid-column:1/-1}.df-col-1{grid-column:span 1}.df-col-2{grid-column:span 2}.df-col-3{grid-column:span 3}.df-col-4{grid-column:span 4}.df-col-5{grid-column:span 5}.df-col-6{grid-column:span 6}.df-col-7{grid-column:span 7}.df-col-8{grid-column:span 8}.df-col-9{grid-column:span 9}.df-col-10{grid-column:span 10}.df-col-11{grid-column:span 11}.df-col-12{grid-column:span 12}.df-col-auto{grid-column:span auto;width:auto}.df-col-full{grid-column:1/-1}.df-col-start-1{grid-column-start:1}.df-col-start-2{grid-column-start:2}.df-col-start-3{grid-column-start:3}.df-col-start-4{grid-column-start:4}.df-col-start-5{grid-column-start:5}.df-col-start-6{grid-column-start:6}.df-col-start-7{grid-column-start:7}.df-col-start-8{grid-column-start:8}.df-col-start-9{grid-column-start:9}.df-col-start-10{grid-column-start:10}.df-col-start-11{grid-column-start:11}.df-col-start-12{grid-column-start:12}.df-col-end-1{grid-column-end:1}.df-col-end-2{grid-column-end:2}.df-col-end-3{grid-column-end:3}.df-col-end-4{grid-column-end:4}.df-col-end-5{grid-column-end:5}.df-col-end-6{grid-column-end:6}.df-col-end-7{grid-column-end:7}.df-col-end-8{grid-column-end:8}.df-col-end-9{grid-column-end:9}.df-col-end-10{grid-column-end:10}.df-col-end-11{grid-column-end:11}.df-col-end-12{grid-column-end:12}.df-col-end-13{grid-column-end:13}@media(max-width:576px){.df-form{--df-grid-gap: var(--df-grid-gap-sm);--df-grid-row-gap: var(--df-grid-row-gap-sm)}.df-row{grid-template-columns:1fr}.df-row>*{grid-column:1/-1!important}.df-row.df-row-mobile-keep-cols{grid-template-columns:repeat(var(--df-grid-columns),1fr)}.df-row.df-row-mobile-keep-cols>*{grid-column:revert!important}}@media(min-width:577px)and (max-width:768px){.df-form{--df-grid-gap: var(--df-grid-gap-md);--df-grid-row-gap: var(--df-grid-row-gap-md)}.df-row{--df-grid-columns: 6}.df-col-sm-1{grid-column:span 1}.df-col-sm-2{grid-column:span 2}.df-col-sm-3{grid-column:span 3}.df-col-sm-4{grid-column:span 4}.df-col-sm-5{grid-column:span 5}.df-col-sm-6{grid-column:span 6}.df-col-sm-full{grid-column:1/-1}}@media(min-width:769px)and (max-width:992px){.df-form{--df-grid-gap: var(--df-grid-gap-lg);--df-grid-row-gap: var(--df-grid-row-gap-lg)}.df-col-md-1{grid-column:span 1}.df-col-md-2{grid-column:span 2}.df-col-md-3{grid-column:span 3}.df-col-md-4{grid-column:span 4}.df-col-md-5{grid-column:span 5}.df-col-md-6{grid-column:span 6}.df-col-md-7{grid-column:span 7}.df-col-md-8{grid-column:span 8}.df-col-md-9{grid-column:span 9}.df-col-md-10{grid-column:span 10}.df-col-md-11{grid-column:span 11}.df-col-md-12{grid-column:span 12}.df-col-md-full{grid-column:1/-1}}@media(min-width:993px){.df-form{--df-grid-gap: var(--df-grid-gap-xl);--df-grid-row-gap: var(--df-grid-row-gap-xl)}.df-col-lg-1{grid-column:span 1}.df-col-lg-2{grid-column:span 2}.df-col-lg-3{grid-column:span 3}.df-col-lg-4{grid-column:span 4}.df-col-lg-5{grid-column:span 5}.df-col-lg-6{grid-column:span 6}.df-col-lg-7{grid-column:span 7}.df-col-lg-8{grid-column:span 8}.df-col-lg-9{grid-column:span 9}.df-col-lg-10{grid-column:span 10}.df-col-lg-11{grid-column:span 11}.df-col-lg-12{grid-column:span 12}.df-col-lg-full{grid-column:1/-1}}.df-gap-none{--df-grid-gap: 0}.df-gap-xs{--df-grid-gap: .25rem}.df-gap-sm{--df-grid-gap: .5rem}.df-gap-md{--df-grid-gap: 1rem}.df-gap-lg{--df-grid-gap: 1.5rem}.df-gap-xl{--df-grid-gap: 2rem}.df-row-gap-none{--df-grid-row-gap: 0}.df-row-gap-xs{--df-grid-row-gap: .25rem}.df-row-gap-sm{--df-grid-row-gap: .5rem}.df-row-gap-md{--df-grid-row-gap: 1rem}.df-row-gap-lg{--df-grid-row-gap: 1.5rem}.df-row-gap-xl{--df-grid-row-gap: 2rem}.df-field{display:block;width:100%;min-width:0;overflow:hidden;margin:0}.df-group,.df-page{display:block;width:100%}.df-form.disabled,.df-row.disabled,.df-field.disabled{opacity:.6;pointer-events:none}.df-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-sr-only-focusable:focus,.df-sr-only-focusable:active{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.df-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.df-form :focus-visible{outline:2px solid var(--df-focus-color, #005fcc);outline-offset:2px}.df-group:focus-within{outline:1px dashed var(--df-focus-color, #005fcc);outline-offset:4px}:host{display:grid;grid-template-columns:1fr;gap:var(--df-grid-row-gap, .5rem);width:100%}:host>*{grid-column:1/-1}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-field', imports: [NgComponentOutlet], template: `
     @for (item of resolvedItems(); track item.id) {
@@ -7081,16 +7296,31 @@ function extractErrorParams(error) {
         params.min = error.min;
     if ('max' in error)
         params.max = error.max;
-    if ('requiredLength' in error)
-        params.requiredLength = error.requiredLength;
-    if ('actualLength' in error)
-        params.actualLength = error.actualLength;
     if ('pattern' in error)
         params.pattern = error.pattern;
     if ('actual' in error)
         params.actual = error.actual;
     if ('expected' in error)
         params.expected = error.expected;
+    // Handle length validation parameters
+    // Angular Signal Forms uses 'minLength'/'maxLength' properties
+    // Angular Classic Forms uses 'requiredLength'/'actualLength' properties
+    // We support both formats and normalize to 'requiredLength' for message templates
+    if ('requiredLength' in error) {
+        params.requiredLength = error.requiredLength;
+    }
+    else if ('minLength' in error) {
+        // Angular Signal Forms: minLength property maps to requiredLength for templates
+        params.requiredLength = error.minLength;
+        params.minLength = error.minLength;
+    }
+    else if ('maxLength' in error) {
+        // Angular Signal Forms: maxLength property maps to requiredLength for templates
+        params.requiredLength = error.maxLength;
+        params.maxLength = error.maxLength;
+    }
+    if ('actualLength' in error)
+        params.actualLength = error.actualLength;
     // Include all custom properties from error object (for custom validators)
     // Skip 'kind' as it's the error type identifier, not a parameter
     Object.keys(error).forEach((key) => {
@@ -7132,5 +7362,5 @@ function extractErrorParams(error) {
  * Generated bundle index. Do not edit.
  */
 
-export { omit as $, AddArrayItemEvent as A, buildBaseInputs as B, arrayFieldMapper as C, DYNAMIC_FORM_LOGGER as D, EventBus as E, FormClearEvent as F, groupFieldMapper as G, pageFieldMapper as H, rowFieldMapper as I, textFieldMapper as J, FIELD_REGISTRY as K, LogLevel as L, ARRAY_CONTEXT as M, NoopLogger as N, FIELD_SIGNAL_CONTEXT as O, PageChangeEvent as P, dynamicTextToObservable as Q, RemoveArrayItemEvent as R, SubmitEvent as S, ArrayFieldComponent as T, GroupFieldComponent as U, RowFieldComponent as V, applyValidator as W, applyValidators as X, getArrayLength as Y, resolveTokens as Z, BUILT_IN_FIELDS as _, DynamicTextPipe as a, interpolateParams as a0, DynamicForm as b, createFieldResolutionPipe as c, derivedFromDeferred as d, emitComponentInitialized as e, isFormStateCondition as f, resolveNextButtonDisabled as g, isCheckedField as h, injectFieldRegistry as i, isValueField as j, isRowField as k, isArrayField as l, isContainerField as m, isDisplayOnlyField as n, isGroupField as o, provideDynamicForm as p, isLeafField as q, resolveSubmitButtonDisabled as r, isPageField as s, isValueBearingField as t, FormResetEvent as u, validatePageNesting as v, withLogger as w, NextPageEvent as x, PreviousPageEvent as y, baseFieldMapper as z };
-//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-B_676NHl.mjs.map
+export { BUILT_IN_FIELDS as $, AddArrayItemEvent as A, baseFieldMapper as B, ConsoleLogger as C, DynamicFormLogger as D, EventBus as E, FormClearEvent as F, buildBaseInputs as G, arrayFieldMapper as H, groupFieldMapper as I, pageFieldMapper as J, rowFieldMapper as K, textFieldMapper as L, FIELD_REGISTRY as M, NoopLogger as N, ARRAY_CONTEXT as O, PageChangeEvent as P, FIELD_SIGNAL_CONTEXT as Q, RemoveArrayItemEvent as R, SubmitEvent as S, dynamicTextToObservable as T, ArrayFieldComponent as U, GroupFieldComponent as V, RowFieldComponent as W, applyValidator as X, applyValidators as Y, getArrayLength as Z, resolveTokens as _, DynamicTextPipe as a, omit as a0, interpolateParams as a1, applyMetaToElement as a2, DynamicForm as b, createFieldResolutionPipe as c, derivedFromDeferred as d, emitComponentInitialized as e, isFormStateCondition as f, resolveNextButtonDisabled as g, isCheckedField as h, injectFieldRegistry as i, isValueField as j, isRowField as k, isArrayField as l, isContainerField as m, isDisplayOnlyField as n, isGroupField as o, provideDynamicForm as p, isLeafField as q, resolveSubmitButtonDisabled as r, isPageField as s, isValueBearingField as t, FormResetEvent as u, validatePageNesting as v, withLoggerConfig as w, NextPageEvent as x, PreviousPageEvent as y, DynamicFormError as z };
+//# sourceMappingURL=ng-forge-dynamic-forms-ng-forge-dynamic-forms-CMSmISSp.mjs.map