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

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

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBNotification = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close");
+        this.observer = undefined;
     }
     handleClose(event) {
         if (!event)
@@ -17,6 +18,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
@@ -30,10 +51,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);
                 }
@@ -41,7 +67,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");
@@ -61,16 +87,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 (index.h("div", { key: '80b4682644b5cae7f09842e8683a9445f782055b', class: index$1.cls("db-notification", this.className), ref: (el) => {
+        return (index.h("div", { key: '6700e43e45a2c0c18a0216fb12afd5d31820dcf9', class: index$1.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: index$1.getNotificationRole({
                 semantic: this.semantic,
                 role: this.role,
                 ariaLive: this.ariaLive,
-            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": index$1.getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, index.h("slot", { key: '4fc52fd9fff6357307c4bdc102c03082688b44cf', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", { "data-area": "head" }, this.headline)) : null, index.h("div", { key: '6d61a4b4966795950a3da5dba130734bd0bbb2d9', "data-area": "content" }, this.text ? this.text : null, index.h("slot", { key: 'f4ca4c620e00a203da07c3d0ce2974ade705f489' })), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, index.h("slot", { key: 'e1509dd146ff4288f96062e6286b47b495b388dc', name: "link" }), index$1.getBoolean(this.closeable, "closeable") ? (index.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 : constants.DEFAULT_CLOSE_BUTTON)) : null));
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": index$1.getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, index.h("slot", { key: '9ea4d9427f7e34dbf5fd9b187f4dce5df9b39d34', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", { "data-area": "head" }, this.headline)) : null, index.h("div", { key: '4f9c9a95f7c6bd8f4b5bfb0acf69f02dbc789856', "data-area": "content" }, this.text ? this.text : null, index.h("slot", { key: '2d9007bdc99c163fd6af4b12cc7210b60ab11319' })), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, index.h("slot", { key: 'f5505f81bdf36d9dd1aeb825a2af06dcd0214372', name: "link" }), index$1.getBoolean(this.closeable, "closeable") ? (index.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 : constants.DEFAULT_CLOSE_BUTTON)) : null));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,12 +1,33 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBPage = class {
     constructor(hostRef) {
         index.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.
@@ -21,10 +42,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);
                 }
