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

package/dist/collection/components/page/page.js

@@ -8,6 +8,27 @@ import { h } from "@stencil/core";
 export class DBPage {
     constructor() {
         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.
@@ -22,10 +43,15 @@ export class DBPage {
                 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);
                 }
@@ -33,7 +59,7 @@ export class DBPage {
                     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");
@@ -53,28 +79,37 @@ export class DBPage {
             }
         }
         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" })));
     }
     static get is() { return "db-page"; }
     static get properties() {
@@ -263,7 +298,8 @@ export class DBPage {
     }
     static get states() {
         return {
-            "fontsLoaded": {}
+            "fontsLoaded": {},
+            "observer": {}
         };
     }
     static get elementRef() { return "rootElement"; }

package/dist/collection/components/popover/popover.js

@@ -12,6 +12,7 @@ export class DBPopover {
         this.isExpanded = false;
         this._documentScrollListenerCallbackId = undefined;
         this._observer = undefined;
+        this.observer = undefined;
     }
     handleEscape(event) {
         if (!event || event.key === "Escape") {
@@ -87,6 +88,26 @@ export class DBPopover {
         }
         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 @@ export class DBPopover {
                 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 @@ export class DBPopover {
                     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 @@ export class DBPopover {
             }
         }
         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' }))));
     }
     static get is() { return "db-popover"; }
     static get properties() {
@@ -448,7 +485,8 @@ export class DBPopover {
             "initialized": {},
             "isExpanded": {},
             "_documentScrollListenerCallbackId": {},
-            "_observer": {}
+            "_observer": {},
+            "observer": {}
         };
     }
     static get elementRef() { return "rootElement"; }

package/dist/collection/components/radio/radio.js

@@ -10,6 +10,7 @@ export class DBRadio {
         this.initialized = false;
         this._id = undefined;
         this.abortController = undefined;
+        this.observer = undefined;
     }
     handleInput(event, reset) {
         if (this.input) {
@@ -35,6 +36,26 @@ export class DBRadio {
         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
@@ -48,10 +69,15 @@ export class DBRadio {
                 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);
                 }
@@ -59,7 +85,7 @@ export class DBRadio {
                     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");
@@ -121,20 +147,28 @@ export class DBRadio {
             }
         }
         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' })));
     }
     static get is() { return "db-radio"; }
     static get properties() {
@@ -481,7 +515,8 @@ export class DBRadio {
         return {
             "initialized": {},
             "_id": {},
-            "abortController": {}
+            "abortController": {},
+            "observer": {}
         };
     }
     static get events() {

package/dist/collection/components/section/section.js

@@ -5,6 +5,29 @@ import { h } from "@stencil/core";
 
  */
 export class DBSection {
+    constructor() {
+        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.
      * @param element  the ref for the component
@@ -18,10 +41,15 @@ export class DBSection {
                 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 DBSection {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
                     if (isWebComponent) {
                         // Stencil is using this class for lazy loading component
                         parent.setAttribute("class", "hydrated");
@@ -49,12 +77,17 @@ export class DBSection {
             }
         }
         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' })));
     }
     static get is() { return "db-section"; }
     static get properties() {
@@ -189,5 +222,10 @@ export class DBSection {
             }
         };
     }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
     static get elementRef() { return "rootElement"; }
 }

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

@@ -19,6 +19,7 @@ export class DBSelect {
         this.initialized = false;
         this._voiceOverFallback = "";
         this.abortController = undefined;
+        this.observer = undefined;
     }
     hasValidState() {
         var _a;
@@ -35,7 +36,7 @@ export class DBSelect {
                     DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
                 this._voiceOverFallback = this._invalidMessage;
-                delay(() => (this._voiceOverFallback = ""), 1000);
+                void delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
         else if (this.hasValidState() &&
@@ -44,7 +45,7 @@ export class DBSelect {
             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)) {
@@ -108,6 +109,26 @@ export class DBSelect {
         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
@@ -121,10 +142,15 @@ export class DBSelect {
                 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);
                 }
@@ -132,7 +158,7 @@ export class DBSelect {
                     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");
@@ -224,9 +250,16 @@ export class DBSelect {
             }
         }
         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();
@@ -234,19 +267,20 @@ export class DBSelect {
         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)));
     }
     static get is() { return "db-select"; }
     static get properties() {
@@ -644,7 +678,7 @@ export class DBSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"icon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -902,7 +936,7 @@ export class DBSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"messageIcon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -937,7 +971,8 @@ export class DBSelect {
             "_value": {},
             "initialized": {},
             "_voiceOverFallback": {},
-            "abortController": {}
+            "abortController": {},
+            "observer": {}
         };
     }
     static get events() {