@db-ux/wc-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/dist/esm/{db-custom-select-dropdown_5.entry.js → db-custom-select-dropdown_6.entry.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, c as createEvent } from './index-9pYJFapZ.js';
-import { c as cls, e as getBoolean, u as uuid, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, k as getInputValue, f as getNumber, j as getStep, b as isIOSSafari, l as getHideProp } from './index-BwBkekqp.js';
-import { l as DEFAULT_INVALID_MESSAGE, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE } from './constants-BdL-nI5y.js';
-import { c as addValueResetEventListener } from './form-components-Cl_wgkeJ.js';
+import { r as registerInstance, h, c as createEvent } from './index-B6-lLNGQ.js';
+import { c as cls, e as getBoolean, u as uuid, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, k as getInputValue, f as getNumber, j as getStep, b as isIOSSafari, l as getHideProp } from './index-C4x0SOcx.js';
+import { l as DEFAULT_INVALID_MESSAGE, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, D as DEFAULT_ID } from './constants-BdL-nI5y.js';
+import { c as addValueResetEventListener } from './form-components-BLsiOrPI.js';
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {
@@ -461,10 +461,261 @@ const DBTag = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'db86fabfde3f9d1e41a863f58db34eb88d067440', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '6be4d8cc4b856ac198e4c207860e9529c436060f', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '1bef11e30ca670fa5bf1d438cd12c43e233cded4', name: "content" }), h("slot", { key: '3f94141f60688d0730478711748fa9dbb194f810' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '3ed9ce9b0eb66bb92a2c4a5303be1b0d16001841', name: "content" }), h("slot", { key: '9098de64b545b04f81f6a980700879610f9ec7bc' }), this.text ? this.text : null, this.behavior === "removable" ? (h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
 };
 
