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

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
-var documentClickListener = require('./document-click-listener-B2-xKJv3.js');
-var documentScrollListener = require('./document-scroll-listener-ChQ7XZRk.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 formComponents = require('./form-components-_ncB_U2D.js');
+var formComponents = require('./form-components-CmQlkARp.js');
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -48,6 +48,7 @@ const DBCustomSelect = class {
         this._searchValue = undefined;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
+        this.observer = undefined;
         this.satisfyReact = function satisfyReact(event) {
             // This is a function to satisfy React
             event.stopPropagation();
@@ -77,7 +78,7 @@ const DBCustomSelect = class {
                     constants.DEFAULT_INVALID_MESSAGE;
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                index$1.delay(() => (this._voiceOverFallback = ""), 1000);
+                void index$1.delay(() => (this._voiceOverFallback = ""), 1000);
             }
             if (this._userInteraction) {
                 this._validity = (_c = this.validation) !== null && _c !== void 0 ? _c : "invalid";
@@ -89,7 +90,7 @@ const DBCustomSelect = class {
             this.setDescById(this._validMessageId);
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback = (_e = this.validMessage) !== null && _e !== void 0 ? _e : constants.DEFAULT_VALID_MESSAGE;
-                index$1.delay(() => (this._voiceOverFallback = ""), 1000);
+                void index$1.delay(() => (this._voiceOverFallback = ""), 1000);
             }
             this._validity = (_f = this.validation) !== null && _f !== void 0 ? _f : "valid";
         }
@@ -188,7 +189,7 @@ const DBCustomSelect = class {
             const dropdown = this.detailsRef.querySelector("article");
             if (dropdown) {
                 // This is a workaround for Angular
-                index$1.delay(() => {
+                void index$1.delay(() => {
                     var _a;
                     floatingComponents.handleFixedDropdown(dropdown, this.detailsRef, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
                 }, 1);
@@ -245,7 +246,7 @@ const DBCustomSelect = class {
                                     // or to the last checkbox
                                     const search = index$1.getSearchInput(this.detailsRef);
                                     if (search) {
-                                        index$1.delay(() => {
+                                        void index$1.delay(() => {
                                             search.focus();
                                         }, 100);
                                     }
@@ -407,7 +408,7 @@ const DBCustomSelect = class {
                     ? checkboxes.at(1)
                     : first;
                 if (checkbox) {
-                    index$1.delay(() => {
+                    void index$1.delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
                     }, 1);
@@ -420,7 +421,7 @@ const DBCustomSelect = class {
             // Focus search if possible
             const search = index$1.getSearchInput(this.detailsRef);
             if (search) {
-                index$1.delay(() => {
+                void index$1.delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
                 }, 1);
@@ -486,6 +487,26 @@ const DBCustomSelect = class {
         this._selectedLabelsId = mId + "-selected-labels";
         this._infoTextId = mId + "-info";
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-select");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-custom-select");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -499,10 +520,15 @@ const DBCustomSelect = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -510,7 +536,7 @@ const DBCustomSelect = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -762,18 +788,25 @@ const DBCustomSelect = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select");
-        this.resetIds();
-        this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
-        if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-            this._observer = new IntersectionObserver((payload) => {
-                if (this.detailsRef) {
-                    const entry = payload.find(({ target }) => target === this.detailsRef);
-                    if (entry && !entry.isIntersecting && this.detailsRef.open) {
-                        this.detailsRef.open = false;
+        const onMountHook_0 = () => {
+            this.resetIds();
+            this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
+            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+                this._observer = new IntersectionObserver((payload) => {
+                    if (this.detailsRef) {
+                        const entry = payload.find(({ target }) => target === this.detailsRef);
+                        if (entry && !entry.isIntersecting && this.detailsRef.open) {
+                            this.detailsRef.open = false;
+                        }
                     }
-                }
-            });
-        }
+                });
+            }
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
@@ -795,24 +828,25 @@ const DBCustomSelect = class {
         this.watch18Fn();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (index.h("div", { key: '09c22c7eef838650142ba6cf5a9f7a5c04e45d53', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (index.h("div", { key: '1089ddd1cfca85b7a04524de6430b3572ccb6453', 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), "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) }, index.h("label", { key: '377317d94a5689926923ee92eb0399a6e0085177', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: '016dc1cebfeb8e92a08286e445d2da2989e630d7', 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: '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.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: 'eb36c96b7c443289a1464a4d25a7f189c852b7ab', ref: (el) => {
+            : null)), index.h("details", { key: '51e516f07db962d68494b5b012a33982df369392', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '2ce1371b5683aa1162167a7e9dd9950e075920cf' }), 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), 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"), 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: '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) => {
                 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
@@ -822,7 +856,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: 'ab092f47ad6734f696000a852fc8e3a825a6d054', class: "db-custom-select-placeholder", "aria-hidden": index$1.getBooleanAsString(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: 'c134d746d6e06109551880446ff27e791fc482b1', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'b5b1291d952eaea52a176a3b8c9d9ea7a0b57e34', "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: '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)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,11 +1,32 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBDivider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-divider");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-divider");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -20,10 +41,15 @@ const DBDivider = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -31,7 +57,7 @@ const DBDivider = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -51,10 +77,15 @@ const DBDivider = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-divider");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: 'fff7e6137a97f6cc76eed42c2a5225348d0f78a0', class: index$1.cls("db-divider", this.className), ref: (el) => {
+        return (index.h("div", { key: '09e35f9aa6912126375f69d68b75a1d64a2d0ba8', 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

@@ -1,14 +1,15 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBDrawer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close");
         this.initialized = false;
+        this.observer = undefined;
     }
     handleClose(event, forceClose) {
         var _a;
@@ -72,6 +73,26 @@ const DBDrawer = class {
             }
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-drawer");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-drawer");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -85,10 +106,15 @@ const DBDrawer = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -96,7 +122,7 @@ const DBDrawer = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -134,18 +160,29 @@ const DBDrawer = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-drawer");
-        this.handleDialogOpen();
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.handleDialogOpen();
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (index.h("dialog", { key: 'a09369527805c993297bc3d27cf1f03c5e06f232', 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: '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) => {
                 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: 'cb35fccd92fcf6bab4d6027c29fc2ba0bb25e9ac', class: index$1.cls("db-drawer-container", this.className), 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) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: '20a175ba0707e3cc207e1e57dd925b8234b86877', class: "db-drawer-header" }, index.h("div", { key: 'd317b29ff0d704aa50b3fbd0a8c86b94f7ab1dfa', class: "db-drawer-header-text" }, index.h("slot", { key: '1456a65346ebd9d52dafe48022cc0b343216cc09', name: "drawerHeader" })), index.h("db-button", { key: '6741766807bb56a24ed7bb385240093a3a1e5f7f', 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: 'dea536d8bd27dccdb7edd476defc68beed65254f', class: "db-drawer-content" }, index.h("slot", { key: 'bcb4ed27199eb79f9d6c13da82d7be87d2f5e54b' })))));
+            }, "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' })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index$1 = require('./index-spuu3sXz.js');
 var navigation = require('./navigation-Bah882nU.js');
 require('./floating-components-DlstoCKH.js');
 
@@ -12,6 +12,7 @@ const DBHeader = class {
         this.toggle = index.createEvent(this, "toggle");
         this.initialized = false;
         this.forcedToMobile = false;
+        this.observer = undefined;
     }
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -27,6 +28,26 @@ const DBHeader = class {
             this.handleToggle();
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-header");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-header");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -40,10 +61,15 @@ const DBHeader = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -51,7 +77,7 @@ const DBHeader = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -85,14 +111,25 @@ const DBHeader = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-header");
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b, _c;
-        return (index.h("header", { key: 'e7aec08f10ae9d575b3f845be29ee19505df9216', class: index$1.cls("db-header", this.className), ref: (el) => {
+        return (index.h("header", { key: '5d1e86b7e973ba201396327b7cdce38e2ac97228', 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: 'bdd8c85393260628938c33bfa1e8573d55a6d730', class: "db-header-meta-navigation" }, index.h("slot", { key: '42854d3f106c63bbc300458bdcd1cee48a7209be', name: "metaNavigation" })), index.h("div", { key: '7ef93a1cb414b44657aaed9d7e4779690ca09cf5', class: "db-header-navigation-bar" }, index.h("div", { key: '1e59f2987b83fe87cd22ae6bc95ac855c061869d', class: "db-header-brand-container" }, index.h("slot", { key: 'a610bb49cd670896fa1b980ffcdcbd40c2918b4e', name: "brand" })), index.h("div", { key: '1b94bf4ad2ae622875b7192812f9940e2a87c1e3', class: "db-header-navigation-container" }, index.h("div", { key: 'f57aac0c4268bf285de0c07bab40a736f0ca42a4', class: "db-header-navigation" }, index.h("slot", { key: '45d426690fb2dcb6da32f6f646f6b1a932670cd2' })), index.h("div", { key: 'e60bbd749efc91d9a00a54e3cbc6680e60f6e598', class: "db-header-primary-action" }, index.h("slot", { key: 'a41128047bc8063c45c14ff3ec58d83b7edd8361', name: "primaryAction" }))), index.h("div", { key: '82e9141ac1ad7f3a33c9bf0c15ccf969ccd5983f', class: "db-header-action-container" }, index.h("div", { key: '3f3a5c503ecd11a0aff43623921bb185c59c1802', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '6547cf5982c0739960b9aa4363ddb71f1423a55b', 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: 'd2c691eb6980e0eeffa512ade5074400bd7973b8', class: "db-header-secondary-action" }, index.h("slot", { key: '6cc84b46d137ac21aa90c3f84a873febc6fa0dba', name: "secondaryAction" })))), index.h("db-drawer", { key: '0dc5a353f9365bd76df967cdb3fee20be89c9525', 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: '3a28d35593fe006aa6269077466bd91f33d5f2e4', class: "db-header-drawer-navigation" }, index.h("div", { key: 'c42fff25d31fe234d841542b108805b0aa85e05c', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '0de07dfbb68d8b6fcec8cf11e6398566fcd45ae2' })), index.h("div", { key: '062baf6f3e503751017a3715142e1622c27423bf', class: "db-header-meta-navigation" }, index.h("slot", { key: '2e703195477c67270e9bfee04335321c52b9de4f', name: "metaNavigation" }))), index.h("div", { key: '028079c3fae38bc282d8b064e4515ab1c27aa45e', class: "db-header-secondary-action" }, index.h("slot", { key: '879378953f36c55b5489a157a81e62f188ab5fca', 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: '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" })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,11 +1,32 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-icon");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-icon");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -20,10 +41,15 @@ const DBIcon = class {
                 const attr = attributes.item(i);
                 if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    element.setAttribute(attr.name, attr.value);
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
                     parent.removeAttribute(attr.name);
                 }
-                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                else if (attr && ["style"].includes(attr.name)) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
@@ -31,7 +57,7 @@ const DBIcon = class {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -51,12 +77,17 @@ const DBIcon = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-icon");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (index.h("span", { key: '004fb7b91cd27bc452f4777dfd68183bd4bfeaab', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (index.h("span", { key: '167039453ffa0b206221a521e52e889beeab0d43', 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: 'e9b5fbdefc6cf80abff634c60966ad719985e2be' })));
+            }, 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' })));
     }
     get rootElement() { return index.getElement(this); }
 };