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

package/dist/collection/components/custom-select-form-field/custom-select-form-field.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBCustomSelectFormField {
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
-        return (h("summary", { key: '22a05256e65e56208335b9a5c840e75988a57182', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("summary", { key: '6bd88cd88890b6c4fd6fc231dbce401ae0a1b72e', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '3c6c62df9bf0d2a73e37a9ad69d3a46daa672984' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '3cf997efe556cbf62f590adad219b60459549cc8' })));
     }
     static get is() { return "db-custom-select-form-field"; }
     static get properties() {
@@ -74,6 +79,30 @@ export class DBCustomSelectFormField {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectFormFieldProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectFormFieldProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select-form-field/model.ts::DBCustomSelectFormFieldProps",
+                            "referenceLocation": "DBCustomSelectFormFieldProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/custom-select-list/custom-select-list.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBCustomSelectList {
         this.enableAttributePassing(this._ref, "db-custom-select-list");
     }
     render() {
-        return (h("div", { key: 'f47e219aac45d07e958a94969205260af981bcf1', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '7694da5a9c97c4f603217d79afd88afe63719db8', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("ul", { key: 'adca0d159ec4cd5d2dc46f11fe41006276dba94f' }, h("slot", { key: 'abb6edfb683a3e4a42512b2185854099c66f1f3c' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '5c718c452425cfec8a6234d5ae2cf6aef7ed4655' }, h("slot", { key: '93b311c5a750a9ec2b0cb9ab4f7453aa25cc77d8' }))));
     }
     static get is() { return "db-custom-select-list"; }
     static get properties() {
@@ -126,6 +131,30 @@ export class DBCustomSelectList {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectListProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectListProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
+                            "referenceLocation": "DBCustomSelectListProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/custom-select-list-item/custom-select-list-item.js

@@ -31,12 +31,16 @@ export 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");
@@ -63,12 +67,13 @@ export class DBCustomSelectListItem {
         this.watch0Fn();
     }
     render() {
-        return (h("li", { key: '1155e389f33c440e04b5e7ca71732d108925e2cd', class: cls("db-custom-select-list-item", this.className, {
+        var _a, _b;
+        return (h("li", { key: '40ae5213dd63ce580e2a036e5bf4781065026a30', class: cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-divider": getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : h("slot", null))) : (h("span", null, this.groupTitle))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : h("slot", null))) : (h("span", null, this.groupTitle))));
     }
     static get is() { return "db-custom-select-list-item"; }
     static get properties() {
@@ -203,6 +208,30 @@ export class DBCustomSelectListItem {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectListItemProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectListItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
+                            "referenceLocation": "DBCustomSelectListItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/divider/divider.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBDivider {
         this.enableAttributePassing(this._ref, "db-divider");
     }
     render() {
-        return (h("div", { key: '0e9bf54bcd77ec1c324eb6300162bbf8c67b8c16', class: cls("db-divider", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '6085ef73845be698561795af1a69cee864b31b7d', class: cls("db-divider", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }
     static get is() { return "db-divider"; }
     static get properties() {
@@ -74,6 +79,30 @@ export class DBDivider {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBDividerProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBDividerProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/divider/model.ts::DBDividerProps",
+                            "referenceLocation": "DBDividerProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "margin": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/drawer/drawer.js

@@ -82,12 +82,16 @@ export 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");
@@ -129,12 +133,12 @@ export class DBDrawer {
         this.watch1Fn();
     }
     render() {
-        var _a;
-        return (h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
+        var _a, _b, _c;
+        return (h("dialog", { key: '4a002d3faba35e33b0ad6f37eb4c1bc8e1fcbe13', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '644050fdd2392c907e6cc375ace9dcc4205f4b7f', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), h("db-button", { key: '4a9ad6ba576480b154614da72752421a8ff81df6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: 'f4dc3a298eafc6c45d2bdf459c90a58faf856925', class: "db-drawer-header" }, h("div", { key: '21d808fe191e85f15f7c2a1512ad461199494c6e', class: "db-drawer-header-text" }, h("slot", { key: '4962256732612a5d5f629540916874189bc0f0e0', name: "drawerHeader" })), h("db-button", { key: '494015c896edb8b246f7c734d8906182043cfaf6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: '00ffdb6c782d620e0ac6d7fdb41312c65c68b197', class: "db-drawer-content" }, h("slot", { key: 'edc0a393b10741fd41de513b3572b4ce7ce2cae3' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -269,6 +273,30 @@ export class DBDrawer {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBDrawerProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBDrawerProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/drawer/model.ts::DBDrawerProps",
+                            "referenceLocation": "DBDrawerProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "direction": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/header/header.js

@@ -39,12 +39,16 @@ export 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");
@@ -80,10 +84,10 @@ export class DBHeader {
         this.watch0Fn();
     }
     render() {
-        var _a;
-        return (h("header", { key: 'f9850f5a6f59bee2ed97db4baea343e07aaff91a', class: cls("db-header", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("header", { key: '472c3e72f6651ee5c09bc306cb46256782600379', class: cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: '32f62d8f0bf634e96cf7b0e96721fcd40aa3a3eb', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'a42c28439d07e97a3842efe4fa1c143c23691b5f', class: "db-header-drawer-navigation" }, h("div", { key: '141165e04574db312d51b0b4c376c53ddace243e', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '2208e0677b1f15da56fd6be230523559fcb5f1da' })), h("div", { key: 'fb980500cdb2f6f3ce2fce2489c48ac27ebd256a', class: "db-header-meta-navigation" }, h("slot", { key: '7eea7189a1e82821fc3f0bd600bda5a040382e88', name: "metaNavigation" }))), h("div", { key: 'a492419586593d43edbada69ad136ad832902e15', class: "db-header-secondary-action" }, h("slot", { key: '90ed75a19c230c3a2af94b8e0b397c8712f9a0df', name: "secondaryAction" }))), h("div", { key: '1d0451bd1f522f51cbd2bab3cd1b7c316fd644b4', class: "db-header-meta-navigation" }, h("slot", { key: 'd92c5a30a0131225f2b7b1428c5121fed241d8a7', name: "metaNavigation" })), h("div", { key: 'f65c8e6b2b997c281046f20e1ac7c89d8b5697f6', class: "db-header-navigation-bar" }, h("div", { key: 'be1e1017417595bbb4ff845b650f5edef1f4fd49', class: "db-header-brand-container" }, h("slot", { key: '5552b137967ae4659887ad67514fd0078ced1473', name: "brand" })), h("div", { key: '682e11b41f5131feb17cdf1e175b9bbcf8399740', class: "db-header-navigation-container" }, h("div", { key: '29f5a7afa6d8c014f6e574d72198289970e5324e', class: "db-header-navigation" }, h("slot", { key: 'f03956cf3368d3ec0dbaab3b3091c276eaf03a92' })), h("div", { key: '8a81b9ee537f84e14c9d41acf323552d6f239748', class: "db-header-primary-action" }, h("slot", { key: '78ae4dbdc9bcad5bd4bd951a0a334c47cb35bcf6', name: "primaryAction" }))), h("div", { key: 'e1e913c181df2f73cc9fe4cda17f505a26b1ad04', class: "db-header-action-container" }, h("div", { key: '92d7c9c0e50f9aa86e15c18a2ac7dddabc241358', class: "db-header-burger-menu-container" }, h("db-button", { key: '775ca507ba24b19e411e529e9ad67fcdfa6f3dea', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: '7cd5a16e27c72e3e0635056df8bcb7f45461c9fb', class: "db-header-secondary-action" }, h("slot", { key: '09669c165311f8dc95961c64900d5ab36281700a', name: "secondaryAction" }))))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: 'e43b6fe88c420aafcccbe10c1852b1ad8c640a67', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'cd1d184da10661cc41a32c7b26e352a01d62acb5', class: "db-header-drawer-navigation" }, h("div", { key: 'a7f992b669f4efdc58a05eef1d45d0b279eb652d', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '24fb78c5ba0eff9d594f8b41eb3bc986e7163276' })), h("div", { key: 'e509d62474a96831495428c5becb9fbf07b27b45', class: "db-header-meta-navigation" }, h("slot", { key: '65a8037fc817c20078f4e2e056268d40a973190a', name: "metaNavigation" }))), h("div", { key: 'ccb1c32adfcfcf8c94c1d9683e97140e99c7bc4b', class: "db-header-secondary-action" }, h("slot", { key: 'c1bd838bf97674d7537ad23d74b448f0e6f6b60b', name: "secondaryAction" }))), h("div", { key: '580b1e921589716809c6add27d0ebbd4577c36c5', class: "db-header-meta-navigation" }, h("slot", { key: '38264be6e940feb9b1d5f7c20133036af0db4467', name: "metaNavigation" })), h("div", { key: 'fab3ea7eb1b20b5626eb481e23eed33196e5391e', class: "db-header-navigation-bar" }, h("div", { key: '5c09d40a2d4db6fd3c04406d3f39f4e9a61f9c9c', class: "db-header-brand-container" }, h("slot", { key: '762b7e3669486369d0440af4774358c2be73aa6f', name: "brand" })), h("div", { key: 'a19ea0d8ce9d34a05a041fa489bf9586116296d0', class: "db-header-navigation-container" }, h("div", { key: '1bf7424bcbd9903f52bd55f1459481d73da47769', class: "db-header-navigation" }, h("slot", { key: '928dab58c49293b0ddc6014d491d839b07394832' })), h("div", { key: 'e470c62116f04772d3daac1c6088b69957fc8e22', class: "db-header-primary-action" }, h("slot", { key: '726b5e41a818a50bded6c79df27a697c132e1793', name: "primaryAction" }))), h("div", { key: 'c00bb939d06ab93e7f2979c13713841d48044cf9', class: "db-header-action-container" }, h("div", { key: '52444a5096ccda4b0bf62657aa6ac904ccb93720', class: "db-header-burger-menu-container" }, h("db-button", { key: '22ed7c031d16610ff0cb62badf90e8388867b296', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '9a6e595cf1d6d14357c8223e422517e0f3753e64', class: "db-header-secondary-action" }, h("slot", { key: 'ed8ac7dbd116208d0a1158335deacb64c7278de8', name: "secondaryAction" }))))));
     }
     static get is() { return "db-header"; }
     static get properties() {
@@ -192,6 +196,30 @@ export class DBHeader {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBHeaderProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBHeaderProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/header/model.ts::DBHeaderProps",
+                            "referenceLocation": "DBHeaderProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "width": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/icon/icon.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBIcon {
         this.enableAttributePassing(this._ref, "db-icon");
     }
     render() {
-        return (h("span", { key: '3a67532009f85e493784e99774e230f52c588ccc', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        var _a, _b;
+        return (h("span", { key: '4e41afd86be65137a69847bb0c154e4af951581d', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : h("slot", null)));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : h("slot", null)));
     }
     static get is() { return "db-icon"; }
     static get properties() {
@@ -74,6 +79,30 @@ export class DBIcon {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBIconProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBIconProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/icon/model.ts::DBIconProps",
+                            "referenceLocation": "DBIconProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/infotext/infotext.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,10 +45,10 @@ export class DBInfotext {
         this.enableAttributePassing(this._ref, "db-infotext");
     }
     render() {
-        var _a;
-        return (h("span", { key: 'c126d11d979284931006fa76b2a6a49e396f394c', class: cls("db-infotext", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("span", { key: '8251add62131b09f6e32c20c50619c5e725e5b8e', class: cls("db-infotext", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-show-icon-leading": getBooleanAsString((_a = this.showIcon) !== null && _a !== void 0 ? _a : true) }, this.text ? this.text : h("slot", null)));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": getBooleanAsString(this.wrap), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true) }, this.text ? this.text : h("slot", null)));
     }
     static get is() { return "db-infotext"; }
     static get properties() {
@@ -75,6 +79,30 @@ export class DBInfotext {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInfotextProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBInfotextProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/infotext/model.ts::DBInfotextProps",
+                            "referenceLocation": "DBInfotextProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,
@@ -179,6 +207,32 @@ export class DBInfotext {
                 "reflect": false,
                 "attribute": "size"
             },
+            "wrap": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInfotextProps[\"wrap\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBInfotextProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/infotext/model.ts::DBInfotextProps",
+                            "referenceLocation": "DBInfotextProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap"
+            },
             "showIcon": {
                 "type": "any",
                 "mutable": false,