-export { DBCustomSelectDropdown as db_custom_select_dropdown, DBCustomSelectList as db_custom_select_list, DBCustomSelectListItem as db_custom_select_list_item, DBInput as db_input, DBTag as db_tag };
+const DBLoadingIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.timeout = createEvent(this, "timeout");
+        this.autoDisable = true;
+        this.indeterminate = true;
+        this.size = "medium";
+        this.variant = "inline";
+        this._id = DEFAULT_ID;
+        this._loadingState = "inactive";
+        this._previousLoadingState = undefined;
+        this._style = {};
+        this.initialized = false;
+    }
+    getPercentage() {
+        if (this.indeterminate || !this.value || !this.max) {
+            return;
+        }
+        return `${(Number(this.value) / Number(this.max)).toFixed(2)}`;
+    }
+    getRole() {
+        if (this.role) {
+            if (this.role === "none") {
+                return;
+            }
+            return this.role;
+        }
+        return "status";
+    }
+    handleParentDisabled() {
+        if (this._ref && this.autoDisable && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (parent && "disabled" in parent) {
+                parent.disabled = this._loadingState !== "inactive";
+            }
+        }
+    }
+    handleParentAria(remove) {
+        if (this._ref && this._id && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (!parent)
+                return;
+            const isButton = (parent === null || parent === void 0 ? void 0 : parent.localName) === "button";
+            if (!(isButton || this.overlay))
+                return;
+            const ariaAttribute = isButton ? "aria-labelledby" : "aria-describedby";
+            const ariaLabelledBy = parent.getAttribute(ariaAttribute);
+            let labelledByElements = ariaLabelledBy ? ariaLabelledBy.split(",") : [];
+            if (remove || this._loadingState === "inactive") {
+                if (labelledByElements.includes(this._id)) {
+                    labelledByElements = labelledByElements.filter((elementId) => elementId !== this._id);
+                    if (!isButton) {
+                        parent.ariaBusy = null;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                if (!labelledByElements.includes(this._id)) {
+                    labelledByElements.push(this._id);
+                }
+                if (!isButton) {
+                    parent.ariaBusy = this._loadingState === "active" ? "true" : null;
+                }
+            }
+            if (labelledByElements.length) {
+                parent.setAttribute(ariaAttribute, labelledByElements.join(","));
+            }
+            else {
+                parent.removeAttribute(ariaAttribute);
+            }
+        }
+    }
+    /**
+     * 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);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        this.handleParentDisabled();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        this.handleParentAria(false);
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.timeout) {
+            // Not merged if as workaround for angular
+            if (this._loadingState !== "inactive" &&
+                this._loadingState !== this._previousLoadingState) {
+                this._previousLoadingState = this._loadingState;
+                void delay(() => {
+                    if (this.timeout) {
+                        this.timeout.emit(this._loadingState);
+                    }
+                }, this._loadingState === "active" ? 5000 : 2000);
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
+        if (this._loadingState === this.state)
+            return;
+        if (this.state) {
+            this._loadingState = this.state;
+        }
+        else if (this.indeterminate === undefined || this.indeterminate) {
+            this._loadingState = "active";
+        }
+        else {
+            this._loadingState = "inactive";
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
+        if (this._ref) {
+            if (this.delay === "slow" || this.delay === "fast") {
+                void delay(() => {
+                    if (this._ref) {
+                        this._ref.dataset["delay"] = "";
+                    }
+                }, this.delay === "slow" ? 500 : 250);
+            }
+        }
+    }
+    watch4() {
+        this.watch4Fn();
+    }
+    watch5Fn() {
+        this._style = {
+            "--db-loading-indicator-percentage": this.getPercentage(),
+        };
+    }
+    watch5() {
+        this.watch5Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-loading-indicator");
+        this._id = this.id || "loading-indicator-" + uuid();
+        this.initialized = true;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
+        this.watch4Fn();
+        this.watch5Fn();
+    }
+    disconnectedCallback() {
+        this.handleParentAria(true);
+        this.handleParentDisabled();
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: '4467fd7c9ebec6fe699995183b870ea08fa60ba7', class: cls("db-loading-indicator", this.className), ref: (el) => {
+                this._ref = el;
+            }, style: this._style, "data-indeterminate": getBooleanAsString(this.indeterminate), "data-size": this.size, "data-variant": this.variant, "data-delay": this.delay, "data-state": this._loadingState, "data-overlay": getBooleanAsString(this.overlay) }, this.variant !== "progress-bar" ? (h("svg", { class: "db-loading-indicator-circle", "aria-hidden": "true", viewBox: this.variant === "inline" ? "10 10 20 20" : "32 32 64 64" }, h("circle", { class: "db-loading-indicator-circle-track" }), h("circle", { class: "db-loading-indicator-circle-segment" }))) : null, h("div", { key: '7ea9f9fd64f1b7d073ca7917a4e8eb905eb344f0', role: this.getRole() }, h("label", { key: 'de7fd82a1e14e459735cf596f18104722965e7f2', "data-show-label": getBooleanAsString(this.showLabel), id: this._id }, this.label ? this.label : h("slot", null), h("progress", { key: 'd2abf58f6595675e873056610e1bec18bf4dff85', value: this.indeterminate ? undefined : (_a = this.value) !== null && _a !== void 0 ? _a : 0, max: this.indeterminate ? undefined : (_b = this.max) !== null && _b !== void 0 ? _b : 100 }, this.indeterminate ? undefined : this.progressText)), !this.indeterminate ? (h("span", { "aria-hidden": "true", "data-show-progress-text": getBooleanAsString(this.showProgressText) }, this.progressText)) : null)));
+    }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }, {
+                "watch4": 0
+            }],
+        "initialized": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }],
+        "autoDisable": [{
+                "watch0": 0
+            }],
+        "_loadingState": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }, {
+                "watch2": 0
+            }],
+        "overlay": [{
+                "watch1": 0
+            }],
+        "_id": [{
+                "watch1": 0
+            }],
+        "timeout": [{
+                "watch2": 0
+            }],
+        "state": [{
+                "watch3": 0
+            }],
+        "delay": [{
+                "watch4": 0
+            }],
+        "indeterminate": [{
+                "watch5": 0
+            }],
+        "value": [{
+                "watch5": 0
+            }],
+        "max": [{
+                "watch5": 0
+            }]
+    }; }
+};
+
+export { DBCustomSelectDropdown as db_custom_select_dropdown, DBCustomSelectList as db_custom_select_list, DBCustomSelectListItem as db_custom_select_list_item, DBInput as db_input, DBLoadingIndicator as db_loading_indicator, DBTag as db_tag };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { c as cls } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { c as cls } from './index-C4x0SOcx.js';
 
 const DBCustomSelectFormField = class {
     constructor(hostRef) {
@@ -41,9 +41,9 @@ const DBCustomSelectFormField = class {
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
-        return (h("summary", { key: '22a05256e65e56208335b9a5c840e75988a57182', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: 'd99ab4a28f0604d5aa10d54e5da18ce976a93bf8', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '3c6c62df9bf0d2a73e37a9ad69d3a46daa672984' })));
+            }, id: this.id }, h("slot", { key: '40f581da69159f298d83a097e08c2f74e5dfcb23' })));
     }
 };
 

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-9pYJFapZ.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-B6-lLNGQ.js';
 import { l as DEFAULT_INVALID_MESSAGE, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, d as DEFAULT_LABEL_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, o as DEFAULT_SELECTED, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, c as DEFAULT_MESSAGE, s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { h as hasVoiceOver, d as delay, s as stringPropVisible, m as getSearchInput, u as uuid, g as getBooleanAsString, e as getBoolean, l as getHideProp, c as cls } from './index-BwBkekqp.js';
-import { D as DocumentClickListener } from './document-click-listener-B_LaIr0O.js';
-import { D as DocumentScrollListener } from './document-scroll-listener-dHAsT0Tb.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, m as getSearchInput, u as uuid, g as getBooleanAsString, e as getBoolean, l as getHideProp, c as cls } from './index-C4x0SOcx.js';
+import { D as DocumentClickListener } from './document-click-listener-CmYoXpGE.js';
+import { D as DocumentScrollListener } from './document-scroll-listener-65bHuFAN.js';
 import { a as handleFixedDropdown } from './floating-components-G-TursYV.js';
-import { b as addResetEventListener } from './form-components-Cl_wgkeJ.js';
+import { b as addResetEventListener } from './form-components-BLsiOrPI.js';
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -770,30 +770,28 @@ const DBCustomSelect = class {
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: '5ab3c80f3af53b7795e709feaea160e4aa26f281', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        return (h("div", { key: '633c651cd764cf5bb424955fa5e2bfd30e5e8e28', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '281d6b75a9ae62b6e2f59c04876603988366952d', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '26029a01c106666155c40cac98a7f67739145491', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'c6341945f060e403c8b0d5a3bb65c8055a07e3c4', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'f7f9c77a12b40942365717378617ea45d38d3c0d', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
-            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: '60f50d851ebf3b180094bdbd1c9acb3c6e1069af', ref: (el) => {
+            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value }, this.getOptionLabel(option))))
+            : null)), h("details", { key: '3fa0220b25ec6de48ccc29628418094022835df1', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '369ba87529acc1e3b2d12869174eff0a824c0176' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '7eb160f589f3dbb0e171ac49bb310272108511b8' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event) }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
-                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (h("db-infotext", { id: this._infoTextId, icon: this.showLoading ? "circular_arrows" : undefined, semantic: this.showLoading ? "informational" : "warning" }, (_h = (this.showLoading
-            ? this.loadingText
-            : this.noResultsText)) !== null && _h !== void 0 ? _h : DEFAULT_MESSAGE)) : (h(Fragment, null, this.selectAllEnabled ? (h("div", null, h("div", { class: "db-checkbox db-custom-select-list-item" }, h("label", null, h("input", { type: "checkbox", value: "select-all", ref: (el) => {
+                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (this.showLoading ? (h("db-loading-indicator", { id: this._infoTextId }, (_h = this.loadingText) !== null && _h !== void 0 ? _h : DEFAULT_MESSAGE)) : (h("db-infotext", { semantic: "warning", id: this._infoTextId }, (_j = this.noResultsText) !== null && _j !== void 0 ? _j : DEFAULT_MESSAGE))) : (h(Fragment, null, this.selectAllEnabled ? (h("div", null, h("div", { class: "db-checkbox db-custom-select-list-item" }, h("label", null, h("input", { type: "checkbox", value: "select-all", ref: (el) => {
                 this.selectAllRef = el;
-            }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
+            }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_l = (_k = this.listLabel) !== null && _k !== void 0 ? _k : this.label) !== null && _l !== void 0 ? _l : DEFAULT_LABEL }, (_m = this._options) === null || _m === void 0 ? void 0 : _m.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value) }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: 'b4a9cebfe1db06422f428bac4d04d581bcadbb95', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'a407a98afeecf7634770f34e2f427a09d657419a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '4465c3745c21e5333c8498927416fd0f244673dd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_o = this.mobileCloseButtonText) !== null && _o !== void 0 ? _o : DEFAULT_CLOSE_BUTTON))))) : null), ((_p = this.showClearSelection) !== null && _p !== void 0 ? _p : true) && ((_q = this._values) === null || _q === void 0 ? void 0 : _q.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: 'df9efbb6d3dbae644a5dbfc0fc92488f5b67da54', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_r = this.placeholder) !== null && _r !== void 0 ? _r : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '562bb4adda23878fe108eba0d2395124685cf24a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '93195757db11641ed911fd3684e91d6b76168cb1', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "detailsRef": [{

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { c as cls } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { c as cls } from './index-C4x0SOcx.js';
 
 const DBDivider = class {
     constructor(hostRef) {
@@ -41,7 +41,7 @@ const DBDivider = class {
         this.enableAttributePassing(this._ref, "db-divider");
     }
     render() {
-        return (h("div", { key: '0e9bf54bcd77ec1c324eb6300162bbf8c67b8c16', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: '46d2766f34dc660f82cda63261ea96da0a72115f', class: 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/esm/db-drawer.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-9pYJFapZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-B6-lLNGQ.js';
 import { s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { o as isKeyboardEvent, d as delay, g as getBooleanAsString, c as cls } from './index-BwBkekqp.js';
+import { o as isKeyboardEvent, d as delay, g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 
 const DBDrawer = class {
     constructor(hostRef) {
@@ -129,11 +129,11 @@ const DBDrawer = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
+        return (h("dialog", { key: 'cc48481a5694b3ed2a21accbbbf0a2d803cbae34', 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 }, h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: 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 }, h("article", { key: 'd50942300d0d842e3f6ad754920c8deddb3b4f3f', class: 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": getBooleanAsString(this.rounded) }, h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), 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 : DEFAULT_CLOSE_BUTTON)), h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: 'd1c47a728ce03f4415e455352efcee61b9373d61', class: "db-drawer-header" }, h("div", { key: 'f19808d4597fbda4d9e0ceb224f8de4d3407f98c', class: "db-drawer-header-text" }, h("slot", { key: 'cfab663cef760d9d78244eead6b92bbabd919b4a', name: "drawerHeader" })), h("db-button", { key: '5391285b886bfba3be830f49365fd7c3acd98bb6', 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 : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'b83ad6bdaa47d7881ce831c696f38df7b77b041d', class: "db-drawer-content" }, h("slot", { key: '9fc37bc76ce5a6fc2945eaa225919f9c8fac8629' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-9pYJFapZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-B6-lLNGQ.js';
 import { p as DEFAULT_BURGER_MENU } from './constants-BdL-nI5y.js';
-import { a as addAttributeToChildren, e as getBoolean, c as cls } from './index-BwBkekqp.js';
+import { a as addAttributeToChildren, e as getBoolean, c as cls } from './index-C4x0SOcx.js';
 import { i as isEventTargetNavigationItem } from './navigation--UdC9CzO.js';
 import './floating-components-G-TursYV.js';
 
@@ -78,9 +78,9 @@ const DBHeader = class {
     }
     render() {
         var _a;
-        return (h("header", { key: 'f9850f5a6f59bee2ed97db4baea343e07aaff91a', class: cls("db-header", this.className), ref: (el) => {
+        return (h("header", { key: 'f701b77c43467d06b10c109ff60694f70746eaf8', class: 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 }, h("db-drawer", { key: '32f62d8f0bf634e96cf7b0e96721fcd40aa3a3eb', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'a42c28439d07e97a3842efe4fa1c143c23691b5f', class: "db-header-drawer-navigation" }, h("div", { key: '141165e04574db312d51b0b4c376c53ddace243e', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '2208e0677b1f15da56fd6be230523559fcb5f1da' })), h("div", { key: 'fb980500cdb2f6f3ce2fce2489c48ac27ebd256a', class: "db-header-meta-navigation" }, h("slot", { key: '7eea7189a1e82821fc3f0bd600bda5a040382e88', name: "metaNavigation" }))), h("div", { key: 'a492419586593d43edbada69ad136ad832902e15', class: "db-header-secondary-action" }, h("slot", { key: '90ed75a19c230c3a2af94b8e0b397c8712f9a0df', name: "secondaryAction" }))), h("div", { key: '1d0451bd1f522f51cbd2bab3cd1b7c316fd644b4', class: "db-header-meta-navigation" }, h("slot", { key: 'd92c5a30a0131225f2b7b1428c5121fed241d8a7', name: "metaNavigation" })), h("div", { key: 'f65c8e6b2b997c281046f20e1ac7c89d8b5697f6', class: "db-header-navigation-bar" }, h("div", { key: 'be1e1017417595bbb4ff845b650f5edef1f4fd49', class: "db-header-brand-container" }, h("slot", { key: '5552b137967ae4659887ad67514fd0078ced1473', name: "brand" })), h("div", { key: '682e11b41f5131feb17cdf1e175b9bbcf8399740', class: "db-header-navigation-container" }, h("div", { key: '29f5a7afa6d8c014f6e574d72198289970e5324e', class: "db-header-navigation" }, h("slot", { key: 'f03956cf3368d3ec0dbaab3b3091c276eaf03a92' })), h("div", { key: '8a81b9ee537f84e14c9d41acf323552d6f239748', class: "db-header-primary-action" }, h("slot", { key: '78ae4dbdc9bcad5bd4bd951a0a334c47cb35bcf6', name: "primaryAction" }))), h("div", { key: 'e1e913c181df2f73cc9fe4cda17f505a26b1ad04', class: "db-header-action-container" }, h("div", { key: '92d7c9c0e50f9aa86e15c18a2ac7dddabc241358', class: "db-header-burger-menu-container" }, h("db-button", { key: '775ca507ba24b19e411e529e9ad67fcdfa6f3dea', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: '7cd5a16e27c72e3e0635056df8bcb7f45461c9fb', class: "db-header-secondary-action" }, h("slot", { key: '09669c165311f8dc95961c64900d5ab36281700a', name: "secondaryAction" }))))));
+            }, id: this.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("db-drawer", { key: '18c1b671c898c183bb352bb5f41978325cfa272e', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'dd79824d62aa735869d10c1d667a64de2ed61cd7', class: "db-header-drawer-navigation" }, h("div", { key: 'baab299c370aeb0133022ac8715a97af2d41e598', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '25fba42e53aedf89b9efcd6479df4a20c31b37a0' })), h("div", { key: 'ee9e0fab26a77cbc44edda5f200e6d52e24d4ae6', class: "db-header-meta-navigation" }, h("slot", { key: '6a94b711843f10518e84f335df875d6d454d28a0', name: "metaNavigation" }))), h("div", { key: '1a9f4e2ccb9ffaddbbf19ee640dc82d0db009ffa', class: "db-header-secondary-action" }, h("slot", { key: '23f705f72608e8b5fa08fabc0f97ce61449fa388', name: "secondaryAction" }))), h("div", { key: 'a033891b1a8260327c56591fb12516dbe159b5e1', class: "db-header-meta-navigation" }, h("slot", { key: 'cfa5ffd51164e184eb68e04e8d83f3fd7ba94927', name: "metaNavigation" })), h("div", { key: '04430a76404e9e282b7249beee655a8e86d78dd2', class: "db-header-navigation-bar" }, h("div", { key: '5461e8c087ae579079017b738fb4ac36ddd44624', class: "db-header-brand-container" }, h("slot", { key: 'eed71de59cfb3cc65dc24797830bb4b7243a09f6', name: "brand" })), h("div", { key: 'c83e6866e91abc17fbe6ef06f3e976c8237644e7', class: "db-header-navigation-container" }, h("div", { key: '7cd0f313b6d25b400e0f0324b6f9d7e0f4dab61e', class: "db-header-navigation" }, h("slot", { key: '850c0eb5d3f7979a311880e3cf7b4c6484668ac3' })), h("div", { key: '48c8d805965f4bf8d443fa66bf2d8f9b46e30377', class: "db-header-primary-action" }, h("slot", { key: '42b4b88ecb12aedd83aaf97411c746a222ef7e83', name: "primaryAction" }))), h("div", { key: '836ed1d499998a707bc302443ed4885ec3347a0b', class: "db-header-action-container" }, h("div", { key: '8a483f37b9de0e49a97c352690dcfc9b3e457aba', class: "db-header-burger-menu-container" }, h("db-button", { key: '32e96e0f6ae32b0c56d4540307a5cf5e92e35822', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)), h("div", { key: 'c0db759bb4ce588e6d2302e3284908501fa556cb', class: "db-header-secondary-action" }, h("slot", { key: 'c2b198053cb8c57eeeb18153691b926627787083', name: "secondaryAction" }))))));
     }
     static get watchers() { return {
         "initialized": [{

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { c as cls } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { c as cls } from './index-C4x0SOcx.js';
 
 const DBIcon = class {
     constructor(hostRef) {
@@ -41,7 +41,7 @@ const DBIcon = class {
         this.enableAttributePassing(this._ref, "db-icon");
     }
     render() {
-        return (h("span", { key: '3a67532009f85e493784e99774e230f52c588ccc', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (h("span", { key: 'f74b58da121bb69df759870f24684f15fc63cd3c', class: 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 : h("slot", null)));
     }

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { g as getBooleanAsString, c as cls } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 
 const DBInfotext = class {
     constructor(hostRef) {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { g as getBooleanAsString, c as cls } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 
 const DBLink = class {
     constructor(hostRef) {
@@ -42,7 +42,7 @@ const DBLink = class {
     }
     render() {
         var _a, _b;
-        return (h("a", { key: 'a43d8889621390017c07dda184c570e54d7f81e0', class: cls("db-link", this.className), ref: (el) => {
+        return (h("a", { key: '9eec6b26274544cc6325624ad4028039610c8b2a', class: 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": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_b = this.showIcon) !== null && _b !== void 0 ? _b : true), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap) }, this.text ? this.text : h("slot", null)));
     }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-9pYJFapZ.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-B6-lLNGQ.js';
 import { n as DEFAULT_BACK } from './constants-BdL-nI5y.js';
-import { u as uuid, d as delay, e as getBoolean, g as getBooleanAsString, c as cls } from './index-BwBkekqp.js';
+import { u as uuid, d as delay, e as getBoolean, g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 import { N as NavigationItemSafeTriangle } from './navigation--UdC9CzO.js';
 import './floating-components-G-TursYV.js';
 
@@ -106,7 +106,7 @@ const DBNavigationItem = class {
     }
     render() {
         var _a;
-        return (h("li", { key: 'd00b7b4852a729301d545abaf1a65cd3e0cdcee7', class: cls("db-navigation-item", this.className), ref: (el) => {
+        return (h("li", { key: '2c1d3b2db5597946df4ea8bab748be7a3f4fe46a', class: 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": getBooleanAsString(this.showIcon), "data-active": this.active, "data-wrap": getBooleanAsString(this.wrap), "aria-disabled": getBooleanAsString(this.disabled) }, !this.hasSubNavigation ? this.text ? this.text : h("slot", null) : null, this.hasSubNavigation ? (h(Fragment, null, h("button", { class: "db-navigation-item-expand-button", "aria-haspopup": this.hasAreaPopup, "aria-expanded": this.isSubNavigationExpanded, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : h("slot", null)), h("menu", { class: "db-sub-navigation", "data-force-close": this.autoClose, id: this.subNavigationId, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (h("div", { class: "db-mobile-navigation-back" }, h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_a = this.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null, h("slot", { name: "subNavigation" })))) : null));
     }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
 import { D as DEFAULT_ID } from './constants-BdL-nI5y.js';
-import { u as uuid, c as cls } from './index-BwBkekqp.js';
+import { u as uuid, c as cls } from './index-C4x0SOcx.js';
 
 const DBNavigation = class {
     constructor(hostRef) {
@@ -44,9 +44,9 @@ const DBNavigation = class {
         this._id = this.id || "navigation-" + uuid();
     }
     render() {
-        return (h("nav", { key: 'ed27159179b89985cbf0711be7dc494ca820cf75', class: cls("db-navigation", this.className), ref: (el) => {
+        return (h("nav", { key: '7ca06eb30c08a1b7a595a92d156cc35e1ed1fab0', class: cls("db-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id }, h("menu", { key: '6aa518535f6c802abec874a174d6e8d028572269' }, h("slot", { key: '2307ee2093cf4bcec3c8f4b8d5e8e88a8d78cf08' }))));
+            }, id: this._id }, h("menu", { key: '9fb0d02c73a39da0efa0e50f1b7836af84e729d7' }, h("slot", { key: '3f21156518d0bae763c8cd43a59b2d4bb579fa1e' }))));
     }
 };
 

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-9pYJFapZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-B6-lLNGQ.js';
 import { s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { e as getBoolean, s as stringPropVisible, g as getBooleanAsString, c as cls } from './index-BwBkekqp.js';
+import { e as getBoolean, s as stringPropVisible, g as getBooleanAsString, p as getNotificationRole, c as cls } from './index-C4x0SOcx.js';
 
 const DBNotification = class {
     constructor(hostRef) {
@@ -52,9 +52,13 @@ const DBNotification = class {
     }
     render() {
         var _a;
-        return (h("article", { key: '3c3f2ddd7dfcd2e1c0fee57f9c5e7da2715b14f9', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("div", { key: 'c02c5f52518a3ec9ef881a31c7fbfb82e6916ceb', class: 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": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: 'abf2bee58f568e7f8fd1b4bc3b4f5784075195c0', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: 'f845249859543bfdc2ac08dd06fea46d5c6fb33d' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: '097d69d4b69789d1bc2ff1c1eea143578cdd3f83', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
+            }, id: this.id, role: getNotificationRole({
+                semantic: this.semantic,
+                role: this.role,
+                ariaLive: this.ariaLive,
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon), "data-link-variant": this.linkVariant }, h("slot", { key: '6aa1d954e740bedd0fcd01698c2d96b6949f25a5', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", null, this.headline)) : null, h("p", { key: '8319a32b151cd2fdfe68cf60d87efb5a0e2363b6' }, this.text ? this.text : h("slot", null)), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("span", null, this.timestamp)) : null, h("slot", { key: 'a2d398e89f54e8c9207e2865ed238c0a8672bfd8', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
     }
 };
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-9pYJFapZ.js';
-import { c as cls, g as getBooleanAsString } from './index-BwBkekqp.js';
+import { r as registerInstance, h } from './index-B6-lLNGQ.js';
+import { c as cls, g as getBooleanAsString } from './index-C4x0SOcx.js';
 
 const DBPage = class {
     constructor(hostRef) {
@@ -58,9 +58,9 @@ const DBPage = class {
         }
     }
     render() {
-        return (h("div", { key: '005b795411eb8ae8717d978eae32db515f7f6d87', class: cls("db-page", this.className), ref: (el) => {
+        return (h("div", { key: '0596f3a43bd9fb3eb3a5bf9db63bdf8f899b14ec', class: cls("db-page", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-variant": this.variant, "data-fade-in": getBooleanAsString(this.fadeIn), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: 'd9afe2076d0f115c2e7e8dc362ccd6e1dd3c4df7', name: "header" }), h("main", { key: '2002d9fbc8a71df9d042da0e77dbdce9d9bd9ab5', class: cls("db-main", this.mainClass) }, h("slot", { key: '40fdc82ff79391f41ba9bd1886959e7f84ab7626' })), h("slot", { key: '0468545812365d7124bf4e3e9f9045aacce6786a', name: "footer" })));
+            }, id: this.id, "data-variant": this.variant, "data-fade-in": getBooleanAsString(this.fadeIn), "data-fonts-loaded": getBooleanAsString(this.fontsLoaded) }, h("slot", { key: '44cab7ad5f1bbb8a89cec4702923d4f9956f9bcf', name: "header" }), h("main", { key: '2906f8b81485a608181844f7c8214e1c85c1c8cb', class: cls("db-main", this.mainClass) }, h("slot", { key: '1382d4f336daeda7c72dd6e72307e4ee3033ccd9' })), h("slot", { key: '96a74899d394ce2b669a5fe67ff02d6788041732', name: "footer" })));
     }
 };