@@ -32,7 +58,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");
@@ -52,28 +78,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 (index.h("div", { key: 'ff82686603b48757d15136f99ffee2e8261a0868', class: index$1.cls("db-page", this.className), ref: (el) => {
+        return (index.h("div", { key: '0d09488c8caa9ca9fbd1fa55e9ba913b10510b2a', class: index$1.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": index$1.getBooleanAsString(this.fadeIn), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded) }, index.h("slot", { key: 'b545b6a529c6502b6d9acaf4349056f9b191b47f', name: "header" }), index.h("main", { key: '67fe344765eb3dabbb1e6882e653142522ba7e20', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '5ab992699f2db9d811124d9ad0955e94c816896a' })), index.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": index$1.getBooleanAsString(this.fadeIn, "fadeIn"), "data-fonts-loaded": index$1.getBooleanAsString(this.fontsLoaded, "fontsLoaded") }, index.h("slot", { key: '667a0153fca3111a897356f90110aa6d5e068171', name: "header" }), index.h("main", { key: '92184cba49dc26836ed103d2254b5c319df29832', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '2d4d37de47023d7fc1dfb321f64d92c90c9b80b8' })), index.h("slot", { key: 'fb7fb41cbdfdf8e722aa9dde7080379a8083cf45', name: "footer" })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
-var documentScrollListener = require('./document-scroll-listener-ChQ7XZRk.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
+var documentScrollListener = require('./document-scroll-listener-CvAZ6uPr.js');
 var floatingComponents = require('./floating-components-DlstoCKH.js');
 
 const DBPopover = class {
@@ -12,6 +12,7 @@ const DBPopover = class {
         this.isExpanded = false;
         this._documentScrollListenerCallbackId = undefined;
         this._observer = undefined;
+        this.observer = undefined;
     }
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -87,6 +88,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
@@ -100,10 +121,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);
                 }
@@ -111,7 +137,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");
@@ -170,15 +196,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 (index.h("div", { key: '5695f78c16f768ca34b16c05167518c2a2e26c35', class: index$1.cls("db-popover", this.className), ref: (el) => {
+        return (index.h("div", { key: '09a8f5d4aedc314e07a184c3e41d232073b4ffc9', class: index$1.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 }, index.h("slot", { key: 'e765f506df650f9105ff6efb79c2d6fe36a48b91', name: "trigger" }), index.h("article", { key: '072c8716f82a49d319794e521f467d494fe4b313', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true), "data-open": index$1.getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '3317509fd5cfbc56f9e0921f91e34520d9f93c87' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: 'eeee6e2e8d94272e91d275fb6799c7f781f8210a', name: "trigger" }), index.h("article", { key: 'cbbdd13d730291ec06059334c47be4c4bb8ffa71', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap, "gap"), "data-animation": index$1.getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": index$1.getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '7ae19bc9f8ba3130c107fcf826a8ca9bcf8d9f88' }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
-var formComponents = require('./form-components-_ncB_U2D.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
+var formComponents = require('./form-components-CmQlkARp.js');
 
 const DBRadio = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const DBRadio = class {
         this.initialized = false;
         this._id = undefined;
         this.abortController = undefined;
+        this.observer = undefined;
     }
     handleInput(event, reset) {
         if (this.input) {
@@ -39,6 +40,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-${index$1.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
@@ -52,10 +73,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);
                 }
@@ -63,7 +89,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");
@@ -122,20 +148,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 (index.h("label", { key: '1ff5543af917149d3d1f51a2c67c7686b55f8d11', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.h("input", { key: '3409b94c081b36bd60ba84f8e6a4064e43e2ad50', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("label", { key: '85734ed463718801789a9dea9c0febcc4c2e8266', class: index$1.cls("db-radio", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, index.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: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.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, index.h("slot", { key: 'c9850bcf9efb2e272e6ae8cc83ab92d62e095094' })));
+            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.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, index.h("slot", { key: '7c35400883fd27d67bb2932cd646492fe137ccd9' })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,11 +1,32 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
-var index$1 = require('./index-2_9ESkQu.js');
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-spuu3sXz.js');
 
 const DBSection = class {
     constructor(hostRef) {
         index.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.
@@ -20,10 +41,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);
                 }
@@ -31,7 +57,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");
@@ -51,12 +77,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 (index.h("section", { key: '03d6f7ed2eea5b1374d0f5be00d77e59897033ea', class: index$1.cls("db-section", this.className), ref: (el) => {
+        return (index.h("section", { key: 'e33119ea38ff1f66b56792cb1a5a57e47d87d370', class: index$1.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 }, index.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 }, index.h("slot", { key: '0ac9622c130f2a896b334e65025f16365fe50ea5' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-HN8AqU2e.js');
+var index = require('./index-C313bRqJ.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-2_9ESkQu.js');
-var formComponents = require('./form-components-_ncB_U2D.js');
+var index$1 = require('./index-spuu3sXz.js');
+var formComponents = require('./form-components-CmQlkARp.js');
 
 const DBSelect = class {
     constructor(hostRef) {
@@ -24,6 +24,7 @@ const DBSelect = class {
         this.initialized = false;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -40,7 +41,7 @@ const DBSelect = class {
                     constants.DEFAULT_INVALID_MESSAGE;
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                index$1.delay(() => (this._voiceOverFallback = ""), 1000);
+                void index$1.delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (this.hasValidState() &&
@@ -49,7 +50,7 @@ const DBSelect = class {
             this._descByIds = this._validMessageId;
             if (index$1.hasVoiceOver()) {
                 this._voiceOverFallback = (_d = this.validMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_VALID_MESSAGE;
-                index$1.delay(() => (this._voiceOverFallback = ""), 1000);
+                void index$1.delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (index$1.stringPropVisible(this.message, this.showMessage)) {
@@ -113,6 +114,26 @@ const DBSelect = class {
         this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
         this._placeholderId = mId + constants.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
@@ -126,10 +147,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);
                 }
@@ -137,7 +163,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");
@@ -229,9 +255,16 @@ const DBSelect = class {
             }
         }
         this.enableAttributePassing(this._ref, "db-select");
-        this.initialized = true;
-        this.resetIds();
-        this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
+        const onMountHook_0 = () => {
+            this.initialized = true;
+            this.resetIds();
+            this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
@@ -239,19 +272,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 (index.h("div", { key: '3dd83828aaa06217389cf635687da0070ae88f56', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '8fe580a4172003361a5c16551c4965882dbb3ce0', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '2f0ba052dafae5d44c27442eb4c27fa117c6ba76', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '71200b34c84ae3c90e4990b11e55e8dea4c16e55', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '3633f34f827d53ee4b4d15e5b230307984fcbd09', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'ff177d80acfa3519df6467892fb5f97f4ad6872b', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
             }, required: index$1.getBoolean(this.required, "required"), disabled: index$1.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 ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.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 ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.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 (index.h(index.Fragment, null, option.options ? (index.h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (index.h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
-        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '34ca1d025c67dc018375d56651a7f0ae1d2e245f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '6f64314bcf457ddd86b3695e314125cca14d10d1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+        })) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '5baf4a0984f8d71776cda0d0d9c12e62f08f434b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '2b7c6895a1de8e77daba33de6923a33b7c43bee1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {