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

package/dist/collection/components/custom-select-dropdown/custom-select-dropdown.js

@@ -7,6 +7,27 @@ import { h } from "@stencil/core";
 export class DBCustomSelectDropdown {
     constructor() {
         this.width = "fixed";
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-select-dropdown");
+        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-dropdown");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -21,10 +42,15 @@ export class DBCustomSelectDropdown {
                 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);
                 }
@@ -32,7 +58,7 @@ export class DBCustomSelectDropdown {
                     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");
@@ -52,12 +78,17 @@ export class DBCustomSelectDropdown {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select-dropdown");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("article", { key: '13b37b76ab0d131cf2af06244ed304c8c408c9d8', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: '49bd2cef7c2c04b2ae3696fea83057858a59fd9a', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", 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 }, h("slot", { key: '517f62713be2bd021d767e7e2a2eb3817a96856b' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: '89ceec1851f4ffdb27f99b5f301e70784607c2c8' })));
     }
     static get is() { return "db-custom-select-dropdown"; }
     static get properties() {
@@ -167,5 +198,10 @@ export class DBCustomSelectDropdown {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/custom-select-form-field/custom-select-form-field.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBCustomSelectFormField {
+    constructor() {
+        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.
      * @param element  the ref for the component
@@ -18,10 +41,15 @@ export class DBCustomSelectFormField {
                 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);
                 }
@@ -29,7 +57,7 @@ export class DBCustomSelectFormField {
                     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");
@@ -49,12 +77,17 @@ export class DBCustomSelectFormField {
             }
         }
         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 (h("summary", { key: '29aec52d355ed2fd7f032cc70cb7fbda8e22f3ad', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: 'e74ace4d1b8b882d93a74274f0ae0b278f6daf42', class: 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 }, h("slot", { key: '797ccea7210fbfe800a3c3c08e37b0d73690e419' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'a336ba54bc2165846100b211d0f7f67755fb98d7' })));
     }
     static get is() { return "db-custom-select-form-field"; }
     static get properties() {
@@ -137,5 +170,10 @@ export class DBCustomSelectFormField {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

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

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBCustomSelectList {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-select-list");
+        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-list");
+            }
+        });
+        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
@@ -18,10 +41,15 @@ export class DBCustomSelectList {
                 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);
                 }
@@ -29,7 +57,7 @@ export class DBCustomSelectList {
                     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");
@@ -49,12 +77,17 @@ export class DBCustomSelectList {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select-list");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'd15aae83f167178e808513fd0ba9d35209db0b10', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: '2dee04c035ef27c7f398805eee1c77e7a3ad893c', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, 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 }, h("ul", { key: 'c3ec4c14ca8c857a690c4d51d89654d0e1f49a4f' }, h("slot", { key: '663e6a50f1e117b7981a05946fc86f04b5892bb0' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '64b6f1efc4344d7e274a5dd3ad78ce80983a8b77' }, h("slot", { key: '26e0de28808a85216b9f1dcb8f788928a0c62c15' }))));
     }
     static get is() { return "db-custom-select-list"; }
     static get properties() {
@@ -189,5 +222,10 @@ export class DBCustomSelectList {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

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

@@ -7,6 +7,7 @@ import { h } from "@stencil/core";
 export class DBCustomSelectListItem {
     constructor() {
         this.hasDivider = false;
+        this.observer = undefined;
     }
     handleChange(event) {
         event.stopPropagation();
@@ -20,6 +21,26 @@ export class DBCustomSelectListItem {
         }
         return getBoolean(this.checked, "checked") ? "check" : "x_placeholder";
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-select-list-item");
+        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-list-item");
+            }
+        });
+        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
@@ -33,10 +54,15 @@ export class DBCustomSelectListItem {
                 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);
                 }
@@ -44,7 +70,7 @@ export class DBCustomSelectListItem {
                     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");
@@ -70,11 +96,16 @@ export class DBCustomSelectListItem {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select-list-item");
+        this.setupObserver(this._ref);
         this.watch0Fn();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
         var _a, _b;
-        return (h("li", { key: '059526061cdd0b2c8d9e135d0594338e6a5f9579', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: 'cb467f74569cd0505dab2ac02a9b375de8f5a9bc', class: cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
@@ -450,7 +481,8 @@ export class DBCustomSelectListItem {
     }
     static get states() {
         return {
-            "hasDivider": {}
+            "hasDivider": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/divider/divider.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBDivider {
+    constructor() {
+        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.
      * @param element  the ref for the component
@@ -18,10 +41,15 @@ export class DBDivider {
                 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);
                 }
@@ -29,7 +57,7 @@ export class DBDivider {
                     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");
@@ -49,10 +77,15 @@ export class DBDivider {
             }
         }
         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 (h("div", { key: 'b0abc4940417f6bf2ec60d4dce76f50a6639ffec', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: '09e35f9aa6912126375f69d68b75a1d64a2d0ba8', class: 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 }));
     }
@@ -241,5 +274,10 @@ export class DBDivider {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

package/dist/collection/components/drawer/drawer.js

@@ -8,6 +8,7 @@ import { h } from "@stencil/core";
 export class DBDrawer {
     constructor() {
         this.initialized = false;
+        this.observer = undefined;
     }
     handleClose(event, forceClose) {
         var _a;
@@ -71,6 +72,26 @@ export class DBDrawer {
             }
         }
     }
+    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
@@ -84,10 +105,15 @@ export class DBDrawer {
                 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);
                 }
@@ -95,7 +121,7 @@ export class DBDrawer {
                     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");
@@ -133,18 +159,29 @@ export class DBDrawer {
             }
         }
         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 (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 (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 }, h("article", { key: 'adfb6025f81f3a0f22ae824ae288135acc0abf38', class: 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 }, h("article", { key: 'b6a860730f150e365c684a2ed362f8ad3e84e862', class: 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": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: '1304ee6c2e71ea296a47a3f6b3f3b4986b9250cb', class: "db-drawer-header" }, h("div", { key: '58ac80d422901b140b2bf635eeafec45a8f07df5', class: "db-drawer-header-text" }, h("slot", { key: '7f9ecdebdbcb50b176989b50671b370ea29a9eb1', name: "drawerHeader" })), 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 : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'a740f736da9467544753fc8eecbc11c49dbff568', class: "db-drawer-content" }, h("slot", { key: 'e71354fd4dd8d9bde10226b918e6e6ff2c69fe03' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'd8347218a266eb48f2b86717d6ba210c907f4c18', class: "db-drawer-header" }, h("div", { key: '6e9a89da493fa209e09bf1ddb5a5719b52606e62', class: "db-drawer-header-text" }, h("slot", { key: '503445639dd0a3e51a6f99f5aff3eb039e6d34eb', name: "drawerHeader" })), 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 : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'f0e4ebb273ea7f53fd1c026f7f50a16f89ab3259', class: "db-drawer-content" }, h("slot", { key: 'e1ead064fd822ca9fd33be44af5fd52801ba33ea' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -489,7 +526,8 @@ export class DBDrawer {
     }
     static get states() {
         return {
-            "initialized": {}
+            "initialized": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/header/header.js

@@ -13,6 +13,7 @@ export class DBHeader {
     constructor() {
         this.initialized = false;
         this.forcedToMobile = false;
+        this.observer = undefined;
     }
     handleToggle(event) {
         if (event && event.stopPropagation) {
@@ -28,6 +29,26 @@ export class DBHeader {
             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
@@ -41,10 +62,15 @@ export class DBHeader {
                 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);
                 }
@@ -52,7 +78,7 @@ export class DBHeader {
                     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");
@@ -86,14 +112,25 @@ export class DBHeader {
             }
         }
         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 (h("header", { key: '9e4e437f3e1f465a86e279c4062455c8398e1fca', class: cls("db-header", this.className), ref: (el) => {
+        return (h("header", { key: '5d1e86b7e973ba201396327b7cdce38e2ac97228', class: 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 }, h("div", { key: '008214cb908cacd9c0d836c5513391ced9889de0', class: "db-header-meta-navigation" }, h("slot", { key: '77b7c0dd3867fa0625ade6b94886d8635cb9e9d0', name: "metaNavigation" })), h("div", { key: 'c8b29a92b9fc2e02101b69514af7abbd0e6c3f53', class: "db-header-navigation-bar" }, h("div", { key: '004aa45ef611647fd083a7605607bfd139d525e1', class: "db-header-brand-container" }, h("slot", { key: '117eb0bf2810766c34dc0fc5809ef29b88ee38b8', name: "brand" })), h("div", { key: '5f08b698cdaf172905f862eea220bf08114f84ae', class: "db-header-navigation-container" }, h("div", { key: 'dbd332f8fbcef5b4097ae1e912b8c82e1cf308e7', class: "db-header-navigation" }, h("slot", { key: '1add1d46f5591bb31a871f61308b9d2d4d9cc2fd' })), h("div", { key: 'a6f002f461afc2055f5e045d486e883dc0ffbd26', class: "db-header-primary-action" }, h("slot", { key: '5a9934b2b8b6242a0c893c5b669c52e20c60d28a', name: "primaryAction" }))), h("div", { key: 'db912777f19f979e01edeef604eb97909e62c341', class: "db-header-action-container" }, h("div", { key: '784e8f6fb73711b578d2b9105646878016a5cbde', class: "db-header-burger-menu-container" }, h("db-button", { key: '06865f340c10c9da96b1ce632fe41fd8291cc051', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '9b215d86d1f9a90bf94e7590cb62e131e16826df', class: "db-header-secondary-action" }, h("slot", { key: '4568dfae1a86614dd3eeb0b708890fa429146488', name: "secondaryAction" })))), h("db-drawer", { key: 'b3f5173536dbd5a567f10f69da2b6067c07687c9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'd6e881f20c0aa9f96a32be21ca4da94dc1a62dfc', class: "db-header-drawer-navigation" }, h("div", { key: '76b8fdfcd35fc7a544740c38ec24bfead9460232', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '692234dca1ca4c54edd757dddb7a8ea0742347e3' })), h("div", { key: 'b28eebcc6e14458ee5f059ffff24df8d0a740bbf', class: "db-header-meta-navigation" }, h("slot", { key: 'ad47d6ab3247db70a8cba9447ba7d8c3247b5110', name: "metaNavigation" }))), h("div", { key: '21415bf3aa1572acd48c6a6dfe226a66d0b7f219', class: "db-header-secondary-action" }, 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 }, h("div", { key: 'e01bfcb3611a7ff4ddd3fc6b758dc3bf40cbe712', class: "db-header-meta-navigation" }, h("slot", { key: '99f6ebb0c2bca335d25bd4eaafdb6bd9978d9c8d', name: "metaNavigation" })), h("div", { key: '698fa926fa448a6a540e8bf13676f92a8a0408e3', class: "db-header-navigation-bar" }, h("div", { key: '872fb23c94eb3ec81deca9eef498146b4c434e5e', class: "db-header-brand-container" }, h("slot", { key: '5575ee45816a7ecf9d5102b7c54004522fb3d0dd', name: "brand" })), h("div", { key: 'cda8077a77bde02515ed9c12d720802c0e1a85a0', class: "db-header-navigation-container" }, h("div", { key: '76bfcfe58004cc685d978815058aa1593160f90c', class: "db-header-navigation" }, h("slot", { key: '516e0953f7352fa7f84a8affdae187c345f77dbd' })), h("div", { key: '97eb5eb2f86ae44c85e5779f84d7e95f362c1b26', class: "db-header-primary-action" }, h("slot", { key: '2db7a8e65e46009f7fcf621c4d654204f8160e56', name: "primaryAction" }))), h("div", { key: '6478928d7b967b365823331648d12003b4e7eefa', class: "db-header-action-container" }, h("div", { key: 'ade80b06a587d723ebe9c1dfb3b8ca0cb3499ab6', class: "db-header-burger-menu-container" }, h("db-button", { key: '5e06f6da7bdcc1b12de1b9dbdbb98b6969c80f62', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '7afbb296999738cf13b37b4f461fefdddff18ead', class: "db-header-secondary-action" }, h("slot", { key: '6a39330a6eac4a0d6c9e9bcba648590d3a30cee9', name: "secondaryAction" })))), h("db-drawer", { key: '5ec7b632906a280475122fa9b189345ec55917f9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'c7febad8b66a9a3d3c238c4c87027534f09c8601', class: "db-header-drawer-navigation" }, h("div", { key: '784b2d12c1838ae2ccd90575f1ef04ce97b70104', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '6189ff74ac04565039a45952c8ea910d5260e9e0' })), h("div", { key: '67223d12d595038a36d9c44953a6cb24894ed35d', class: "db-header-meta-navigation" }, h("slot", { key: '7c3de485a3d7516978cfd16d8ef494a61f8bc4af', name: "metaNavigation" }))), h("div", { key: '01e0e9ac362d8f553adf53379be18a8cdeb2b816', class: "db-header-secondary-action" }, h("slot", { key: 'fa6c328af54f4aff0f6c7ec80d7a2b36ea63b49a', name: "secondaryAction" })))));
     }
     static get is() { return "db-header"; }
     static get properties() {
@@ -335,7 +372,8 @@ export class DBHeader {
     static get states() {
         return {
             "initialized": {},
-            "forcedToMobile": {}
+            "forcedToMobile": {},
+            "observer": {}
         };
     }
     static get events() {