@db-ux/ngx-core-components 4.13.1-angular-signal-forms5-fe63b55 → 4.13.1-angular-signal-forms9-42cbbed

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -144,8 +144,36 @@ const stringPropVisible = (givenString, showString) => {
     return toBool(showString) && Boolean(givenString);
 };
 const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
+// WeakMap to store generated keys for option objects without mutating them.
+// Used only as a last resort for options that have neither id, value, nor label.
+const optionKeyMap = new WeakMap();
 const getOptionKey = (option, prefix) => {
-    const key = option.id ?? option.value ?? uuid();
+    // 1. Consumer-provided id — stable and unique (best case).
+    if (option.id) {
+        return `${prefix}${option.id}`;
+    }
+    // 2. Data-based key from value and/or label — stable across object
+    //    recreations (e.g. inline options={[...]} on every render).
+    //    Combining both fields maximizes uniqueness: two options may share
+    //    a value but users couldn't distinguish identical labels, so in
+    //    practice the combination is unique.
+    //    We prefix each segment with its length to avoid ambiguous
+    //    concatenations (e.g. 'a-b'+'c' vs 'a'+'b-c').
+    const value = option.value !== undefined && option.value !== '' ? String(option.value) : '';
+    const label = option.label ?? '';
+    if (value || label) {
+        return `${prefix}${value.length}:${value}.${label}`;
+    }
+    // 3. Last resort for truly anonymous options (no id, no value, no label).
+    //    WeakMap ties a generated uuid to the object reference so the key
+    //    persists as long as the same object is reused. If the consumer
+    //    recreates these objects every render, keys will be unstable — but
+    //    that's an unsolvable edge case without any data to anchor to.
+    let key = optionKeyMap.get(option);
+    if (!key) {
+        key = uuid();
+        optionKeyMap.set(option, key);
+    }
     return `${prefix}${key}`;
 };
 const isKeyboardEvent = (event) => event.key !== undefined;
