@db-ux/wc-core-components 4.4.3 → 4.5.1

package/dist/collection/components/stack/stack.js

@@ -45,9 +45,10 @@ export class DBStack {
         this.enableAttributePassing(this._ref, "db-stack");
     }
     render() {
-        return (h("div", { key: '8e1a65def48c19955230380ca6795ddc19306278', class: cls("db-stack", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: 'e8a95918ab5412c03412b92adb3f2a2d5979d492', class: cls("db-stack", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap) }, h("slot", { key: '170c71100d2005b60f5f6cf7432180d4a960ea16' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": getBooleanAsString(this.wrap) }, h("slot", { key: 'b95b19d6ff1a61f416eadfb14d9e19647e4f6cb4' })));
     }
     static get is() { return "db-stack"; }
     static get properties() {
@@ -78,6 +79,30 @@ export class DBStack {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBStackProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBStackProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/stack/model.ts::DBStackProps",
+                            "referenceLocation": "DBStackProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

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
@@ -118,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;
@@ -139,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: '381988aad06b23fd3e1da260baa8767e65149bd1', 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: '88dde462a4617702b4c4ef9458e9c83d183b0a75', htmlFor: this._id }, h("input", { key: '740ea4c6d187bef60bd240d67ea564c96205bb15', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '66c2badcfc403e68d44d93cd1a79d087b212bbd6', 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: 'c22fc86dd012f6de327f861cca3c1b4ab4f3605d', htmlFor: this._id }, h("input", { key: '3d1532eee9a137f2a1db1ba1574856ecc61833d8', 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: 'af53c40d0292aa12daab8e30c2a18a69a3f70477', 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: 'b70a42d0cdc3f3d0e63672af09293d0dbd263262', "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: 'd24f80874212a9a9669d5731d9e5b6f4f3be6001', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'cb3420bd986f1398094fbac151d27a5c2f392d7d', "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,
@@ -192,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,
@@ -322,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,
@@ -802,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

@@ -112,10 +112,10 @@ export class DBTabItem {
         }
     }
     render() {
-        var _a, _b;
-        return (h("li", { key: 'd41844269899bdbe6f51e5b233e7231de9684896', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: '7457d13ecb96dabfa6b7db882dd859db3e5835aa', 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: '9ac547b1cc507744eae9cef47b0f07ef77664353', 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: '0b8687c942d18b49bdf25249be3f0ae1ca727256', class: cls("db-tab-item", this.className), role: "none" }, h("label", { key: 'b9eaa4d53de58d78d7f968d18b021c9cfe013502', 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: '81cf38a1a39e88fc85282e8b82d43768ce6f70a4', 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: 'f647866c15651dbfa8f553c3628f75db7ff2f706' }))));
+            }, 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: '89a4ba46af36e8dcc3bc53f87d17977c5827cd12' }))));
     }
     static get is() { return "db-tab-item"; }
     static get properties() {
@@ -224,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

@@ -45,9 +45,10 @@ export class DBTabList {
         this.enableAttributePassing(this._ref, "db-tab-list");
     }
     render() {
-        return (h("div", { key: 'b957f2a462786de26787834a1ee87584c5a07a5a', class: cls("db-tab-list", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: '8f02145864a04b79d94d5d5923b6eff32346a0c3', class: cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("ul", { key: 'c7e7884642f3914237bb576f0460337b2e2598ed', role: "tablist" }, h("slot", { key: '5edad46fde906c2903fcfdad2dca8ded8ba0854c' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '759fdba6e69209ca915148c8b190f9311cb6f1ff', role: "tablist" }, h("slot", { key: '96bf4a10d3b422d6eb6be68c46f926b9f55eb0e6' }))));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {
@@ -78,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

@@ -45,9 +45,10 @@ export class DBTabPanel {
         this.enableAttributePassing(this._ref, "db-tab-panel");
     }
     render() {
-        return (h("section", { key: 'f44bf1489cf2917d2c114eccb1e2c863630baa18', class: cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        var _a, _b;
+        return (h("section", { key: 'c10873d5857be6ea8653189ab735784939c53474', 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: 'a21fe75df9dbb089c1520a0cc1ce040fefe0bacd' })));
+            }, 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: '57a98a1b7e26ca61b16397b7615f71d883bfbd28' })));
     }
     static get is() { return "db-tab-panel"; }
     static get properties() {
@@ -104,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

@@ -205,11 +205,11 @@ export class DBTabs {
         this._resizeObserver = undefined;
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("div", { key: 'd1ce43010fda441bb6190b71624b6f72bb6a2a5b', class: cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '20d8d662866ff60717de87ad4deb98a3b647672a', 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: '2b4836a486ca06290a4fc64cb3922b62cd999add' })));
+            }, 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: 'f9803a647f9a01adc0b20eb6bdb999f38c3602af' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
@@ -422,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

@@ -61,10 +61,10 @@ export class DBTag {
         this.enableAttributePassing(this._ref, "db-tag");
     }
     render() {
-        var _a;
-        return (h("div", { key: 'c0f6907ce1246c8047c5af115a093ecaa4032a55', class: cls("db-tag", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("div", { key: '61faefa2e89ddb597fcca3cb12f7d31c337e556a', 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: 'c5e244aebde8e2fa54bcd61e66d69559a607a952', name: "content" }), h("slot", { key: '7356f14f2c11b4180f1f59ef8bd5a4e0dffb9d9c' }), 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: 'e5650c1151f1e86f51138c5e8b292e780bf7544b', name: "content" }), h("slot", { key: 'e4023db11c7b59964b4df105eb3af969ba3d558a' }), 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() {
@@ -121,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,