@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/collection/components/table/table.js

@@ -161,10 +161,10 @@ export class DBTable {
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '8baec1021c6c8aa2bafc4e735b81e7d149e4ca6e', class: cls("db-table", this.className), style: this._style, "data-width": this.width, "data-size": this.size, "data-divider": this.divider, "data-variant": this.variant, "data-mobile-variant": this.mobileVariant, "data-show-caption": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '423304ec355a57e6df37c48baca039a9aabdf7b5', ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (h("div", { key: '892e511b084a267e0c00dde181f4ff517f8d004f', class: cls("db-table", this.className), style: this._style, "data-width": this.width, "data-size": this.size, "data-divider": this.divider, "data-variant": this.variant, "data-mobile-variant": this.mobileVariant, "data-show-caption": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '18b581d47079b7ec62b66c8605c51c246e3b94f0', ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.captionPlain ? (h("caption", null, this.captionPlain)) : (h("slot", { name: "caption" })), this._data ? (h(Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (h("db-table-head", { rows: (_b = this._data) === null || _b === void 0 ? void 0 : _b.header })) : null, ((_c = this._data) === null || _c === void 0 ? void 0 : _c.body) ? (h("db-table-body", { rows: (_d = this._data) === null || _d === void 0 ? void 0 : _d.body })) : null, ((_e = this._data) === null || _e === void 0 ? void 0 : _e.footer) ? (h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (h("slot", null)))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.captionPlain ? (h("caption", null, this.captionPlain)) : (h("slot", { name: "caption" })), this._data ? (h(Fragment, null, ((_c = this._data) === null || _c === void 0 ? void 0 : _c.header) ? (h("db-table-head", { rows: (_d = this._data) === null || _d === void 0 ? void 0 : _d.header })) : null, ((_e = this._data) === null || _e === void 0 ? void 0 : _e.body) ? (h("db-table-body", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.body })) : null, ((_g = this._data) === null || _g === void 0 ? void 0 : _g.footer) ? (h("db-table-footer", { rows: (_h = this._data) === null || _h === void 0 ? void 0 : _h.footer })) : null)) : (h("slot", null)))));
     }
     static get is() { return "db-table"; }
     static get properties() {
@@ -453,6 +453,30 @@ export class DBTable {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "captionPlain": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-body/table-body.js

@@ -56,10 +56,10 @@ export class DBTableBody {
         this.enableAttributePassing(this._ref, "db-table-body");
     }
     render() {
-        var _a;
-        return (h("tbody", { key: 'cb2c0320960e38d70cf2671ae7afd2b1a1d85029', class: cls("db-table-body", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("tbody", { key: 'a4738e50744ab6a82ff5b497b2e3e652b6cf69ee', class: cls("db-table-body", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.rows ? ((_c = this.rows) === null || _c === void 0 ? void 0 : _c.map((row, index) => {
             var _a, _b, _c;
             return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-body-row-${index}`, cells: row.cells, interactive: row.interactive, id: row.id }));
         })) : (h("slot", null))));
@@ -93,6 +93,30 @@ export class DBTableBody {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableBodyProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableBodyProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-body/model.ts::DBTableBodyProps",
+                            "referenceLocation": "DBTableBodyProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-caption/table-caption.js

@@ -84,9 +84,10 @@ export class DBTableCaption {
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h("caption", { key: '940bfd3ec5f3f13c14b4a838774e0f0014bb5b12', class: cls("db-table-caption", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("caption", { key: '83d15c286f092d5dbdf31f36f1c899a0afd3633c', class: cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '0bbee85651cc51b5b131dd7aeff15ad454b40c3f' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'e6648c3017dec5340538e198b19f3546a3ba6253' })));
     }
     static get is() { return "db-table-caption"; }
     static get properties() {
@@ -117,6 +118,30 @@ export class DBTableCaption {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableCaptionProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableCaptionProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-caption/model.ts::DBTableCaptionProps",
+                            "referenceLocation": "DBTableCaptionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-data-cell/table-data-cell.js

@@ -56,9 +56,10 @@ export class DBTableDataCell {
         this.enableAttributePassing(this._ref, "db-table-data-cell");
     }
     render() {
-        return (h("td", { key: '3ca063d88f598584751c0519ae80146525d2fa5a', class: cls("db-table-data-cell", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("td", { key: '5a3ebd6d5339d96b0254cefc8458a7202033dc99', class: cls("db-table-data-cell", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: '30d173c99e242c0bf764f710cee0323bf9549e41' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: 'a972f0b9053840a126367efcf096d2bd32293547' })));
     }
     static get is() { return "db-table-data-cell"; }
     static get properties() {
@@ -89,6 +90,30 @@ export class DBTableDataCell {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-footer/table-footer.js

@@ -56,10 +56,10 @@ export class DBTableFooter {
         this.enableAttributePassing(this._ref, "db-table-footer");
     }
     render() {
-        var _a;
-        return (h("tfoot", { key: '204ca2b37050ebd079e26fe0dba6c55a87806d44', class: cls("db-table-footer", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("tfoot", { key: '191dfbab31cd63de6eaa90fa7fed52246e01695a', class: cls("db-table-footer", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.rows ? ((_c = this.rows) === null || _c === void 0 ? void 0 : _c.map((row, index) => {
             var _a, _b, _c;
             return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-footer-row-${index}`, cells: row.cells, interactive: row.interactive, id: row.id }));
         })) : (h("slot", null))));
@@ -93,6 +93,30 @@ export class DBTableFooter {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableFooterProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableFooterProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-footer/model.ts::DBTableFooterProps",
+                            "referenceLocation": "DBTableFooterProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-head/table-head.js

@@ -87,10 +87,10 @@ export class DBTableHead {
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a;
-        return (h("thead", { key: 'd2796be8931832f63f6948ea20b14b6e9981f50e', class: cls("db-table-head", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("thead", { key: '46e48acb08bad4c97faa0b194754f82022194bac', class: cls("db-table-head", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.rows ? ((_c = this.rows) === null || _c === void 0 ? void 0 : _c.map((row, index) => {
             var _a, _b, _c;
             return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-head-row-${index}`, cells: this.getCells(row.cells), subHeaderEmphasis: row.subHeaderEmphasis, interactive: row.interactive, id: row.id }));
         })) : (h("slot", null))));
@@ -124,6 +124,30 @@ export class DBTableHead {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableHeadProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableHeadProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-head/model.ts::DBTableHeadProps",
+                            "referenceLocation": "DBTableHeadProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-header-cell/table-header-cell.js

@@ -56,9 +56,10 @@ export class DBTableHeaderCell {
         this.enableAttributePassing(this._ref, "db-table-header-cell");
     }
     render() {
-        return (h("th", { key: 'fd53f0b6cc8b2574b895e131d02f0d47d5f93b63', class: cls("db-table-header-cell", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("th", { key: '94134b60d6d2d41f61554594857bd8211b670eaa', class: cls("db-table-header-cell", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: 'ce5680819cff5294899f7b79287156ff769241f1' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": getBooleanAsString(this.noText), scope: this.scope, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, h("slot", { key: '84b51ebb31fe2d7da5c30e82054f26bf25b38962' })));
     }
     static get is() { return "db-table-header-cell"; }
     static get properties() {
@@ -89,6 +90,30 @@ export class DBTableHeaderCell {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableHeaderCellProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableHeaderCellProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-header-cell/model.ts::DBTableHeaderCellProps",
+                            "referenceLocation": "DBTableHeaderCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/table-row/table-row.js

@@ -62,10 +62,10 @@ export class DBTableRow {
         this.enableAttributePassing(this._ref, "db-table-row");
     }
     render() {
-        var _a;
-        return (h("tr", { key: '35a33e8121f2ba41e8785c1399566365741064e3', class: cls("db-table-row", this.className), ref: (el) => {
+        var _a, _b, _c;
+        return (h("tr", { key: '2d86cd86cc475e1fc84186fcf2301c5274ab4d5c', class: cls("db-table-row", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-interactive": getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_a = this.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-interactive": getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_c = this.cells) === null || _c === void 0 ? void 0 : _c.map((cell, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
             return cell.headerCell ? (h("db-table-header-cell", { class: (_a = cell.className) !== null && _a !== void 0 ? _a : cell.class, key: `${(_c = (_b = cell.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-row-header-cell-${index}`, id: cell.id, abbr: (_d = this.getHeaderCell(cell)) === null || _d === void 0 ? void 0 : _d.abbr, scope: (_e = this.getHeaderCell(cell)) === null || _e === void 0 ? void 0 : _e.scope, noText: (_f = this.getHeaderCell(cell)) === null || _f === void 0 ? void 0 : _f.noText, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (h("db-link", { class: (_h = (_g = cell.link) === null || _g === void 0 ? void 0 : _g.className) !== null && _h !== void 0 ? _h : (_j = cell.link) === null || _j === void 0 ? void 0 : _j.class, content: (_k = cell.link) === null || _k === void 0 ? void 0 : _k.content, size: (_l = cell.link) === null || _l === void 0 ? void 0 : _l.size, variant: (_m = cell.link) === null || _m === void 0 ? void 0 : _m.variant, id: (_o = cell.link) === null || _o === void 0 ? void 0 : _o.id, autofocus: (_p = cell.link) === null || _p === void 0 ? void 0 : _p.autofocus, disabled: (_q = cell.link) === null || _q === void 0 ? void 0 : _q.disabled, href: (_r = cell.link) === null || _r === void 0 ? void 0 : _r.href, hreflang: (_s = cell.link) === null || _s === void 0 ? void 0 : _s.hreflang, target: (_t = cell.link) === null || _t === void 0 ? void 0 : _t.target, rel: (_u = cell.link) === null || _u === void 0 ? void 0 : _u.rel, referrerPolicy: (_v = cell.link) === null || _v === void 0 ? void 0 : _v.referrerPolicy, role: (_w = cell.link) === null || _w === void 0 ? void 0 : _w.role, showIcon: (_x = cell.link) === null || _x === void 0 ? void 0 : _x.showIcon, text: (_y = cell.link) === null || _y === void 0 ? void 0 : _y.text, wrap: (_z = cell.link) === null || _z === void 0 ? void 0 : _z.wrap }, (_0 = cell.link) === null || _0 === void 0 ? void 0 : _0.children)) : (cell.content))) : (h("db-table-data-cell", { class: (_1 = cell.className) !== null && _1 !== void 0 ? _1 : cell.class, key: `${(_3 = (_2 = cell.id) !== null && _2 !== void 0 ? _2 : this.id) !== null && _3 !== void 0 ? _3 : uuid()}-table-row-data-cell-${index}`, id: cell.id, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (h("db-link", { class: (_5 = (_4 = cell.link) === null || _4 === void 0 ? void 0 : _4.className) !== null && _5 !== void 0 ? _5 : (_6 = cell.link) === null || _6 === void 0 ? void 0 : _6.class, content: (_7 = cell.link) === null || _7 === void 0 ? void 0 : _7.content, size: (_8 = cell.link) === null || _8 === void 0 ? void 0 : _8.size, variant: (_9 = cell.link) === null || _9 === void 0 ? void 0 : _9.variant, id: (_10 = cell.link) === null || _10 === void 0 ? void 0 : _10.id, autofocus: (_11 = cell.link) === null || _11 === void 0 ? void 0 : _11.autofocus, disabled: (_12 = cell.link) === null || _12 === void 0 ? void 0 : _12.disabled, href: (_13 = cell.link) === null || _13 === void 0 ? void 0 : _13.href, hreflang: (_14 = cell.link) === null || _14 === void 0 ? void 0 : _14.hreflang, target: (_15 = cell.link) === null || _15 === void 0 ? void 0 : _15.target, rel: (_16 = cell.link) === null || _16 === void 0 ? void 0 : _16.rel, referrerPolicy: (_17 = cell.link) === null || _17 === void 0 ? void 0 : _17.referrerPolicy, role: (_18 = cell.link) === null || _18 === void 0 ? void 0 : _18.role, showIcon: (_19 = cell.link) === null || _19 === void 0 ? void 0 : _19.showIcon, text: (_20 = cell.link) === null || _20 === void 0 ? void 0 : _20.text, wrap: (_21 = cell.link) === null || _21 === void 0 ? void 0 : _21.wrap }, (_22 = cell.link) === null || _22 === void 0 ? void 0 : _22.children)) : (cell.content)));
         })) : (h("slot", null))));
@@ -99,6 +99,30 @@ export class DBTableRow {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableRowProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBTableRowProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/table-row/model.ts::DBTableRowProps",
+                            "referenceLocation": "DBTableRowProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,4 +1,6 @@
+import { DEFAULT_SCROLL_LEFT, DEFAULT_SCROLL_RIGHT, } from "../../shared/constants.js";
 import { cls, uuid } from "../../utils/index.js";
+import { ResizeObserverListener } from "../../utils/resize-observer-listener.js";
 import { h, Fragment } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -11,7 +13,7 @@ export class DBTabs {
         this.showScrollLeft = false;
         this.showScrollRight = false;
         this.scrollContainer = null;
-        this._resizeObserver = undefined;
+        this._resizeObserverCallbackId = undefined;
         this.observer = undefined;
     }
     convertTabs() {
@@ -57,13 +59,14 @@ export class DBTabs {
                         container.addEventListener("scroll", () => {
                             this.evaluateScrollButtons(container);
                         });
-                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
-                        if (!this._resizeObserver) {
-                            const observer = new ResizeObserver(() => {
-                                this.evaluateScrollButtons(container);
-                            });
-                            observer.observe(container);
-                            this._resizeObserver = observer;
+                        // Re-evaluate scroll buttons on container resize because it
+                        // provides more accurate, container-specific resize
+                        // detection than global window resize events.
+                        if (!this._resizeObserverCallbackId) {
+                            this._resizeObserverCallbackId =
+                                new ResizeObserverListener().observe(container, () => {
+                                    this.evaluateScrollButtons(container);
+                                });
                         }
                     }
                 }
@@ -72,7 +75,7 @@ export class DBTabs {
     }
     initTabs(init) {
         if (this._ref) {
-            const tabItems = Array.from(this._ref.getElementsByClassName("db-tab-item"));
+            const tabItems = Array.from(this._ref.querySelectorAll(":is(:scope > db-tab-list .db-tab-item, :scope > .db-tab-list .db-tab-item)"));
             const tabPanels = Array.from(this._ref.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
             for (const tabItem of tabItems) {
                 const index = tabItems.indexOf(tabItem);
@@ -239,17 +242,19 @@ export class DBTabs {
         this.watch0Fn();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._resizeObserver = undefined;
-        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+        var _a;
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: '4ea02dd31be437dd343d13cac953658f1799762f', class: cls("db-tabs", this.className), ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (h("div", { key: '5293b93e98c3c3b1ca484d21e4fa3506442ffc78', class: cls("db-tabs", this.className), ref: (el) => {
                 this._ref = el;
-            }, 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: 'c7b47c275a5784b8658e9c8b339445e083bc40d6' })));
+            }, 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: "overflow-scroll-left-button", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, (_e = this.scrollLeftText) !== null && _e !== void 0 ? _e : DEFAULT_SCROLL_LEFT)) : null, this.tabs ? (h(Fragment, null, h("db-tab-list", null, (_f = this.convertTabs()) === null || _f === void 0 ? void 0 : _f.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 })))), (_g = this.convertTabs()) === null || _g === void 0 ? void 0 :
+            _g.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: "overflow-scroll-right-button", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, (_h = this.scrollRightText) !== null && _h !== void 0 ? _h : DEFAULT_SCROLL_RIGHT)) : null, h("slot", { key: '03813d32c1132685d6ade480a7790dd9f5dd5c36' })));
     }
     static get is() { return "db-tabs"; }
     static get properties() {
@@ -563,6 +568,58 @@ export class DBTabs {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width"
+            },
+            "scrollLeftText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"scrollLeftText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabsProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/tabs/model.ts::DBTabsProps",
+                            "referenceLocation": "DBTabsProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-left-text"
+            },
+            "scrollRightText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTabsProps[\"scrollRightText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTabsProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/tabs/model.ts::DBTabsProps",
+                            "referenceLocation": "DBTabsProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-right-text"
             }
         };
     }
@@ -573,7 +630,7 @@ export class DBTabs {
             "showScrollLeft": {},
             "showScrollRight": {},
             "scrollContainer": {},
-            "_resizeObserver": {},
+            "_resizeObserverCallbackId": {},
             "observer": {}
         };
     }

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

@@ -101,9 +101,9 @@ export class DBTag {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'bf503e6e826fcb53cfc057b1f2610d062967311e', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '07d9385a8ee1ba5b9c57c501b9fae0fea15a3e3e', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, 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, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: 'd047f3f96e38b36f4d8f43cfb316d1571ebdd9ba', name: "content" }), this.text ? this.text : null, h("slot", { key: 'b2356b4e384b61ac2844bdb4a8c2f9c4e5b9f153' }), 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, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: '240d6b23cb670c8d3bc8dd28118c4387e4abab6d', name: "content" }), this.text ? this.text : null, h("slot", { key: 'a3d3f749ee447725c439f7344d28208c6213861a' }), 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() {

package/dist/collection/components/textarea/textarea.js

@@ -237,11 +237,11 @@ export class DBTextarea {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h("div", { key: 'cf9afaea12a18dbe916bf11e4cfeed5721833f96', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'fd7444fe2963eabdb755d2bc9d0b664103813493', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '282e969c036a0cd079a77cd6373103084dd5e75b', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: 'a91b79a14e279e9b947066a061f4615d36250d8d', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'fa93715857493282bdaacb92797f28fe7d1aaf62', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '1426813dae3debc249310cf105782371806a85af', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-resize": this.resize, "data-hide-resizer": getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), readOnly: getBoolean(this.readOnly, "readOnly") ||
                 getBoolean(this.readonly, "readonly") ||
-                undefined, form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '07e6585b6a89335004382796a9c06da736260028', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '6a8394ae7d62809422e54a810e75cf0628327223', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                undefined, form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '520030c6872e1c5b1ac7cd9cb466d46e731993be', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'b6dcd1abc611a044dbb97e3be4f22c5453e59e65', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-textarea"; }
     static get properties() {