@@ -1425,9 +1453,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$B = {};
 class DBCheckbox {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -1447,6 +1485,12 @@ class DBCheckbox {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the checkbox */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -1704,6 +1748,13 @@ class DBCheckbox {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.checked.set(!!value);
@@ -1724,8 +1775,6 @@ class DBCheckbox {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-checkbox");
@@ -1754,8 +1803,8 @@ class DBCheckbox {
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-        [attr.data-custom-validity]="_valid() ?? validation()"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -1812,8 +1861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-        [attr.data-custom-validity]="_valid() ?? validation()"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -2677,6 +2726,13 @@ class DBCustomSelectListItem {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.checked.set(!!value);
@@ -2697,8 +2753,6 @@ class DBCustomSelectListItem {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select-list-item");
@@ -2901,6 +2955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$w = {};
 class DBInput {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     getPatternAttr() {
@@ -2912,6 +2968,14 @@ class DBInput {
         return undefined;
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -2931,6 +2995,12 @@ class DBInput {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the input */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -3233,6 +3303,13 @@ class DBInput {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.value.set(value);
@@ -3253,8 +3330,6 @@ class DBInput {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-input");
@@ -3285,8 +3360,8 @@ class DBInput {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3374,8 +3449,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3953,9 +4028,20 @@ class DBCustomSelect {
         }
     }
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._validity.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -3963,11 +4049,11 @@ class DBCustomSelect {
             this._invalidMessage.set(signalFormErrors[0].message ?? DEFAULT_INVALID_MESSAGE);
             this._validMessage.set('');
             this._valid.set('invalid');
+            this._validity.set('invalid');
             if (hasVoiceOver()) {
                 this._voiceOverFallback.set(this._invalidMessage());
                 void delay(() => this._voiceOverFallback.set(""), 1000);
             }
-            this._validity.set('invalid');
             return; // Signal Forms errors take priority
         }
         else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
@@ -3977,6 +4063,13 @@ class DBCustomSelect {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validity.set(undefined);
+            this._validMessage.set('');
+        }
         if (this.selectRef()?.nativeElement) {
             this.selectRef().nativeElement.value = this.getNativeSelectValue();
         }
@@ -4538,28 +4631,33 @@ class DBCustomSelect {
         this._valid = signal(undefined, ...(ngDevMode ? [{ debugName: "_valid" }] : /* istanbul ignore next */ []));
         /** Signal Forms alias — maps to 'values' for FormValueControl duck-typing */
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        /** @internal Flag to prevent circular sync between value↔values */
-        this._syncing = false;
+        /**
+         * @internal Tracks the origin of the last write to prevent infinite ping-pong.
+         * Convergence is guaranteed by Angular's signal equality check
+         * (setting a signal to the same value does not re-notify dependents).
+         */
+        this._syncSource = 'none';
         /** @internal Sync value → values (Signal Forms writes to value) */
         this._syncValueToValues = effect(() => {
             const v = this.value();
-            if (this._syncing)
+            if (this._syncSource === 'values') {
+                this._syncSource = 'none';
                 return;
-            this._syncing = true;
+            }
+            this._syncSource = 'value';
             if (v !== undefined) {
                 this.values.set(Array.isArray(v) ? v : v ? [v] : []);
             }
-            this._syncing = false;
         }, ...(ngDevMode ? [{ debugName: "_syncValueToValues" }] : /* istanbul ignore next */ []));
         /** @internal Sync values → value (CVA/user interaction writes to values) */
         this._syncValuesToValue = effect(() => {
             const vals = this.values();
-            if (this._syncing)
+            if (this._syncSource === 'value') {
+                this._syncSource = 'none';
                 return;
-            this._syncing = true;
-            const current = vals && vals.length > 0 ? vals : undefined;
-            this.value.set(current);
-            this._syncing = false;
+            }
+            this._syncSource = 'values';
+            this.value.set(vals ?? []);
         }, ...(ngDevMode ? [{ debugName: "_syncValuesToValue" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -4883,6 +4981,13 @@ class DBCustomSelect {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.values.set(value);
@@ -4903,8 +5008,6 @@ class DBCustomSelect {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select");
@@ -7744,6 +7847,13 @@ class DBRadio {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         if (value) {
@@ -7766,8 +7876,6 @@ class DBRadio {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-radio");
@@ -7953,9 +8061,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -7975,6 +8093,12 @@ class DBSelect {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the select */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -8270,6 +8394,13 @@ class DBSelect {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.value.set(value);
@@ -8290,8 +8421,6 @@ class DBSelect {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-select");
@@ -8323,8 +8452,8 @@ class DBSelect {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8427,8 +8556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8646,9 +8775,19 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -8668,6 +8807,12 @@ class DBSwitch {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         if (!this._ref()?.nativeElement?.validity?.valid ||
             this.validation() === "invalid") {
             this._descByIds.set(this._invalidMessageId());
@@ -8907,6 +9052,13 @@ class DBSwitch {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.checked.set(!!value);
@@ -8927,8 +9079,6 @@ class DBSwitch {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-switch");
@@ -8954,7 +9104,7 @@ class DBSwitch {
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-custom-validity]="_valid() ?? validation()"
+    [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -8966,7 +9116,7 @@ class DBSwitch {
         [checked]="getBoolean(checked(), 'checked')"
         [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
         [attr.name]="name()"
         [required]="getBoolean(required(), 'required')"
@@ -9019,7 +9169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-custom-validity]="_valid() ?? validation()"
+    [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -9031,7 +9181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [checked]="getBoolean(checked(), 'checked')"
         [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
         [attr.name]="name()"
         [required]="getBoolean(required(), 'required')"
@@ -9229,6 +9379,13 @@ class DBTabItem {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.checked.set(!!value);
@@ -9249,8 +9406,6 @@ class DBTabItem {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tab-item");
@@ -9543,6 +9698,7 @@ class DBTableDataCell {
         this.cls = cls;
         this.getNumber = getNumber;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : /* istanbul ignore next */ []));
         this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : /* istanbul ignore next */ []));
@@ -9599,9 +9755,9 @@ class DBTableDataCell {
         this.enableAttributePassing(element, "db-table-data-cell");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableDataCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableDataCell, isStandalone: true, selector: "db-table-data-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<td
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableDataCell, isStandalone: true, selector: "db-table-data-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<td
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-data-cell', className())"
     [attr.data-horizontal-alignment]="horizontalAlignment()"
     [attr.data-vertical-alignment]="verticalAlignment()"
@@ -9616,7 +9772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Component,
             args: [{ selector: "db-table-data-cell", standalone: true, imports: [CommonModule], template: `<td
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-data-cell', className())"
     [attr.data-horizontal-alignment]="horizontalAlignment()"
     [attr.data-vertical-alignment]="verticalAlignment()"
@@ -9626,7 +9782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <ng-content></ng-content>
   </td> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$8 = {};
 class DBTableHeaderCell {
@@ -9635,6 +9791,7 @@ class DBTableHeaderCell {
         this.getBooleanAsString = getBooleanAsString;
         this.getNumber = getNumber;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.horizontalAlignment = input(...(ngDevMode ? [undefined, { debugName: "horizontalAlignment" }] : /* istanbul ignore next */ []));
         this.verticalAlignment = input(...(ngDevMode ? [undefined, { debugName: "verticalAlignment" }] : /* istanbul ignore next */ []));
@@ -9694,9 +9851,9 @@ class DBTableHeaderCell {
         this.enableAttributePassing(element, "db-table-header-cell");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableHeaderCell, isStandalone: true, selector: "db-table-header-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, abbr: { classPropertyName: "abbr", publicName: "abbr", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<th
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableHeaderCell, isStandalone: true, selector: "db-table-header-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: false, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, rowspan: { classPropertyName: "rowspan", publicName: "rowspan", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, abbr: { classPropertyName: "abbr", publicName: "abbr", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<th
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-header-cell', className())"
     [attr.data-horizontal-alignment]="horizontalAlignment()"
     [attr.data-vertical-alignment]="verticalAlignment()"
@@ -9714,7 +9871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Component,
             args: [{ selector: "db-table-header-cell", standalone: true, imports: [CommonModule], template: `<th
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-header-cell', className())"
     [attr.data-horizontal-alignment]="horizontalAlignment()"
     [attr.data-vertical-alignment]="verticalAlignment()"
@@ -9727,7 +9884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <ng-content></ng-content>
   </th> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], abbr: [{ type: i0.Input, args: [{ isSignal: true, alias: "abbr", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], verticalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlignment", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: false }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], rowspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowspan", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], abbr: [{ type: i0.Input, args: [{ isSignal: true, alias: "abbr", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$7 = {};
 class DBTableRow {
@@ -9742,6 +9899,7 @@ class DBTableRow {
         this.getBooleanAsString = getBooleanAsString;
         this.uuid = uuid;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.interactive = input(...(ngDevMode ? [undefined, { debugName: "interactive" }] : /* istanbul ignore next */ []));
         this.subHeaderEmphasis = input(...(ngDevMode ? [undefined, { debugName: "subHeaderEmphasis" }] : /* istanbul ignore next */ []));
@@ -9794,9 +9952,9 @@ class DBTableRow {
         this.enableAttributePassing(element, "db-table-row");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableRow, isStandalone: true, selector: "db-table-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, subHeaderEmphasis: { classPropertyName: "subHeaderEmphasis", publicName: "subHeaderEmphasis", isSignal: true, isRequired: false, transformFunction: null }, cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tr
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableRow, isStandalone: true, selector: "db-table-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, subHeaderEmphasis: { classPropertyName: "subHeaderEmphasis", publicName: "subHeaderEmphasis", isSignal: true, isRequired: false, transformFunction: null }, cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tr
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-row', className())"
     [attr.data-interactive]="getBooleanAsString(interactive())"
     [attr.data-sub-header-emphasis]="subHeaderEmphasis()"
@@ -9874,13 +10032,13 @@ class DBTableRow {
     } } }@else{
     <ng-content></ng-content>
     }
-  </tr> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableDataCell, selector: "db-table-data-cell", inputs: ["id", "className", "horizontalAlignment", "verticalAlignment", "colSpan", "colspan", "rowSpan", "rowspan", "headers"] }, { kind: "component", type: DBLink, selector: "db-link", inputs: ["id", "propOverrides", "className", "href", "target", "rel", "role", "referrerpolicy", "referrerPolicy", "hreflang", "disabled", "size", "showIcon", "variant", "content", "wrap", "text"] }, { kind: "component", type: DBTableHeaderCell, selector: "db-table-header-cell", inputs: ["id", "className", "horizontalAlignment", "verticalAlignment", "noText", "scope", "colSpan", "colspan", "rowSpan", "rowspan", "headers", "abbr"] }] }); }
+  </tr> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableDataCell, selector: "db-table-data-cell", inputs: ["id", "propOverrides", "className", "horizontalAlignment", "verticalAlignment", "colSpan", "colspan", "rowSpan", "rowspan", "headers"] }, { kind: "component", type: DBLink, selector: "db-link", inputs: ["id", "propOverrides", "className", "href", "target", "rel", "role", "referrerpolicy", "referrerPolicy", "hreflang", "disabled", "size", "showIcon", "variant", "content", "wrap", "text"] }, { kind: "component", type: DBTableHeaderCell, selector: "db-table-header-cell", inputs: ["id", "propOverrides", "className", "horizontalAlignment", "verticalAlignment", "noText", "scope", "colSpan", "colspan", "rowSpan", "rowspan", "headers", "abbr"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableRow, decorators: [{
             type: Component,
             args: [{ selector: "db-table-row", standalone: true, imports: [CommonModule, DBTableDataCell, DBLink, DBTableHeaderCell], template: `<tr
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-row', className())"
     [attr.data-interactive]="getBooleanAsString(interactive())"
     [attr.data-sub-header-emphasis]="subHeaderEmphasis()"
@@ -9959,7 +10117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <ng-content></ng-content>
     }
   </tr> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], subHeaderEmphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeaderEmphasis", required: false }] }], cells: [{ type: i0.Input, args: [{ isSignal: true, alias: "cells", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], subHeaderEmphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeaderEmphasis", required: false }] }], cells: [{ type: i0.Input, args: [{ isSignal: true, alias: "cells", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$6 = {};
 class DBTableBody {
@@ -9970,6 +10128,7 @@ class DBTableBody {
         this.cls = cls;
         this.uuid = uuid;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
@@ -10020,9 +10179,9 @@ class DBTableBody {
         this.enableAttributePassing(element, "db-table-body");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableBody, isStandalone: true, selector: "db-table-body", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tbody
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableBody, isStandalone: true, selector: "db-table-body", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tbody
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-body', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10036,13 +10195,13 @@ class DBTableBody {
     } }@else{
     <ng-content></ng-content>
     }
-  </tbody> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+  </tbody> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableBody, decorators: [{
             type: Component,
             args: [{ selector: "db-table-body", standalone: true, imports: [CommonModule, DBTableRow], template: `<tbody
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-body', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10057,7 +10216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <ng-content></ng-content>
     }
   </tbody> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$5 = {};
 class DBTableFooter {
@@ -10068,6 +10227,7 @@ class DBTableFooter {
         this.cls = cls;
         this.uuid = uuid;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
@@ -10118,9 +10278,9 @@ class DBTableFooter {
         this.enableAttributePassing(element, "db-table-footer");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableFooter, isStandalone: true, selector: "db-table-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tfoot
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableFooter, isStandalone: true, selector: "db-table-footer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<tfoot
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-footer', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10134,13 +10294,13 @@ class DBTableFooter {
     } }@else{
     <ng-content></ng-content>
     }
-  </tfoot> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+  </tfoot> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableFooter, decorators: [{
             type: Component,
             args: [{ selector: "db-table-footer", standalone: true, imports: [CommonModule, DBTableRow], template: `<tfoot
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-footer', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10155,7 +10315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <ng-content></ng-content>
     }
   </tfoot> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$4 = {};
 class DBTableHead {
@@ -10191,6 +10351,7 @@ class DBTableHead {
         this.cls = cls;
         this.uuid = uuid;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
@@ -10248,9 +10409,9 @@ class DBTableHead {
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableHead, isStandalone: true, selector: "db-table-head", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<thead
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTableHead, isStandalone: true, selector: "db-table-head", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<thead
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-head', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10265,13 +10426,13 @@ class DBTableHead {
     } }@else{
     <ng-content></ng-content>
     }
-  </thead> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
+  </thead> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTableRow, selector: "db-table-row", inputs: ["id", "propOverrides", "className", "interactive", "subHeaderEmphasis", "cells"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableHead, decorators: [{
             type: Component,
             args: [{ selector: "db-table-head", standalone: true, imports: [CommonModule, DBTableRow], template: `<thead
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-head', className())"
   >
     @if(rows()){ @for (row of rows();track trackByRow0(index, row);let index =
@@ -10287,7 +10448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <ng-content></ng-content>
     }
   </thead> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$3 = {};
 class DBTable {
@@ -10336,6 +10497,7 @@ class DBTable {
         this.showCaption = input(...(ngDevMode ? [undefined, { debugName: "showCaption" }] : /* istanbul ignore next */ []));
         this.stickyHeader = input(...(ngDevMode ? [undefined, { debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.captionPlain = input(...(ngDevMode ? [undefined, { debugName: "captionPlain" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this._data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
@@ -10464,7 +10626,7 @@ class DBTable {
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTable, isStandalone: true, selector: "db-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mobileVariant: { classPropertyName: "mobileVariant", publicName: "mobileVariant", isSignal: true, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, captionPlain: { classPropertyName: "captionPlain", publicName: "captionPlain", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTable, isStandalone: true, selector: "db-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mobileVariant: { classPropertyName: "mobileVariant", publicName: "mobileVariant", isSignal: true, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, captionPlain: { classPropertyName: "captionPlain", publicName: "captionPlain", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     [class]="cls('db-table', className())"
     [ngStyle]="_style()"
     [attr.data-width]="width()"
@@ -10475,7 +10637,7 @@ class DBTable {
     [attr.data-show-caption]="getBooleanAsString(showCaption())"
     [attr.data-sticky-header]="stickyHeader()"
   >
-    <table #_ref [attr.id]="id()">
+    <table #_ref [attr.id]="id() ?? propOverrides()?.id">
       @if(captionPlain()){
       <caption>
         {{captionPlain()}}
@@ -10492,7 +10654,7 @@ class DBTable {
       <ng-content></ng-content>
       }
     </table>
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DBTableHead, selector: "db-table-head", inputs: ["id", "className", "rows"] }, { kind: "component", type: DBTableBody, selector: "db-table-body", inputs: ["id", "className", "rows"] }, { kind: "component", type: DBTableFooter, selector: "db-table-footer", inputs: ["id", "className", "rows"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DBTableHead, selector: "db-table-head", inputs: ["id", "propOverrides", "className", "rows"] }, { kind: "component", type: DBTableBody, selector: "db-table-body", inputs: ["id", "propOverrides", "className", "rows"] }, { kind: "component", type: DBTableFooter, selector: "db-table-footer", inputs: ["id", "propOverrides", "className", "rows"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTable, decorators: [{
             type: Component,
@@ -10507,7 +10669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     [attr.data-show-caption]="getBooleanAsString(showCaption())"
     [attr.data-sticky-header]="stickyHeader()"
   >
-    <table #_ref [attr.id]="id()">
+    <table #_ref [attr.id]="id() ?? propOverrides()?.id">
       @if(captionPlain()){
       <caption>
         {{captionPlain()}}
@@ -10525,7 +10687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       }
     </table>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mobileVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileVariant", required: false }] }], columnSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnSizes", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], captionPlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionPlain", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mobileVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileVariant", required: false }] }], columnSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnSizes", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], captionPlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionPlain", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$2 = {};
 class DBTableCaption {
@@ -10551,6 +10713,7 @@ class DBTableCaption {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
@@ -10607,9 +10770,9 @@ class DBTableCaption {
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableCaption, isStandalone: true, selector: "db-table-caption", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<caption
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBTableCaption, isStandalone: true, selector: "db-table-caption", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<caption
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-caption', className())"
   >
     <ng-content></ng-content>
@@ -10619,12 +10782,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Component,
             args: [{ selector: "db-table-caption", standalone: true, imports: [CommonModule], template: `<caption
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-table-caption', className())"
   >
     <ng-content></ng-content>
   </caption> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const DBTableHeaderCellScopeList = ['row', 'col', 'rowgroup', 'colgroup'];
 
@@ -11012,9 +11175,19 @@ const TagBehaviorList = ['static', 'removable'];
 const defaultProps = {};
 class DBTextarea {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -11034,6 +11207,12 @@ class DBTextarea {
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement?.validity && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the textarea */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -11299,6 +11478,13 @@ class DBTextarea {
             }
         }
     }
+    /**
+     * Reflect Signal Forms hidden state to the host element.
+     * This intentionally intercepts Angular's native [hidden] binding —
+     * consumers using [hidden]="condition" will hide the component via
+     * :host([hidden]) { display: none !important }.
+     */
+    get isHidden() { return this.hidden(); }
     /** @legacy CVA - will be removed in a future major version */
     writeValue(value) {
         this.value.set(value);
@@ -11319,8 +11505,6 @@ class DBTextarea {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    /** Reflect Signal Forms hidden state to the host element */
-    get isHidden() { return this.hidden(); }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-textarea");
@@ -11347,8 +11531,8 @@ class DBTextarea {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -11416,8 +11600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? validation()"
+      [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"