@db-ux/wc-core-components 4.4.2 → 4.4.3

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBDivider = class {
@@ -18,12 +18,16 @@ const DBDivider = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -43,7 +47,7 @@ const DBDivider = class {
         this.enableAttributePassing(this._ref, "db-divider");
     }
     render() {
-        return (index.h("div", { key: '0e9bf54bcd77ec1c324eb6300162bbf8c67b8c16', class: index$1.cls("db-divider", this.className), ref: (el) => {
+        return (index.h("div", { key: '85afebbf444ffecdfbc4701e36c94c9a48080fc1', class: index$1.cls("db-divider", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 
@@ -83,12 +83,16 @@ const DBDrawer = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -131,11 +135,11 @@ const DBDrawer = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
+        return (index.h("dialog", { key: '571d8c77113ad08a76865dec43c20069cc558290', class: "db-drawer", id: this.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: '6116282c0fb97d5c34a216c899b53c405116c326', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, index.h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, index.h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), index.h("db-button", { key: '4a9ad6ba576480b154614da72752421a8ff81df6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, index.h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: '4e2300a258a0cea3141b8cca846fa5163c911caa', class: "db-drawer-header" }, index.h("div", { key: '659656f5fed1e68d21c44c9eaed5d91f634cf58f', class: "db-drawer-header-text" }, index.h("slot", { key: '51b540fa08c43a570e7a4cc49306a0a20af9c3be', name: "drawerHeader" })), index.h("db-button", { key: '88facb314b62e021c678b4298dfcd4daa20d58ed', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '439a1f0615d190b737d758d60cba5488ea72811b', class: "db-drawer-content" }, index.h("slot", { key: '80c97bcc8cfb09aa2ec65dae1285d5a48c242eea' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
-var navigation = require('./navigation-DauGE-qj.js');
-require('./floating-components-ogUqz72V.js');
+var navigation = require('./navigation-BztJmEHf.js');
+require('./floating-components-pYaTeNhp.js');
 
 const DBHeader = class {
     constructor(hostRef) {
@@ -38,12 +38,16 @@ const DBHeader = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -80,9 +84,9 @@ const DBHeader = class {
     }
     render() {
         var _a;
-        return (index.h("header", { key: 'f9850f5a6f59bee2ed97db4baea343e07aaff91a', class: index$1.cls("db-header", this.className), ref: (el) => {
+        return (index.h("header", { key: '3ce812cf839f1f8c29b9bc05c6a840b58b13b51e', class: index$1.cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: '32f62d8f0bf634e96cf7b0e96721fcd40aa3a3eb', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: 'a42c28439d07e97a3842efe4fa1c143c23691b5f', class: "db-header-drawer-navigation" }, index.h("div", { key: '141165e04574db312d51b0b4c376c53ddace243e', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '2208e0677b1f15da56fd6be230523559fcb5f1da' })), index.h("div", { key: 'fb980500cdb2f6f3ce2fce2489c48ac27ebd256a', class: "db-header-meta-navigation" }, index.h("slot", { key: '7eea7189a1e82821fc3f0bd600bda5a040382e88', name: "metaNavigation" }))), index.h("div", { key: 'a492419586593d43edbada69ad136ad832902e15', class: "db-header-secondary-action" }, index.h("slot", { key: '90ed75a19c230c3a2af94b8e0b397c8712f9a0df', name: "secondaryAction" }))), index.h("div", { key: '1d0451bd1f522f51cbd2bab3cd1b7c316fd644b4', class: "db-header-meta-navigation" }, index.h("slot", { key: 'd92c5a30a0131225f2b7b1428c5121fed241d8a7', name: "metaNavigation" })), index.h("div", { key: 'f65c8e6b2b997c281046f20e1ac7c89d8b5697f6', class: "db-header-navigation-bar" }, index.h("div", { key: 'be1e1017417595bbb4ff845b650f5edef1f4fd49', class: "db-header-brand-container" }, index.h("slot", { key: '5552b137967ae4659887ad67514fd0078ced1473', name: "brand" })), index.h("div", { key: '682e11b41f5131feb17cdf1e175b9bbcf8399740', class: "db-header-navigation-container" }, index.h("div", { key: '29f5a7afa6d8c014f6e574d72198289970e5324e', class: "db-header-navigation" }, index.h("slot", { key: 'f03956cf3368d3ec0dbaab3b3091c276eaf03a92' })), index.h("div", { key: '8a81b9ee537f84e14c9d41acf323552d6f239748', class: "db-header-primary-action" }, index.h("slot", { key: '78ae4dbdc9bcad5bd4bd951a0a334c47cb35bcf6', name: "primaryAction" }))), index.h("div", { key: 'e1e913c181df2f73cc9fe4cda17f505a26b1ad04', class: "db-header-action-container" }, index.h("div", { key: '92d7c9c0e50f9aa86e15c18a2ac7dddabc241358', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '775ca507ba24b19e411e529e9ad67fcdfa6f3dea', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '7cd5a16e27c72e3e0635056df8bcb7f45461c9fb', class: "db-header-secondary-action" }, index.h("slot", { key: '09669c165311f8dc95961c64900d5ab36281700a', name: "secondaryAction" }))))));
+            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: 'ad1ef3ed622f466d53e854f52df140580d8dcaf9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: 'f15469dcbca82a805c94e8e775f4903bff148f0c', class: "db-header-drawer-navigation" }, index.h("div", { key: '4d661aa075944eb2d147cde8131b3da9bfcc1a71', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '0867fadfd79434481679fd1e29d369b0da1f4f70' })), index.h("div", { key: '8135e33f5209b7eeff4f78ece25836fc03905113', class: "db-header-meta-navigation" }, index.h("slot", { key: '272b6fb534de9ebaf11ce0c15d9573f137bf9257', name: "metaNavigation" }))), index.h("div", { key: 'ff5e1b82535825b07721f0478b0c315dfb2064db', class: "db-header-secondary-action" }, index.h("slot", { key: '41f5a0bec2da7eb0a7072a48268e1252e7a6e04b', name: "secondaryAction" }))), index.h("div", { key: '2dc424731844cc853759d229860ca85bc8343005', class: "db-header-meta-navigation" }, index.h("slot", { key: '254003d7ef0b53d1a1bf4ff6c91ffaad40db23ae', name: "metaNavigation" })), index.h("div", { key: 'cc66337e4fa59e3ba2f8150bba581e830348c21b', class: "db-header-navigation-bar" }, index.h("div", { key: 'f3b2f219dff06c4e64803cee6843fce892a08710', class: "db-header-brand-container" }, index.h("slot", { key: '5d2b3eeb421c4954a102dfc2a98feec2eec88e9b', name: "brand" })), index.h("div", { key: 'ffd377f496e03febd719e8caa103aad4a70d7d09', class: "db-header-navigation-container" }, index.h("div", { key: 'dd144a78a278178cfbb49ca99aa6ad2c8e060c26', class: "db-header-navigation" }, index.h("slot", { key: '24f29087236b2f885f76fcec167c17523d7cb4cf' })), index.h("div", { key: '30d6926a2cc679e2a0b89321dd5573c82c52413a', class: "db-header-primary-action" }, index.h("slot", { key: '6e8351b6a7236d6f79b221cd78f1c19e32984a64', name: "primaryAction" }))), index.h("div", { key: '918bcd534073735daae1b6f366f514e9a913bcf0', class: "db-header-action-container" }, index.h("div", { key: 'a003b166c56c021029deb61294b1360e24c68233', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '0a62ee629bd0b9b768a7ae33dd854c620ad8c60e', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '70d919437f722df576cfd1f01f829da1af071352', class: "db-header-secondary-action" }, index.h("slot", { key: '7b2c7c2a575787fe652a47c5e570964c3715b968', name: "secondaryAction" }))))));
     }
     static get watchers() { return {
         "initialized": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBIcon = class {
@@ -18,12 +18,16 @@ const DBIcon = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -43,7 +47,7 @@ const DBIcon = class {
         this.enableAttributePassing(this._ref, "db-icon");
     }
     render() {
-        return (index.h("span", { key: '3a67532009f85e493784e99774e230f52c588ccc', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (index.h("span", { key: '98575a7f351cb2f3bb8d716d7e8ef07f10e403ad', class: index$1.cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : index.h("slot", null)));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBInfotext = class {
@@ -18,12 +18,16 @@ const DBInfotext = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -44,7 +48,7 @@ const DBInfotext = class {
     }
     render() {
         var _a;
-        return (index.h("span", { key: 'c126d11d979284931006fa76b2a6a49e396f394c', class: index$1.cls("db-infotext", this.className), ref: (el) => {
+        return (index.h("span", { key: '1d72ab4201a2886684b736cc9909ffc2df914999', class: index$1.cls("db-infotext", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-show-icon-leading": index$1.getBooleanAsString((_a = this.showIcon) !== null && _a !== void 0 ? _a : true) }, this.text ? this.text : index.h("slot", null)));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBLink = class {
@@ -18,12 +18,16 @@ const DBLink = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -44,7 +48,7 @@ const DBLink = class {
     }
     render() {
         var _a, _b;
-        return (index.h("a", { key: 'a43d8889621390017c07dda184c570e54d7f81e0', class: index$1.cls("db-link", this.className), ref: (el) => {
+        return (index.h("a", { key: 'edcb3906d31ba5f0387137f96343d61559f553aa', class: index$1.cls("db-link", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_a = this.referrerpolicy) !== null && _a !== void 0 ? _a : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": index$1.getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": index$1.getBooleanAsString((_b = this.showIcon) !== null && _b !== void 0 ? _b : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": index$1.getBooleanAsString(this.wrap) }, this.text ? this.text : index.h("slot", null)));
     }

package/dist/cjs/db-navigation-item.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
-var navigation = require('./navigation-DauGE-qj.js');
-require('./floating-components-ogUqz72V.js');
+var navigation = require('./navigation-BztJmEHf.js');
+require('./floating-components-pYaTeNhp.js');
 
 const DBNavigationItem = class {
     constructor(hostRef) {
@@ -50,12 +50,16 @@ const DBNavigationItem = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -107,7 +111,7 @@ const DBNavigationItem = class {
     }
     render() {
         var _a;
-        return (index.h("li", { key: 'd9127a5065dc034116325e95f39c9d2d9844722e', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
+        return (index.h("li", { key: '3b363559d7b1b52c67f722164d7f5932f98d7d69', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": index$1.getBooleanAsString(this.wrap), "aria-disabled": index$1.getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : index.h("slot", null) : null, this.hasSubNavigation ? (index.h(index.Fragment, null, index.h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : index.h("slot", null)), index.h("menu", { class: "db-sub-navigation", "data-force-close": this.autoClose, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (index.h("div", { class: "db-mobile-navigation-back" }, index.h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_BACK))) : null, index.h("slot", { name: "subNavigation" })))) : null));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBNavigation = class {
@@ -18,12 +18,16 @@ const DBNavigation = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -43,9 +47,9 @@ const DBNavigation = class {
         this.enableAttributePassing(this._ref, "db-navigation");
     }
     render() {
-        return (index.h("nav", { key: 'de11910f2ac8e29cb5ee23aaf0e0d38cf9b5d4e8', class: index$1.cls("db-navigation", this.className), ref: (el) => {
+        return (index.h("nav", { key: 'ed23071c4f127474f38f663cd5c0536c94cfe526', class: index$1.cls("db-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("menu", { key: '414afdaa58874f959a2ed49aefdaa672894806c3' }, index.h("slot", { key: '703407fdf69a8dfd133779c864a7016972f1a3e5' }))));
+            }, id: this.id }, index.h("menu", { key: 'a54c6a1a1a7e5624287c0f5f7a93bc66bcb1a2f2' }, index.h("slot", { key: '7fa106c1c7f1feae5ba622d89a4a4063ea5a8d93' }))));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 
@@ -28,12 +28,16 @@ const DBNotification = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -54,13 +58,13 @@ const DBNotification = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: 'd1b82284e12ea68b7b33ba90a760ebcd0ec867e2', class: index$1.cls("db-notification", this.className), ref: (el) => {
+        return (index.h("div", { key: '7bfffb9a6ef900927dc92872a653c2483bba9c13', class: index$1.cls("db-notification", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.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: 'a468ad7c9373bc359e404751ab736b7049e5bbe8', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", null, this.headline)) : null, index.h("p", { key: '95f58e30be3685db12507152d980f6e2909b557a' }, this.text ? this.text : index.h("slot", null)), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("span", null, this.timestamp)) : null, index.h("slot", { key: 'd3c2d44714e5e332deae28d98ee800f8fb281f3f', 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) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : 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), "data-link-variant": this.linkVariant }, index.h("slot", { key: '3dcc061adf7ad8fc7aed91bcecee48458a57c257', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", null, this.headline)) : null, index.h("p", { key: '76d017fda09e1cfb0feec4045c03e40c50f5c290' }, this.text ? this.text : index.h("slot", null)), index$1.stringPropVisible(this.timestamp, this.showTimestamp) ? (index.h("span", null, this.timestamp)) : null, index.h("slot", { key: '70f4c22660f7a9ae655002fc3947ad00d5b52f3f', 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) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)) : null));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBPage = class {
@@ -19,12 +19,16 @@ const DBPage = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -60,9 +64,9 @@ const DBPage = class {
         }
     }
     render() {
-        return (index.h("div", { key: '005b795411eb8ae8717d978eae32db515f7f6d87', class: index$1.cls("db-page", this.className), ref: (el) => {
+        return (index.h("div", { key: 'a3bc28485521260f3b6666160df090d1f6855642', class: index$1.cls("db-page", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.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: 'd9afe2076d0f115c2e7e8dc362ccd6e1dd3c4df7', name: "header" }), index.h("main", { key: '2002d9fbc8a71df9d042da0e77dbdce9d9bd9ab5', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '40fdc82ff79391f41ba9bd1886959e7f84ab7626' })), index.h("slot", { key: '0468545812365d7124bf4e3e9f9045aacce6786a', name: "footer" })));
+            }, id: this.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: '767ea462a8f8a08a84bf553f69304dab64d4cf41', name: "header" }), index.h("main", { key: '1d9e4af6efd26bb2d66ea7e1792e70c984e4ebee', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '370197e945c6582919418e80ad29e10d991b83d0' })), index.h("slot", { key: 'cdade48d4fbd8f4ef472679d8fc345413335cc93', name: "footer" })));
     }
 };
 

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
-var floatingComponents = require('./floating-components-ogUqz72V.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
 
 const DBPopover = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const DBPopover = class {
         const article = this._ref.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            index$1.delay(() => {
+            void index$1.delay(() => {
                 var _a;
                 floatingComponents.handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);
@@ -98,12 +98,16 @@ const DBPopover = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -166,9 +170,9 @@ const DBPopover = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '4d902919abc8bf5b55a617a31424f35582e029c1', class: index$1.cls("db-popover", this.className), ref: (el) => {
+        return (index.h("div", { key: '6b6c1e8a1b308dde8bae73df452abe94b0b4962d', class: index$1.cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("slot", { key: '166a0b766f6f0c003e6d7a250fd466267117f59a', name: "trigger" }), index.h("article", { key: '4fa535dc081c76eb21671e0abfb7d090b38e6e5c', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": index$1.getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: 'ef47687b496cfe4d6cce11ef5d282a2ec3a88004' }))));
+            }, id: this.id }, index.h("slot", { key: '8276f71a50b4a588dfe8a9b8007338c895433835', name: "trigger" }), index.h("article", { key: '2931d9365bf99c8c539dc45ec8450fbe54e47cf2', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": index$1.getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '49dbdd7f45e2ea48cc66b0463af29f0964ff7109' }))));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');
 
@@ -46,12 +46,16 @@ const DBRadio = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -110,7 +114,7 @@ const DBRadio = class {
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        return (index.h("label", { key: '2d573f1bd633fdedf2fde15c11d52cfa8a70b3ef', 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: 'dd0ae78f833d0cd170824fd38aef50797529557a', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("label", { key: '998fcc7e72f405047969e91d70e4093c4fb7a923', 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: 'fc200290758670942c7aa3b584c9cc49cc9faa37', 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 : index.h("slot", null)));
     }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBSection = class {
@@ -18,12 +18,16 @@ const DBSection = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -43,9 +47,9 @@ const DBSection = class {
         this.enableAttributePassing(this._ref, "db-section");
     }
     render() {
-        return (index.h("section", { key: '2d9f2702a0f18b257a3517ff002ff45984e07016', class: index$1.cls("db-section", this.className), ref: (el) => {
+        return (index.h("section", { key: 'be6ea106507603acde69e5020d97318002075614', class: index$1.cls("db-section", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: 'c432a712362af876cadc2c40946280272886e74c' })));
+            }, id: this.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, index.h("slot", { key: '339c00c1fca3117ad6e148474f8fefbecb6c28f6' })));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CEqZnn9s.js');
+var index = require('./index-Bh5ovRL2.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');
@@ -115,12 +115,16 @@ const DBSelect = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -221,14 +225,14 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("div", { key: '50e43dc0ffe52d1683df95a336201616975d7e22', 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: '5bbc909caa2c33aea4e4e2956d8bc133f939fd13', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'b6ef5a4f622219ee38433f643959c7db039a67db', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: 'fa85d886e937a4df9260c6c7afe3482054707a37', 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: '8641dd7e53e841c2b14c953e6f515bc019714a02', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '98086f761e1c7353e9c9be5a2b25ee6ad1539116', "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: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, 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": (_c = this.ariaDescribedBy) !== null && _c !== void 0 ? _c : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.getBooleanAsString(this.shouldShowEmptyOption()) })) : null, ((_d = this.options) === null || _d === void 0 ? void 0 : _d.length) ? ((_e = this.options) === null || _e === void 0 ? void 0 : _e.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: '79703f10ff7c61b481e34e98ef2ad45133a3e2a4', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'e4667735054c370c14a954219060cc27b0a9007f', "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: 'ef8708b7b5c72f4755b057387877a631eea7efe4', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '7ce062862b7f38d673833d45ab59539c71758dcc', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "_ref": [{