@db-ux/wc-core-components 4.3.2 → 4.4.1-footer-28739e3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/wc-core-components
 
+## 4.4.0
+
+### Minor Changes
+
+- feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
+
+- feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
+
 ## 4.3.2
 
 ### Patch Changes

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBAccordionItem = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBAccordion = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBBadge = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBBrand = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBButton = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBCard = class {
     constructor(hostRef) {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var index$1 = require('./index-CsHqnQII.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCheckbox = class {
     constructor(hostRef) {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 var constants = require('./constants-bMY2_d8A.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {

package/dist/cjs/db-custom-select-form-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBCustomSelectFormField = class {
     constructor(hostRef) {

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var documentClickListener = require('./document-click-listener-B2Xzqbvs.js');
-var documentScrollListener = require('./document-scroll-listener-C_v46oIg.js');
+var index$1 = require('./index-CsHqnQII.js');
+var documentClickListener = require('./document-click-listener-Bb3Tinb8.js');
+var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
 var floatingComponents = require('./floating-components-ogUqz72V.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCustomSelect = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBDivider = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBDrawer = class {
     constructor(hostRef) {

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
+
+const DBFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.showMain = true;
+        this.showMeta = true;
+        this.showCopyright = true;
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "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}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-footer");
+    }
+    render() {
+        return (index.h("footer", { key: '86c8a80e0e73411c4fc4df146e59fc8e13afb3f4', class: index$1.cls("db-footer", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-width": this.width }, index$1.getBoolean(this.showMain, "showMain") ? (index.h("section", { class: "db-footer-main" }, index.h("div", { class: "db-footer-content-container" }, index.h("div", { class: "db-footer-main-inner" }, index.h("slot", { name: "main" }))))) : null, index$1.getBoolean(this.showMeta, "showMeta") ? (index.h("section", { class: "db-footer-meta" }, index.h("div", { class: "db-footer-content-container" }, index.h("div", { class: "db-footer-meta-inner" }, index$1.getBoolean(this.showCopyright, "showCopyright") ? (index.h("p", { class: "db-footer-copyright" }, "\u00A9 Deutsche Bahn AG")) : null, index.h("slot", { name: "meta" }))))) : null));
+    }
+};
+
+exports.db_footer = DBFooter;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 var navigation = require('./navigation-DauGE-qj.js');
 require('./floating-components-ogUqz72V.js');
 
@@ -80,9 +80,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: '4bb25b1dcb1e4e1020b181a5c28ff080ab39efc2', 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: '5ce49d457c14f0f42271862e396311ad830d4a2f', 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: '5a2e205dbc80e23bb7ad4883cd9efc0e94b86550', class: "db-header-drawer-navigation" }, index.h("div", { key: '7993de28302b764a8776f387e817d3440ccfa61c', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '83a7b0629103b11c29a8aca782aa268cbe4ef7a9' })), index.h("div", { key: 'b7de89e4e162944af7ad263d6f938dbb3be034d1', class: "db-header-meta-navigation" }, index.h("slot", { key: '9519d2902a65851515738f84aed0761c12ddd4e5', name: "metaNavigation" }))), index.h("div", { key: '3364ec915c1faf982927696c92870de5222811aa', class: "db-header-secondary-action" }, index.h("slot", { key: '3d435d9ed293950c7d23f194bcddce144b04e512', name: "secondaryAction" }))), index.h("div", { key: 'ed21fe7675e276f706838006cebc0efe7573ecbf', class: "db-header-meta-navigation" }, index.h("slot", { key: '4368e9e4f8bb105e06d75648f5bbe557577ed226', name: "metaNavigation" })), index.h("div", { key: '155e7251c7ef313b15e5cb34e4b805eb4bc949c4', class: "db-header-navigation-bar" }, index.h("div", { key: 'a82430891c0f81fe10e0a34aa8f828e378715882', class: "db-header-brand-container" }, index.h("slot", { key: 'aad9e8b8697abdcd62f0def56acf672268dc18fa', name: "brand" })), index.h("div", { key: 'f17c6bd11c6861ae3547540bb2cae74f3d07f360', class: "db-header-navigation-container" }, index.h("div", { key: '0bed76f91c7b1937640ee6e669f88f0abb2c1db6', class: "db-header-navigation" }, index.h("slot", { key: '53bf9c93a252cf6d48cc1a96b5a875bba5daafd2' })), index.h("div", { key: '930f91cc903f068b8f0c4c84802481ec635ab6da', class: "db-header-primary-action" }, index.h("slot", { key: 'd7c19b44c6defa3edd2600d0577afbcf052ad358', name: "primaryAction" }))), index.h("div", { key: '2f26674e5af1b301df7577fbf2b8e84dc7411edf', class: "db-header-action-container" }, index.h("div", { key: 'e3446ea30d71e7cb83e783f210648cae7f10de4a', class: "db-header-burger-menu-container" }, index.h("db-button", { key: 'ccfaaf850a83f3e59dc260d7cdb96eb03ecf7de8', 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: '1a159322056762c5a3e86d0df91be12cc217976d', class: "db-header-secondary-action" }, index.h("slot", { key: '9d3b2a5062f03488c7851b2a6358c671cc5386cf', name: "secondaryAction" }))))));
     }
     static get watchers() { return {
         "initialized": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBIcon = class {
     constructor(hostRef) {
@@ -43,7 +43,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: '049e296ad3cefab59dc27689db4e372d14ba24d4', 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,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBInfotext = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBLink = class {
     constructor(hostRef) {
@@ -44,7 +44,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: '921c4bf6e0b7bd9e78e2ea193ba98324333fc4e8', 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,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 var navigation = require('./navigation-DauGE-qj.js');
 require('./floating-components-ogUqz72V.js');
 
@@ -108,7 +108,7 @@ const DBNavigationItem = class {
     }
     render() {
         var _a;
-        return (index.h("li", { key: 'd00b7b4852a729301d545abaf1a65cd3e0cdcee7', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
+        return (index.h("li", { key: 'fa3ba3f53062c5029acd52faaf676e3e5d24909d', 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, id: this.subNavigationId, 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,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBNavigation = class {
     constructor(hostRef) {
@@ -46,9 +46,9 @@ const DBNavigation = class {
         this._id = this.id || "navigation-" + index$1.uuid();
     }
     render() {
-        return (index.h("nav", { key: 'ed27159179b89985cbf0711be7dc494ca820cf75', class: index$1.cls("db-navigation", this.className), ref: (el) => {
+        return (index.h("nav", { key: 'af5814ea879238d2f2e4ce2bfbec3a2bc0ef2aa3', class: index$1.cls("db-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, index.h("menu", { key: '6aa518535f6c802abec874a174d6e8d028572269' }, index.h("slot", { key: '2307ee2093cf4bcec3c8f4b8d5e8e88a8d78cf08' }))));
+            }, id: this._id }, index.h("menu", { key: '2e442b4704586cad9fdb83312a96b01cda688487' }, index.h("slot", { key: '84f649fe8ef3acf9e10e54f6e34add46c29b2b4a' }))));
     }
 };
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBNotification = class {
     constructor(hostRef) {
@@ -54,9 +54,13 @@ const DBNotification = class {
     }
     render() {
         var _a;
-        return (index.h("article", { key: '3c3f2ddd7dfcd2e1c0fee57f9c5e7da2715b14f9', class: index$1.cls("db-notification", this.className), ref: (el) => {
+        return (index.h("div", { key: 'ff871bce2cd9d9c1d3156d3a655de47ee1663b81', class: index$1.cls("db-notification", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "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: 'abf2bee58f568e7f8fd1b4bc3b4f5784075195c0', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", null, this.headline)) : null, index.h("p", { key: 'f845249859543bfdc2ac08dd06fea46d5c6fb33d' }, 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: '097d69d4b69789d1bc2ff1c1eea143578cdd3f83', 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));
+            }, 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: '625c33c05e26fe1a04969f6dc45336bb2ba8d8e2', name: "image" }), index$1.stringPropVisible(this.headline, this.showHeadline) ? (index.h("header", null, this.headline)) : null, index.h("p", { key: 'd2e291b42fea8dff83a8ae1725123d87d7b70c6c' }, 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: '6df2509c744e804de858ba66ed8377f9170fd0d0', 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,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBPage = class {
     constructor(hostRef) {
@@ -60,9 +60,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: '522a465c247e83f3a685401f45002b6cf075228f', 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: '716b56d258ef0bc17de1f58d5c1358ea9107c3bc', name: "header" }), index.h("main", { key: '84b21b7f45825c19ddf67fc062fee4ea201cee15', class: index$1.cls("db-main", this.mainClass) }, index.h("slot", { key: '15bcec82d6bccbe63059f0bf219c0227f97ed14c' })), index.h("slot", { key: '5d01c4a43e7ec9fd8b9962e4cc5d3833630cb3cf', name: "footer" })));
     }
 };
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var documentScrollListener = require('./document-scroll-listener-C_v46oIg.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
+var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
 var floatingComponents = require('./floating-components-ogUqz72V.js');
 
 const DBPopover = class {
@@ -166,9 +166,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: '5b7b56b77aeda8fda6abe0457812d70093fbf52e', 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: 'a3f62de931e84bb3b38cdca699da469a5f266a85', name: "trigger" }), index.h("article", { key: 'd852b30c1e3dff03548213bdbdc6fcd5917ff76a', 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: 'ae9b440d2965649eb18d46f10d43397607ea7b65' }))));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBRadio = class {
     constructor(hostRef) {
@@ -110,7 +110,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: 'a9cc4e80d4f5f591b449acfd555df9fddc390d25', 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: 'b5107e7dbe8661e7e351370219a20dadd81a99a4', 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,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBSection = class {
     constructor(hostRef) {
@@ -43,9 +43,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: 'c1492f62e7db0e9e14bce8016e5370d4458e918a', 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: '63b937f085d2315e63843efff104df6dc6c19c3e' })));
     }
 };
 

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var index$1 = require('./index-CsHqnQII.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBSelect = class {
     constructor(hostRef) {
@@ -93,6 +93,17 @@ const DBSelect = class {
         var _a, _b;
         return (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString();
     }
+    shouldShowEmptyOption() {
+        const hasPlaceholderOrFloating = this.variant === "floating" || !!this.placeholder;
+        if (!hasPlaceholderOrFloating) {
+            return false;
+        }
+        if (this.showEmptyOption !== undefined) {
+            return this.showEmptyOption;
+        }
+        // Default: show empty option for non-required selects
+        return !this.required;
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -210,14 +221,14 @@ const DBSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("div", { key: '0139805ef7af1df0231794b1214fb861e6564247', 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: '32f2bbc5b919c3450c33f6e18a5da5826da7aa11', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'b5f973899ce6d4dd1d1de822a41dd4035cc08757', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '63b8dc081b29aad951a6f191b853c01a0b90aa4b', 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: '2f28080f30c74f473b731af823ba6ed29fb76c24', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '90c272f5695be0362015734f30a85fd9d419bf35', "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: "" })) : null, ((_d = this.options) === null || _d === void 0 ? void 0 : _d.length) ? ((_e = this.options) === null || _e === void 0 ? void 0 : _e.map((option) => {
+            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: '8b6c170210a55708f2539f46bd599a47a9e81781', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '17de2c472570dce406b18eeac924c0c88446ce6d', "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: '890bc27266e6ae8f0db8850d3025a2db33aab2b7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '322679e5aa59d74f006c7ba229c8c2225eaf1907', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
-var index$1 = require('./index-CW5aVEyQ.js');
+var index = require('./index-DjRSp6-m.js');
+var index$1 = require('./index-CsHqnQII.js');
 
 const DBStack = class {
     constructor(hostRef) {
@@ -43,9 +43,9 @@ const DBStack = class {
         this.enableAttributePassing(this._ref, "db-stack");
     }
     render() {
-        return (index.h("div", { key: '64a5a45be3cfecebbe4fff818f6cbfeee462513c', class: index$1.cls("db-stack", this.className), ref: (el) => {
+        return (index.h("div", { key: '5a0adfd26654611d4f878a6fcc639e7a1ef862d4', class: index$1.cls("db-stack", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: '69bd35bb73645e26b9819c7d9fc062cba032b4d7' })));
+            }, id: this.id, "data-gap": this.gap, "data-variant": this.variant, "data-direction": this.direction, "data-alignment": this.alignment, "data-justify-content": this.justifyContent, "data-wrap": index$1.getBooleanAsString(this.wrap) }, index.h("slot", { key: '83d11fed7d5788a48e2e3140f24ffe6c5d4641d5' })));
     }
 };
 

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Mi8dWSSD.js');
+var index = require('./index-DjRSp6-m.js');
 var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-CW5aVEyQ.js');
-var formComponents = require('./form-components-BrtqMwX0.js');
+var index$1 = require('./index-CsHqnQII.js');
+var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBSwitch = class {
     constructor(hostRef) {
@@ -158,9 +158,9 @@ const DBSwitch = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("div", { key: 'f2dab897c89fa8aadd97abe59e81b4d7ef4561c5', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: '8d7c3e44a9f7c565224124d499abe6c3b96582f6', htmlFor: this._id }, index.h("input", { key: '1cba4d3dbe46c97cd9039442e61eb0d9baab0587', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
+        return (index.h("div", { key: 'cbec5f1257a95efb04de663eed25043d39c78624', class: index$1.cls("db-switch", this.className), "data-visual-aid": index$1.getBooleanAsString(this.visualAid), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-custom-validity": this.validation }, index.h("label", { key: 'a6fcb4caea2dcd27348bb89855b5c92628b01eda', htmlFor: this._id }, index.h("input", { key: 'e1a046f4e05c8f7379aaabcbfd875b277dbf2a20', type: "checkbox", role: "switch", id: this._id, ref: (el) => {
                 this._ref = el;
-            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '9495dfc7fb2e3947f21b834792c4caeab411bbd0', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_INVALID_MESSAGE), index.h("span", { key: '6e6b325689130fc5cdeef86d3a4f59299b5f8450', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, checked: index$1.getBoolean(this.checked, "checked"), value: this.value, disabled: index$1.getBoolean(this.disabled, "disabled"), "aria-invalid": this.validation === "invalid" ? "true" : undefined, "aria-describedby": this._descByIds, name: this.name, required: index$1.getBoolean(this.required, "required"), "data-aid-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-aid-icon-trailing": this.iconTrailing, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => this.handleKeyDown(event) }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", semantic: "adaptive", id: this._messageId, icon: this.messageIcon }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, (_b = this.validMessage) !== null && _b !== void 0 ? _b : constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '6c076e41b7d7406c3c237fda73afdd2bfa3e3069', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_c = this._invalidMessage) !== null && _c !== void 0 ? _c : this.invalidMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_INVALID_MESSAGE), index.h("span", { key: '78d9c610bddae1485b2b86fd239276ad0985148f', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "validation": [{