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

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

@@ -6,6 +6,27 @@ var index$1 = require('./index-spuu3sXz.js');
 const DBCustomSelectFormField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-select-form-field");
+        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-form-field");
+            }
+        });
+        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 DBCustomSelectFormField = 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 DBCustomSelectFormField = 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 DBCustomSelectFormField = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
+        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("summary", { key: '29aec52d355ed2fd7f032cc70cb7fbda8e22f3ad', class: index$1.cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (index.h("summary", { key: 'e74ace4d1b8b882d93a74274f0ae0b278f6daf42', class: index$1.cls("db-custom-select-form-field", 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: '797ccea7210fbfe800a3c3c08e37b0d73690e419' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: 'a336ba54bc2165846100b211d0f7f67755fb98d7' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -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: '23fbdff16d9ced63948418aa8a8bf40284fb098b', 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, "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: '8ad75d1e949eba11cca0cc8d6c6e6bbcef26f66b', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: 'baa3747700f7b3c68b6278fc867e381193380bbc', 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: 'dcb70261b5b4400566104e60611ab2f25face4e4', 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: '9eeb9bd1d98bd9caa0542c8ab6343f39f7c18418' }), 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: '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: '9629df613b269cc393dc90d13fb9272652ecf300', 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: '682b3bf735bc32853f9a5aabc2a37e88575c5b1f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'dee40917af4cd6d663fe0f7e42110390605f982f', "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

@@ -6,6 +6,27 @@ 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: 'b0abc4940417f6bf2ec60d4dce76f50a6639ffec', 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

@@ -9,6 +9,7 @@ const DBDrawer = class {
         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: '225a5dbee78c590dff66140a494f8eb241fa6330', 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: 'adfb6025f81f3a0f22ae824ae288135acc0abf38', 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, "rounded") }, index.h("header", { key: '1304ee6c2e71ea296a47a3f6b3f3b4986b9250cb', class: "db-drawer-header" }, index.h("div", { key: '58ac80d422901b140b2bf635eeafec45a8f07df5', class: "db-drawer-header-text" }, index.h("slot", { key: '7f9ecdebdbcb50b176989b50671b370ea29a9eb1', name: "drawerHeader" })), index.h("db-button", { key: '6b265a6e92f9d9ca4949dc40721700c2e9bd0390', 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: 'a740f736da9467544753fc8eecbc11c49dbff568', class: "db-drawer-content" }, index.h("slot", { key: 'e71354fd4dd8d9bde10226b918e6e6ff2c69fe03' })))));
+            }, "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

@@ -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: '9e4e437f3e1f465a86e279c4062455c8398e1fca', 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: '008214cb908cacd9c0d836c5513391ced9889de0', class: "db-header-meta-navigation" }, index.h("slot", { key: '77b7c0dd3867fa0625ade6b94886d8635cb9e9d0', name: "metaNavigation" })), index.h("div", { key: 'c8b29a92b9fc2e02101b69514af7abbd0e6c3f53', class: "db-header-navigation-bar" }, index.h("div", { key: '004aa45ef611647fd083a7605607bfd139d525e1', class: "db-header-brand-container" }, index.h("slot", { key: '117eb0bf2810766c34dc0fc5809ef29b88ee38b8', name: "brand" })), index.h("div", { key: '5f08b698cdaf172905f862eea220bf08114f84ae', class: "db-header-navigation-container" }, index.h("div", { key: 'dbd332f8fbcef5b4097ae1e912b8c82e1cf308e7', class: "db-header-navigation" }, index.h("slot", { key: '1add1d46f5591bb31a871f61308b9d2d4d9cc2fd' })), index.h("div", { key: 'a6f002f461afc2055f5e045d486e883dc0ffbd26', class: "db-header-primary-action" }, index.h("slot", { key: '5a9934b2b8b6242a0c893c5b669c52e20c60d28a', name: "primaryAction" }))), index.h("div", { key: 'db912777f19f979e01edeef604eb97909e62c341', class: "db-header-action-container" }, index.h("div", { key: '784e8f6fb73711b578d2b9105646878016a5cbde', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '06865f340c10c9da96b1ce632fe41fd8291cc051', 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: '9b215d86d1f9a90bf94e7590cb62e131e16826df', class: "db-header-secondary-action" }, index.h("slot", { key: '4568dfae1a86614dd3eeb0b708890fa429146488', name: "secondaryAction" })))), index.h("db-drawer", { key: 'b3f5173536dbd5a567f10f69da2b6067c07687c9', 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: 'd6e881f20c0aa9f96a32be21ca4da94dc1a62dfc', class: "db-header-drawer-navigation" }, index.h("div", { key: '76b8fdfcd35fc7a544740c38ec24bfead9460232', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '692234dca1ca4c54edd757dddb7a8ea0742347e3' })), index.h("div", { key: 'b28eebcc6e14458ee5f059ffff24df8d0a740bbf', class: "db-header-meta-navigation" }, index.h("slot", { key: 'ad47d6ab3247db70a8cba9447ba7d8c3247b5110', name: "metaNavigation" }))), index.h("div", { key: '21415bf3aa1572acd48c6a6dfe226a66d0b7f219', class: "db-header-secondary-action" }, index.h("slot", { key: 'ba1f8f44f97b54a6a4037df031131041ff0ca6d7', 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

@@ -6,6 +6,27 @@ 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: 'f525692a77464f4dfa854e5ede76ad6ddd7050a9', 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: '89e010681206c29c706d38800937af2046a39b5c' })));
+            }, 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); }
 };