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

package/dist/collection/components/switch/switch.js

@@ -81,6 +81,14 @@ export class DBSwitch {
             }
         }
     }
+    resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `switch-${uuid()}`;
+        this._id = mId;
+        this._messageId = `${mId}${DEFAULT_MESSAGE_ID_SUFFIX}`;
+        this._validMessageId = `${mId}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
+        this._invalidMessageId = `${mId}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -92,12 +100,16 @@ export 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");
@@ -114,12 +126,31 @@ export class DBSwitch {
         }
     }
     watch0Fn() {
-        this.handleValidation();
+        var _a, _b;
+        if ((_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            this.resetIds();
+        }
     }
     watch0() {
         this.watch0Fn();
     }
     watch1Fn() {
+        this.handleValidation();
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        var _a;
+        this._invalidMessage =
+            this.invalidMessage ||
+                ((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+                DEFAULT_INVALID_MESSAGE;
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
         if (this._ref) {
             const defaultChecked = undefined;
             let controller = this.abortController;
@@ -135,33 +166,58 @@ export class DBSwitch {
             }, controller.signal);
         }
     }
-    watch1() {
-        this.watch1Fn();
+    watch3() {
+        this.watch3Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-switch");
-        this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`;
-        this._messageId = `${this._id}${DEFAULT_MESSAGE_ID_SUFFIX}`;
-        this._validMessageId = `${this._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
-        this._invalidMessageId = `${this._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;
+        this.resetIds();
         this.handleValidation();
+        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("div", { key: 'f2dab897c89fa8aadd97abe59e81b4d7ef4561c5', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '8d7c3e44a9f7c565224124d499abe6c3b96582f6', htmlFor: this._id }, h("input", { key: '1cba4d3dbe46c97cd9039442e61eb0d9baab0587', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '5d55932625984fa62f0ee9d86f3d89f5b63f9072', class: cls("db-switch", this.className), "data-visual-aid": getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, h("label", { key: '711ab3c882dbd490e19400ecf5d926f5bf80e95e', htmlFor: this._id }, h("input", { key: 'aa50031870b7ee76e1f1e6f9bd5dd14b9013de18', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '9495dfc7fb2e3947f21b834792c4caeab411bbd0', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE), h("span", { key: '6e6b325689130fc5cdeef86d3a4f59299b5f8450', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: getBoolean(this.checked, "checked"), value: this.value, disabled: getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '95f846f3de48f29bef0406c3c19d0314a2a0cfc6', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '297a64a0c5b5faf97a3f685ab78eea7145fe700e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-switch"; }
     static get properties() {
         return {
+            "invalidMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"invalidMessage\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps",
+                            "referenceLocation": "DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-message"
+            },
             "id": {
                 "type": "string",
                 "mutable": false,
@@ -188,6 +244,30 @@ export class DBSwitch {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBSwitchProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBSwitchProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/switch/model.ts::DBSwitchProps",
+                            "referenceLocation": "DBSwitchProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "validation": {
                 "type": "string",
                 "mutable": false,
@@ -318,32 +398,6 @@ export class DBSwitch {
                 "reflect": false,
                 "attribute": "valid-message"
             },
-            "invalidMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBSwitchProps[\"invalidMessage\"]",
-                    "resolved": "string",
-                    "references": {
-                        "DBSwitchProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/switch/model.ts::DBSwitchProps",
-                            "referenceLocation": "DBSwitchProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid-message"
-            },
             "checked": {
                 "type": "any",
                 "mutable": false,
@@ -475,11 +529,11 @@ export class DBSwitch {
                 "attribute": "show-label"
             },
             "variant": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSwitchProps[\"variant\"]",
-                    "resolved": "never",
+                    "resolved": "\"leading\" | \"trailing\"",
                     "references": {
                         "DBSwitchProps": {
                             "location": "import",
@@ -496,7 +550,9 @@ export class DBSwitch {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             },
             "showRequiredAsterisk": {
                 "type": "any",
@@ -796,29 +852,41 @@ export class DBSwitch {
     }
     static get watchers() {
         return [{
-                "propName": "validation",
+                "propName": "id",
                 "methodName": "watch0"
             }, {
-                "propName": "required",
+                "propName": "propOverrides?.id",
                 "methodName": "watch0"
+            }, {
+                "propName": "validation",
+                "methodName": "watch1"
+            }, {
+                "propName": "required",
+                "methodName": "watch1"
             }, {
                 "propName": "message",
-                "methodName": "watch0"
+                "methodName": "watch1"
             }, {
                 "propName": "showMessage",
-                "methodName": "watch0"
+                "methodName": "watch1"
             }, {
                 "propName": "validMessage",
-                "methodName": "watch0"
+                "methodName": "watch1"
             }, {
                 "propName": "invalidMessage",
-                "methodName": "watch0"
+                "methodName": "watch1"
             }, {
                 "propName": "checked",
-                "methodName": "watch0"
+                "methodName": "watch1"
             }, {
                 "propName": "_ref",
-                "methodName": "watch1"
+                "methodName": "watch2"
+            }, {
+                "propName": "invalidMessage",
+                "methodName": "watch2"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch3"
             }];
     }
 }

package/dist/collection/components/tab-item/tab-item.js

@@ -43,12 +43,16 @@ export 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");
@@ -108,10 +112,10 @@ export class DBTabItem {
         }
     }
     render() {
-        var _a, _b;
-        return (h("li", { key: '9bbc9bdc6c450f62ce790a2662b165f9fad484ea', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'e3a4e3afdd250587b5d0cef54eb7d8302980199f', htmlFor: this.id, "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: '372cd912646fd40dc31f49d344d60526442a0f7a', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("li", { key: 'aa5a73d9a5f1482623ebdb8a79846b478ecf9fd1', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'b6148c23f64ffd2d9153db7e8e3d39a90f009da3', htmlFor: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-icon-trailing": this.iconTrailing, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-no-text": getBooleanAsString(this.noText) }, h("input", { key: 'c7d167364eaa4f9cee156d9260553b14d60ffb13', type: "radio", role: "tab", disabled: getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: this.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: '843e696cad853b5ce9d582f210efe86f3d270cb8' }))));
+            }, name: this._name, id: (_e = this.id) !== null && _e !== void 0 ? _e : (_f = this.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", { key: 'aab78a92118a8ea9b7ffcb446ead8211294a6e6c' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {
@@ -220,6 +224,30 @@ export class DBTabItem {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabItemProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTabItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-item/model.ts::DBTabItemProps",
+                            "referenceLocation": "DBTabItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "iconLeading": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/tab-list/tab-list.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBTabList {
         this.enableAttributePassing(this._ref, "db-tab-list");
     }
     render() {
-        return (h("div", { key: 'a2d1cf85f398ee76b560e9aa1c7f84871d752432', class: cls("db-tab-list", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '9d2121250cb2a12971ea33774d8ff9e79117d18e', class: cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("ul", { key: '03498821ff3ff623e16313782c67384e7708eecf', role: "tablist" }, h("slot", { key: '10eba579352100e449568b7ec38e4cc73efb0463' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: 'db93a3777f11ee39e15633b0b5ae501b0526d73d', role: "tablist" }, h("slot", { key: '14d45a6c1693c5c2bdb2d422397e6ddeb93bf5b3' }))));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {
@@ -74,6 +79,30 @@ export class DBTabList {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabListProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTabListProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-list/model.ts::DBTabListProps",
+                            "referenceLocation": "DBTabListProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/tab-panel/tab-panel.js

@@ -16,12 +16,16 @@ export 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");
@@ -41,9 +45,10 @@ export class DBTabPanel {
         this.enableAttributePassing(this._ref, "db-tab-panel");
     }
     render() {
-        return (h("section", { key: '312ef04379d3b4a094999f02ac919e3b0ac31877', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        var _a, _b;
+        return (h("section", { key: '3cae700e240af4818416120b8c85fc91839c7fa1', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.content ? this.content : null, h("slot", { key: '7848155bb7734db6835c0fe7fcf85eb37635110d' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.content ? this.content : null, h("slot", { key: '25595de165921a31119ffd785bd5c569c42fa557' })));
     }
     static get is() { return "db-tab-panel"; }
     static get properties() {
@@ -100,6 +105,30 @@ export class DBTabPanel {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabPanelProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTabPanelProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tab-panel/model.ts::DBTabPanelProps",
+                            "referenceLocation": "DBTabPanelProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "content": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/tabs/tabs.js

@@ -143,12 +143,16 @@ export 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");
@@ -201,11 +205,11 @@ export class DBTabs {
         this._resizeObserver = undefined;
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("div", { key: '0ba78eeed24756c5a55acef3080c4d66db43139b', class: cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '6d273b967668288248c3853be80261a877d3ae04', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_a = this.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = this.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_c = this.convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = this.convertTabs()) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '30e17d6cbc5899d97c5f1ffc73e4c09ccbff1dc1' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-orientation": this.orientation, "data-scroll-behavior": this.behavior, "data-alignment": (_c = this.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = this.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => this.handleChange(event), onChange: (event) => this.handleChange(event) }, this.showScrollLeft ? (h("db-button", { class: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, "Scroll left")) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_e = this.convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (h("db-tab-item", { key: this.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = this.convertTabs()) === null || _f === void 0 ? void 0 :
+            _f.map((tab, index) => (h("db-tab-panel", { key: this.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null, this.showScrollRight ? (h("db-button", { class: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, "Scroll right")) : null, h("slot", { key: '04f5d96f32695ae2661ace77827ee783eb0f23d0' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
@@ -418,6 +422,30 @@ export class DBTabs {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTabsProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tabs/model.ts::DBTabsProps",
+                            "referenceLocation": "DBTabsProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/tag/tag.js

@@ -32,12 +32,16 @@ export 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");
@@ -57,10 +61,10 @@ export class DBTag {
         this.enableAttributePassing(this._ref, "db-tag");
     }
     render() {
-        var _a;
-        return (h("div", { key: 'db86fabfde3f9d1e41a863f58db34eb88d067440', class: cls("db-tag", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("div", { key: 'd84df9f55535db4fbe9befd09fd2eef8125069c4', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '1bef11e30ca670fa5bf1d438cd12c43e233cded4', name: "content" }), h("slot", { key: '3f94141f60688d0730478711748fa9dbb194f810' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '9f4d27ce3f4d4d2e1d193167148168a2cb8784dd', name: "content" }), h("slot", { key: '9feecc10d65e9f807709e5d90b90f69be72b8efb' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
     static get is() { return "db-tag"; }
     static get properties() {
@@ -117,6 +121,30 @@ export class DBTag {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTagProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTagProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/tag/model.ts::DBTagProps",
+                            "referenceLocation": "DBTagProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,