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

package/dist/collection/components/accordion/accordion.js

@@ -1,4 +1,3 @@
-import { DEFAULT_ID } from "../../shared/constants";
 import { cls, uuid } from "../../utils";
 import { h } from "@stencil/core";
 /**
@@ -7,7 +6,6 @@ import { h } from "@stencil/core";
  */
 export class DBAccordion {
     constructor() {
-        this._id = DEFAULT_ID;
         this._name = "";
         this.initialized = false;
         this._initOpenIndexDone = false;
@@ -67,9 +65,7 @@ export class DBAccordion {
                     }
                 }
                 else {
-                    if (this._name !== this._id && this._id) {
-                        this._name = this._id;
-                    }
+                    this._name = `accordion-${uuid()}`;
                 }
             }
             else {
@@ -122,7 +118,6 @@ export class DBAccordion {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-accordion");
-        this._id = this.id || "accordion-" + uuid();
         this.initialized = true;
         this._initOpenIndexDone = true;
         this.watch0Fn();
@@ -131,20 +126,20 @@ export class DBAccordion {
     }
     render() {
         var _a;
-        return (h("ul", { key: '91f6c44d0b30b23d247af72e0eefd7629db29a36', class: cls("db-accordion", this.className), ref: (el) => {
+        return (h("ul", { key: '8b685b2a23ec00359a75ae143121c023d86a5eb5', class: cls("db-accordion", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
+            }, id: this.id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
             ? (_a = this.convertItems()) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
             : null));
     }
     static get is() { return "db-accordion"; }
     static get properties() {
         return {
-            "id": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionProps[\"id\"]",
+                    "original": "DBAccordionProps[\"name\"]",
                     "resolved": "string",
                     "references": {
                         "DBAccordionProps": {
@@ -164,14 +159,14 @@ export class DBAccordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "name"
             },
-            "name": {
+            "behavior": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionProps[\"name\"]",
-                    "resolved": "string",
+                    "original": "DBAccordionProps[\"behavior\"]",
+                    "resolved": "\"multiple\" | \"single\"",
                     "references": {
                         "DBAccordionProps": {
                             "location": "import",
@@ -190,14 +185,14 @@ export class DBAccordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "behavior"
             },
-            "behavior": {
-                "type": "string",
+            "initOpenIndex": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionProps[\"behavior\"]",
-                    "resolved": "\"multiple\" | \"single\"",
+                    "original": "DBAccordionProps[\"initOpenIndex\"]",
+                    "resolved": "number[]",
                     "references": {
                         "DBAccordionProps": {
                             "location": "import",
@@ -214,16 +209,14 @@ export class DBAccordion {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "behavior"
+                "setter": false
             },
-            "initOpenIndex": {
-                "type": "unknown",
+            "items": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionProps[\"initOpenIndex\"]",
-                    "resolved": "number[]",
+                    "original": "DBAccordionProps[\"items\"]",
+                    "resolved": "DBAccordionItemDefaultProps[] | string",
                     "references": {
                         "DBAccordionProps": {
                             "location": "import",
@@ -240,14 +233,16 @@ export class DBAccordion {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
             },
-            "items": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionProps[\"items\"]",
-                    "resolved": "DBAccordionItemDefaultProps[] | string",
+                    "original": "DBAccordionProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
                         "DBAccordionProps": {
                             "location": "import",
@@ -266,7 +261,7 @@ export class DBAccordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "items"
+                "attribute": "id"
             },
             "className": {
                 "type": "string",
@@ -324,7 +319,6 @@ export class DBAccordion {
     }
     static get states() {
         return {
-            "_id": {},
             "_name": {},
             "initialized": {},
             "_initOpenIndexDone": {}
@@ -340,9 +334,6 @@ export class DBAccordion {
             }, {
                 "propName": "behavior",
                 "methodName": "watch0"
-            }, {
-                "propName": "_id",
-                "methodName": "watch0"
             }, {
                 "propName": "_ref",
                 "methodName": "watch1"

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

@@ -1,5 +1,4 @@
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, getBooleanAsString, uuid } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -7,7 +6,6 @@ import { h, } from "@stencil/core";
  */
 export class DBAccordionItem {
     constructor() {
-        this._id = DEFAULT_ID;
         this._open = false;
         this._name = undefined;
         this.initialized = false;
@@ -81,7 +79,6 @@ export class DBAccordionItem {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-accordion-item");
-        this._id = this.id || "accordion-item-" + uuid();
         if (this.defaultOpen) {
             this._open = this.defaultOpen;
         }
@@ -90,19 +87,19 @@ export class DBAccordionItem {
         this.watch1Fn();
     }
     render() {
-        return (h("li", { key: '8d83cc801cb95a73fc14fd6498c243f5c6afa22b', class: cls("db-accordion-item", this.className), id: this._id }, h("details", { key: '34273cd5211ae03c006350b9c7537fced121a7a2', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
+        return (h("li", { key: 'c2a0b702c0e173c96208dca96194f3f36ce5e417', class: cls("db-accordion-item", this.className), id: this.id }, h("details", { key: '7d396568c8cc585f5f05c24857168afbc3d639f7', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, h("summary", { key: 'ec28c1a939f3cabab7b6b842fc46620e55940e6a', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '6934f2e25c3343e7d20c8fac47410bafe05b750c' }, this.text ? this.text : h("slot", null)))));
+            }, name: this._name, open: this._open }, h("summary", { key: 'b4ef438974813de3761dc6f3a59add84bfe63b4c', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '9087f0e04a68ec016e80b793f442ab02fd4316a9' }, this.text ? this.text : h("slot", null)))));
     }
     static get is() { return "db-accordion-item"; }
     static get properties() {
         return {
-            "id": {
-                "type": "string",
+            "defaultOpen": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionItemProps[\"id\"]",
-                    "resolved": "string",
+                    "original": "DBAccordionItemProps[\"defaultOpen\"]",
+                    "resolved": "boolean",
                     "references": {
                         "DBAccordionItemProps": {
                             "location": "import",
@@ -121,14 +118,14 @@ export class DBAccordionItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "default-open"
             },
-            "defaultOpen": {
-                "type": "boolean",
+            "name": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionItemProps[\"defaultOpen\"]",
-                    "resolved": "boolean",
+                    "original": "DBAccordionItemProps[\"name\"]",
+                    "resolved": "string",
                     "references": {
                         "DBAccordionItemProps": {
                             "location": "import",
@@ -147,13 +144,13 @@ export class DBAccordionItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "default-open"
+                "attribute": "name"
             },
-            "name": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBAccordionItemProps[\"name\"]",
+                    "original": "DBAccordionItemProps[\"id\"]",
                     "resolved": "string",
                     "references": {
                         "DBAccordionItemProps": {
@@ -173,7 +170,7 @@ export class DBAccordionItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "id"
             },
             "className": {
                 "type": "string",
@@ -283,7 +280,6 @@ export class DBAccordionItem {
     }
     static get states() {
         return {
-            "_id": {},
             "_open": {},
             "_name": {},
             "initialized": {}

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

@@ -1,4 +1,4 @@
-import { cls, getBoolean, getBooleanAsString, uuid } from "../../utils";
+import { cls, getBoolean, getBooleanAsString } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -6,7 +6,6 @@ import { h, } from "@stencil/core";
  */
 export class DBCustomSelectListItem {
     constructor() {
-        this._id = undefined;
         this.hasDivider = false;
     }
     handleChange(event) {
@@ -60,28 +59,26 @@ export class DBCustomSelectListItem {
         this.watch0Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-custom-select-list-item");
-        this._id = (_a = this.id) !== null && _a !== void 0 ? _a : `custom-select-list-item-${uuid()}`;
         this.watch0Fn();
     }
     render() {
-        return (h("li", { key: 'd94821da8bf1842933f6518079c9e463459bed2b', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: '1155e389f33c440e04b5e7ca71732d108925e2cd', 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: 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))));
     }
     static get is() { return "db-custom-select-list-item"; }
     static get properties() {
         return {
-            "id": {
-                "type": "string",
+            "isGroupTitle": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"id\"]",
-                    "resolved": "string",
+                    "original": "DBCustomSelectListItemProps[\"isGroupTitle\"]",
+                    "resolved": "boolean",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -100,13 +97,13 @@ export class DBCustomSelectListItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "is-group-title"
             },
-            "isGroupTitle": {
+            "showDivider": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"isGroupTitle\"]",
+                    "original": "DBCustomSelectListItemProps[\"showDivider\"]",
                     "resolved": "boolean",
                     "references": {
                         "DBCustomSelectListItemProps": {
@@ -126,14 +123,14 @@ export class DBCustomSelectListItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-group-title"
+                "attribute": "show-divider"
             },
-            "showDivider": {
-                "type": "boolean",
+            "type": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"showDivider\"]",
-                    "resolved": "boolean",
+                    "original": "DBCustomSelectListItemProps[\"type\"]",
+                    "resolved": "\"checkbox\" | \"radio\"",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -152,14 +149,14 @@ export class DBCustomSelectListItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-divider"
+                "attribute": "type"
             },
-            "type": {
-                "type": "string",
+            "checked": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"type\"]",
-                    "resolved": "\"checkbox\" | \"radio\"",
+                    "original": "DBCustomSelectListItemProps[\"checked\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -178,14 +175,14 @@ export class DBCustomSelectListItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "checked"
             },
-            "checked": {
-                "type": "any",
+            "id": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectListItemProps[\"checked\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBCustomSelectListItemProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
@@ -204,7 +201,7 @@ export class DBCustomSelectListItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked"
+                "attribute": "id"
             },
             "className": {
                 "type": "string",
@@ -418,7 +415,6 @@ export class DBCustomSelectListItem {
     }
     static get states() {
         return {
-            "_id": {},
             "hasDivider": {}
         };
     }

package/dist/collection/components/navigation/navigation.js

@@ -1,14 +1,10 @@
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, uuid } from "../../utils";
+import { cls } from "../../utils";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export class DBNavigation {
-    constructor() {
-        this._id = DEFAULT_ID;
-    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -43,12 +39,11 @@ export class DBNavigation {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-navigation");
-        this._id = this.id || "navigation-" + uuid();
     }
     render() {
-        return (h("nav", { key: 'ed27159179b89985cbf0711be7dc494ca820cf75', class: cls("db-navigation", this.className), ref: (el) => {
+        return (h("nav", { key: 'de11910f2ac8e29cb5ee23aaf0e0d38cf9b5d4e8', class: cls("db-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, h("menu", { key: '6aa518535f6c802abec874a174d6e8d028572269' }, h("slot", { key: '2307ee2093cf4bcec3c8f4b8d5e8e88a8d78cf08' }))));
+            }, id: this.id }, h("menu", { key: '414afdaa58874f959a2ed49aefdaa672894806c3' }, h("slot", { key: '703407fdf69a8dfd133779c864a7016972f1a3e5' }))));
     }
     static get is() { return "db-navigation"; }
     static get properties() {
@@ -107,9 +102,4 @@ export class DBNavigation {
             }
         };
     }
-    static get states() {
-        return {
-            "_id": {}
-        };
-    }
 }

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

@@ -1,5 +1,5 @@
 import { DEFAULT_BACK } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, uuid } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString } from "../../utils";
 import { NavigationItemSafeTriangle } from "../../utils/navigation";
 import { h, Fragment, } from "@stencil/core";
 /**
@@ -13,7 +13,6 @@ export class DBNavigationItem {
         this.hasSubNavigation = true;
         this.isSubNavigationExpanded = false;
         this.autoClose = false;
-        this.subNavigationId = "sub-navigation-" + uuid();
         this.navigationItemSafeTriangle = undefined;
     }
     handleNavigationItemClick(event) {
@@ -106,9 +105,9 @@ export class DBNavigationItem {
     }
     render() {
         var _a;
-        return (h("li", { key: 'd00b7b4852a729301d545abaf1a65cd3e0cdcee7', class: cls("db-navigation-item", this.className), ref: (el) => {
+        return (h("li", { key: 'd9127a5065dc034116325e95f39c9d2d9844722e', class: cls("db-navigation-item", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": getBooleanAsString(this.wrap), "aria-disabled": getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : h("slot", null) : null, this.hasSubNavigation ? (h(Fragment, null, h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)), h("menu", { class: "db-sub-navigation", "data-force-close": this.autoClose, id: this.subNavigationId, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (h("div", { class: "db-mobile-navigation-back" }, h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null, h("slot", { name: "subNavigation" })))) : null));
+            }, id: this.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": getBooleanAsString(this.wrap), "aria-disabled": getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : h("slot", null) : null, this.hasSubNavigation ? (h(Fragment, null, h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)), h("menu", { class: "db-sub-navigation", "data-force-close": this.autoClose, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (h("div", { class: "db-mobile-navigation-back" }, h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null, h("slot", { name: "subNavigation" })))) : null));
     }
     static get is() { return "db-navigation-item"; }
     static get properties() {
@@ -434,7 +433,6 @@ export class DBNavigationItem {
             "hasSubNavigation": {},
             "isSubNavigationExpanded": {},
             "autoClose": {},
-            "subNavigationId": {},
             "navigationItemSafeTriangle": {}
         };
     }

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

@@ -1,14 +1,10 @@
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, uuid } from "../../utils";
+import { cls } from "../../utils";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export class DBTabList {
-    constructor() {
-        this._id = DEFAULT_ID;
-    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -43,12 +39,11 @@ export class DBTabList {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-tab-list");
-        this._id = this.id || "tab-list-" + uuid();
     }
     render() {
-        return (h("div", { key: '4ef0a69cacaafb2205ebfea7826c3c1f64a84411', class: cls("db-tab-list", this.className), ref: (el) => {
+        return (h("div", { key: 'a2d1cf85f398ee76b560e9aa1c7f84871d752432', class: cls("db-tab-list", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, h("ul", { key: 'cfdccc43bd366eb9c71137918a8ca92fd6a81b69', role: "tablist" }, h("slot", { key: 'c09711c4b398a3d6b26d62c87aaf0f050af32bdb' }))));
+            }, id: this.id }, h("ul", { key: '03498821ff3ff623e16313782c67384e7708eecf', role: "tablist" }, h("slot", { key: '10eba579352100e449568b7ec38e4cc73efb0463' }))));
     }
     static get is() { return "db-tab-list"; }
     static get properties() {
@@ -107,9 +102,4 @@ export class DBTabList {
             }
         };
     }
-    static get states() {
-        return {
-            "_id": {}
-        };
-    }
 }

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

@@ -6,7 +6,6 @@ import { h, Fragment, } from "@stencil/core";
  */
 export class DBTabs {
     constructor() {
-        this._id = "tabs-" + uuid();
         this._name = "";
         this.initialized = false;
         this.showScrollLeft = false;
@@ -192,7 +191,6 @@ export class DBTabs {
     }
     componentDidLoad() {
         this.enableAttributePassing(this._ref, "db-tabs");
-        this._id = this.id || this._id;
         this._name = `tabs-${this.name || uuid()}`;
         this.initialized = true;
         this.watch0Fn();
@@ -204,40 +202,14 @@ export class DBTabs {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: 'a53c2737f8238bbe266baa7d6e3f90649c52512a', class: cls("db-tabs", this.className), ref: (el) => {
+        return (h("div", { key: '0ba78eeed24756c5a55acef3080c4d66db43139b', 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: 'e8cf7f0c576b73cdd459ab4cf1f07f14c5ed1657' })));
+            }, 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' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
         return {
-            "id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBTabsProps[\"id\"]",
-                    "resolved": "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,
-                "reflect": false,
-                "attribute": "id"
-            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -420,6 +392,32 @@ export class DBTabs {
                 "reflect": false,
                 "attribute": "initial-selected-index"
             },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"id\"]",
+                    "resolved": "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,
+                "reflect": false,
+                "attribute": "id"
+            },
             "className": {
                 "type": "string",
                 "mutable": false,
@@ -502,7 +500,6 @@ export class DBTabs {
     }
     static get states() {
         return {
-            "_id": {},
             "_name": {},
             "initialized": {},
             "showScrollLeft": {},