@db-ux/ngx-core-components 4.4.2 → 4.5.0

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

@@ -75,15 +75,15 @@ const getBooleanAsString = (originBool) => {
     if (originBool === undefined || originBool === null)
         return;
     if (typeof originBool === 'string') {
-        return String(Boolean(originBool));
+        return String(originBool === 'true');
     }
     return String(originBool);
 };
 const getBoolean = (originBool, propertyName) => {
     if (originBool === undefined || originBool === null)
         return;
-    if (typeof originBool === 'string' && propertyName) {
-        return Boolean(propertyName === originBool || originBool);
+    if (typeof originBool === 'string') {
+        return Boolean(propertyName === originBool || originBool === 'true');
     }
     return Boolean(originBool);
 };
@@ -124,20 +124,19 @@ const getStep = (step) => {
 const getInputValue = (value, inputType) => {
     return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
 };
+const toBool = (value) => typeof value === 'string' ? value === 'true' : value;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getHideProp = (show) => {
     if (show === undefined || show === null) {
         return undefined;
     }
-    return getBooleanAsString(!Boolean(show));
+    return getBooleanAsString(!toBool(show));
 };
 const stringPropVisible = (givenString, showString) => {
     if (showString === undefined) {
         return !!givenString;
     }
-    else {
-        return Boolean(showString) && Boolean(givenString);
-    }
+    return toBool(showString) && Boolean(givenString);
 };
 const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
 const getOptionKey = (option, prefix) => {
@@ -171,7 +170,7 @@ const getNotificationRole = ({ semantic, role, ariaLive }) => {
     }
 };
 
-const defaultProps$z = {};
+const defaultProps$A = {};
 class DBAccordionItem {
     handleNameAttribute() {
         if (this._ref()?.nativeElement) {
@@ -199,6 +198,7 @@ class DBAccordionItem {
         this.defaultOpen = input(...(ngDevMode ? [undefined, { debugName: "defaultOpen" }] : []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
         this.headlinePlain = input(...(ngDevMode ? [undefined, { debugName: "headlinePlain" }] : []));
@@ -242,12 +242,16 @@ class DBAccordionItem {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -274,8 +278,8 @@ class DBAccordionItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
-    [attr.id]="id()"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion-item', className())"
   >
     <details
@@ -285,12 +289,12 @@ class DBAccordionItem {
       [open]="_open()"
     >
       <summary (click)="handleToggle($event)">
-        @if(headlinePlain()){ {{headlinePlain()}} } @if(!headlinePlain()){
+        @if(headlinePlain()){{{headlinePlain()}}} @if(!headlinePlain()){
         <ng-content select="[headline]"> </ng-content>
         }
       </summary>
       <div>
-        @if(text()){ {{text()}} }@else{
+        @if(text()){{{text()}}}@else{
         <ng-content></ng-content>
         }
       </div>
@@ -300,7 +304,7 @@ class DBAccordionItem {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordionItem, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `<li
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion-item', className())"
   >
     <details
@@ -310,20 +314,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [open]="_open()"
     >
       <summary (click)="handleToggle($event)">
-        @if(headlinePlain()){ {{headlinePlain()}} } @if(!headlinePlain()){
+        @if(headlinePlain()){{{headlinePlain()}}} @if(!headlinePlain()){
         <ng-content select="[headline]"> </ng-content>
         }
       </summary>
       <div>
-        @if(text()){ {{text()}} }@else{
+        @if(text()){{{text()}}}@else{
         <ng-content></ng-content>
         }
       </div>
     </details>
   </li> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$y = {};
+const defaultProps$z = {};
 class DBAccordion {
     convertItems() {
         try {
@@ -347,6 +351,7 @@ class DBAccordion {
         this.initOpenIndex = input(...(ngDevMode ? [undefined, { debugName: "initOpenIndex" }] : []));
         this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -440,12 +445,16 @@ class DBAccordion {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -470,9 +479,9 @@ class DBAccordion {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion', className())"
     [attr.data-variant]="variant()"
   >
@@ -486,13 +495,13 @@ class DBAccordion {
       [text]="item.text"
     ></db-accordion-item>
     } }
-  </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "id", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
+  </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "id", "propOverrides", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordion, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `<ul
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-accordion', className())"
     [attr.data-variant]="variant()"
   >
@@ -507,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     ></db-accordion-item>
     } }
   </ul> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initOpenIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initOpenIndex", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initOpenIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initOpenIndex", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const AccordionVariantList = ['divider', 'card'];
 const AccordionBehaviorList = ['multiple', 'single'];
@@ -613,17 +622,20 @@ const TESTING_VIEWPORTS = [{
 const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
 const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
 
-const defaultProps$x = {};
+const defaultProps$y = {};
 class DBBadge {
     constructor() {
         this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
         this.DEFAULT_LABEL = DEFAULT_LABEL;
         this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
         this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -662,12 +674,16 @@ class DBBadge {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -691,16 +707,17 @@ class DBBadge {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-badge', className())"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-placement]="placement()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -709,22 +726,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-badge", standalone: true, imports: [CommonModule], template: `<span
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-badge', className())"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-placement]="placement()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], 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 }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
 
-const defaultProps$w = {};
+const defaultProps$x = {};
 class DBBrand {
     constructor() {
         this.DEFAULT_ICON = DEFAULT_ICON;
@@ -734,6 +752,7 @@ class DBBrand {
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -749,12 +768,16 @@ class DBBrand {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -777,14 +800,14 @@ class DBBrand {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", 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: "20.3.16", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
     [attr.data-show-icon]="getBooleanAsString(showIcon())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-brand', className())"
   >
-    @if(text()){ {{text()}} }@else{
+    @if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -795,16 +818,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     #_ref
     [attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
     [attr.data-show-icon]="getBooleanAsString(showIcon())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-brand', className())"
   >
-    @if(text()){ {{text()}} }@else{
+    @if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { hideLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLogo", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], 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 }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$v = {};
+const defaultProps$w = {};
 class DBButton {
     getButtonType() {
         if (this.type()) {
@@ -821,6 +844,7 @@ class DBButton {
         this.getBooleanAsString = getBooleanAsString;
         this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
         this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
@@ -832,6 +856,7 @@ class DBButton {
         this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
         this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
         this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
@@ -851,12 +876,16 @@ class DBButton {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -879,9 +908,9 @@ class DBButton {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBButton, isStandalone: true, selector: "db-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBButton, isStandalone: true, selector: "db-button", inputs: { type: { classPropertyName: "type", publicName: "type", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-button', className())"
     [attr.type]="getButtonType()"
     [disabled]="getBoolean(disabled(), 'disabled')"
@@ -892,12 +921,13 @@ class DBButton {
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-no-text]="getBooleanAsString(noText())"
     [attr.name]="name()"
     [attr.form]="form()"
     [attr.value]="value()"
   >
-    @if(text()){ {{text()}} }@else{
+    @if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }
   </button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -906,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-button", standalone: true, imports: [CommonModule], template: `<button
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-button', className())"
     [attr.type]="getButtonType()"
     [disabled]="getBoolean(disabled(), 'disabled')"
@@ -917,21 +947,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     [attr.data-size]="size()"
     [attr.data-width]="width()"
     [attr.data-variant]="variant()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-no-text]="getBooleanAsString(noText())"
     [attr.name]="name()"
     [attr.form]="form()"
     [attr.value]="value()"
   >
-    @if(text()){ {{text()}} }@else{
+    @if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }
   </button> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
 const ButtonTypeList = ['button', 'reset', 'submit'];
 
-const defaultProps$u = {};
+const defaultProps$v = {};
 class DBCard {
     handleClick(event) {
         if (this.click) {
@@ -941,6 +972,7 @@ class DBCard {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
         this.elevationLevel = input(...(ngDevMode ? [undefined, { debugName: "elevationLevel" }] : []));
@@ -959,12 +991,16 @@ class DBCard {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -987,9 +1023,9 @@ class DBCard {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCard, isStandalone: true, selector: "db-card", 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 }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-card', className())"
     [attr.data-behavior]="behavior()"
     [attr.data-elevation-level]="elevationLevel()"
@@ -1003,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-card", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-card', className())"
     [attr.data-behavior]="behavior()"
     [attr.data-elevation-level]="elevationLevel()"
@@ -1012,7 +1048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   >
     <ng-content></ng-content>
   </div> `, 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 }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], elevationLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevationLevel", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _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 }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], elevationLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevationLevel", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const CardBehaviorList = ['static', 'interactive'];
 const CardElevationLevelList = ['1', '2', '3'];
@@ -1068,16 +1104,18 @@ const addValueResetEventListener = (element, props, resetFunction, signal) => {
     }, signal);
 };
 
-const defaultProps$t = {};
+const defaultProps$u = {};
 class DBInfotext {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
         this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
         this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -1093,12 +1131,16 @@ class DBInfotext {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -1121,15 +1163,16 @@ class DBInfotext {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBInfotext, isStandalone: true, selector: "db-infotext", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-infotext', className())"
     [attr.data-icon]="icon()"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -1138,19 +1181,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-infotext", standalone: true, imports: [CommonModule], template: `<span
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-infotext', className())"
     [attr.data-icon]="icon()"
     [attr.data-semantic]="semantic()"
     [attr.data-size]="size()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, 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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", 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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-const defaultProps$s = {};
+const defaultProps$t = {};
 class DBCheckbox {
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
@@ -1204,6 +1248,13 @@ class DBCheckbox {
             this.focus.emit(event);
         }
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `checkbox-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+    }
     constructor(renderer) {
         this.renderer = renderer;
         this.cls = cls;
@@ -1211,8 +1262,9 @@ class DBCheckbox {
         this.getBoolean = getBoolean;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
         this.indeterminate = input(...(ngDevMode ? [undefined, { debugName: "indeterminate" }] : []));
@@ -1244,6 +1296,16 @@ class DBCheckbox {
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -1338,12 +1400,16 @@ class DBCheckbox {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -1379,11 +1445,7 @@ class DBCheckbox {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-checkbox");
             this.initialized.set(true);
-            const mId = this.id() ?? `checkbox-${uuid()}`;
-            this._id.set(mId);
-            this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-            this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
@@ -1391,7 +1453,7 @@ class DBCheckbox {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCheckbox,
                 multi: true
@@ -1418,7 +1480,7 @@ class DBCheckbox {
         (focus)="handleFocus($event)"
         [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -1448,7 +1510,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", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
+  </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCheckbox, decorators: [{
             type: Component,
@@ -1479,7 +1541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         (focus)="handleFocus($event)"
         [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -1510,7 +1572,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
+
+const defaultProps$s = {};
+class DBCustomButton {
+    constructor() {
+        this.cls = cls;
+        this.getBooleanAsString = getBooleanAsString;
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
+        this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
+        this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.showIconLeading = input(...(ngDevMode ? [undefined, { debugName: "showIconLeading" }] : []));
+        this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
+        this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
+        this.showIconTrailing = input(...(ngDevMode ? [undefined, { debugName: "showIconTrailing" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.noText = input(...(ngDevMode ? [undefined, { debugName: "noText" }] : []));
+        this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element?.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (typeof window !== "undefined") {
+            const element = this._ref()?.nativeElement;
+            this.enableAttributePassing(element, "db-custom-button");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomButton, isStandalone: true, selector: "db-custom-button", 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 }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    #_ref
+    [attr.id]="id() ?? propOverrides()?.id"
+    [class]="cls('db-custom-button', className())"
+    [attr.data-icon]="iconLeading() ?? icon()"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-icon-trailing]="iconTrailing()"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-size]="size()"
+    [attr.data-width]="width()"
+    [attr.data-variant]="variant()"
+    [attr.data-no-text]="getBooleanAsString(noText())"
+  >
+    <ng-content></ng-content>
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomButton, decorators: [{
+            type: Component,
+            args: [{ selector: "db-custom-button", standalone: true, imports: [CommonModule], template: `<div
+    #_ref
+    [attr.id]="id() ?? propOverrides()?.id"
+    [class]="cls('db-custom-button', className())"
+    [attr.data-icon]="iconLeading() ?? icon()"
+    [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
+    [attr.data-icon-trailing]="iconTrailing()"
+    [attr.data-show-icon-trailing]="getBooleanAsString(showIconTrailing())"
+    [attr.data-size]="size()"
+    [attr.data-width]="width()"
+    [attr.data-variant]="variant()"
+    [attr.data-no-text]="getBooleanAsString(noText())"
+  >
+    <ng-content></ng-content>
+  </div> `, styles: [":host{display:contents}\n"] }]
+        }], 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 }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 class DocumentClickListener {
     static { this.callbacks = {}; }
@@ -1811,9 +1971,53 @@ const getFloatingProps = (element, parent, placement) => {
         innerHeight
     };
 };
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
 const handleFixedPopover = (element, parent, placement) => {
-    const distance = getComputedStyle(element).getPropertyValue('--db-popover-distance') ?? '0px';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = getComputedStyle(element)?.getPropertyValue('--db-popover-distance') ?? '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -1823,6 +2027,9 @@ const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
     }
     if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
         const diff = height / 2 / childHeight * 100;
@@ -1832,6 +2039,9 @@ const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
     }
     // Popover position
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -1841,11 +2051,11 @@ const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
         const end = top + childHeight;
         element.style.insetBlockStart = `${top}px`;
-        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+        element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
     }
     else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
         const start = bottom - childHeight;
-        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
         element.style.insetBlockEnd = `${bottom}px`;
     }
     else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -1855,32 +2065,32 @@ const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
         const end = left + childWidth;
         element.style.insetInlineStart = `${left}px`;
-        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+        element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
     }
     else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        const start = left - childWidth;
-        element.style.insetInlineStart = `${right - childWidth}px`;
-        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
     }
     if (correctedPlacement?.startsWith('right')) {
         const end = right + childWidth;
         element.style.insetInlineStart = `calc(${right}px + ${distance})`;
-        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
     }
     else if (correctedPlacement?.startsWith('left')) {
         const start = left - childWidth;
-        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
         element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
     }
     else if (correctedPlacement?.startsWith('top')) {
         const start = top - childHeight;
-        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
-        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
     }
     else if (correctedPlacement?.startsWith('bottom')) {
         const end = bottom + childHeight;
-        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
-        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
@@ -1891,6 +2101,7 @@ class DBCustomSelectDropdown {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.width = input(defaultProps$r["width"], ...(ngDevMode ? [{ debugName: "width" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -1906,12 +2117,16 @@ class DBCustomSelectDropdown {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -1934,10 +2149,10 @@ class DBCustomSelectDropdown {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
     data-spacing="none"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-dropdown db-card', className())"
     [attr.data-width]="width()"
   >
@@ -1949,13 +2164,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: "db-custom-select-dropdown", standalone: true, imports: [CommonModule], template: `<article
     data-spacing="none"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-dropdown db-card', className())"
     [attr.data-width]="width()"
   >
     <ng-content></ng-content>
   </article> `, 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$q = {};
 class DBCustomSelectListItem {
@@ -1982,6 +2197,7 @@ class DBCustomSelectListItem {
         this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
         this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.groupTitle = input(...(ngDevMode ? [undefined, { debugName: "groupTitle" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -2016,12 +2232,16 @@ class DBCustomSelectListItem {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -2059,13 +2279,13 @@ class DBCustomSelectListItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelectListItem,
                 multi: true
             }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-list-item', className(), {
           'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
           'db-radio': type() !== 'checkbox' && !isGroupTitle()
@@ -2088,7 +2308,7 @@ class DBCustomSelectListItem {
         [value]="value()"
         (change)="handleChange($event)"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -2105,7 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true
                         }], selector: "db-custom-select-list-item", standalone: true, imports: [CommonModule], template: `<li
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-list-item', className(), {
           'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
           'db-radio': type() !== 'checkbox' && !isGroupTitle()
@@ -2128,7 +2348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [value]="value()"
         (change)="handleChange($event)"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -2136,7 +2356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <span>{{groupTitle()}}</span>
     }
   </li> `, styles: [":host{display:contents}\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 }] }], 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$p = {};
 class DBCustomSelectList {
@@ -2145,6 +2365,7 @@ class DBCustomSelectList {
         this.multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
@@ -2159,12 +2380,16 @@ class DBCustomSelectList {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -2187,11 +2412,11 @@ class DBCustomSelectList {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, 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: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, 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: `<div
     [attr.role]="multiple() ? 'group' : 'radiogroup'"
     [attr.aria-label]="label()"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-list', className())"
   >
     <ul>
@@ -2205,14 +2430,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     [attr.role]="multiple() ? 'group' : 'radiogroup'"
     [attr.aria-label]="label()"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-list', className())"
   >
     <ul>
       <ng-content></ng-content>
     </ul>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], 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: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], 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 defaultProps$o = {};
 class DBInput {
@@ -2289,6 +2514,14 @@ class DBInput {
             }))
             : _list) || []);
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `input-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        this._dataListId.set(mId + DEFAULT_DATALIST_ID_SUFFIX);
+    }
     trackByOption0(_, option) {
         return this._dataListId() + "-option-" + option.value;
     }
@@ -2306,8 +2539,9 @@ class DBInput {
         this.isIOSSafari = isIOSSafari;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.dataListId = input(...(ngDevMode ? [undefined, { debugName: "dataListId" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
@@ -2371,6 +2605,16 @@ class DBInput {
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -2448,12 +2692,16 @@ class DBInput {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -2494,12 +2742,7 @@ class DBInput {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-input");
-            const mId = this.id() ?? `input-${uuid()}`;
-            this._id.set(mId);
-            this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-            this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            this._dataListId.set(mId + DEFAULT_DATALIST_ID_SUFFIX);
+            this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
@@ -2507,7 +2750,7 @@ class DBInput {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBInput, isStandalone: true, selector: "db-input", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBInput,
                 multi: true
@@ -2592,7 +2835,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", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
+  </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBInput, decorators: [{
             type: Component,
@@ -2682,7 +2925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$n = {};
 class DBTooltip {
@@ -2709,7 +2952,7 @@ class DBTooltip {
             return;
         if (this._ref()?.nativeElement) {
             // This is a workaround for angular
-            delay(() => {
+            void delay(() => {
                 // Due to race conditions we need to check for _ref again
                 if (this._ref()?.nativeElement) {
                     handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
@@ -2734,14 +2977,19 @@ class DBTooltip {
         this.handleAutoPlacement(parent);
         this._observer()?.observe(this.getParent());
     }
+    resetIds() {
+        this._id.set(this.id() ?? this.propOverrides()?.id ?? "tooltip-" + uuid());
+    }
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
+        this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : []));
         this.animation = input(...(ngDevMode ? [undefined, { debugName: "animation" }] : []));
         this.delay = input(...(ngDevMode ? [undefined, { debugName: "delay" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
@@ -2756,8 +3004,8 @@ class DBTooltip {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.id();
                 // ---
-                if (this.id()) {
-                    this._id.set(this.id());
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
                 }
             }, {
             // Enable writing to signals inside effects
@@ -2771,6 +3019,7 @@ class DBTooltip {
                 if (this._ref()?.nativeElement && this.initialized() && this._id()) {
                     const parent = this.getParent();
                     if (parent) {
+                        this.handleAutoPlacement(parent);
                         ["mouseenter", "focusin"].forEach((event) => {
                             parent.addEventListener(event, () => this.handleEnter(parent));
                         });
@@ -2813,12 +3062,16 @@ class DBTooltip {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -2838,12 +3091,12 @@ class DBTooltip {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-tooltip");
-            this._id.set(this.id() || "tooltip-" + uuid());
+            this.resetIds();
             this.initialized.set(true);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<i
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<i
     role="tooltip"
     aria-hidden="true"
     data-gap="true"
@@ -2851,6 +3104,7 @@ class DBTooltip {
     [class]="cls('db-tooltip', className())"
     [attr.id]="_id()"
     [attr.data-emphasis]="emphasis()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-animation]="getBooleanAsString(animation() ?? true)"
     [attr.data-delay]="delay()"
     [attr.data-width]="width()"
@@ -2870,6 +3124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     [class]="cls('db-tooltip', className())"
     [attr.id]="_id()"
     [attr.data-emphasis]="emphasis()"
+    [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.data-animation]="getBooleanAsString(animation() ?? true)"
     [attr.data-delay]="delay()"
     [attr.data-width]="width()"
@@ -2878,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     (click)="handleClick($event)"
     ><ng-content></ng-content
   ></i> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$m = {};
 class DBTag {
@@ -2902,6 +3157,7 @@ class DBTag {
         this.getBooleanAsString = getBooleanAsString;
         this.removeButton = input(...(ngDevMode ? [undefined, { debugName: "removeButton" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
         this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
@@ -2926,12 +3182,16 @@ class DBTag {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -2954,9 +3214,9 @@ class DBTag {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, 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: "20.3.16", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { removeButton: { classPropertyName: "removeButton", publicName: "removeButton", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tag', className())"
     [attr.data-semantic]="semantic()"
     [attr.data-emphasis]="emphasis()"
@@ -2968,7 +3228,7 @@ class DBTag {
   >
     <ng-content select="[content]"> </ng-content>
     <ng-content></ng-content>
-    @if(text()){ {{text()}} } @if(behavior() === 'removable'){
+    @if(text()){{{text()}}} @if(behavior() === 'removable'){
     <button
       class="db-button db-tab-remove-button"
       data-icon="cross"
@@ -2981,13 +3241,13 @@ class DBTag {
       <db-tooltip variant="label">{{getRemoveButtonText()}}</db-tooltip>
     </button>
     }
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTag, decorators: [{
             type: Component,
             args: [{ selector: "db-tag", standalone: true, imports: [CommonModule, DBTooltip], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tag', className())"
     [attr.data-semantic]="semantic()"
     [attr.data-emphasis]="emphasis()"
@@ -2999,7 +3259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   >
     <ng-content select="[content]"> </ng-content>
     <ng-content></ng-content>
-    @if(text()){ {{text()}} } @if(behavior() === 'removable'){
+    @if(text()){{{text()}}} @if(behavior() === 'removable'){
     <button
       class="db-button db-tab-remove-button"
       data-icon="cross"
@@ -3013,7 +3273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </button>
     }
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { removeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButton", required: false }] }], 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 }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showCheckState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckState", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$l = {
     clearSelectionText: "Clear selection",
@@ -3428,6 +3688,19 @@ class DBCustomSelect {
                 ?.focus();
         }
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `custom-select-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        this._selectId.set(mId + DEFAULT_SELECT_ID_SUFFIX);
+        this._labelId.set(mId + DEFAULT_LABEL_ID_SUFFIX);
+        this._summaryId.set(mId + "-summary");
+        this._placeholderId.set(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
+        this._selectedLabelsId.set(mId + "-selected-labels");
+        this._infoTextId.set(mId + "-info");
+    }
     satisfyReact(event) {
         // This is a function to satisfy React
         event.stopPropagation();
@@ -3453,8 +3726,9 @@ class DBCustomSelect {
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
         this.ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
@@ -3542,6 +3816,16 @@ class DBCustomSelect {
         this.selectAllChecked = signal(false, ...(ngDevMode ? [{ debugName: "selectAllChecked" }] : []));
         this.selectAllIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.detailsRef();
@@ -3819,12 +4103,16 @@ class DBCustomSelect {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -3859,17 +4147,7 @@ class DBCustomSelect {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-custom-select");
-            const mId = this.id() ?? `custom-select-${uuid()}`;
-            this._id.set(mId);
-            this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-            this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            this._selectId.set(mId + DEFAULT_SELECT_ID_SUFFIX);
-            this._labelId.set(mId + DEFAULT_LABEL_ID_SUFFIX);
-            this._summaryId.set(mId + "-summary");
-            this._placeholderId.set(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
-            this._selectedLabelsId.set(mId + "-selected-labels");
-            this._infoTextId.set(mId + "-info");
+            this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
             if (typeof window !== "undefined" && "IntersectionObserver" in window) {
                 this._observer.set(new IntersectionObserver((payload) => {
@@ -3889,7 +4167,7 @@ class DBCustomSelect {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectedLabels: { classPropertyName: "selectedLabels", publicName: "selectedLabels", isSignal: true, isRequired: false, transformFunction: null }, transformSelectedLabels: { classPropertyName: "transformSelectedLabels", publicName: "transformSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, selectedPrefix: { classPropertyName: "selectedPrefix", publicName: "selectedPrefix", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected", search: "search" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectedLabels: { classPropertyName: "selectedLabels", publicName: "selectedLabels", isSignal: true, isRequired: false, transformFunction: null }, transformSelectedLabels: { classPropertyName: "transformSelectedLabels", publicName: "transformSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, selectedPrefix: { classPropertyName: "selectedPrefix", publicName: "selectedPrefix", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected", search: "search" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelect,
                 multi: true
@@ -3918,6 +4196,7 @@ class DBCustomSelect {
         #selectRef
         [attr.form]="form()"
         [attr.name]="name()"
+        [attr.data-custom-validity]="_validity()"
         [multiple]="getBoolean(multiple(), 'multiple')"
         [disabled]="getBoolean(disabled(), 'disabled')"
         [required]="getBoolean(required(), 'required')"
@@ -3943,6 +4222,7 @@ class DBCustomSelect {
         class="db-custom-select-form-field"
         [attr.id]="_summaryId()"
         [attr.aria-disabled]="getBooleanAsString(disabled())"
+        [attr.tabIndex]="disabled() ? -1 : undefined"
         [attr.aria-labelledby]="_labelId()"
       >
         @if(_selectedLabels()?.length){
@@ -4029,7 +4309,7 @@ class DBCustomSelect {
               [value]="option.value"
               (change)="handleSelect(option.value)"
               >@if(!option.isGroupTitle){
-              {{getOptionLabel(option)}} }</db-custom-select-list-item
+              {{getOptionLabel(option)}}}</db-custom-select-list-item
             >
             }
           </db-custom-select-list></ng-container
@@ -4058,6 +4338,7 @@ class DBCustomSelect {
       [noText]="true"
       [name]="_id()"
       [form]="_id()"
+      [disabled]="getBoolean(disabled(), 'disabled')"
       (click)="handleClearAll($event)"
       >{{clearSelectionText()}}
       <db-tooltip
@@ -4098,7 +4379,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", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "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"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
+  </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"], 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"], 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", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
@@ -4141,6 +4422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         #selectRef
         [attr.form]="form()"
         [attr.name]="name()"
+        [attr.data-custom-validity]="_validity()"
         [multiple]="getBoolean(multiple(), 'multiple')"
         [disabled]="getBoolean(disabled(), 'disabled')"
         [required]="getBoolean(required(), 'required')"
@@ -4166,6 +4448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         class="db-custom-select-form-field"
         [attr.id]="_summaryId()"
         [attr.aria-disabled]="getBooleanAsString(disabled())"
+        [attr.tabIndex]="disabled() ? -1 : undefined"
         [attr.aria-labelledby]="_labelId()"
       >
         @if(_selectedLabels()?.length){
@@ -4252,7 +4535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               [value]="option.value"
               (change)="handleSelect(option.value)"
               >@if(!option.isGroupTitle){
-              {{getOptionLabel(option)}} }</db-custom-select-list-item
+              {{getOptionLabel(option)}}}</db-custom-select-list-item
             >
             }
           </db-custom-select-list></ng-container
@@ -4281,6 +4564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [noText]="true"
       [name]="_id()"
       [form]="_id()"
+      [disabled]="getBoolean(disabled(), 'disabled')"
       (click)="handleClearAll($event)"
       >{{clearSelectionText()}}
       <db-tooltip
@@ -4322,7 +4606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
 
 const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'];
 
@@ -4331,6 +4615,7 @@ class DBCustomSelectFormField {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
@@ -4345,12 +4630,16 @@ class DBCustomSelectFormField {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -4373,9 +4662,9 @@ class DBCustomSelectFormField {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", 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: `<summary
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", 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: `<summary
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-form-field', className())"
   >
     <ng-content></ng-content>
@@ -4385,12 +4674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-custom-select-form-field", standalone: true, imports: [CommonModule], template: `<summary
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-custom-select-form-field', className())"
   >
     <ng-content></ng-content>
   </summary> `, 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 CustomSelectListItemTypeList = ['checkbox', 'radio'];
 
@@ -4401,6 +4690,7 @@ class DBDivider {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.margin = input(...(ngDevMode ? [undefined, { debugName: "margin" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : []));
@@ -4419,12 +4709,16 @@ class DBDivider {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -4447,9 +4741,9 @@ class DBDivider {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [attr.data-margin]="margin()"
     [attr.data-variant]="variant()"
     [attr.data-emphasis]="emphasis()"
@@ -4461,14 +4755,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-divider", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [attr.data-margin]="margin()"
     [attr.data-variant]="variant()"
     [attr.data-emphasis]="emphasis()"
     [attr.data-width]="width()"
     [class]="cls('db-divider', className())"
   ></div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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 }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const DividerMarginList = ['none', '_'];
 const DividerVariantList = ['horizontal', 'vertical'];
@@ -4542,6 +4836,7 @@ class DBDrawer {
         this.backdrop = input(...(ngDevMode ? [undefined, { debugName: "backdrop" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
@@ -4593,12 +4888,16 @@ class DBDrawer {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -4623,9 +4922,9 @@ class DBDrawer {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<dialog
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `<dialog
     class="db-drawer"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     #_ref
     (click)="handleClose($event)"
     (keydown)="handleClose($event)"
@@ -4647,9 +4946,9 @@ class DBDrawer {
           <ng-content select="[drawer-header]"> </ng-content>
         </div>
         <db-button
-          class="button-close-drawer"
           icon="cross"
           variant="ghost"
+          className="button-close-drawer"
           [id]="closeButtonId()"
           [noText]="true"
           (click)="handleClose($event, true)"
@@ -4658,13 +4957,13 @@ class DBDrawer {
       </header>
       <div class="db-drawer-content"><ng-content></ng-content></div>
     </article>
-  </dialog> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
+  </dialog> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBDrawer, decorators: [{
             type: Component,
             args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule, DBButton], template: `<dialog
     class="db-drawer"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     #_ref
     (click)="handleClose($event)"
     (keydown)="handleClose($event)"
@@ -4686,9 +4985,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <ng-content select="[drawer-header]"> </ng-content>
         </div>
         <db-button
-          class="button-close-drawer"
           icon="cross"
           variant="ghost"
+          className="button-close-drawer"
           [id]="closeButtonId()"
           [noText]="true"
           (click)="handleClose($event, true)"
@@ -4698,7 +4997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <div class="db-drawer-content"><ng-content></ng-content></div>
     </article>
   </dialog> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], dialogContainerRef: [{ type: i0.ViewChild, args: ["dialogContainerRef", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }], dialogContainerRef: [{ type: i0.ViewChild, args: ["dialogContainerRef", { isSignal: true }] }] } });
 
 const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
 const DrawerDirectionList = ['left', 'right', 'up', 'down'];
@@ -4900,6 +5199,7 @@ class DBHeader {
         this.drawerOpen = input(...(ngDevMode ? [undefined, { debugName: "drawerOpen" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
         this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : []));
         this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : []));
@@ -4941,12 +5241,16 @@ class DBHeader {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -4970,16 +5274,16 @@ class DBHeader {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<header
     #_ref
     [class]="cls('db-header', className())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [attr.data-width]="width()"
     [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
   >
     <db-drawer
-      class="db-header-drawer"
       spacing="small"
+      className="db-header-drawer"
       [rounded]="true"
       [closeButtonId]="closeButtonId()"
       [closeButtonText]="closeButtonText()"
@@ -5027,20 +5331,20 @@ class DBHeader {
         </div>
       </div>
     </div>
-  </header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
+  </header> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "position", "backdrop", "variant", "id", "propOverrides", "direction", "className", "spacing", "width", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBHeader, decorators: [{
             type: Component,
             args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBDrawer, DBButton], template: `<header
     #_ref
     [class]="cls('db-header', className())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [attr.data-width]="width()"
     [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
   >
     <db-drawer
-      class="db-header-drawer"
       spacing="small"
+      className="db-header-drawer"
       [rounded]="true"
       [closeButtonId]="closeButtonId()"
       [closeButtonText]="closeButtonText()"
@@ -5098,13 +5402,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], dbSecondaryAction: [{
                 type: ContentChild,
                 args: [SecondaryActionDirective, { read: TemplateRef }]
-            }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+            }], forceMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMobile", required: false }] }], drawerOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerOpen", 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], burgerMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgerMenuLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$g = {};
 class DBIcon {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         this.weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : []));
@@ -5123,12 +5428,16 @@ class DBIcon {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5151,15 +5460,15 @@ class DBIcon {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBIcon, isStandalone: true, selector: "db-icon", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<span
     aria-hidden="true"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-icon', className())"
     [attr.data-icon]="icon()"
     [attr.data-icon-weight]="weight()"
     [attr.data-icon-variant]="variant()"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -5169,16 +5478,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: "db-icon", standalone: true, imports: [CommonModule], template: `<span
     aria-hidden="true"
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-icon', className())"
     [attr.data-icon]="icon()"
     [attr.data-icon-weight]="weight()"
     [attr.data-icon-variant]="variant()"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</span
   > `, 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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", 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 }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const IconWeightList = ['16', '20', '24', '32', '48', '64'];
 
@@ -5194,6 +5503,7 @@ class DBLink {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
         this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
@@ -5222,12 +5532,16 @@ class DBLink {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5250,9 +5564,9 @@ class DBLink {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<a
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBLink, isStandalone: true, selector: "db-link", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, referrerpolicy: { classPropertyName: "referrerpolicy", publicName: "referrerpolicy", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<a
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-link', className())"
     [attr.href]="href()"
     [attr.target]="target()"
@@ -5267,7 +5581,7 @@ class DBLink {
     [attr.data-variant]="variant()"
     [attr.data-content]="content() || 'internal'"
     [attr.data-wrap]="getBooleanAsString(wrap())"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</a
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -5276,7 +5590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-link", standalone: true, imports: [CommonModule], template: `<a
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-link', className())"
     [attr.href]="href()"
     [attr.target]="target()"
@@ -5291,11 +5605,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     [attr.data-variant]="variant()"
     [attr.data-content]="content() || 'internal'"
     [attr.data-wrap]="getBooleanAsString(wrap())"
-    >@if(text()){ {{text()}} }@else{
+    >@if(text()){{{text()}}}@else{
     <ng-content></ng-content>
     }</a
   > `, 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 }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], referrerpolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerpolicy", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }], hreflang: [{ type: i0.Input, args: [{ isSignal: true, alias: "hreflang", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", 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 }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], referrerpolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerpolicy", required: false }] }], referrerPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "referrerPolicy", required: false }] }], hreflang: [{ type: i0.Input, args: [{ isSignal: true, alias: "hreflang", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const LinkVariantList = ['adaptive', 'brand', 'inline'];
 const LinkSizeList = ['medium', 'small'];
@@ -5306,6 +5620,7 @@ class DBNavigation {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
@@ -5320,12 +5635,16 @@ class DBNavigation {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5348,9 +5667,9 @@ class DBNavigation {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBNavigation, isStandalone: true, selector: "db-navigation", 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: `<nav
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBNavigation, isStandalone: true, selector: "db-navigation", 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: `<nav
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-navigation', className())"
   >
     <menu><ng-content></ng-content></menu>
@@ -5360,12 +5679,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `<nav
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-navigation', className())"
   >
     <menu><ng-content></ng-content></menu>
   </nav> `, 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 }] }] } });
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class NavigationContentDirective {
@@ -5410,6 +5729,7 @@ class DBNavigationItem {
         this.DEFAULT_BACK = DEFAULT_BACK;
         this.subNavigationExpanded = input(...(ngDevMode ? [undefined, { debugName: "subNavigationExpanded" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -5474,12 +5794,16 @@ class DBNavigationItem {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5503,9 +5827,9 @@ class DBNavigationItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     (mouseover)="navigationItemSafeTriangle()?.enableFollow()"
     (mouseleave)="navigationItemSafeTriangle()?.disableFollow()"
     (mousemove)="navigationItemSafeTriangle()?.followByMouseEvent($event)"
@@ -5517,7 +5841,7 @@ class DBNavigationItem {
     [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.aria-disabled]="getBooleanAsString(disabled())"
   >
-    @if(!hasSubNavigation()){ @if(text()){ {{text()}} }@else{
+    @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
     <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
     } } @if(hasSubNavigation()){
     <button
@@ -5527,7 +5851,7 @@ class DBNavigationItem {
       [attr.disabled]="getBoolean(disabled(), 'disabled')"
       (click)="handleClick($event)"
     >
-      @if(text()){ {{text()}} }@else{
+      @if(text()){{{text()}}}@else{
       <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
       }
     </button>
@@ -5549,13 +5873,13 @@ class DBNavigationItem {
       <ng-content select="[sub-navigation]"> </ng-content
     ></menu>
     }
-  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
+  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNavigationItem, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation-item", standalone: true, imports: [CommonModule, DBButton], template: `<li
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     (mouseover)="navigationItemSafeTriangle()?.enableFollow()"
     (mouseleave)="navigationItemSafeTriangle()?.disableFollow()"
     (mousemove)="navigationItemSafeTriangle()?.followByMouseEvent($event)"
@@ -5567,7 +5891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     [attr.data-wrap]="getBooleanAsString(wrap())"
     [attr.aria-disabled]="getBooleanAsString(disabled())"
   >
-    @if(!hasSubNavigation()){ @if(text()){ {{text()}} }@else{
+    @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
     <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
     } } @if(hasSubNavigation()){
     <button
@@ -5577,7 +5901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [attr.disabled]="getBoolean(disabled(), 'disabled')"
       (click)="handleClick($event)"
     >
-      @if(text()){ {{text()}} }@else{
+      @if(text()){{{text()}}}@else{
       <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
       }
     </button>
@@ -5603,7 +5927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { dbNavigationContent: [{
                 type: ContentChild,
                 args: [NavigationContentDirective, { read: TemplateRef }]
-            }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+            }], subNavigationExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "subNavigationExpanded", required: false }] }], 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], backButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonId", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$c = {};
 class DBNotification {
@@ -5623,6 +5947,7 @@ class DBNotification {
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
         this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
@@ -5653,12 +5978,16 @@ class DBNotification {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5681,9 +6010,9 @@ class DBNotification {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, 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: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", 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 }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-notification', className())"
     [attr.role]="getNotificationRole({
           semantic: semantic(),
@@ -5702,7 +6031,7 @@ class DBNotification {
     <header>{{headline()}}</header>
     }
     <p>
-      @if(text()){ {{text()}} }@else{
+      @if(text()){{{text()}}}@else{
       <ng-content></ng-content>
       }
     </p>
@@ -5721,13 +6050,13 @@ class DBNotification {
       >{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
     >
     }
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, decorators: [{
             type: Component,
             args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-notification', className())"
     [attr.role]="getNotificationRole({
           semantic: semantic(),
@@ -5746,7 +6075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <header>{{headline()}}</header>
     }
     <p>
-      @if(text()){ {{text()}} }@else{
+      @if(text()){{{text()}}}@else{
       <ng-content></ng-content>
       }
     </p>
@@ -5766,7 +6095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     >
     }
   </div> `, 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 }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _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 }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const NotificationVariantList = ['docked', 'standalone', 'overlay'];
 const NotificationLinkVariantList = ['block', 'inline'];
@@ -5781,6 +6110,7 @@ class DBPage {
         this.documentOverflow = input(...(ngDevMode ? [undefined, { debugName: "documentOverflow" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.mainClass = input(...(ngDevMode ? [undefined, { debugName: "mainClass" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
@@ -5797,12 +6127,16 @@ class DBPage {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -5851,9 +6185,9 @@ class DBPage {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", 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.2.0", version: "20.3.16", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-page', className())"
     [attr.data-variant]="variant()"
     [attr.data-fade-in]="getBooleanAsString(fadeIn())"
@@ -5868,7 +6202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-page", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-page', className())"
     [attr.data-variant]="variant()"
     [attr.data-fade-in]="getBooleanAsString(fadeIn())"
@@ -5878,7 +6212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <main [class]="cls('db-main', mainClass())"><ng-content></ng-content></main>
     <ng-content select="[footer]"> </ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fadeIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeIn", required: false }] }], documentOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentOverflow", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], mainClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainClass", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fadeIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeIn", required: false }] }], documentOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentOverflow", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], 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 }] }], mainClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainClass", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const PageVariantList = ['auto', 'fixed'];
 const PageDocumentOverflowList = ['hidden', 'auto'];
@@ -5899,7 +6233,7 @@ class DBPopover {
         const article = this._ref()?.nativeElement.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            delay(() => {
+            void delay(() => {
                 handleFixedPopover(article, this._ref()?.nativeElement, this.placement() ?? "bottom");
             }, 1);
         }
@@ -5959,6 +6293,7 @@ class DBPopover {
         this.getBooleanAsString = getBooleanAsString;
         this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
         this.gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
@@ -6031,12 +6366,16 @@ class DBPopover {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -6060,9 +6399,9 @@ class DBPopover {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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.2.0", version: "20.3.16", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-popover', className())"
   >
     <ng-content select="[trigger]"> </ng-content>
@@ -6084,7 +6423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-popover", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-popover', className())"
   >
     <ng-content select="[trigger]"> </ng-content>
@@ -6101,7 +6440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <ng-content></ng-content>
     </article>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], 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 }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$9 = {};
 class DBRadio {
@@ -6132,12 +6471,16 @@ class DBRadio {
             this.focus.emit(event);
         }
     }
+    resetIds() {
+        this._id.set(this.id() ?? this.propOverrides()?.id ?? `radio-${uuid()}`);
+    }
     constructor(renderer) {
         this.renderer = renderer;
         this.getHideProp = getHideProp;
         this.cls = cls;
         this.getBoolean = getBoolean;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.checked = input(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
         this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
@@ -6158,6 +6501,16 @@ class DBRadio {
         this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.initialized();
@@ -6219,12 +6572,16 @@ class DBRadio {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -6262,14 +6619,14 @@ class DBRadio {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-radio");
             this.initialized.set(true);
-            this._id.set(this.id() ?? `radio-${uuid()}`);
+            this.resetIds();
         }
     }
     ngOnDestroy() {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBRadio,
                 multi: true
@@ -6295,7 +6652,7 @@ class DBRadio {
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
     />
-    @if(label()){ {{label()}} }@else{
+    @if(label()){{{label()}}}@else{
     <ng-content></ng-content>
     }</label
   > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -6328,17 +6685,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
     />
-    @if(label()){ {{label()}} }@else{
+    @if(label()){{{label()}}}@else{
     <ng-content></ng-content>
     }</label
   > `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$8 = {};
 class DBSection {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.spacing = input(...(ngDevMode ? [undefined, { debugName: "spacing" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
@@ -6355,12 +6713,16 @@ class DBSection {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -6383,9 +6745,9 @@ class DBSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBSection, isStandalone: true, selector: "db-section", 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 }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-section', className())"
     [attr.data-spacing]="spacing() || 'medium'"
     [attr.data-width]="width()"
@@ -6397,14 +6759,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-section", standalone: true, imports: [CommonModule], template: `<section
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-section', className())"
     [attr.data-spacing]="spacing() || 'medium'"
     [attr.data-width]="width()"
   >
     <ng-content></ng-content>
   </section> `, 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 }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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 }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$7 = {};
 class DBSelect {
@@ -6491,6 +6853,14 @@ class DBSelect {
         // Default: show empty option for non-required selects
         return !this.required();
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `select-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        this._placeholderId.set(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
+    }
     trackByOptgroupOption0(_, optgroupOption) {
         return getOptionKey(optgroupOption, "select-optgroup-option-");
     }
@@ -6504,8 +6874,9 @@ class DBSelect {
         this.getOptionKey = getOptionKey;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
         this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
@@ -6547,6 +6918,16 @@ class DBSelect {
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -6631,12 +7012,16 @@ class DBSelect {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -6672,12 +7057,7 @@ class DBSelect {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-select");
             this.initialized.set(true);
-            const mId = this.id() ?? `select-${uuid()}`;
-            this._id.set(mId);
-            this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-            this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            this._placeholderId.set(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
+            this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
             // @ts-ignore
             this.writeValue?.(this.value?.() ?? "");
@@ -6687,7 +7067,7 @@ class DBSelect {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSelect,
                 multi: true
@@ -6787,7 +7167,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", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
+  </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSelect, decorators: [{
             type: Component,
@@ -6892,7 +7272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$6 = {};
 class DBStack {
@@ -6900,6 +7280,7 @@ class DBStack {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
@@ -6920,12 +7301,16 @@ class DBStack {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -6948,9 +7333,9 @@ class DBStack {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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.2.0", version: "20.3.16", type: DBStack, isStandalone: true, selector: "db-stack", 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 }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-stack', className())"
     [attr.data-gap]="gap()"
     [attr.data-variant]="variant()"
@@ -6966,7 +7351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-stack", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-stack', className())"
     [attr.data-gap]="gap()"
     [attr.data-variant]="variant()"
@@ -6977,7 +7362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   >
     <ng-content></ng-content>
   </div> `, 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 }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", 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 }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const StackVariantList = ['simple', 'divider'];
 const StackDirectionList = ['row', 'column'];
@@ -7052,6 +7437,13 @@ class DBSwitch {
             }
         }
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `switch-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(`${mId}${DEFAULT_MESSAGE_ID_SUFFIX}`);
+        this._validMessageId.set(`${mId}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
+        this._invalidMessageId.set(`${mId}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+    }
     constructor(renderer) {
         this.renderer = renderer;
         this.getBooleanAsString = getBooleanAsString;
@@ -7060,14 +7452,14 @@ class DBSwitch {
         this.getBoolean = getBoolean;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.DEFAULT_INVALID_MESSAGE = DEFAULT_INVALID_MESSAGE;
+        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
         this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
         this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
-        this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
         this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
         this.disabled = model(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
         this.visualAid = input(...(ngDevMode ? [undefined, { debugName: "visualAid" }] : []));
@@ -7096,6 +7488,16 @@ class DBSwitch {
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.validation();
@@ -7110,6 +7512,17 @@ class DBSwitch {
             }, {
             // Enable writing to signals inside effects
             });
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this._ref();
+                this.invalidMessage();
+                // ---
+                this._invalidMessage.set(this.invalidMessage() ||
+                    this._ref()?.nativeElement?.validationMessage ||
+                    DEFAULT_INVALID_MESSAGE);
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -7144,12 +7557,16 @@ class DBSwitch {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -7184,18 +7601,16 @@ class DBSwitch {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-switch");
-            this._id.set(this.id() ?? `switch-${uuid()}`);
-            this._messageId.set(`${this._id()}${DEFAULT_MESSAGE_ID_SUFFIX}`);
-            this._validMessageId.set(`${this._id()}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
-            this._invalidMessageId.set(`${this._id()}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+            this.resetIds();
             this.handleValidation();
+            this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
     ngOnDestroy() {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSwitch,
                 multi: true
@@ -7228,7 +7643,7 @@ class DBSwitch {
         (focus)="handleFocus($event)"
         (keydown)="handleKeyDown($event)"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -7252,15 +7667,14 @@ class DBSwitch {
       size="small"
       semantic="critical"
       [id]="_invalidMessageId()"
-      >{{_invalidMessage() ?? invalidMessage() ??
-            DEFAULT_INVALID_MESSAGE}}</db-infotext
+      >{{_invalidMessage()}}</db-infotext
     >
     <span
       data-visually-hidden="true"
       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", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
+  </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSwitch, decorators: [{
             type: Component,
@@ -7297,7 +7711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         (focus)="handleFocus($event)"
         (keydown)="handleKeyDown($event)"
       />
-      @if(label()){ {{label()}} }@else{
+      @if(label()){{{label()}}}@else{
       <ng-content></ng-content>
       }</label
     >
@@ -7321,8 +7735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       size="small"
       semantic="critical"
       [id]="_invalidMessageId()"
-      >{{_invalidMessage() ?? invalidMessage() ??
-            DEFAULT_INVALID_MESSAGE}}</db-infotext
+      >{{_invalidMessage()}}</db-infotext
     >
     <span
       data-visually-hidden="true"
@@ -7330,7 +7743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$4 = {};
 class DBTabItem {
@@ -7364,6 +7777,7 @@ class DBTabItem {
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.iconLeading = input(...(ngDevMode ? [undefined, { debugName: "iconLeading" }] : []));
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         this.iconTrailing = input(...(ngDevMode ? [undefined, { debugName: "iconTrailing" }] : []));
@@ -7431,12 +7845,16 @@ class DBTabItem {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -7486,13 +7904,13 @@ class DBTabItem {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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 }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTabItem,
                 multi: true
             }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li role="none" [class]="cls('db-tab-item', className())">
     <label
-      [attr.for]="id()"
+      [attr.for]="id() ?? propOverrides()?.id"
       [attr.data-icon]="iconLeading() ?? icon()"
       [attr.data-icon-trailing]="iconTrailing()"
       [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
@@ -7506,9 +7924,9 @@ class DBTabItem {
         [attr.checked]="getBoolean(checked(), 'checked')"
         #_ref
         [attr.name]="_name()"
-        [attr.id]="id()"
+        [attr.id]="id() ?? propOverrides()?.id"
         (input)="handleChange($event)" />
-      @if(label()){ {{label()}} } <ng-content></ng-content
+      @if(label()){{{label()}}} <ng-content></ng-content
     ></label>
   </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
@@ -7520,7 +7938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true
                         }], selector: "db-tab-item", standalone: true, imports: [CommonModule], template: `<li role="none" [class]="cls('db-tab-item', className())">
     <label
-      [attr.for]="id()"
+      [attr.for]="id() ?? propOverrides()?.id"
       [attr.data-icon]="iconLeading() ?? icon()"
       [attr.data-icon-trailing]="iconTrailing()"
       [attr.data-show-icon]="getBooleanAsString(showIconLeading() ?? showIcon())"
@@ -7534,18 +7952,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [attr.checked]="getBoolean(checked(), 'checked')"
         #_ref
         [attr.name]="_name()"
-        [attr.id]="id()"
+        [attr.id]="id() ?? propOverrides()?.id"
         (input)="handleChange($event)" />
-      @if(label()){ {{label()}} } <ng-content></ng-content
+      @if(label()){{{label()}}} <ng-content></ng-content
     ></label>
   </li> `, styles: [":host{display:contents}\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 }] }], 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 }] }] } });
+        }], 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 }] }] } });
 
 const defaultProps$3 = {};
 class DBTabList {
     constructor() {
         this.cls = cls;
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
@@ -7560,12 +7979,16 @@ class DBTabList {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -7588,9 +8011,9 @@ class DBTabList {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBTabList, isStandalone: true, selector: "db-tab-list", 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: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBTabList, isStandalone: true, selector: "db-tab-list", 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: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tab-list', className())"
   >
     <ul role="tablist">
@@ -7602,14 +8025,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tab-list', className())"
   >
     <ul role="tablist">
       <ng-content></ng-content>
     </ul>
   </div> `, 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 defaultProps$2 = {};
 class DBTabPanel {
@@ -7617,6 +8040,7 @@ class DBTabPanel {
         this.cls = cls;
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
     }
@@ -7631,12 +8055,16 @@ class DBTabPanel {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -7659,13 +8087,13 @@ class DBTabPanel {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", 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 }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<section
     role="tabpanel"
     #_ref
     [class]="cls('db-tab-panel', className())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
   >
-    @if(content()){ {{content()}} } <ng-content></ng-content>
+    @if(content()){{{content()}}} <ng-content></ng-content>
   </section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabPanel, decorators: [{
@@ -7674,11 +8102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     role="tabpanel"
     #_ref
     [class]="cls('db-tab-panel', className())"
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
   >
-    @if(content()){ {{content()}} } <ng-content></ng-content>
+    @if(content()){{{content()}}} <ng-content></ng-content>
   </section> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$1 = {};
 class DBTabs {
@@ -7815,6 +8243,7 @@ class DBTabs {
         this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : []));
         this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
         this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
@@ -7870,12 +8299,16 @@ class DBTabs {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -7904,9 +8337,9 @@ class DBTabs {
         this._resizeObserver.set(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, 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: "20.3.16", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
     [attr.data-orientation]="orientation()"
     [attr.data-scroll-behavior]="behavior()"
@@ -7917,10 +8350,10 @@ class DBTabs {
   >
     @if(showScrollLeft()){
     <db-button
-      class="tabs-scroll-left"
       variant="ghost"
       icon="chevron_left"
       type="button"
+      className="tabs-scroll-left"
       [noText]="true"
       (click)="scroll(true)"
     >
@@ -7945,10 +8378,10 @@ class DBTabs {
     <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
     } } @if(showScrollRight()){
     <db-button
-      class="tabs-scroll-right"
       variant="ghost"
       icon="chevron_right"
       type="button"
+      className="tabs-scroll-right"
       [noText]="true"
       (click)="scroll()"
     >
@@ -7956,13 +8389,13 @@ class DBTabs {
     </db-button>
     }
     <ng-content></ng-content>
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "content"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "propOverrides", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "propOverrides", "content"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabs, decorators: [{
             type: Component,
             args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
     #_ref
-    [attr.id]="id()"
+    [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
     [attr.data-orientation]="orientation()"
     [attr.data-scroll-behavior]="behavior()"
@@ -7973,10 +8406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   >
     @if(showScrollLeft()){
     <db-button
-      class="tabs-scroll-left"
       variant="ghost"
       icon="chevron_left"
       type="button"
+      className="tabs-scroll-left"
       [noText]="true"
       (click)="scroll(true)"
     >
@@ -8001,10 +8434,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
     } } @if(showScrollRight()){
     <db-button
-      class="tabs-scroll-right"
       variant="ghost"
       icon="chevron_right"
       type="button"
+      className="tabs-scroll-right"
       [noText]="true"
       (click)="scroll()"
     >
@@ -8013,7 +8446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     }
     <ng-content></ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], 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 }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const TabsBehaviorList = ['scrollbar', 'arrows'];
 const TabsInitialSelectedModeList = ['auto', 'manually'];
@@ -8083,6 +8516,13 @@ class DBTextarea {
             this.focus.emit(event);
         }
     }
+    resetIds() {
+        const mId = this.id() ?? this.propOverrides()?.id ?? `textarea-${uuid()}`;
+        this._id.set(mId);
+        this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+    }
     constructor(renderer) {
         this.renderer = renderer;
         this.cls = cls;
@@ -8094,8 +8534,9 @@ class DBTextarea {
         this.DEFAULT_ROWS = DEFAULT_ROWS;
         this.stringPropVisible = stringPropVisible;
         this.DEFAULT_VALID_MESSAGE = DEFAULT_VALID_MESSAGE;
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.invalidMessage = input(...(ngDevMode ? [undefined, { debugName: "invalidMessage" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : []));
         this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
         this.showMessage = input(...(ngDevMode ? [undefined, { debugName: "showMessage" }] : []));
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
@@ -8142,6 +8583,16 @@ class DBTextarea {
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
+            effect(() => {
+                // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                this.id();
+                // ---
+                if (this.id() ?? this.propOverrides()?.id) {
+                    this.resetIds();
+                }
+            }, {
+            // Enable writing to signals inside effects
+            });
             effect(() => {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
@@ -8218,12 +8669,16 @@ class DBTextarea {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -8258,11 +8713,7 @@ class DBTextarea {
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-textarea");
-            const mId = this.id() ?? `textarea-${uuid()}`;
-            this._id.set(mId);
-            this._messageId.set(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-            this._validMessageId.set(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
         }
     }
@@ -8270,7 +8721,7 @@ class DBTextarea {
         this.abortController()?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showResizer: { classPropertyName: "showResizer", publicName: "showResizer", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", 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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showResizer: { classPropertyName: "showResizer", publicName: "showResizer", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTextarea,
                 multi: true
@@ -8335,7 +8786,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", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
+  </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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTextarea, decorators: [{
             type: Component,
@@ -8405,7 +8856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       >{{_voiceOverFallback()}}</span
     >
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", 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 }] }] } });
+        }], 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 }] }] } });
 
 const TextareaResizeList = ['none', 'both', 'horizontal', 'vertical'];
 const TextareaWrapList = ['hard', 'soft', 'off'];
@@ -8440,5 +8891,5 @@ const AlignmentList = ['start', 'center'];
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
+export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map