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

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

@@ -1,11 +1,12 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BGaQ0Bx8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
 import { s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { e as getBoolean, s as stringPropVisible, g as getBooleanAsString, p as getNotificationRole, c as cls } from './index-xkoBSP8R.js';
+import { e as getBoolean, s as stringPropVisible, g as getBooleanAsString, p as getNotificationRole, c as cls } from './index-fumiz06Y.js';
 
 const DBNotification = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "close");
+        this.observer = undefined;
     }
     handleClose(event) {
         if (!event)
@@ -15,6 +16,26 @@ const DBNotification = class {
             this.close.emit(event);
         }
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-notification");
+        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-notification");
+            }
+        });
+        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
@@ -28,10 +49,15 @@ const DBNotification = 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);
                 }
@@ -39,7 +65,7 @@ const DBNotification = 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");
@@ -59,16 +85,21 @@ const DBNotification = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-notification");
+        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: '80b4682644b5cae7f09842e8683a9445f782055b', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("div", { key: '6700e43e45a2c0c18a0216fb12afd5d31820dcf9', class: cls("db-notification", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, role: getNotificationRole({
                 semantic: this.semantic,
                 role: this.role,
                 ariaLive: this.ariaLive,
-            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '4fc52fd9fff6357307c4bdc102c03082688b44cf', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: '6d61a4b4966795950a3da5dba130734bd0bbb2d9', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: 'f4ca4c620e00a203da07c3d0ce2974ade705f489' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: 'e1509dd146ff4288f96062e6286b47b495b388dc', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, h("slot", { key: '9ea4d9427f7e34dbf5fd9b187f4dce5df9b39d34', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: '4f9c9a95f7c6bd8f4b5bfb0acf69f02dbc789856', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: '2d9007bdc99c163fd6af4b12cc7210b60ab11319' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: 'f5505f81bdf36d9dd1aeb825a2af06dcd0214372', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,10 +1,31 @@
-import { r as registerInstance, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { c as cls, g as getBooleanAsString } from './index-xkoBSP8R.js';
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { c as cls, g as getBooleanAsString } from './index-fumiz06Y.js';
 
 const DBPage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.fontsLoaded = false;
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-page");
+        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-page");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -19,10 +40,15 @@ const DBPage = 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);
                 }
@@ -30,7 +56,7 @@ const DBPage = 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");
@@ -50,28 +76,37 @@ const DBPage = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-page");
-        this.fontsLoaded = !this.fadeIn;
-        if (document && this.fadeIn) {
-            document.fonts.ready.then(() => {
+        const onMountHook_0 = () => {
+            this.fontsLoaded = !this.fadeIn;
+            if (document && this.fadeIn) {
+                document.fonts.ready.then(() => {
+                    this.fontsLoaded = true;
+                });
+            }
+            else {
                 this.fontsLoaded = true;
-            });
-        }
-        else {
-            this.fontsLoaded = true;
-        }
+            }
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
     }
     disconnectedCallback() {
+        var _a;
         if (typeof window !== "undefined" &&
             document.documentElement.classList.contains("db-page-document")) {
             // remove document styles set by this
             document.documentElement.classList.remove("db-page-document");
         }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'ff82686603b48757d15136f99ffee2e8261a0868', class: cls("db-page", this.className), ref: (el) => {
+        return (h("div", { key: '0d09488c8caa9ca9fbd1fa55e9ba913b10510b2a', class: cls("db-page", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-variant": this.variant, "data-fade-in": getBooleanAsString(this.fadeIn), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: 'b545b6a529c6502b6d9acaf4349056f9b191b47f', name: "header" }), h("main", { key: '67fe344765eb3dabbb1e6882e653142522ba7e20', class: cls("db-main", this.mainClass) }, h("slot", { key: '5ab992699f2db9d811124d9ad0955e94c816896a' })), h("slot", { key: '2c0e00536dcac7decddc76aacc13b58989b02464', name: "footer" })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-variant": this.variant, "data-fade-in": getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded, "fontsLoaded") }, h("slot", { key: '667a0153fca3111a897356f90110aa6d5e068171', name: "header" }), h("main", { key: '92184cba49dc26836ed103d2254b5c319df29832', class: cls("db-main", this.mainClass) }, h("slot", { key: '2d4d37de47023d7fc1dfb321f64d92c90c9b80b8' })), h("slot", { key: 'fb7fb41cbdfdf8e722aa9dde7080379a8083cf45', name: "footer" })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { d as delay, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
-import { D as DocumentScrollListener } from './document-scroll-listener-DOBe3Oa9.js';
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { d as delay, g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { D as DocumentScrollListener } from './document-scroll-listener-4F0ZAg9p.js';
 import { b as handleFixedPopover } from './floating-components-DOPXnIzL.js';
 
 const DBPopover = class {
@@ -10,6 +10,7 @@ const DBPopover = class {
         this.isExpanded = false;
         this._documentScrollListenerCallbackId = undefined;
         this._observer = undefined;
+        this.observer = undefined;
     }
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -85,6 +86,26 @@ const DBPopover = class {
         }
         return null;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-popover");
+        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-popover");
+            }
+        });
+        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
@@ -98,10 +119,15 @@ const DBPopover = 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);
                 }
@@ -109,7 +135,7 @@ const DBPopover = 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");
@@ -168,15 +194,26 @@ const DBPopover = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-popover");
-        this.initialized = true;
+        const onMountHook_0 = () => {
+            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("div", { key: '5695f78c16f768ca34b16c05167518c2a2e26c35', class: cls("db-popover", this.className), ref: (el) => {
+        return (h("div", { key: '09a8f5d4aedc314e07a184c3e41d232073b4ffc9', class: cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'e765f506df650f9105ff6efb79c2d6fe36a48b91', name: "trigger" }), h("article", { key: '072c8716f82a49d319794e521f467d494fe4b313', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '3317509fd5cfbc56f9e0921f91e34520d9f93c87' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'eeee6e2e8d94272e91d275fb6799c7f781f8210a', name: "trigger" }), h("article", { key: 'cbbdd13d730291ec06059334c47be4c4bb8ffa71', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap, "gap"), "data-animation": getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '7ae19bc9f8ba3130c107fcf826a8ca9bcf8d9f88' }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { u as uuid, e as getBoolean, l as getHideProp, c as cls, d as delay } from './index-xkoBSP8R.js';
-import { b as addResetEventListener } from './form-components-D6LQfJvq.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
+import { u as uuid, e as getBoolean, l as getHideProp, c as cls, d as delay } from './index-fumiz06Y.js';
+import { b as addResetEventListener } from './form-components-ZV7IN0oG.js';
 
 const DBRadio = class {
     constructor(hostRef) {
@@ -12,6 +12,7 @@ const DBRadio = class {
         this.initialized = false;
         this._id = undefined;
         this.abortController = undefined;
+        this.observer = undefined;
     }
     handleInput(event, reset) {
         if (this.input) {
@@ -37,6 +38,26 @@ const DBRadio = class {
         var _a, _b, _c;
         this._id = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `radio-${uuid()}`;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-radio");
+        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-radio");
+            }
+        });
+        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
@@ -50,10 +71,15 @@ const DBRadio = 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);
                 }
@@ -61,7 +87,7 @@ const DBRadio = 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");
@@ -120,20 +146,28 @@ const DBRadio = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-radio");
-        this.initialized = true;
-        this.resetIds();
+        const onMountHook_0 = () => {
+            this.initialized = true;
+            this.resetIds();
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
     }
     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() {
-        return (h("label", { key: '1ff5543af917149d3d1f51a2c67c7686b55f8d11', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: '3409b94c081b36bd60ba84f8e6a4064e43e2ad50', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("label", { key: '85734ed463718801789a9dea9c0febcc4c2e8266', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: '7906add8b0074893bbffaaa0963284de1f89836c', type: "radio", "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"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, h("slot", { key: 'c9850bcf9efb2e272e6ae8cc83ab92d62e095094' })));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, h("slot", { key: '7c35400883fd27d67bb2932cd646492fe137ccd9' })));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,30 @@
-import { r as registerInstance, h, g as getElement } from './index-BGaQ0Bx8.js';
-import { c as cls } from './index-xkoBSP8R.js';
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { c as cls } from './index-fumiz06Y.js';
 
 const DBSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-section");
+        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-section");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -18,10 +39,15 @@ const DBSection = 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);
                 }
@@ -29,7 +55,7 @@ const DBSection = 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");
@@ -49,12 +75,17 @@ const DBSection = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-section");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b;
-        return (h("section", { key: '03d6f7ed2eea5b1374d0f5be00d77e59897033ea', class: cls("db-section", this.className), ref: (el) => {
+        return (h("section", { key: 'e33119ea38ff1f66b56792cb1a5a57e47d87d370', class: cls("db-section", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '55c388d7e65e9bd27dd229f01a3c162719b90df2' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '0ac9622c130f2a896b334e65025f16365fe50ea5' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BGaQ0Bx8.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BlbKvvUv.js';
 import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
-import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, g as getBooleanAsString, l as getHideProp, c as cls } from './index-xkoBSP8R.js';
-import { c as addValueResetEventListener } from './form-components-D6LQfJvq.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, g as getBooleanAsString, l as getHideProp, c as cls } from './index-fumiz06Y.js';
+import { c as addValueResetEventListener } from './form-components-ZV7IN0oG.js';
 
 const DBSelect = class {
     constructor(hostRef) {
@@ -22,6 +22,7 @@ const DBSelect = class {
         this.initialized = false;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -38,7 +39,7 @@ const DBSelect = class {
                     DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (this.hasValidState() &&
@@ -47,7 +48,7 @@ const DBSelect = class {
             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)) {
@@ -111,6 +112,26 @@ const DBSelect = class {
         this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
         this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;
     }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-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-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
@@ -124,10 +145,15 @@ const DBSelect = 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);
                 }
@@ -135,7 +161,7 @@ const DBSelect = 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");
@@ -227,9 +253,16 @@ const DBSelect = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-select");
-        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();
@@ -237,19 +270,20 @@ const DBSelect = class {
         this.watch4Fn();
     }
     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;
-        return (h("div", { key: '3dd83828aaa06217389cf635687da0070ae88f56', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '8fe580a4172003361a5c16551c4965882dbb3ce0', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '2f0ba052dafae5d44c27442eb4c27fa117c6ba76', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '71200b34c84ae3c90e4990b11e55e8dea4c16e55', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '3633f34f827d53ee4b4d15e5b230307984fcbd09', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: 'ff177d80acfa3519df6467892fb5f97f4ad6872b', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: getBoolean(this.required, "required"), disabled: getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
-            value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (h("option", { class: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(this.shouldShowEmptyOption()) })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
+            value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (h("option", { class: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(this.shouldShowEmptyOption(), "showEmptyOption") })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
             var _a;
             return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, 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: '34ca1d025c67dc018375d56651a7f0ae1d2e245f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '6f64314bcf457ddd86b3695e314125cca14d10d1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, 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: '5baf4a0984f8d71776cda0d0d9c12e62f08f434b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '2b7c6895a1de8e77daba33de6923a33b7c43bee1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {