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

package/dist/collection/components/button/button.js

@@ -5,6 +5,9 @@ import { h } from "@stencil/core";
 
  */
 export class DBButton {
+    constructor() {
+        this.observer = undefined;
+    }
     getButtonType() {
         if (this.type) {
             return this.type;
@@ -14,6 +17,26 @@ export class DBButton {
         }
         return "submit";
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-button");
+        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-button");
+            }
+        });
+        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
@@ -27,10 +50,15 @@ export class DBButton {
                 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);
                 }
@@ -38,7 +66,7 @@ export class DBButton {
                     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");
@@ -58,13 +86,18 @@ export class DBButton {
             }
         }
         this.enableAttributePassing(this._ref, "db-button");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("button", { key: '005e64e2244340cf9bf254ec06165704472e7920', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: 'b3c660955f667a8f8c93bb7c83360a44a5af3d1f', class: cls("db-button", 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, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-no-text": getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: 'fe96078746d899588bcbb96f8229b8423f8b1a5e' })));
+                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-no-text": getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: 'eb9c13e9573f61cdb3e61b5614fec0ad656c02b8' })));
     }
     static get is() { return "db-button"; }
     static get properties() {
@@ -589,6 +622,11 @@ export class DBButton {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "click",

package/dist/collection/components/card/card.js

@@ -5,11 +5,34 @@ import { h } from "@stencil/core";
 
  */
 export class DBCard {
+    constructor() {
+        this.observer = undefined;
+    }
     handleClick(event) {
         if (this.click) {
             this.click.emit(event);
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-card");
+        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-card");
+            }
+        });
+        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
@@ -23,10 +46,15 @@ export class DBCard {
                 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);
                 }
@@ -34,7 +62,7 @@ export class DBCard {
                     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");
@@ -54,12 +82,17 @@ export class DBCard {
             }
         }
         this.enableAttributePassing(this._ref, "db-card");
+        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: '24dfc836fc2ca48b141001fa073c204ae8452b3a', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: '44419819c968f1a3882fc7618f9fa6627706e84d', class: cls("db-card", 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-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '99ad6ae87aba0214e1226bebd28f06d854ce9c65' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '0854d0bbca92f6dd3bdea08f82872fbfb6567bfa' })));
     }
     static get is() { return "db-card"; }
     static get properties() {
@@ -220,6 +253,11 @@ export class DBCard {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "click",

package/dist/collection/components/checkbox/checkbox.js

@@ -17,6 +17,7 @@ export class DBCheckbox {
         this._descByIds = undefined;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -33,7 +34,7 @@ export class DBCheckbox {
                     DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (this.hasValidState() &&
@@ -42,7 +43,7 @@ export class DBCheckbox {
             this._descByIds = this._validMessageId;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = (_d = this.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (stringPropVisible(this.message, this.showMessage)) {
@@ -76,6 +77,26 @@ export class DBCheckbox {
         this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
         this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-checkbox");
+        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-checkbox");
+            }
+        });
+        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
@@ -89,10 +110,15 @@ export class DBCheckbox {
                 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);
                 }
@@ -100,7 +126,7 @@ export class DBCheckbox {
                     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");
@@ -197,9 +223,16 @@ export class DBCheckbox {
             }
         }
         this.enableAttributePassing(this._ref, "db-checkbox");
-        this.initialized = true;
-        this.resetIds();
-        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+            this.resetIds();
+            this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
@@ -208,14 +241,15 @@ export class DBCheckbox {
         this.watch5Fn();
     }
     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;
-        return (h("div", { key: '9bead8d138ba6b7f9df456409c54880035d74ca3', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: 'f2d598b2c599ae1fdc61eb8a948b27a13b6059fe', htmlFor: this._id }, h("input", { key: '876cfc8632a429764fac5722513dbe418025dfdb', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '669ca0c9e0f0a21581a88f7d95a2a338f1ac3be3', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '620ffa05d0288e333ce10b36e21680beeb7956c1', htmlFor: this._id }, h("input", { key: 'a06fd7e2f559940d18c869b02e758d3402e67783', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: '32113165d250fd649d6e94d7721cbc152da104c1' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '459d930b5908b6e61ad7bcc463b5b67e710bddc5', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'cfcb23cc6fc53a5f82e56f83b1a9fffb279f0c67', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, h("slot", { key: '5a02a316cd8a9bd2813ce278e5dfa31f7c8bc57a' })), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '7ec8ff76655cd5d26413cdad76049696453595ab', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'a177359aaca2aa58b9847373bfb197f0a87cf80b', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-checkbox"; }
     static get properties() {
@@ -750,7 +784,8 @@ export class DBCheckbox {
             "_invalidMessage": {},
             "_descByIds": {},
             "_voiceOverFallback": {},
-            "abortController": {}
+            "abortController": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/custom-button/custom-button.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBCustomButton {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-custom-button");
+        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-button");
+            }
+        });
+        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 DBCustomButton {
                 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 DBCustomButton {
                     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,13 +77,18 @@ export class DBCustomButton {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-button");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'e947d7ffe6705c03ca3a1f9b5126c0f0d9449829', class: cls("db-custom-button", this.className), ref: (el) => {
+        return (h("div", { key: '6ef84eaa8f553eb89c921a9933fe0203df38f776', class: cls("db-custom-button", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText, "noText") }, h("slot", { key: '126520ddf6d2582fab1a1083c6241f868f3520d2' })));
+                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText, "noText") }, h("slot", { key: 'efb921b78ebebd9b13e33893efedaeb2d0ba5f66' })));
     }
     static get is() { return "db-custom-button"; }
     static get properties() {
@@ -398,5 +431,10 @@ export class DBCustomButton {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

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

@@ -44,6 +44,7 @@ export class DBCustomSelect {
         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();
@@ -73,7 +74,7 @@ export class DBCustomSelect {
                     DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
             if (this._userInteraction) {
                 this._validity = (_c = this.validation) !== null && _c !== void 0 ? _c : "invalid";
@@ -85,7 +86,7 @@ export class DBCustomSelect {
             this.setDescById(this._validMessageId);
             if (hasVoiceOver()) {
                 this._voiceOverFallback = (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
             this._validity = (_f = this.validation) !== null && _f !== void 0 ? _f : "valid";
         }
@@ -184,7 +185,7 @@ export class DBCustomSelect {
             const dropdown = this.detailsRef.querySelector("article");
             if (dropdown) {
                 // This is a workaround for Angular
-                delay(() => {
+                void delay(() => {
                     var _a;
                     handleFixedDropdown(dropdown, this.detailsRef, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
                 }, 1);
@@ -241,7 +242,7 @@ export class DBCustomSelect {
                                     // or to the last checkbox
                                     const search = getSearchInput(this.detailsRef);
                                     if (search) {
-                                        delay(() => {
+                                        void delay(() => {
                                             search.focus();
                                         }, 100);
                                     }
@@ -403,7 +404,7 @@ export class DBCustomSelect {
                     ? checkboxes.at(1)
                     : first;
                 if (checkbox) {
-                    delay(() => {
+                    void delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
                     }, 1);
@@ -416,7 +417,7 @@ export class DBCustomSelect {
             // Focus search if possible
             const search = getSearchInput(this.detailsRef);
             if (search) {
-                delay(() => {
+                void delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
                 }, 1);
@@ -482,6 +483,26 @@ export class DBCustomSelect {
         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
@@ -495,10 +516,15 @@ export class DBCustomSelect {
                 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);
                 }
@@ -506,7 +532,7 @@ export class DBCustomSelect {
                     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");
@@ -758,18 +784,25 @@ export class DBCustomSelect {
             }
         }
         this.enableAttributePassing(this._ref, "db-custom-select");
-        this.resetIds();
-        this._invalidMessage = this.invalidMessage || 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 || 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();
@@ -791,24 +824,25 @@ export class DBCustomSelect {
         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 (h("div", { key: '23fbdff16d9ced63948418aa8a8bf40284fb098b', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: '1089ddd1cfca85b7a04524de6430b3572ccb6453', class: 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": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '8ad75d1e949eba11cca0cc8d6c6e6bbcef26f66b', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'baa3747700f7b3c68b6278fc867e381193380bbc', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: 'df6fe2735838356dc7cf9da1538e2d734089341a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, 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: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: 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) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: 'dcb70261b5b4400566104e60611ab2f25face4e4', ref: (el) => {
+            : null)), h("details", { key: '51e516f07db962d68494b5b012a33982df369392', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '9eeb9bd1d98bd9caa0542c8ab6343f39f7c18418' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '9d059be7ce413194177616d016f7babffb790f07' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, 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 : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -818,7 +852,7 @@ export class DBCustomSelect {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (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)))))), h("div", null, 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 : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, 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), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '682b3bf735bc32853f9a5aabc2a37e88575c5b1f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'dee40917af4cd6d663fe0f7e42110390605f982f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, 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 : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, 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), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '3930c58d7e893751803157d1f23b6f9e7050adaa', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'efdbd668c7f5b2755bada6b174a0ed31a792dd31', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-custom-select"; }
     static get properties() {
@@ -2121,7 +2155,8 @@ export class DBCustomSelect {
             "_observer": {},
             "_searchValue": {},
             "selectAllChecked": {},
-            "selectAllIndeterminate": {}
+            "selectAllIndeterminate": {},
+            "observer": {}
         };
     }
     static get events() {