@db-ux/ngx-core-components 4.13.1-angular-signal-forms3-9c66774 → 4.13.1-angular-signal-forms5-fe63b55

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

@@ -1425,7 +1425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$B = {};
 class DBCheckbox {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -1441,8 +1441,8 @@ class DBCheckbox {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -1754,8 +1754,8 @@ class DBCheckbox {
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="validation() === 'invalid'"
-        [attr.data-custom-validity]="validation()"
+        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="_valid() ?? validation()"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -1795,7 +1795,7 @@ class DBCheckbox {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBCheckbox, decorators: [{
             type: Component,
@@ -1812,8 +1812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="validation() === 'invalid'"
-        [attr.data-custom-validity]="validation()"
+        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="_valid() ?? validation()"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -1853,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -2744,7 +2744,7 @@ class DBCustomSelectListItem {
     }@else{
     <span>{{groupTitle()}}</span>
     }
-  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  </li> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
             type: Component,
@@ -2782,7 +2782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     }@else{
     <span>{{groupTitle()}}</span>
     }
-  </li> `, styles: [":host{display:contents}\n"] }]
+  </li> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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 }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -2901,7 +2901,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$w = {};
 class DBInput {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
+    }
+    getPatternAttr() {
+        const p = this.pattern();
+        if (typeof p === 'string')
+            return p || undefined;
+        if (Array.isArray(p) && p.length > 0)
+            return p.map((r) => r.source).join('|');
+        return undefined;
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -2917,8 +2925,8 @@ class DBInput {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -3277,8 +3285,8 @@ class DBInput {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3297,7 +3305,7 @@ class DBInput {
       [attr.min]="getInputValue(min(), type())"
       [attr.readOnly]="getBoolean(readOnly(), 'readOnly') || getBoolean(readonly(), 'readonly') || undefined"
       [attr.form]="form()"
-      [attr.pattern]="pattern()"
+      [attr.pattern]="getPatternAttr()"
       [attr.size]="size()"
       [attr.autoComplete]="autocomplete()"
       [attr.autoFocus]="getBoolean(autofocus(), 'autofocus')"
@@ -3346,7 +3354,7 @@ class DBInput {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBInput, decorators: [{
             type: Component,
@@ -3366,8 +3374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3386,7 +3394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       [attr.min]="getInputValue(min(), type())"
       [attr.readOnly]="getBoolean(readOnly(), 'readOnly') || getBoolean(readonly(), 'readonly') || undefined"
       [attr.form]="form()"
-      [attr.pattern]="pattern()"
+      [attr.pattern]="getPatternAttr()"
       [attr.size]="size()"
       [attr.autoComplete]="autocomplete()"
       [attr.autoFocus]="getBoolean(autofocus(), 'autofocus')"
@@ -3435,7 +3443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], dataListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataListId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSizing", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], messageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageSize", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], validMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessageSize", required: false }] }], invalidMessageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessageSize", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -3945,7 +3953,7 @@ class DBCustomSelect {
         }
     }
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -3959,11 +3967,13 @@ class DBCustomSelect {
                 this._voiceOverFallback.set(this._invalidMessage());
                 void delay(() => this._voiceOverFallback.set(""), 1000);
             }
+            this._validity.set('invalid');
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
+            this._validity.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
@@ -4528,20 +4538,28 @@ 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 Sync value → values (Signal Forms writes to value) */
         this._syncValueToValues = effect(() => {
             const v = this.value();
+            if (this._syncing)
+                return;
+            this._syncing = true;
             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();
-            const current = vals && vals.length > 0 ? vals[0] : undefined;
-            if (current !== this.value()) {
-                this.value.set(current);
-            }
+            if (this._syncing)
+                return;
+            this._syncing = true;
+            const current = vals && vals.length > 0 ? vals : undefined;
+            this.value.set(current);
+            this._syncing = false;
         }, ...(ngDevMode ? [{ debugName: "_syncValuesToValue" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -5125,7 +5143,7 @@ class DBCustomSelect {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "accept", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize", "hidden", "errors"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label", "hidden", "errors"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "accept", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize", "hidden", "errors"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label", "hidden", "errors"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
@@ -5351,7 +5369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], showNoResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResults", required: false }] }], showLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], selectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabels", required: false }] }], transformSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformSelectedLabels", required: false }] }], selectedType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedType", required: false }] }], amountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "amountText", required: false }] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], removeTagsTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTagsTexts", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], searchFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFilter", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], formFieldWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFieldWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], selectedPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPrefix", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], mobileCloseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCloseButtonText", required: false }] }], showClearSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearSelection", required: false }] }], clearSelectionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], amountChange: [{ type: i0.Output, args: ["amountChange"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], search: [{ type: i0.Output, args: ["search"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], selectRef: [{ type: i0.ViewChild, args: ["selectRef", { isSignal: true }] }], detailsRef: [{ type: i0.ViewChild, args: ["detailsRef", { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ["searchInputRef", { isSignal: true }] }], selectAllRef: [{ type: i0.ViewChild, args: ["selectAllRef", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -7790,7 +7808,7 @@ class DBRadio {
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)" />
     @if(label()){{{label()}}} <ng-content></ng-content
-  ></label> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  ></label> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBRadio, decorators: [{
             type: Component,
@@ -7820,7 +7838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)" />
     @if(label()){{{label()}}} <ng-content></ng-content
-  ></label> `, styles: [":host{display:contents}\n"] }]
+  ></label> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -7935,7 +7953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -7951,8 +7969,8 @@ class DBSelect {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -8305,8 +8323,8 @@ class DBSelect {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8391,7 +8409,7 @@ class DBSelect {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBSelect, decorators: [{
             type: Component,
@@ -8409,8 +8427,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8495,7 +8513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -8628,7 +8646,7 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -8644,8 +8662,8 @@ class DBSwitch {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -8936,7 +8954,7 @@ class DBSwitch {
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-custom-validity]="validation()"
+    [attr.data-custom-validity]="_valid() ?? validation()"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -8987,7 +9005,7 @@ class DBSwitch {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBSwitch, decorators: [{
             type: Component,
@@ -9001,7 +9019,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]="validation()"
+    [attr.data-custom-validity]="_valid() ?? validation()"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -9052,7 +9070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], visualAid: [{ type: i0.Input, args: [{ isSignal: true, alias: "visualAid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -9278,7 +9296,7 @@ class DBTabItem {
         (input)="handleChange($event)" />
       @if(label()){{{label()}}} <ng-content></ng-content
     ></label>
-  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  </li> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTabItem, decorators: [{
             type: Component,
@@ -9306,7 +9324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         (input)="handleChange($event)" />
       @if(label()){{{label()}}} <ng-content></ng-content
     ></label>
-  </li> `, styles: [":host{display:contents}\n"] }]
+  </li> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -10994,7 +11012,7 @@ const TagBehaviorList = ['static', 'removable'];
 const defaultProps = {};
 class DBTextarea {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -11010,8 +11028,8 @@ class DBTextarea {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -11329,8 +11347,8 @@ class DBTextarea {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -11382,7 +11400,7 @@ class DBTextarea {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTextarea, decorators: [{
             type: Component,
@@ -11398,8 +11416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -11451,7 +11469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, styles: [":host{display:contents}\n"] }]
+  </div> `, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSizing", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], showResizer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResizer", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], spellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellCheck", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], isHidden: [{
                 type: HostBinding,
                 args: ['hidden']