@db-ux/wc-core-components 4.11.1 → 4.12.1

package/dist/cjs/db-custom-select.cjs.entry.js

@@ -5,7 +5,7 @@ var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-spuu3sXz.js');
 var documentClickListener = require('./document-click-listener-DdNXbErU.js');
 var documentScrollListener = require('./document-scroll-listener-CvAZ6uPr.js');
-var floatingComponents = require('./floating-components-DlstoCKH.js');
+var floatingComponents = require('./floating-components-SpHkZuLA.js');
 var formComponents = require('./form-components-CmQlkARp.js');
 
 const DBCustomSelect = class {
@@ -433,6 +433,7 @@ const DBCustomSelect = class {
         }
     }
     handleSearch(valueOrEvent) {
+        var _a;
         if (valueOrEvent === undefined) {
             return;
         }
@@ -461,6 +462,9 @@ const DBCustomSelect = class {
                     .toLowerCase()
                     .includes(filterText.toLowerCase()));
         }
+        if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
+            this.handleAutoPlacement();
+        }
     }
     handleClearAll(event) {
         event.stopPropagation();
@@ -690,10 +694,14 @@ const DBCustomSelect = class {
         this.watch11Fn();
     }
     watch12Fn() {
-        var _a, _b;
+        var _a, _b, _c;
         this._options = this.options;
         this.amountOptions =
             (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0;
+        // Reposition open auto-width dropdowns: replacing options can change their content width.
+        if ((_c = this.detailsRef) === null || _c === void 0 ? void 0 : _c.open) {
+            this.handleAutoPlacement();
+        }
     }
     watch12() {
         this.watch12Fn();
@@ -834,19 +842,19 @@ const DBCustomSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (index.h("div", { key: '1089ddd1cfca85b7a04524de6430b3572ccb6453', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (index.h("div", { key: '9f804bd057ef9cde5cc83263e5b1e3a477ad5d2e', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": index$1.getBooleanAsString(this.required, "required"), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: 'df6fe2735838356dc7cf9da1538e2d734089341a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: 'd952cedd05d4f5b1eb2a24d4362aa2b5e4064fd8', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": index$1.getBooleanAsString(this.required, "required"), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '1ce826237b63c3abfad8b55068c25fdc4acc2d7a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: '9f16da6b3d9e633e4ce70e8654925df86a901074', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, "data-custom-validity": this._validity, multiple: index$1.getBoolean(this.multiple, "multiple"), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (index.h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), index.h("details", { key: '51e516f07db962d68494b5b012a33982df369392', ref: (el) => {
+            : null)), index.h("details", { key: '6a88c236898236ee539bced6fa3b3918be8f693d', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '9d059be7ce413194177616d016f7babffb790f07' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: 'c9dd3e30dd094da51de1b2064749a211fef6eb36' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : constants.DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -856,7 +864,7 @@ const DBCustomSelect = class {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: index$1.getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : constants.DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (index.h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: '116d3a64ab4dc504badf8ae2298908022b807441', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '3930c58d7e893751803157d1f23b6f9e7050adaa', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'efdbd668c7f5b2755bada6b174a0ed31a792dd31', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: '3210abcd9df6f8232346aa78def9e3bd078f35db', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'a552df2b93f899230e80623e2014691e411c3b40', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'b29045acf1f702b90b434dc4aa9d589c0c6c57f5', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-divider.cjs.entry.js

@@ -85,7 +85,7 @@ const DBDivider = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '09e35f9aa6912126375f69d68b75a1d64a2d0ba8', class: index$1.cls("db-divider", this.className), ref: (el) => {
+        return (index.h("div", { key: '4f8780fd8ac04d3d4db08bbfeae57f0a86cf36ad', class: index$1.cls("db-divider", 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-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }

package/dist/cjs/db-drawer.cjs.entry.js

@@ -9,8 +9,22 @@ const DBDrawer = class {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close");
         this.initialized = false;
+        this.backdropPointerDown = false;
         this.observer = undefined;
     }
+    isNotModal() {
+        return (this.position === "absolute" ||
+            this.backdrop === "none" ||
+            this.variant === "inside");
+    }
+    handleBackdropPointerDown(event) {
+        var _a;
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        this.backdropPointerDown = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG";
+    }
     handleClose(event, forceClose) {
         var _a;
         if (!event)
@@ -32,11 +46,15 @@ const DBDrawer = class {
             }
             if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop !== "none") {
+                this.backdrop !== "none" &&
+                this.backdropPointerDown) {
                 if (this.close) {
                     this.close.emit(event);
                 }
             }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            this.backdropPointerDown = false;
         }
     }
     handleDialogOpen() {
@@ -46,12 +64,15 @@ const DBDrawer = class {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.removeAttribute("data-transition");
                 }
-                if (this.position === "absolute" ||
-                    this.backdrop === "none" ||
-                    this.variant === "inside") {
+                if (this.isNotModal()) {
                     this._ref.show();
                 }
                 else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    this._ref.setAttribute("closedby", "any");
                     this._ref.showModal();
                 }
                 void index$1.delay(() => {
@@ -178,11 +199,11 @@ const DBDrawer = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("dialog", { key: '68343ae9da612485135f6e0b01bd581de86d1dc6', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
+        return (index.h("dialog", { key: 'c03126193778f601b7ff3aeeeff508c8920e67a7', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: 'b6a860730f150e365c684a2ed362f8ad3e84e862', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onMouseDown: (event) => this.handleBackdropPointerDown(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: '64661349d858bf5be872d664b44bc6fa829014e6', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded, "rounded") }, index.h("header", { key: 'd8347218a266eb48f2b86717d6ba210c907f4c18', class: "db-drawer-header" }, index.h("div", { key: '6e9a89da493fa209e09bf1ddb5a5719b52606e62', class: "db-drawer-header-text" }, index.h("slot", { key: '503445639dd0a3e51a6f99f5aff3eb039e6d34eb', name: "drawerHeader" })), index.h("db-button", { key: '39400683f7e2a05c8c8dd33be6c9913d72d5454d', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: 'f0e4ebb273ea7f53fd1c026f7f50a16f89ab3259', class: "db-drawer-content" }, index.h("slot", { key: 'e1ead064fd822ca9fd33be44af5fd52801ba33ea' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded, "rounded") }, index.h("header", { key: 'b758a538b1337573090305aadcf3bc3befef1bf3', class: "db-drawer-header" }, index.h("div", { key: '235f2be7afc9c968b9270178c2720a5a50436123', class: "db-drawer-header-text" }, index.h("slot", { key: '26787a5e103d2d34785ce1eccd0ff73b6733fce8', name: "drawerHeader" })), index.h("db-button", { key: '1d22b406c4e235e91bc9bfc3265a0aaa9c7f8e8c', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '0e338b2e11c8582ba59595f34d8fc4911db7025e', class: "db-drawer-content" }, index.h("slot", { key: 'c761758ada4d1602878a58de6003e01cf5b5d075' })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-header.cjs.entry.js

@@ -3,8 +3,8 @@
 var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-spuu3sXz.js');
-var navigation = require('./navigation-Bah882nU.js');
-require('./floating-components-DlstoCKH.js');
+var navigation = require('./navigation-DUTSDY4q.js');
+require('./floating-components-SpHkZuLA.js');
 
 const DBHeader = class {
     constructor(hostRef) {
@@ -127,9 +127,9 @@ const DBHeader = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("header", { key: '5d1e86b7e973ba201396327b7cdce38e2ac97228', class: index$1.cls("db-header", this.className), ref: (el) => {
+        return (index.h("header", { key: 'aeeac33c4b9db2b9749b24ccca840aa03bac81df', class: index$1.cls("db-header", 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-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("div", { key: 'e01bfcb3611a7ff4ddd3fc6b758dc3bf40cbe712', class: "db-header-meta-navigation" }, index.h("slot", { key: '99f6ebb0c2bca335d25bd4eaafdb6bd9978d9c8d', name: "metaNavigation" })), index.h("div", { key: '698fa926fa448a6a540e8bf13676f92a8a0408e3', class: "db-header-navigation-bar" }, index.h("div", { key: '872fb23c94eb3ec81deca9eef498146b4c434e5e', class: "db-header-brand-container" }, index.h("slot", { key: '5575ee45816a7ecf9d5102b7c54004522fb3d0dd', name: "brand" })), index.h("div", { key: 'cda8077a77bde02515ed9c12d720802c0e1a85a0', class: "db-header-navigation-container" }, index.h("div", { key: '76bfcfe58004cc685d978815058aa1593160f90c', class: "db-header-navigation" }, index.h("slot", { key: '516e0953f7352fa7f84a8affdae187c345f77dbd' })), index.h("div", { key: '97eb5eb2f86ae44c85e5779f84d7e95f362c1b26', class: "db-header-primary-action" }, index.h("slot", { key: '2db7a8e65e46009f7fcf621c4d654204f8160e56', name: "primaryAction" }))), index.h("div", { key: '6478928d7b967b365823331648d12003b4e7eefa', class: "db-header-action-container" }, index.h("div", { key: 'ade80b06a587d723ebe9c1dfb3b8ca0cb3499ab6', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '5e06f6da7bdcc1b12de1b9dbdbb98b6969c80f62', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '7afbb296999738cf13b37b4f461fefdddff18ead', class: "db-header-secondary-action" }, index.h("slot", { key: '6a39330a6eac4a0d6c9e9bcba648590d3a30cee9', name: "secondaryAction" })))), index.h("db-drawer", { key: '5ec7b632906a280475122fa9b189345ec55917f9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: 'c7febad8b66a9a3d3c238c4c87027534f09c8601', class: "db-header-drawer-navigation" }, index.h("div", { key: '784b2d12c1838ae2ccd90575f1ef04ce97b70104', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '6189ff74ac04565039a45952c8ea910d5260e9e0' })), index.h("div", { key: '67223d12d595038a36d9c44953a6cb24894ed35d', class: "db-header-meta-navigation" }, index.h("slot", { key: '7c3de485a3d7516978cfd16d8ef494a61f8bc4af', name: "metaNavigation" }))), index.h("div", { key: '01e0e9ac362d8f553adf53379be18a8cdeb2b816', class: "db-header-secondary-action" }, index.h("slot", { key: 'fa6c328af54f4aff0f6c7ec80d7a2b36ea63b49a', name: "secondaryAction" })))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("div", { key: '1078f960dbc6ed24664b5ff5c23c3524d725b822', class: "db-header-meta-navigation" }, index.h("slot", { key: 'c55739d8ae17254c2aa457795a31017a07ab5a88', name: "metaNavigation" })), index.h("div", { key: '6e82ab28439854dec6bcc6dcf9ed3fa36c6f5e69', class: "db-header-navigation-bar" }, index.h("div", { key: '7e991f8cdee7c1767ea3aefdd9a01c662fb5d178', class: "db-header-brand-container" }, index.h("slot", { key: 'a1e2aea32b28520095612367e97a8b955f93bd96', name: "brand" })), index.h("div", { key: '273f17e3b8594dad83d8fbad021008405d865176', class: "db-header-navigation-container" }, index.h("div", { key: '8bd9a08a0f3cf8083d238963c2cc3715edf1d5a4', class: "db-header-navigation" }, index.h("slot", { key: 'abfd95ef152c34e53806c114f243ff26b63a9bbe' })), index.h("div", { key: '4a61c6d86a0362913b45a432095a621ca22d1268', class: "db-header-primary-action" }, index.h("slot", { key: '3b79bfc6d85a0a39fcb3ca2550be0a2a36b6a682', name: "primaryAction" }))), index.h("div", { key: '1c506669010a04ae260b692811ed17d76a3ecc03', class: "db-header-action-container" }, index.h("div", { key: 'aa522f5b0010a1747a1bc7f550c3700a0bad4e8a', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '2223a3865ed4ea94e3a3849e73e4113e1db0fb66', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '86f41a6b354de871ac3f4d9cf8b7205c699ba189', class: "db-header-secondary-action" }, index.h("slot", { key: '43e443323eb93871bb19cbea2222da6eb8ebd0e8', name: "secondaryAction" })))), index.h("db-drawer", { key: '8a8474e8a7f54d827f5844f76dea9ce44ef565e0', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: '21f360dc09f2d53aea13fde8b13c1ffb3781f558', class: "db-header-drawer-navigation" }, index.h("div", { key: '0c567049a2c1788decb48b10b0115348d2f3b406', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '1403d518f5f63eca522ccecaf5a4b5f153649a33' })), index.h("div", { key: 'c624cf3f4ea7e89a87e430ef96b34fa4ce6d4236', class: "db-header-meta-navigation" }, index.h("slot", { key: '4fde72b2d7d8c098a8a09160e8f36ca2ddbd0702', name: "metaNavigation" }))), index.h("div", { key: '91d6fc1b39b3cfc39b8563956971f56a168da218', class: "db-header-secondary-action" }, index.h("slot", { key: 'a9745f3cf4c91db6a3cd0bc4e4bf904b8bc7a2aa', name: "secondaryAction" })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-icon.cjs.entry.js

@@ -85,9 +85,9 @@ const DBIcon = class {
     }
     render() {
         var _a, _b;
-        return (index.h("span", { key: '167039453ffa0b206221a521e52e889beeab0d43', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (index.h("span", { key: '45475f5547eb46fee1e5046a3adf5602b8427d1e', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", 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-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, index.h("slot", { key: 'abea7d517b9dcf61ff53fd70bbbb0cad3da1daa2' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, index.h("slot", { key: '05089e47e87077e6227760806584f49715080c38' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-infotext.cjs.entry.js

@@ -85,9 +85,9 @@ const DBInfotext = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("span", { key: 'e1a06bb9c2d0f88953a7281cdda505b392db609c', class: index$1.cls("db-infotext", this.className), ref: (el) => {
+        return (index.h("span", { key: '5f43b3937dc8adf310a519fc581f6c3162e86ebb', class: index$1.cls("db-infotext", 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-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": index$1.getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, index.h("slot", { key: '68b5e9bc974cf49e25470cba30b142495e06c72f' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": index$1.getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, index.h("slot", { key: '253fc89f2cb83a9ca89c66eed70988b7b69b8507' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-link_4.cjs.entry.js

@@ -85,9 +85,9 @@ const DBLink = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("a", { key: 'a5c2e75c4243fa0d64c60b974c522347469e75b3', class: index$1.cls("db-link", this.className), ref: (el) => {
+        return (index.h("a", { key: '7d627d40c68589558b3e33b1304f4c57b95203e3', class: index$1.cls("db-link", 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, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, index.h("slot", { key: '7cac380bf21256a51a3815e922687ddf4ad7b425' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, index.h("slot", { key: 'fc12c0b064d4c5d03347bea0f6de4ad5fcf78223' })));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -147,9 +147,9 @@ const DBTableDataCell = class {
         this.enableAttributePassing(this._ref, "db-table-data-cell");
     }
     render() {
-        return (index.h("td", { key: 'e6614ac09ac484540ad119f807bea075521419cd', class: index$1.cls("db-table-data-cell", this.className), ref: (el) => {
+        return (index.h("td", { key: '3ca063d88f598584751c0519ae80146525d2fa5a', class: index$1.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: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers }, index.h("slot", { key: 'bd353375cc862b5d5adea84545a5b5a63f1517e1' })));
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers }, index.h("slot", { key: '30d173c99e242c0bf764f710cee0323bf9549e41' })));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -209,9 +209,9 @@ const DBTableHeaderCell = class {
         this.enableAttributePassing(this._ref, "db-table-header-cell");
     }
     render() {
-        return (index.h("th", { key: 'b459f2e2ea9b4dda6909d1c8f02e1cd22b16a712', class: index$1.cls("db-table-header-cell", this.className), ref: (el) => {
+        return (index.h("th", { key: 'fd53f0b6cc8b2574b895e131d02f0d47d5f93b63', class: index$1.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": index$1.getBooleanAsString(this.noText), scope: this.scope, colSpan: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, index.h("slot", { key: 'ec650ba68a8623b9729985f27822d94087327d74' })));
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, "data-no-text": index$1.getBooleanAsString(this.noText), scope: this.scope, colSpan: index$1.getNumber(this.colSpan, this.colspan), rowSpan: index$1.getNumber(this.rowSpan, this.rowspan), headers: this.headers, abbr: this.abbr }, index.h("slot", { key: 'ce5680819cff5294899f7b79287156ff769241f1' })));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -278,7 +278,7 @@ const DBTableRow = class {
     }
     render() {
         var _a;
-        return (index.h("tr", { key: 'd9ca9f14117c8cf3974110eb1a36cb7352c06c24', class: index$1.cls("db-table-row", this.className), ref: (el) => {
+        return (index.h("tr", { key: '35a33e8121f2ba41e8785c1399566365741064e3', class: index$1.cls("db-table-row", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-interactive": index$1.getBooleanAsString(this.interactive), "data-sub-header-emphasis": this.subHeaderEmphasis }, this.cells ? ((_a = this.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index$2) => {
             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;

package/dist/cjs/db-navigation-item.cjs.entry.js

@@ -3,8 +3,8 @@
 var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-spuu3sXz.js');
-var navigation = require('./navigation-Bah882nU.js');
-require('./floating-components-DlstoCKH.js');
+var navigation = require('./navigation-DUTSDY4q.js');
+require('./floating-components-SpHkZuLA.js');
 
 const DBNavigationItem = class {
     constructor(hostRef) {
@@ -160,7 +160,7 @@ const DBNavigationItem = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("li", { key: '0c375eaa62e5b989c6c891d46e5a66fa8c11eed3', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
+        return (index.h("li", { key: 'c7821549626fe4b55c4bc6907832c972723bc174', class: index$1.cls("db-navigation-item", 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, 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": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-active": this.active, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled") }, !index$1.getBoolean(this.hideSubNavigation, "hideSubNavigation") &&
             this.hasSubNavigation ? (index.h(index.Fragment, null, index.h("button", { class: "db-navigation-item-expand-button", id: this.subNavigationToggleId, "aria-haspopup": this.hasAreaPopup ? "true" : undefined, "aria-expanded": this.isSubNavigationExpanded, "aria-controls": this.subNavigationId, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : index.h("slot", { name: "expandButton" })), index.h("menu", { class: "db-sub-navigation", id: this.subNavigationId, "aria-labelledby": this.subNavigationToggleId, "data-force-close": this.autoClose, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (index.h("div", { class: "db-mobile-navigation-back" }, index.h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_c = this.backButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_BACK))) : null, index.h("slot", { name: "subNavigation" })))) : this.text ? (this.text) : (index.h("slot", null))));

package/dist/cjs/db-navigation.cjs.entry.js

@@ -85,9 +85,9 @@ const DBNavigation = class {
     }
     render() {
         var _a, _b;
-        return (index.h("nav", { key: '9ab5982a120092e6df3de4b17d1750950d2e1667', class: index$1.cls("db-navigation", this.className), ref: (el) => {
+        return (index.h("nav", { key: 'e9dbd8ab905cbb2dd887dfe21fc96afea70b9f70', class: index$1.cls("db-navigation", 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 }, index.h("menu", { key: 'c23027e91896d0cce880bb7527dcf576ba58b513' }, index.h("slot", { key: '0f7aa08fca229cbceae8bb4c1e91ab4fc5608242' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("menu", { key: '421231c4fabc97119732586bf221c07ebc914a19' }, index.h("slot", { key: 'f015b010c2d2e09570ead913a90d14160eed857c' }))));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-notification.cjs.entry.js

@@ -95,13 +95,13 @@ const DBNotification = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '6700e43e45a2c0c18a0216fb12afd5d31820dcf9', class: index$1.cls("db-notification", this.className), ref: (el) => {
+        return (index.h("div", { key: '3f6ef4d3d506873a5b4bd15fde4d2c2fbedc9746', class: index$1.cls("db-notification", 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, role: index$1.getNotificationRole({
                 semantic: this.semantic,
                 role: this.role,
                 ariaLive: this.ariaLive,
-            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": index$1.getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, index.h("slot", { key: '9ea4d9427f7e34dbf5fd9b187f4dce5df9b39d34', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", { "data-area": "head" }, this.headline)) : null, index.h("div", { key: '4f9c9a95f7c6bd8f4b5bfb0acf69f02dbc789856', "data-area": "content" }, this.text ? this.text : null, index.h("slot", { key: '2d9007bdc99c163fd6af4b12cc7210b60ab11319' })), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, index.h("slot", { key: 'f5505f81bdf36d9dd1aeb825a2af06dcd0214372', name: "link" }), index$1.getBoolean(this.closeable, "closeable") ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_CLOSE_BUTTON)) : null));
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": index$1.getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, index.h("slot", { key: '869ddc92d88e68d689215add30f1eefbfababc21', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", { "data-area": "head" }, this.headline)) : null, index.h("div", { key: 'f3eb313619e046c8eb3fa7b527470b8145003173', "data-area": "content" }, this.text ? this.text : null, index.h("slot", { key: 'ff2a9c542527cf6da87bace3b77b9477899626ea' })), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, index.h("slot", { key: '5529bddb13c7a39c5fcf6b9bca844cbe1f16fee3', name: "link" }), index$1.getBoolean(this.closeable, "closeable") ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_CLOSE_BUTTON)) : null));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-page.cjs.entry.js

@@ -106,9 +106,9 @@ const DBPage = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '0d09488c8caa9ca9fbd1fa55e9ba913b10510b2a', class: index$1.cls("db-page", this.className), ref: (el) => {
+        return (index.h("div", { key: 'd8c086f8eb07ec85955f140adabfa43f78286635', class: index$1.cls("db-page", 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-variant": this.variant, "data-fade-in": index$1.getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded, "fontsLoaded") }, index.h("slot", { key: '667a0153fca3111a897356f90110aa6d5e068171', name: "header" }), index.h("main", { key: '92184cba49dc26836ed103d2254b5c319df29832', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '2d4d37de47023d7fc1dfb321f64d92c90c9b80b8' })), index.h("slot", { key: 'fb7fb41cbdfdf8e722aa9dde7080379a8083cf45', name: "footer" })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-variant": this.variant, "data-fade-in": index$1.getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded, "fontsLoaded") }, index.h("slot", { key: '9122b1310ce8e47ad01576dcd124da4c37f6c702', name: "header" }), index.h("main", { key: '27318129c99bdf85882dfe1e28265ebf7abe0437', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: 'cc1e59ff392c38010ffb61fc7dcfffc30bb75990' })), index.h("slot", { key: 'd0335d70f621f133e68f3a79a90a62ecf1b65be5', name: "footer" })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-popover.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-C313bRqJ.js');
 var index$1 = require('./index-spuu3sXz.js');
 var documentScrollListener = require('./document-scroll-listener-CvAZ6uPr.js');
-var floatingComponents = require('./floating-components-DlstoCKH.js');
+var floatingComponents = require('./floating-components-SpHkZuLA.js');
 
 const DBPopover = class {
     constructor(hostRef) {
@@ -213,9 +213,9 @@ const DBPopover = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '09a8f5d4aedc314e07a184c3e41d232073b4ffc9', class: index$1.cls("db-popover", this.className), ref: (el) => {
+        return (index.h("div", { key: '6c495cb9c8f329dd2cf07bfc55b56eb9aa524fb9', class: index$1.cls("db-popover", 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 }, index.h("slot", { key: 'eeee6e2e8d94272e91d275fb6799c7f781f8210a', name: "trigger" }), index.h("article", { key: 'cbbdd13d730291ec06059334c47be4c4bb8ffa71', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap, "gap"), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": index$1.getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '7ae19bc9f8ba3130c107fcf826a8ca9bcf8d9f88' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: 'f74be440cae4d35f76ff2899bae864fc9e3e5c8a', name: "trigger" }), index.h("article", { key: 'efec32b56bf7267aed0f0723306398f9e5f66c75', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap, "gap"), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": index$1.getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '2a1957f512ad0c9eca6e9e5f50721dda1ce56cf3' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-radio.cjs.entry.js

@@ -167,9 +167,9 @@ const DBRadio = class {
         (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
-        return (index.h("label", { key: '85734ed463718801789a9dea9c0febcc4c2e8266', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.h("input", { key: '7906add8b0074893bbffaaa0963284de1f89836c', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("label", { key: '130a6743dc68574baad658d474299d9808f7505f', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.h("input", { key: 'ebd2443b32fb32cf21735ea00607ee32f3da01d2', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, index.h("slot", { key: '7c35400883fd27d67bb2932cd646492fe137ccd9' })));
+            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, index.h("slot", { key: '2f4ccd96173b5780348cdddf914aa6ba424314bb' })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-section.cjs.entry.js

@@ -85,9 +85,9 @@ const DBSection = class {
     }
     render() {
         var _a, _b;
-        return (index.h("section", { key: 'e33119ea38ff1f66b56792cb1a5a57e47d87d370', class: index$1.cls("db-section", this.className), ref: (el) => {
+        return (index.h("section", { key: '1dc0a8e37a04cd3a4caba5a50b94ea876e80d462', class: index$1.cls("db-section", 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-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: '0ac9622c130f2a896b334e65025f16365fe50ea5' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: '74e62afdc9b8922d1cbd57e801fff67969831ac9' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-select.cjs.entry.js

@@ -278,14 +278,14 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '71200b34c84ae3c90e4990b11e55e8dea4c16e55', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '3633f34f827d53ee4b4d15e5b230307984fcbd09', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'ff177d80acfa3519df6467892fb5f97f4ad6872b', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '5273757e8379f6601c23f4b343812c233ddf86eb', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '9c75ec7cd982b4b8d283ce9365f6642c363dae16', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '8b2e0dc14717704e45524cf7803163c6c640de32', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: index$1.getBoolean(this.required, "required"), disabled: index$1.getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
             value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.getBooleanAsString(this.shouldShowEmptyOption(), "showEmptyOption") })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
             var _a;
             return (index.h(index.Fragment, null, option.options ? (index.h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (index.h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5baf4a0984f8d71776cda0d0d9c12e62f08f434b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '2b7c6895a1de8e77daba33de6923a33b7c43bee1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5c7dbe0b5e75b5f4b704cf469f0806451e3d0c4a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '932f5a52716c95629ed4eb12e3b2eee3ce1c559f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-stack.cjs.entry.js

@@ -85,9 +85,9 @@ const DBStack = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '02389c1bd26917e0176c95ce3e38e7ef664813e7', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        return (index.h("div", { key: '643002e053cb9d039f2e212c526586503c322ccc', class: index$1.cls("db-stack", 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-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap") }, index.h("slot", { key: '70b94e0558c79bc76096be335af95029ad2cbe5c' })));
+            }, 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": index$1.getBooleanAsString(this.wrap, "wrap") }, index.h("slot", { key: 'd38d30e92d276b6c31328ede2a68db8eb62fe05e' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-switch.cjs.entry.js

@@ -228,9 +228,9 @@ const DBSwitch = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: 'e95dafb6d580ef8cfbd54b91ee77da4809984862', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '533173f9a522375012848dbff80b0e357f5e1b30', htmlFor: this._id }, index.h("input", { key: '68e6d40e2b5654508d8ebaf9be66dd56aa39c8f2', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (index.h("div", { key: 'f9182aa08b0ac9a58767d5de15bada3b31850b1b', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid, "visualAid"), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '4f27226dbe245461f2fd9bd6913db00a5b207732', htmlFor: this._id }, index.h("input", { key: 'b0995a9fb3246105d0769c32b16342f76e74f40c', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.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 : null, index.h("slot", { key: 'a89d78f024905190780c3c8436773ab710115857' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'e170d8c368afd61c7c94c10bb2ea13fe4520d692', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'd8a5b8e7a5e0f70f245de5756f7b2d19640b4863', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.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 : null, index.h("slot", { key: 'd03438513412079f745be2671d54e4ddb87c042c' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5f2f82215ffd9119b3f27f5d37c2349cecc28325', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '27278f4285a7aa297d4e985c2710eec5e4bb45ce', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-tab-item_3.cjs.entry.js

@@ -154,10 +154,10 @@ const DBTabItem = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("li", { key: '003e5b968c65ba01df1b97e8f75592aee31125d9', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.h("label", { key: '682e5a3cf7036abcbbbbbba9f42ce534d7a4145d', 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": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("input", { key: 'ffb91a8e7248a8e5a2a7a05c6828fc6203e1eb37', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
+        return (index.h("li", { key: '0fdd67479f1a261fc13487237c5707c902aecdd4', class: index$1.cls("db-tab-item", this.className), role: "none" }, index.h("label", { key: 'a6f1a772c57e69b23302aa6eeac4c77ded476805', 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": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("input", { key: 'd24031946a686d3d077900a438c7a12443794a46', type: "radio", role: "tab", disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-selected": this._selected, checked: index$1.getBoolean(this.checked, "checked"), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: '2d079503cd365448cd054e05bfaec608ff476e04' }))));
+            }, name: this._name, id: (_d = this.id) !== null && _d !== void 0 ? _d : (_e = this.propOverrides) === null || _e === void 0 ? void 0 : _e.id, onInput: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", { key: 'bfa4aa307ea4b8ef410f367cfbe8a4578acc377d' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -258,9 +258,9 @@ const DBTabList = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '2538ba05ecad54c8c29dda93a08acb61faf02309', class: index$1.cls("db-tab-list", this.className), ref: (el) => {
+        return (index.h("div", { key: '29168c82cf6e0c5838d9afc3c3b475c7b5d513b1', class: index$1.cls("db-tab-list", 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 }, index.h("ul", { key: '86824302eb2cc92ca45a61d8bdec0f34cd679db6', role: "tablist" }, index.h("slot", { key: 'b56406b1e0291a29905b599531c0dccd9c035504' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: 'fee5dc804f98c62e86d56d9c941b103448ad6908', role: "tablist" }, index.h("slot", { key: '694a0a4de4623152cf277138dd96f0558063115f' }))));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -350,9 +350,9 @@ const DBTabPanel = class {
     }
     render() {
         var _a, _b;
-        return (index.h("section", { key: 'd7179207343d512194f69f6d99a34897c146c00a', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", ref: (el) => {
+        return (index.h("section", { key: 'a49b39a27112785e03a663c4c0ee9571e46d76fa', class: index$1.cls("db-tab-panel", this.className), role: "tabpanel", 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 }, this.content ? this.content : null, index.h("slot", { key: 'dc745b430dd17f253cf9403c28f6c2cbd5b59020' })));
+            }, 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, index.h("slot", { key: '0c70d6a522b959af728df3fda8c16dd9a5bc6a8f' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-table-body_3.cjs.entry.js

@@ -59,7 +59,7 @@ const DBTableBody = class {
     }
     render() {
         var _a;
-        return (index.h("tbody", { key: 'b6033bbe9cdcdb6bb9d292f68e980a6737fef9fa', class: index$1.cls("db-table-body", this.className), ref: (el) => {
+        return (index.h("tbody", { key: 'cb2c0320960e38d70cf2671ae7afd2b1a1d85029', class: index$1.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$2) => {
             var _a, _b, _c;
@@ -125,7 +125,7 @@ const DBTableFooter = class {
     }
     render() {
         var _a;
-        return (index.h("tfoot", { key: '735f3ce4c1d6a3305993a8de60c797e9ce2bcd20', class: index$1.cls("db-table-footer", this.className), ref: (el) => {
+        return (index.h("tfoot", { key: '204ca2b37050ebd079e26fe0dba6c55a87806d44', class: index$1.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$2) => {
             var _a, _b, _c;
@@ -220,7 +220,7 @@ const DBTableHead = class {
     }
     render() {
         var _a;
-        return (index.h("thead", { key: '340673440fd36e5522f70683bef5a4356f73cb69', class: index$1.cls("db-table-head", this.className), ref: (el) => {
+        return (index.h("thead", { key: 'd2796be8931832f63f6948ea20b14b6e9981f50e', class: index$1.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$2) => {
             var _a, _b, _c;

package/dist/cjs/db-table-caption.cjs.entry.js

@@ -84,9 +84,9 @@ const DBTableCaption = class {
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h("caption", { key: '5ef3476c6c9879f1fcf8548e11bea82516bd29d1', class: index$1.cls("db-table-caption", this.className), ref: (el) => {
+        return (index.h("caption", { key: '940bfd3ec5f3f13c14b4a838774e0f0014bb5b12', class: index$1.cls("db-table-caption", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("slot", { key: 'e20d1d699e7ab50422c0d40bdf058c8863ae4991' })));
+            }, id: this.id }, index.h("slot", { key: '0bbee85651cc51b5b131dd7aeff15ad454b40c3f' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-table.cjs.entry.js

@@ -162,7 +162,7 @@ const DBTable = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '7e6ea12b6cb4b2ddcc12262cd28bfec13baa55c0', class: index$1.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": index$1.getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, index.h("table", { key: '99fc11d1bb68297550e973293f519ad21f6953a0', ref: (el) => {
+        return (index.h("div", { key: '8baec1021c6c8aa2bafc4e735b81e7d149e4ca6e', class: index$1.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": index$1.getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, index.h("table", { key: '423304ec355a57e6df37c48baca039a9aabdf7b5', ref: (el) => {
                 this._ref = el;
             }, id: this.id }, this.captionPlain ? (index.h("caption", null, this.captionPlain)) : (index.h("slot", { name: "caption" })), this._data ? (index.h(index.Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (index.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) ? (index.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) ? (index.h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (index.h("slot", null)))));
     }