@maggioli-design-system/magma 1.11.7 → 1.12.0

package/dist/hydrate/index.mjs

@@ -3163,7 +3163,7 @@ class MdsAccordion {
         this.changedChildrenHandler(event);
     }
     render() {
-        return (hAsync(Host, { key: 'afe5b07ff67cf2848028cf406bf0818b887b4842' }, hAsync("slot", { key: '7f39b4fdb7dbdc1ecff49cfb522ef09191a918a3' })));
+        return (hAsync(Host, { key: 'c408ce575006a26accb7f111ec4a27ce04fcb4ed' }, hAsync("slot", { key: 'b24a2d755fb82ee28d0226d01be146c49f6d0ffa' })));
     }
     get element() { return getElement(this); }
     static get style() { return MdsAccordionStyle0; }
@@ -3212,7 +3212,7 @@ class MdsAccordionItem {
         };
     }
     render() {
-        return (hAsync(Host, { key: '7ad938ebcbde447b4070224649eb995598093362' }, hAsync("button", { key: '9a61dca6dc983351407193a9a9687491b59eb575', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, hAsync("mds-text", { key: '3b0272888061382be5ba3f22b6cdf3ad4e674076', typography: this.typography, part: "label" }, this.label), hAsync("mds-text", { key: '1e97b83009f19713705ec8d38cd2b8da7caedea0', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, hAsync("i", { key: '8f9795421e23fcd349e3bce86044a169702037ce', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), hAsync("div", { key: 'a212a3e80a1aab97e1d15c62e70cd21f8ee8563d', class: "content", id: "content" }, hAsync("div", { key: '578696cea72457f0997ccfa22686165fe1fd95e9', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, hAsync("slot", { key: 'ddb9a8e1e209a2bcbb46f701352621eb28b965a1' })))));
+        return (hAsync(Host, { key: '9f1cc3117afc29a68c815ece34fbe0921fabae13' }, hAsync("button", { key: 'c25f41a95d7ac9d17d7ec1ad40bb675ad65118b9', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, hAsync("mds-text", { key: '9d2b4ecfd24756915f9ba6a90dee193c0a9a0f2e', typography: this.typography, part: "label" }, this.label), hAsync("mds-text", { key: '9182f95912f0b7730f5490ed004823b74cb86200', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, hAsync("i", { key: '7b3decf33b434cafb599cfb2b92f6499a6107f75', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), hAsync("div", { key: '25fe5e0645f12ec051d1ce9e9f21b51d820ef707', class: "content", id: "content" }, hAsync("div", { key: '478e6dc7a2b4dfaee5bb057ca51ff2328b85350c', "aria-labelledby": "action", class: "content-expander", part: "content", role: "region" }, hAsync("slot", { key: '9de5537e2024754883a842c5ac14431e82398f8f' })))));
     }
     get element() { return getElement(this); }
     static get style() { return MdsAccordionItemStyle0; }
@@ -3375,7 +3375,7 @@ class MdsAccordionTimer {
         this.playTimer();
     }
     render() {
-        return (hAsync(Host, { key: 'c6aa8a3f33c20001a9457d59ec5ac5de0a2026c1' }, hAsync("slot", { key: '4731ef1339b4fec10d741fbcb7d48d323f0db5a5' })));
+        return (hAsync(Host, { key: '18d9351e729eed662ef37aca4db1b1da573e7973' }, hAsync("slot", { key: 'd766385ca2efd9650ec3572a8416d89a7ceabf21' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3459,7 +3459,7 @@ class MdsAccordionTimerItem {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'bc5ef8f8b22da3dcdf9bc860b6b79af869277ddf', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, hAsync("div", { key: 'bbe8dbbce388ba0487aa84d920be97bea09dc186', class: "row" }, hAsync("mds-progress", { key: '455f4bf36b284c8e9a1d8dac74dd59ebeb7f6a42', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), hAsync("div", { key: '65c0748ef3ef0bca8936831a24a41fbfa3746b31', class: "accordion" }, hAsync("button", { key: '73766ed2d4c1ab0ebd289378075284f3f2516fa8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, hAsync("mds-text", { key: 'a6b3be3cd593cef1aa4ce0c68f262c08e9c9cf8d', typography: this.typography, part: "label" }, this.description), hAsync("mds-text", { key: 'b7d3d02998d9d736c72ac17798d374f581e554e4', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, hAsync("i", { key: '268d2920014019914b8681c8e5659d9f5d39916f', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), hAsync("div", { key: 'a4a7ab12e4aaf2554c21ba57c611a703d82f2528', class: "content", id: "content" }, hAsync("div", { key: 'eb37abce0080625cad81ee42e66156c6d03d5d55', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, hAsync("slot", { key: '9cdd701825c99af45db525609f4360dd906f3268' })))))));
+        return (hAsync(Host, { key: 'e9ac7110c69c963436e949ca1fd5808b8f136fa1', onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, hAsync("div", { key: '5491150224ae59baabc2cbd43b6de279c20d1509', class: "row" }, hAsync("mds-progress", { key: '006bd6f0750f14a867ea793fdda10dc3dfed16db', "aria-hidden": "true", class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical", part: "progress" }), hAsync("div", { key: '3ce632fb1937949599a5bbadc555a69c58bd088f', class: "accordion" }, hAsync("button", { key: '812c73ecf6ed995caee81217ed151f22d8e138c8', "aria-controls": "content", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, hAsync("mds-text", { key: '95868c912027d2ea3c182307df9720aed8f05956', typography: this.typography, part: "label" }, this.description), hAsync("mds-text", { key: '6d82c4a96302e7c48f131431f8ed4083fd2e5ddd', "aria-hidden": "true", class: "icon-button", typography: this.typography, part: "icon" }, hAsync("i", { key: 'a0414f53ea6652b3ee68ed3dabef5df41d0798ae', class: "icon", innerHTML: miBaselineKeyboardArrowDown }))), hAsync("div", { key: '76c27f6162e611edf832434ac247dcd5ca58d6cc', class: "content", id: "content" }, hAsync("div", { key: '05a2c529875c430ab5303fbae07e96aeb3d38449', "aria-label": this.description, class: "content-expander", part: "content", role: "region" }, hAsync("slot", { key: '0ea0b8b04f1ea0211a11cf3c68e762e5104ee30a' })))))));
     }
     static get watchers() { return {
         "selected": ["handleSelected"]
@@ -3497,8 +3497,8 @@ class MdsAuthor {
         this.hasAvatar = this.hostElement.querySelector(':scope > [slot="avatar"]') !== null;
     }
     render() {
-        return (hAsync(Host, { key: '4c7a9747973a4caddf1c8336a242ffa9b242d3c3' }, this.hasAvatar &&
-            hAsync("div", { key: 'b03113e40e86ebf13af6b92bc6bfa5d3475a88e5', class: "avatar" }, hAsync("slot", { key: 'b199f8de0da9156d88242c300ebf326e12d3e0c6', name: "avatar" })), hAsync("div", { key: 'ca65258f5e6c1fd6bc017d28e6aeede5372f5c79', class: "info" }, hAsync("slot", { key: '589b5d416de22656c0b84f4699055f174c95fc47' }))));
+        return (hAsync(Host, { key: '6e11c7c0c249596f71a1c8366260de4860d10c81' }, this.hasAvatar &&
+            hAsync("div", { key: 'b41bd067d754ea6608621fccc51dd6029fd5f878', class: "avatar" }, hAsync("slot", { key: '8f081d0069fabf7a36214873873a214b52289336', name: "avatar" })), hAsync("div", { key: '025a5d5749ef5e2a3edd4d202769d525a7572337', class: "info" }, hAsync("slot", { key: '9bfc69fc97d959e6d43a768c00b9874951362685' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return MdsAuthorStyle0; }
@@ -3655,7 +3655,7 @@ class MdsAvatar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '64433ea949012f5ceec45ad29de751e7ba87f97e' }, hAsync("div", { key: '3664c4b74a7e940223ee3481c94207b4d24838d6', class: clsx('avatar', this.initials && !this.fallback && !this.src && 'avatar--initials', (this.fallback || (!this.icon && !this.initials && !this.src)) && 'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials && !this.count && !this.fallback && !this.src && hAsync("div", { key: '0940bf43411a2be1bfa6d5db6d17c1c2a5f8d18e', class: "initials-text" }, hAsync("span", { key: '9de6cb115b495ede6cce4a92a5dcad2154de7088', class: "fit" }, this.initials.substring(0, 2))), this.count && !this.fallback && !this.src && hAsync("div", { key: '1b5acfeccfaf10fcbbf762f45dc356b608bef5f8', class: "initials-text" }, hAsync("span", { key: '229767c65da4241dfaf79f376c48c00cd20eb599', class: "fit" }, "+", this.count)), this.src && !this.count && !this.fallback && !this.icon && hAsync("mds-img", { key: '108e496baf71405e7d05d81300100e9edf8dcf5a', class: "image", loading: "lazy", onMdsImgLoadError: () => { this.loaded = true; this.fallback = true; }, onMdsImgLoadSuccess: () => { this.loaded = true; }, src: this.src }), this.icon && !this.initials && !this.count && hAsync("mds-icon", { key: '92641655a651f02379203b688a98600b47e00075', class: "icon", part: "icon", name: this.icon }), (this.fallback || (!this.icon && !this.initials && !this.count && !this.src)) && hAsync("i", { key: 'aa63181c39b84bda3dfac8718dbe5aa361f2341c', class: "fallback-icon", innerHTML: miBaselinePerson }))));
+        return (hAsync(Host, { key: 'c3306ee1be95f9d93dcb0a102cb837f7a8d6dd18' }, hAsync("div", { key: '43368870688c2972acf1b2e2e64a986b78643f43', class: clsx('avatar', this.initials && !this.fallback && !this.src && 'avatar--initials', (this.fallback || (!this.icon && !this.initials && !this.src)) && 'avatar--fallback', this.icon && 'avatar--icon', this.loaded ? 'avatar--loaded' : 'avatar--pending'), part: "wrapper" }, this.initials && !this.count && !this.fallback && !this.src && hAsync("div", { key: '05d3820664d87acd0ae30f7526c457fef57d4ffd', class: "initials-text" }, hAsync("span", { key: 'b24f8030d87f012fb00f532db07f7862c2f7dc10', class: "fit" }, this.initials.substring(0, 2))), this.count && !this.fallback && !this.src && hAsync("div", { key: '6412b1d878bf29eeac7e7876cfdd443130a0c50b', class: "initials-text" }, hAsync("span", { key: '2f92908d5d316b1fd4135b2d1861efd449a524d5', class: "fit" }, "+", this.count)), this.src && !this.count && !this.fallback && !this.icon && hAsync("mds-img", { key: '116955f0a699604d2f40796298fbd3a3803cd9e5', class: "image", loading: "lazy", onMdsImgLoadError: () => { this.loaded = true; this.fallback = true; }, onMdsImgLoadSuccess: () => { this.loaded = true; }, src: this.src }), this.icon && !this.initials && !this.count && hAsync("mds-icon", { key: '403e8c8ff2e3232101779ba5789f52dbd0b5b028', class: "icon", part: "icon", name: this.icon }), (this.fallback || (!this.icon && !this.initials && !this.count && !this.src)) && hAsync("i", { key: '3899d50da7833d44c2c51aeac5224f46e5b65428', class: "fallback-icon", innerHTML: miBaselinePerson }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3695,7 +3695,7 @@ class MdsAvatarStack {
         this.items = this.host.querySelectorAll(':scope > mds-avatar-stack-item');
     }
     render() {
-        return (hAsync(Host, { key: '78b181f364fbe7f2e34fb08d8b3867539adf5459' }, hAsync("slot", { key: 'ef96805b4ccccf1ce1af8bfcc445dceadfb0501a' }), this.total !== undefined && this.total - this.items.length > 0 && hAsync("mds-avatar-stack-item", { key: '62c1e61f5f0ef9602ba9c11b068bd6230ec3d5b0', count: this.total - this.items.length })));
+        return (hAsync(Host, { key: '67b032fe88171cab309b73832dea41d4e5b5d279' }, hAsync("slot", { key: '2aff2dfc024c39b1cd31ea5626972f50ce06254a' }), this.total !== undefined && this.total - this.items.length > 0 && hAsync("mds-avatar-stack-item", { key: 'bfc70722395cbc1997a0b22888e249769344a1a4', count: this.total - this.items.length })));
     }
     get host() { return getElement(this); }
     static get style() { return MdsAvatarStackStyle0; }
@@ -3724,7 +3724,7 @@ class MdsAvatarStackItem {
         this.tone = 'weak';
     }
     render() {
-        return (hAsync(Host, { key: 'bef80f049650922b8b2d3ce5683d14a3a7e94545' }, hAsync("mds-avatar", { key: 'ae7f73781540f2e63351acf8a64b18a0f836d7cc', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
+        return (hAsync(Host, { key: '5e81510d889eb20e72a5c8534f0bd415047023be' }, hAsync("mds-avatar", { key: '7dd1b1a0eb453faee2948dfabf62d8f39ccec5aa', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
     }
     static get style() { return MdsAvatarStackItemStyle0; }
     static get cmpMeta() { return {
@@ -3766,7 +3766,7 @@ class MdsBadge {
         this.typography = 'option';
     }
     render() {
-        return (hAsync(Host, { key: '24f9910c73965f56d99f09f189e31444b6131fc6' }, hAsync("mds-text", { key: 'aff98bdaf4742a80a1b34423597f086d3f704206', tag: "span", typography: this.typography, variant: this.typographyVariant }, hAsync("slot", { key: '8c9fa6833b70cb4bf57f5fdff37c34fba427efaf' }))));
+        return (hAsync(Host, { key: 'aa594b056692eb558a04e7adbfa9c677c1c7f1fb' }, hAsync("mds-text", { key: 'de789dae87de907f8424aff3706361516a4306f4', tag: "span", typography: this.typography, variant: this.typographyVariant }, hAsync("slot", { key: '905909c0a22767fc1de32037f0b18af0d322f7c4' }))));
     }
     static get style() { return MdsBadgeStyle0; }
     static get cmpMeta() { return {
@@ -4763,9 +4763,9 @@ class MdsBanner {
         this.km.detachClickBehavior();
     }
     render() {
-        return (hAsync(Host, { key: '610f19a36fc04082371be0b3e917f8747795a23b', "aria-label": this.headline }, hAsync("div", { key: '0f26d82ac44a38cd7af15b55dd17509a27be4f56', class: "body" }, this.icon && hAsync("mds-icon", { key: 'e29afe75686a2ba965ff24f4893a35efd2717ad7', "aria-hidden": "true", class: "icon", name: this.icon }), hAsync("div", { key: '789780fbadceacf87bcb74e7bec7480bfc991021', class: "content" }, this.headline && hAsync("mds-text", { key: 'f9701f993966bbcf89f2005de2acc6cea4cf15bf', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline), hAsync("div", { key: 'cbc6bc48a95d9f4f101eb0533d13f35a37ebb25a', class: "text" }, hAsync("slot", { key: '5acffbefdff73a9fbb6b8dc2a4a9987b769ebd66' }))), this.deletable && hAsync("mds-button", { key: 'ef4d897c1c9170d39406f3760e0cf317caccdacd', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
+        return (hAsync(Host, { key: '887b88791934b25523bcb5236a539da2e9087f30', "aria-label": this.headline }, hAsync("div", { key: 'f3b61bb544a3095ccf06470c8c493bdaa2b8c8b0', class: "body" }, this.icon && hAsync("mds-icon", { key: 'fd9149319c9c49d2a9976a9f0ae6e7ffa8fc1fd0', "aria-hidden": "true", class: "icon", name: this.icon }), hAsync("div", { key: '3891eb5646291187cefd68e0875a35dd67852248', class: "content" }, this.headline && hAsync("mds-text", { key: '9b85e11b0b71fefbdc9164be7f224e77f679eb34', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline), hAsync("div", { key: '714fe7d8063fdca951d0d94845789dd39eaf1e6d', class: "text" }, hAsync("slot", { key: '72d818fd156c6d69b82e5584ecc641eba215823a' }))), this.deletable && hAsync("mds-button", { key: 'feb587470ccb3799609333d5c080e2d2c8b7005a', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel') })), this.actions
             &&
-                hAsync("div", { key: 'd33668ef233dfb77176d151f4541538b90e6095b', class: "actions" }, hAsync("slot", { key: '3e146f874402d8e5e3368192ceda4a8526d4e6f8', name: "action" }))));
+                hAsync("div", { key: 'aec5c935e8e2f934bfe6fab2291704c8d89cea0a', class: "actions" }, hAsync("slot", { key: '9d1765d04dda9a276bb90a4d9c250bc0d403fedc', name: "action" }))));
     }
     get host() { return getElement(this); }
     static get style() { return MdsBannerStyle0; }
@@ -4813,7 +4813,7 @@ class MdsBenchmarkBar {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '3d611d46dddb03f3232be40bb6affd60011ca8a4' }, hAsync("div", { key: '5e1e2419507550b7b5423ac954d2a32e5290029e', class: "infos" }, hAsync("mds-text", { key: '0c71ac2380981fb0d964ac35ce45221959b469c5', typography: this.typography, class: "label", id: "label" }, hAsync("slot", { key: '124425ab67b6dda25de9edb78ac7911aab11215c' })), hAsync("mds-text", { key: '4af8b45b109fb21cce5ebdf5a554432e79c938a4', typography: this.typography, class: "value" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), hAsync("mds-progress", { key: 'c1ae3c981e77fabb9f85e2e98a203b0e6b40a7dd', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, part: "bar" })));
+        return (hAsync(Host, { key: '474d8e0d71b7602003560184e41fa0f8e8f83443' }, hAsync("div", { key: '70fb1afe85855dec88fb88441c56a1f9a4579b5a', class: "infos" }, hAsync("mds-text", { key: 'ad956372b7529a3fc795330dd72446f1cfd2e3cb', typography: this.typography, class: "label", id: "label" }, hAsync("slot", { key: 'f127170421f1e85d29d3e0d459e8c06318e7e053' })), hAsync("mds-text", { key: '5c329fd79b7585b9e6108c3e8404577dd487dc5d', typography: this.typography, class: "value" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), hAsync("mds-progress", { key: 'fa39a1348ca1fafb356f8faf7bff06d36424b1c0', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, part: "bar" })));
     }
     static get style() { return MdsBenchmarkBarStyle0; }
     static get cmpMeta() { return {
@@ -4961,19 +4961,19 @@ class MdsBibliography {
         };
     }
     render() {
-        return (hAsync(Host, { key: '13134c79103106f59f1b5f31bb1b79025056b560' }, hAsync("mds-text", { key: 'a8f6e5b63f536ce6984d76281e4553e888962f62', typography: this.typography, variant: this.variant }, this.author && hAsync("span", { key: '45342a411a9a478fe94a41c2a387ad03a109e57d' }, this.showAuthors(this.normalizeAuthors(this.author))), this.format === 'mla' &&
-            hAsync("span", { key: 'c554797f2733e6df851e20810663bc69057754f6' }, this.name && ' ', this.name &&
+        return (hAsync(Host, { key: 'f8621a23d6c09e7427e543290f10bc9335c06c0d' }, hAsync("mds-text", { key: 'fcd23a0f76b12799f622ec8ed5cfd3cb985868fc', typography: this.typography, variant: this.variant }, this.author && hAsync("span", { key: '510deb24ecb214edf294cb9ef8a5e4a28f3d8a4d' }, this.showAuthors(this.normalizeAuthors(this.author))), this.format === 'mla' &&
+            hAsync("span", { key: '4cd0d50a2dd539133fd044810e2984e660a8b32e' }, this.name && ' ', this.name &&
                 this.url !== null
                 ? hAsync("a", { class: "link focus-bounce", href: this.url, target: "_blank", rel: this.rel }, hAsync("b", null, hAsync("i", null, this.name, ".")))
-                : hAsync("b", null, hAsync("i", null, this.name, ".")), this.location && hAsync("span", { key: 'f5639f333d5b07e85603b3eb975754a19c36cbfc' }, " ", this.location, this.publisher !== undefined ? ':' : '.'), this.publisher && hAsync("span", { key: '7c715687e05f82b7ee4772656673ba1a0f40d7e0' }, " ", this.publisher, this.date !== undefined ? ',' : '.'), this.date && hAsync("time", { key: 'fb74b44f20a1193a966d881446ada6f6c30496e4', dateTime: this.date }, " ", this.dateFormatMLA(this.date), ".")), this.format === 'apa' &&
-            hAsync("span", { key: 'dff3f7fc5801159c3fa659a03916614fdd1ad2c8' }, this.date && hAsync("time", { key: 'b7a628891f21a15a10b582878563368ffb6c00d5', dateTime: this.date }, " (", this.dateFormatAPA(this.date), ")."), this.name && ' ', this.name &&
+                : hAsync("b", null, hAsync("i", null, this.name, ".")), this.location && hAsync("span", { key: 'ffee779728bac22838c9e7e2a75ef226475c6d49' }, " ", this.location, this.publisher !== undefined ? ':' : '.'), this.publisher && hAsync("span", { key: '94fee065e91a85f85e0774b7dfd5f9d852780c75' }, " ", this.publisher, this.date !== undefined ? ',' : '.'), this.date && hAsync("time", { key: '1b200be83f0382d57bbb578598c8e58767716f4b', dateTime: this.date }, " ", this.dateFormatMLA(this.date), ".")), this.format === 'apa' &&
+            hAsync("span", { key: 'be83f8f9f3a7f68e756e52e1e11d5d2f16688599' }, this.date && hAsync("time", { key: '052a49a6460059becd37ba67103af8b410ce1419', dateTime: this.date }, " (", this.dateFormatAPA(this.date), ")."), this.name && ' ', this.name &&
                 this.url !== null
                 ? hAsync("a", { class: "link focus-bounce", href: this.url, target: "_blank", rel: this.rel }, hAsync("b", null, hAsync("i", null, " ", this.name, ".")))
-                : hAsync("b", null, hAsync("i", null, " ", this.name, ".")), this.location && hAsync("span", { key: '62519a85f850170be137914c33e8cf931788d82a' }, " ", this.location, this.publisher !== undefined ? ':' : '.'), this.publisher && hAsync("span", { key: 'af0386d87ac4ad7f1105c31862f0d11f480f883e' }, " ", this.publisher, ".")), this.format === 'turabian' &&
-            hAsync("span", { key: '27555c8e513e5b44c0dc51b667729c885818afb9' }, this.name && ' ', this.name &&
+                : hAsync("b", null, hAsync("i", null, " ", this.name, ".")), this.location && hAsync("span", { key: '515be6aef1cda23eea1c3b4c8196553f5c8acf24' }, " ", this.location, this.publisher !== undefined ? ':' : '.'), this.publisher && hAsync("span", { key: '0616a728b447922e77e72e821e8afb3921956702' }, " ", this.publisher, ".")), this.format === 'turabian' &&
+            hAsync("span", { key: '0ad594044b55f0b8514e70eb293006cdb4868cca' }, this.name && ' ', this.name &&
                 this.url !== null
                 ? hAsync("a", { class: "link focus-bounce", href: this.url, target: "_blank", rel: this.rel }, hAsync("b", null, hAsync("i", null, " ", this.name, ".")))
-                : hAsync("b", null, hAsync("i", null, " ", this.name, ".")), this.location && hAsync("span", { key: '85a9fe3d6d52a6a9b3dd8409c709aa673219cebb' }, " ", this.location, this.publisher !== undefined ? ':' : ','), this.publisher && hAsync("span", { key: 'fccb8c51b224aa91c6d95d493c24b5ffb73b107c' }, " ", this.publisher, this.date !== undefined ? ',' : '.'), this.date && hAsync("time", { key: '9ebd1d43e595c04eb7f7807ba365664dfaecfcfb', dateTime: this.date }, " ", this.dateFormatMLA(this.date), ".")))));
+                : hAsync("b", null, hAsync("i", null, " ", this.name, ".")), this.location && hAsync("span", { key: '707d2fcfb6650d43c8fe6a4409cb32225483772c' }, " ", this.location, this.publisher !== undefined ? ':' : ','), this.publisher && hAsync("span", { key: 'ab05a22a7c9d7179f7739f6e7abc9ec6bf64b4be' }, " ", this.publisher, this.date !== undefined ? ',' : '.'), this.date && hAsync("time", { key: '1922d53e3453c4e08164d213917d1ee6a21af396', dateTime: this.date }, " ", this.dateFormatMLA(this.date), ".")))));
     }
     static get style() { return MdsBibliographyStyle0; }
     static get cmpMeta() { return {
@@ -5120,8 +5120,8 @@ class MdsBreadcrumb {
         this.onChanged(selectedId, event.target);
     }
     render() {
-        return (hAsync(Host, { key: 'd172dbd7f751065a8d82f1e49f6f65a28dc84de7' }, this.back &&
-            hAsync("mds-button", { key: '74549350b444221097df700f065ff7f5617ccc7c', title: this.t.get('back'), class: "back", icon: miBaselineArrowBack, onClick: this.togglePrevious }), hAsync("slot", { key: 'a643581023d156ddca207776b3fb42bf88428caf' })));
+        return (hAsync(Host, { key: '2539b695e261bf9f9a078fd8d58190b0e8c2707d' }, this.back &&
+            hAsync("mds-button", { key: 'b740f6a00487c5a58b201c8eccb8f2070c0db8b0', title: this.t.get('back'), class: "back", icon: miBaselineArrowBack, onClick: this.togglePrevious }), hAsync("slot", { key: '9c06a1e596bc63708725e9c90c1233529886cab4' })));
     }
     get element() { return getElement(this); }
     static get style() { return MdsBreadcrumbStyle0; }
@@ -5174,7 +5174,7 @@ class MdsBreadcrumbItem {
         this.km.detachClickBehavior();
     }
     render() {
-        return (hAsync(Host, { key: '5eb367049fe7a9b6653c9adf402d4c3214805833' }, hAsync("mds-text", { key: 'b02ca23c5349b61e39f87a0552a501eba8ab8712', tabindex: "0", onClick: this.toggle, class: "text", typography: "detail" }, hAsync("slot", { key: '72f9b67eefbb3055ef69c8626e6a2609715102f9' })), hAsync("i", { key: 'd7c9f3b65c8a125f3ae5e0ea9cd8d83c2b2a49bd', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
+        return (hAsync(Host, { key: 'd7dc55ec9667648849ace504c3ab33479b04f4aa' }, hAsync("mds-text", { key: '34aa1255db85d58cf1548dd2e14f3beaa6f50bcf', tabindex: "0", onClick: this.toggle, class: "text", typography: "detail" }, hAsync("slot", { key: 'a0a9055b7ad2b092ef71beb7d73585b378f6fec4' })), hAsync("i", { key: 'c4e4cd1a34140c7b42f82a412b8245e555076745', "aria-hidden": "true", class: "icon", innerHTML: miBaselineNavigateNext })));
     }
     get element() { return getElement(this); }
     static get style() { return MdsBreadcrumbItemStyle0; }
@@ -5452,7 +5452,7 @@ class MdsButton {
     }
     render() {
         this.typography = buttonSizeTypographyVariant[this.size];
-        return (hAsync(Host, { key: '3c54ecab2250be89d7f925cd4fea6eaeea05fa1f', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, hAsync("div", { key: '41edeab2fca583980ac046866f9b0b4c14268f60', class: "await" }, hAsync("mds-spinner", { key: '9b7d06b88d13aa5f343f476fc7aec4aef824670b', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && hAsync("mds-icon", { key: '46f069315b6006c19183b10fc5e3fdc73d2b7e09', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), hAsync("mds-text", { key: '6f15cf82126c3c1e04e00eae75fc43ea657782ea', class: "text", part: "label", typography: this.typography, truncate: this.truncate }, hAsync("slot", { key: '3e068fcac844e33b49afdc5dbff20bd65238136d', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && hAsync("slot", { key: '0482835f6c3160521b9fe2e04ef6721d28815167', name: "notification" }), this.icon && this.iconPosition === 'right' && hAsync("mds-icon", { key: '8d11f6f28287b34517b276431f7cb1d31fad9617', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
+        return (hAsync(Host, { key: '4686bd8d7cb9225f100a4127b6a126377b518d19', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, hAsync("div", { key: 'df39bb0ebb2a804af20924648169709397af2c7e', class: "await" }, hAsync("mds-spinner", { key: '2815525a17ea474db3f4064a3bbdf6e953211b13', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && hAsync("mds-icon", { key: 'f464e79898cfa4f68d05fefcb454c26e6088cfaf', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), hAsync("mds-text", { key: '0f30b6ca2508f8928f4fc28c6deb28e93e963db5', class: "text", part: "label", typography: this.typography, truncate: this.truncate }, hAsync("slot", { key: '1d5d0ae7bcdf9abbc87ddbb4bea702971b618e9d', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && hAsync("slot", { key: '0d9dca292a5cb40f51e4c517a399e85286047fc4', name: "notification" }), this.icon && this.iconPosition === 'right' && hAsync("mds-icon", { key: 'f97aff53f85a69e3bd51517fb66f781123c37373', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -5520,7 +5520,7 @@ class MdsButtonDropdown {
         this.truncate = 'word';
     }
     render() {
-        return (hAsync(Host, { key: '05beeb73f53a32dc21b535b55ee65e60448d6f3e' }, hAsync("mds-button", { key: '3cb4f0863b8c8c80cbb6eb37e673f266f1505bf2', active: this.active, autoFocus: this.autoFocus, await: this.await, disabled: this.disabled, href: this.href, icon: this.icon, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }, this.label), hAsync("mds-button", { key: '774a712ab4125f929af6a11e15c1ebdd8228d6ed', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), hAsync("mds-dropdown", { key: '12afae125c98f4e70f697f7c88aec18ced59736f', target: '.dropdown-action', part: "dropdown" }, hAsync("slot", { key: '512c0b9009c4652267f1fcaf12782b3cbcac5927' }))));
+        return (hAsync(Host, { key: '0bb4a9850fc0a03291258f0d411b50769ec01a77' }, hAsync("mds-button", { key: '8647ce67f62822980f3b030ad2f0dade027c2b1a', active: this.active, autoFocus: this.autoFocus, await: this.await, disabled: this.disabled, href: this.href, icon: this.icon, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }, this.label), hAsync("mds-button", { key: '427b779bebdcf5a399b647485b26a3f271a7e813', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), hAsync("mds-dropdown", { key: '9d20cd3ac389c3fcf6d72f39dff7a088b8d8a83b', target: '.dropdown-action', part: "dropdown" }, hAsync("slot", { key: 'c366fad5c5d8d5eae317660fb26a5ee704d78b30' }))));
     }
     static get style() { return MdsButtonDropdownStyle0; }
     static get cmpMeta() { return {
@@ -5555,7 +5555,7 @@ class MdsButtonGroup {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'a21b4ec16be1c58b4675a56dcddf4e3ae79dea6d' }, hAsync("slot", { key: '22bf93b5f407811c994d42b77483b00a223992fb' })));
+        return (hAsync(Host, { key: 'feac7d0149984045e05c2f9f555dcde0ee4f3882' }, hAsync("slot", { key: '81f58342763cc799aab7fcc3b8bd2739b64b34ce' })));
     }
     static get style() { return MdsButtonGroupStyle0; }
     static get cmpMeta() { return {
@@ -14223,13 +14223,15 @@ const sanitizeISO8601Date = (dateString) => {
     return new Date(dateString).toISOString();
 };
 
-const mdsCalendarCss = ":host{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01));--mds-calendar-cell-gap:0.125rem;--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:0.5rem;--mds-calendar-background:rgb(var(--tone-neutral));--mds-calendar-padding:1rem;background-color:rgb(var(--tone-neutral-09));border-radius:var(--mds-calendar-border-radius);cursor:auto;display:-ms-inline-flexbox;display:inline-flex;max-width:380px;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content;overflow:hidden}.calendar-view{background-color:var(--mds-calendar-background);border-radius:inherit;display:grid;padding:var(--mds-calendar-padding)}.calendar-preselection{display:none;gap:0.125rem;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;padding:var(--mds-calendar-padding)}.calendar-preselection--has-preselection{display:grid}nav{display:-ms-flexbox;display:flex;gap:0.5rem;-ms-flex-pack:justify;justify-content:space-between}.action{padding-left:0.5rem;padding-right:0.5rem;-ms-flex-pack:left;justify-content:left;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content}.action-back,.action-forward{-ms-flex-negative:0;flex-shrink:0}.select-month-or-year{background-color:rgb(var(--tone-neutral-09));border-radius:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:space-evenly;justify-content:space-evenly}.action-month,.action-year{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.week-day-name{-ms-flex-align:center;align-items:center;aspect-ratio:1;min-height:auto;padding:0}.month-view{display:grid}.month-view__days-names,.month-view__cells{display:grid;gap:var(--mds-calendar-cell-gap);grid-template-columns:repeat(7, minmax(1px, 100%));min-width:0}.month-view{display:grid}.month-view__month-names,.month-view__years{display:grid;gap:var(--mds-calendar-cell-gap);grid-template-columns:repeat(3, minmax(1px, 100%));min-width:0}";
+const mdsCalendarCss = ":host{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01));--mds-calendar-cell-gap:0.125rem;--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:0.5rem;--mds-calendar-background:rgb(var(--tone-neutral));--mds-calendar-padding:1rem;--mds-calendar-select-month-or-year-height:2.25rem;--mds-calendar-select-month-or-year-width:14rem;background-color:rgb(var(--tone-neutral-09));border-radius:var(--mds-calendar-border-radius);cursor:auto;display:-ms-inline-flexbox;display:inline-flex;max-width:380px;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content;overflow:hidden}.calendar-view{background-color:var(--mds-calendar-background);border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--mds-calendar-padding)}.calendar-preselection{display:none;gap:0.125rem;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;padding:var(--mds-calendar-padding)}.calendar-preselection--has-preselection{display:grid}nav{display:-ms-flexbox;display:flex;gap:0.5rem;-ms-flex-pack:justify;justify-content:space-between;min-width:0}.action{padding-left:0.5rem;padding-right:0.5rem;-ms-flex-pack:left;justify-content:left;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content}.action-back,.action-forward{-ms-flex-negative:0;flex-shrink:0}.select-month-or-year{-ms-flex-align:stretch;align-items:stretch;background-color:rgb(var(--tone-neutral-09));block-size:var(--mds-calendar-select-month-or-year-height);border-radius:var(--mds-calendar-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--mds-calendar-select-month-or-year-width);flex:0 0 var(--mds-calendar-select-month-or-year-width);height:var(--mds-calendar-select-month-or-year-height);-ms-flex-pack:start;justify-content:flex-start;inline-size:var(--mds-calendar-select-month-or-year-width);max-block-size:var(--mds-calendar-select-month-or-year-height);max-height:var(--mds-calendar-select-month-or-year-height);max-inline-size:var(--mds-calendar-select-month-or-year-width);min-block-size:var(--mds-calendar-select-month-or-year-height);min-height:var(--mds-calendar-select-month-or-year-height);min-inline-size:var(--mds-calendar-select-month-or-year-width);overflow:hidden}.action-month,.action-year{--mds-button-radius:0;-ms-flex-item-align:stretch;align-self:stretch;block-size:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:default;height:100%;max-block-size:100%;max-height:100%;min-block-size:0;min-height:0;padding-left:0.5rem;padding-right:0.5rem}.action-month{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}.action-year{-ms-flex:0 0 4.5rem;flex:0 0 4.5rem}.action-month::part(label),.action-year::part(label){overflow:visible;text-overflow:clip;white-space:nowrap}.week-day-name{-ms-flex-align:center;align-items:center;aspect-ratio:1;min-height:auto;padding:0}.month-view{display:grid}.month-view__days-names,.month-view__cells{display:grid;gap:var(--mds-calendar-cell-gap);grid-template-columns:repeat(7, minmax(1px, 100%));min-width:0}.month-view{display:grid}.month-view__month-names,.month-view__years{display:grid;gap:var(--mds-calendar-cell-gap);grid-template-columns:repeat(3, minmax(1px, 100%));min-width:0}";
 var MdsCalendarStyle0 = mdsCalendarCss;
 
 class MdsCalendar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.datesEmitter = createEvent(this, "mdsCalendarChange", 7);
+        this.navigationEmitter = createEvent(this, "mdsCalendarNavigate", 7);
+        this.hoverEmitter = createEvent(this, "mdsCalendarHover", 7);
         this.checkPreselectionsEmitter = createEvent(this, "mdsCalendarPreselect", 7);
         this.hasPreselection = false;
         this.currentDate = DateTime_1.now();
@@ -14247,6 +14249,34 @@ class MdsCalendar {
             el: {},
         });
         this.rangePicker = true;
+        /**
+         * Shows the previous navigation button in the calendar header.
+         */
+        this.showPreviousButton = true;
+        /**
+         * Shows the next navigation button in the calendar header.
+         */
+        this.showNextButton = true;
+        /**
+         * Disables switching to month or year selection views from the calendar header.
+         */
+        this.disableMonthYearSelection = false;
+        /**
+         * Shows the preselection area above the calendar view.
+         */
+        this.showPreselection = false;
+        /**
+         * Specifies the date used to determine the visible month without changing the selection.
+         * @description It's in ISO format (YYYY-MM-DD).
+         * @example '2023-10-01'
+         */
+        this.viewDate = null;
+        /**
+         * Specifies the date used to preview the range selection across multiple visible calendars.
+         * @description It's in ISO format (YYYY-MM-DD).
+         * @example '2023-10-15'
+         */
+        this.hoverDate = null;
         /**
          * Specifies the start date of the selection
          * @description It's in ISO format (YYYY-MM-DD).
@@ -14275,6 +14305,47 @@ class MdsCalendar {
         this.internalEndDate = this.endDate;
         this.currentMonth = '';
         this.currentYear = '';
+        this.handleMouseOver = (event) => {
+            const target = event.target;
+            if (!target.matches('mds-calendar-cell') ||
+                !this.rangePicker ||
+                !this.internalStartDate ||
+                this.internalEndDate) {
+                return;
+            }
+            const hoverDate = target.getAttribute('date');
+            if (hoverDate) {
+                this.hoverEmitter.emit({ hoverDate });
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (!this.rangePicker || !this.internalStartDate || this.internalEndDate || !this.hoverDate) {
+                return;
+            }
+            this.hoverEmitter.emit({ hoverDate: null });
+        };
+        this.handleMonthActionClick = (event) => {
+            event.stopPropagation();
+            if (this.disableMonthYearSelection) {
+                event.preventDefault();
+                return;
+            }
+            this.currentView = this.currentView === 'months' ? 'calendar' : 'months';
+            requestAnimationFrame(() => {
+                this.updateCalendar().then(() => this.setDates());
+            });
+        };
+        this.handleYearActionClick = (event) => {
+            event.stopPropagation();
+            if (this.disableMonthYearSelection) {
+                event.preventDefault();
+                return;
+            }
+            this.currentView = this.currentView === 'years' ? 'calendar' : 'years';
+            requestAnimationFrame(() => {
+                this.updateCalendar().then(() => this.setDates());
+            });
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);
@@ -14282,14 +14353,25 @@ class MdsCalendar {
     handleStartDate(newValue) {
         if (newValue !== null && newValue !== '') {
             this.internalStartDate = sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
+            this.startDateTime = DateTime_1.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
             if (this.internalEndDate) {
-                const startDateTime = DateTime_1.fromISO(this.internalStartDate);
                 const endDateTime = DateTime_1.fromISO(this.internalEndDate);
-                if (startDateTime > endDateTime) {
+                if (this.startDateTime > endDateTime) {
                     console.warn('startDate is after endDate, swapping values');
                     return;
                 }
             }
+            else if (this.rangePicker) {
+                this.isFirstClick = false;
+            }
+            this.updateDates();
+        }
+        else if (newValue === null || newValue === '') {
+            this.internalStartDate = null;
+            this.startDateIdentifier = null;
+            this.startDateTime = null;
+            this.isFirstClick = true;
             this.updateDates();
         }
     }
@@ -14300,21 +14382,48 @@ class MdsCalendar {
         }
         else if (newValue !== null && newValue !== '') {
             this.internalEndDate = sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
+            this.endDateTime = DateTime_1.fromISO(this.internalEndDate);
+            this.endDateIdentifier = this.endDateTime.toISODate();
             if (this.internalStartDate) {
                 const startDateTime = DateTime_1.fromISO(this.internalStartDate);
-                const endDateTime = DateTime_1.fromISO(this.internalEndDate);
-                if (startDateTime > endDateTime) {
+                if (startDateTime > this.endDateTime) {
                     console.warn('startDate is after endDate, swapping values');
                     return;
                 }
             }
             this.updateDates();
         }
+        else if (newValue === null || newValue === '') {
+            this.internalEndDate = null;
+            this.endDateIdentifier = null;
+            this.endDateTime = null;
+            this.updateDates();
+        }
+    }
+    handleViewDate(newValue) {
+        if (newValue !== null && newValue !== '') {
+            const viewDate = DateTime_1.fromISO(newValue.toString());
+            if (viewDate.isValid) {
+                this.currentDate = viewDate;
+                this.updateCalendar().then(() => {
+                    requestAnimationFrame(() => this.setDates());
+                });
+            }
+        }
+    }
+    handleHoverDate() {
+        requestAnimationFrame(() => this.setDates());
     }
     componentWillLoad() {
         var _a, _b;
         this.language = this.t.lang(this.host);
-        if (this.internalStartDate) {
+        if (this.viewDate) {
+            const viewDate = DateTime_1.fromISO(this.viewDate.toString());
+            if (viewDate.isValid) {
+                this.currentDate = viewDate;
+            }
+        }
+        else if (this.internalStartDate) {
             this.internalStartDate = sanitizeISO8601Date((_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.toString());
             this.startDateTime = DateTime_1.fromISO(this.internalStartDate);
             if (this.startDateTime.isValid) {
@@ -14328,40 +14437,33 @@ class MdsCalendar {
         this.updateCalendar();
     }
     componentDidLoad() {
-        var _a, _b, _c;
-        this.hasPreselection = ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.date-preselection--has-preselection')) !== null;
-        (_c = (_b = this.host) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseover', event => {
-            const target = event.target;
-            if (target.matches('mds-calendar-cell') && this.startDateIdentifier && this.rangePicker) {
-                this.handleHover(target);
-            }
-        });
+        var _a, _b, _c, _d, _e;
+        this.hasPreselection =
+            ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.date-preselection--has-preselection')) !== null;
+        (_c = (_b = this.host) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseover', this.handleMouseOver);
+        (_e = (_d = this.host) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseleave', this.handleMouseLeave);
         this.setDates();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseover', event => {
-            const target = event.target;
-            if (target.matches('mds-calendar-cell') && this.startDateIdentifier && this.rangePicker) {
-                this.handleHover(target);
-            }
-        });
+        var _a, _b, _c, _d;
+        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseover', this.handleMouseOver);
+        (_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseleave', this.handleMouseLeave);
     }
     async updateCurrentDate(date) {
         this.currentDate = DateTime_1.fromISO(date);
+        await this.updateCalendar();
+        await new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.setDates();
+                resolve();
+            });
+        });
         return Promise.resolve();
     }
     updateDates() {
-        if (this.internalStartDate && this.internalEndDate && this.rangePicker) {
-            this.updateCalendar().then(() => {
-                requestAnimationFrame(() => this.setDates());
-            });
-        }
-        else if (this.internalStartDate && !this.rangePicker) {
-            this.updateCalendar().then(() => {
-                requestAnimationFrame(() => this.setDates());
-            });
-        }
+        this.updateCalendar().then(() => {
+            requestAnimationFrame(() => this.setDates());
+        });
     }
     async updateCalendar() {
         try {
@@ -14383,25 +14485,45 @@ class MdsCalendar {
         const { shadowRoot } = calendar;
         if (!shadowRoot)
             return;
-        const calendarCells = shadowRoot.querySelectorAll('mds-calendar-cell[selection]');
-        if (this.isFirstClick) {
-            if (this.rangePicker) {
-                this.setRangeSelection(calendarCells, shadowRoot);
+        const calendarCells = shadowRoot.querySelectorAll('mds-calendar-cell[selection], mds-calendar-cell[preview]');
+        if (this.rangePicker) {
+            if (this.hoverDate && !this.internalEndDate) {
+                this.setHoverSelection(calendarCells, shadowRoot);
             }
             else {
-                this.setSingleSelection(calendarCells, shadowRoot);
+                this.setRangeSelection(calendarCells, shadowRoot);
             }
         }
+        else {
+            this.setSingleSelection(calendarCells, shadowRoot);
+        }
     }
-    setRangeSelection(calendarCells, shadowRoot) {
+    clearSelectionState(calendarCells) {
         calendarCells.forEach(day => {
             day.removeAttribute('selection');
             day.removeAttribute('preview');
         });
-        if (!this.internalStartDate || !this.internalEndDate)
+    }
+    setRangeSelection(calendarCells, shadowRoot) {
+        this.clearSelectionState(calendarCells);
+        if (!this.internalStartDate)
             return;
         this.startDateTime = DateTime_1.fromISO(this.internalStartDate.toString());
+        if (!this.internalEndDate) {
+            this.startDateIdentifier = this.startDateTime.toISODate();
+            this.isFirstClick = false;
+            const cells = shadowRoot.querySelectorAll('mds-calendar-cell');
+            cells.forEach(cell => {
+                if (cell.getAttribute('date') === this.startDateTime.toFormat('yyyy-MM-dd')) {
+                    cell.setAttribute('selection', 'single');
+                    cell.setAttribute('preview', 'true');
+                }
+            });
+            return;
+        }
         this.endDateTime = DateTime_1.fromISO(this.internalEndDate.toString());
+        this.startDateIdentifier = this.startDateTime.toISODate();
+        this.endDateIdentifier = this.endDateTime.toISODate();
         const cells = shadowRoot.querySelectorAll('mds-calendar-cell');
         if (cells) {
             let isBetweenDates;
@@ -14428,10 +14550,48 @@ class MdsCalendar {
             }
         }
     }
-    setSingleSelection(calendarCells, shadowRoot) {
-        calendarCells.forEach(cell => {
-            cell.removeAttribute('selection');
+    setHoverSelection(calendarCells, shadowRoot) {
+        this.clearSelectionState(calendarCells);
+        if (!this.internalStartDate || !this.hoverDate) {
+            this.setRangeSelection(calendarCells, shadowRoot);
+            return;
+        }
+        const startDate = DateTime_1.fromISO(this.internalStartDate);
+        const hoverDate = DateTime_1.fromISO(this.hoverDate);
+        if (!startDate.isValid || !hoverDate.isValid) {
+            this.setRangeSelection(calendarCells, shadowRoot);
+            return;
+        }
+        const isForwardSelection = startDate <= hoverDate;
+        const cells = Array.from(shadowRoot.querySelectorAll('mds-calendar-cell'));
+        cells.forEach(cell => {
+            const cellDateString = cell.getAttribute('date');
+            if (!cellDateString)
+                return;
+            const cellDate = DateTime_1.fromISO(cellDateString);
+            if (!cellDate.isValid)
+                return;
+            const isInRange = isForwardSelection
+                ? cellDate >= startDate && cellDate <= hoverDate
+                : cellDate >= hoverDate && cellDate <= startDate;
+            if (!isInRange)
+                return;
+            cell.setAttribute('preview', 'true');
+            let selectionType = 'middle';
+            if (startDate.equals(hoverDate) && cellDate.equals(startDate)) {
+                selectionType = 'single';
+            }
+            else if (cellDate.equals(startDate)) {
+                selectionType = isForwardSelection ? 'start' : 'end';
+            }
+            else if (cellDate.equals(hoverDate)) {
+                selectionType = isForwardSelection ? 'end' : 'start';
+            }
+            cell.setAttribute('selection', selectionType);
         });
+    }
+    setSingleSelection(calendarCells, shadowRoot) {
+        this.clearSelectionState(calendarCells);
         if (!this.internalStartDate)
             return;
         this.startDateTime = DateTime_1.fromISO(this.internalStartDate.toString());
@@ -14453,6 +14613,10 @@ class MdsCalendar {
         this.updateCalendar().then(() => {
             requestAnimationFrame(() => this.setDates());
         });
+        this.navigationEmitter.emit({
+            currentDate: this.currentDate.toISODate(),
+            delta,
+        });
     }
     calculateWeekDaysInMonth() {
         const startOfMonth = this.currentDate.startOf('month');
@@ -14477,6 +14641,17 @@ class MdsCalendar {
     }
     handleRange(element, dayInfo) {
         var _a, _b;
+        const pendingStartDate = this.startDate || this.host.getAttribute('start-date');
+        if (this.rangePicker &&
+            pendingStartDate &&
+            !this.endDate &&
+            !this.internalEndDate &&
+            this.isFirstClick) {
+            this.internalStartDate = sanitizeISO8601Date(pendingStartDate.toString());
+            this.startDateTime = DateTime_1.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
+            this.isFirstClick = false;
+        }
         const resetSelection = () => {
             this.internalStartDate = null;
             this.internalEndDate = null;
@@ -14513,14 +14688,16 @@ class MdsCalendar {
                 element.setAttribute('selection', 'single');
                 element.setAttribute('preview', 'true');
             });
+            this.datesEmitter.emit({ startDate: this.internalStartDate });
             return;
         }
         const calendar = this.host;
         const mdsCalendarCellElements = (_a = calendar === null || calendar === void 0 ? void 0 : calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar-cell');
-        const startDateElementIndex = Array.from(mdsCalendarCellElements !== null && mdsCalendarCellElements !== void 0 ? mdsCalendarCellElements : [])
-            .findIndex((cell) => cell.getAttribute('date') === this.startDateIdentifier);
+        const startDateElementIndex = Array.from(mdsCalendarCellElements !== null && mdsCalendarCellElements !== void 0 ? mdsCalendarCellElements : []).findIndex((cell) => cell.getAttribute('date') === this.startDateIdentifier);
         const elementIndex = Array.from(mdsCalendarCellElements !== null && mdsCalendarCellElements !== void 0 ? mdsCalendarCellElements : []).indexOf(element);
-        if (this.startDateIdentifier && DateTime_1.fromISO(this.startDateIdentifier) < DateTime_1.fromISO(element.getAttribute('date'))) {
+        if (this.startDateIdentifier &&
+            DateTime_1.fromISO(this.startDateIdentifier) <
+                DateTime_1.fromISO(element.getAttribute('date'))) {
             this.endDateIdentifier = element.getAttribute('date');
             this.endDateTime = dayInfo;
             this.internalEndDate = this.endDateTime.toISO().split('T')[0];
@@ -14546,66 +14723,6 @@ class MdsCalendar {
             this.checkPreselectionsEmitter.emit();
         }
     }
-    handleHover(element) {
-        var _a, _b;
-        const typedElement = element;
-        const startDate = DateTime_1.fromISO(this.internalStartDate);
-        if (!startDate.isValid || this.endDateIdentifier !== null)
-            return;
-        const calendar = this.host;
-        const mdsCalendarCellElements = Array.from((_b = (_a = calendar === null || calendar === void 0 ? void 0 : calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar-cell')) !== null && _b !== void 0 ? _b : []);
-        const hoveredDateStr = typedElement.getAttribute('date');
-        if (!hoveredDateStr)
-            return;
-        const hoveredDate = DateTime_1.fromISO(hoveredDateStr);
-        if (!hoveredDate.isValid)
-            return;
-        const startTypedElement = mdsCalendarCellElements.find(cell => cell.getAttribute('date') === this.internalStartDate);
-        mdsCalendarCellElements.forEach(cell => {
-            cell.removeAttribute('preview');
-            cell.removeAttribute('selection');
-        });
-        typedElement.setAttribute('preview', 'true');
-        const typedDateStr = typedElement.getAttribute('date');
-        if (typedDateStr) {
-            const typedDate = DateTime_1.fromISO(typedDateStr);
-            if (typedDate.isValid && startTypedElement) {
-                if (startDate < typedDate) {
-                    startTypedElement.setAttribute('selection', 'start');
-                }
-                else if (startDate > typedDate) {
-                    startTypedElement.setAttribute('selection', 'end');
-                    typedElement.setAttribute('selection', 'start');
-                }
-                else {
-                    typedElement.setAttribute('selection', 'single');
-                }
-            }
-        }
-        if (startDate.equals(hoveredDate)) {
-            typedElement.setAttribute('selection', 'single');
-        }
-        else {
-            const [start, end] = startDate < hoveredDate ? [startDate, hoveredDate] : [hoveredDate, startDate];
-            mdsCalendarCellElements.forEach(cell => {
-                const cellDateStr = cell.getAttribute('date');
-                if (!cellDateStr)
-                    return;
-                const cellDate = DateTime_1.fromISO(cellDateStr);
-                if (!cellDate.isValid)
-                    return;
-                if (cellDate >= start && cellDate <= end) {
-                    cell.setAttribute('preview', 'true');
-                    let selectionType = 'middle';
-                    if (cellDate.equals(start))
-                        selectionType = 'start';
-                    if (cellDate.equals(end))
-                        selectionType = 'end';
-                    cell.setAttribute('selection', selectionType);
-                }
-            });
-        }
-    }
     handleSingleSelection(element, dayInfo) {
         var _a;
         const calendar = this.host;
@@ -14622,7 +14739,8 @@ class MdsCalendar {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'f8c99b009fa780f683430e40a3f9e5a0b46b30d7' }, hAsync("div", { key: 'ef190bc2d84e08c6214cf8ed3143e93fb39dd8e8', class: clsx('calendar-preselection', this.hasPreselection && 'calendar-preselection--has-preselection') }, hAsync("slot", { key: '80bc77b47e0aee093314222aa3c147ac57e0f494', name: "preselection" })), hAsync("div", { key: '0f9a115dc3cbd9632a9b87e94ffdab78a61e9ef8', class: "calendar-view" }, hAsync("nav", { key: 'cdec70c0d9263e0a7404976b1b9c9b1460f4760a' }, hAsync("mds-button", { key: '19cb046b6c4a3b0935b9dc50e38a99fd98c2fe56', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "quiet", onClick: event => {
+        return (hAsync(Host, { key: '271209054e3f86d3c167ab6f2d84c801619f7fdb' }, hAsync("div", { key: '084902141f92f15f4b62ec34fc826b939f0ff05b', class: clsx('calendar-preselection', (this.showPreselection || this.hasPreselection) &&
+                'calendar-preselection--has-preselection') }, hAsync("slot", { key: '986c1168978cc658b3a7409adafac5651cae7c77', name: "preselection" })), hAsync("div", { key: 'bbb9882d52d1fd89758704604c3a52016535561e', class: "calendar-view" }, hAsync("nav", { key: '9f993a0c44e484303716cef6530d9d95e84226a1' }, this.showPreviousButton && (hAsync("mds-button", { key: 'f78027217275a9f0896fdfaa2ed99fd10064f581', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "quiet", onClick: event => {
                 if (this.currentView === 'calendar') {
                     event.stopPropagation();
                     this.changeMonth(-1);
@@ -14634,19 +14752,7 @@ class MdsCalendar {
                 else {
                     event.stopPropagation();
                 }
-            } }), hAsync("div", { key: '04e4e1ca98ea00d4513f88131cae65f8f3d368ae', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && hAsync("mds-button", { key: 'd6995e7c68177356e60a1c77aff3649848f91275', class: "action-month", variant: "dark", tone: "quiet", onClick: event => {
-                event.stopPropagation();
-                this.currentView = this.currentView === 'months' ? 'calendar' : 'months';
-                requestAnimationFrame(() => {
-                    this.updateCalendar().then(() => this.setDates());
-                });
-            } }, this.currentMonth), (this.currentView === 'calendar' || this.currentView === 'years') && hAsync("mds-button", { key: 'd79d4de0219d05724b173290fa39a034324d950b', class: "action-year", variant: "dark", tone: "quiet", onClick: event => {
-                event.stopPropagation();
-                this.currentView = this.currentView === 'years' ? 'calendar' : 'years';
-                requestAnimationFrame(() => {
-                    this.updateCalendar().then(() => this.setDates());
-                });
-            } }, this.currentYear)), hAsync("mds-button", { key: '596683e3960b61627fbe8d774db076e2297cd99a', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "quiet", onClick: event => {
+            } })), hAsync("div", { key: 'e2916642b7072db24f8e800fb033260a9c2a3dcd', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (hAsync("mds-button", { key: '112c7d69205f2c57587a4ba12ecd7b445ef66170', class: "action-month", truncate: "none", variant: "dark", tone: "quiet", onClick: this.handleMonthActionClick }, this.currentMonth)), (this.currentView === 'calendar' || this.currentView === 'years') && (hAsync("mds-button", { key: '91f990cfdafb34e3983f7e375e695dce5fde11fd', class: "action-year", truncate: "none", variant: "dark", tone: "quiet", onClick: this.handleYearActionClick }, this.currentYear))), this.showNextButton && (hAsync("mds-button", { key: 'd297451100785c186b8ae054fa0203007f218cb7', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "quiet", onClick: event => {
                 if (this.currentView === 'calendar') {
                     event.stopPropagation();
                     this.changeMonth(1);
@@ -14658,11 +14764,15 @@ class MdsCalendar {
                 else {
                     event.stopPropagation();
                 }
-            } })), this.currentView === 'calendar' && (hAsync("section", { key: '2bac904c98af5bd276fbc3f1587655bea71dd138', class: "month-view" }, hAsync("header", { key: 'eaf5ace7f5a3f822bf860f3ec3cceb01582fbe93', class: "month-view__days-names" }, this.weekdays.map(day => (hAsync("mds-button", { class: "week-day-name", variant: "dark", tone: "quiet" }, day)))), hAsync("div", { key: 'ae14ce81225094dea1b082398901496ed77868eb', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (hAsync("mds-calendar-cell", { key: index, today: DateTime_1.now().toFormat('yyyy-MM-dd') === dayInfo.date.toFormat('yyyy-MM-dd'), date: dayInfo.date.toFormat('yyyy-MM-dd'), month: dayInfo.isCurrentMonth ? 'current' : 'other', disabled: (() => {
-                if (this.min && this.min !== '' && dayInfo.date < DateTime_1.fromISO(this.min)) {
+            } }))), this.currentView === 'calendar' && (hAsync("section", { key: 'bf8eba9f66065c91d0f4feac4ddbc93c1fc63ad4', class: "month-view" }, hAsync("header", { key: 'c90bf7ed93129ab8bfc3ecaab99fb2d012adab39', class: "month-view__days-names" }, this.weekdays.map(day => (hAsync("mds-button", { class: "week-day-name", variant: "dark", tone: "quiet" }, day)))), hAsync("div", { key: '6b5fb95ad179b38fefe0986b48a3a12a287ccf61', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (hAsync("mds-calendar-cell", { key: index, today: DateTime_1.now().toFormat('yyyy-MM-dd') === dayInfo.date.toFormat('yyyy-MM-dd'), date: dayInfo.date.toFormat('yyyy-MM-dd'), month: dayInfo.isCurrentMonth ? 'current' : 'other', disabled: (() => {
+                if (this.min &&
+                    this.min !== '' &&
+                    dayInfo.date < DateTime_1.fromISO(this.min)) {
                     return true;
                 }
-                if (this.max && this.max !== '' && dayInfo.date > DateTime_1.fromISO(this.max)) {
+                if (this.max &&
+                    this.max !== '' &&
+                    dayInfo.date > DateTime_1.fromISO(this.max)) {
                     return true;
                 }
                 return undefined;
@@ -14673,9 +14783,15 @@ class MdsCalendar {
                     this.handleRange(target, dayInfo.date);
                 else
                     this.handleSingleSelection(target, dayInfo.date);
-            } }, dayInfo.date.toFormat('dd'))))))), this.currentView === 'months' && (hAsync("section", { key: 'd85ff88559bac8c6999e939cfd317e78e67bdcdb', class: "month-selection" }, hAsync("header", { key: 'ed18653752d8d403c86dd8e78ff4cd182d8ec435', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
-            const monthName = DateTime_1.local().set({ month: index + 1 }).setLocale(this.language).toFormat('MMMM');
-            return (hAsync("mds-button", { class: 'action', variant: 'dark', tone: 'quiet', onClick: event => {
+            }, title: dayInfo.date
+                .setLocale(this.language)
+                .toFormat('cccc d LLLL')
+                .replace(/^./, char => char.toUpperCase()) }, dayInfo.date.toFormat('dd'))))))), this.currentView === 'months' && (hAsync("section", { key: '5353ed4497b33fb5260cf6c2d1f087b228a0cda3', class: "month-selection" }, hAsync("header", { key: '70247928e4a74589900b0acd3b8d02686e41a4d1', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
+            const monthName = DateTime_1.local()
+                .set({ month: index + 1 })
+                .setLocale(this.language)
+                .toFormat('MMMM');
+            return (hAsync("mds-button", { class: "action", variant: "dark", tone: "quiet", onClick: event => {
                     event.stopPropagation();
                     this.currentDate = this.currentDate.set({ month: index + 1 });
                     this.currentMonth = this.currentDate.toFormat('MMMM');
@@ -14684,9 +14800,9 @@ class MdsCalendar {
                         requestAnimationFrame(() => this.setDates());
                     });
                 } }, monthName));
-        })))), this.currentView === 'years' && (hAsync("section", { key: 'a9473ac1c4027e4e25635217a665aadd924d055a', class: "year-selection" }, hAsync("header", { key: 'adc5de34d23fbb299aa8ab5debb1b210c7cb4bb0', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
+        })))), this.currentView === 'years' && (hAsync("section", { key: '99dca1c5f3ce083cb3bb117ce8bb705faa83e19c', class: "year-selection" }, hAsync("header", { key: '7d479a8c05815560306486bf0825a521c971a6e4', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
             const year = this.selectedYear + index;
-            return (hAsync("mds-button", { class: 'action', variant: 'dark', tone: 'quiet', onClick: event => {
+            return (hAsync("mds-button", { class: "action", variant: "dark", tone: "quiet", onClick: event => {
                     event.stopPropagation();
                     this.currentDate = this.currentDate.set({ year });
                     this.currentYear = year.toString();
@@ -14700,7 +14816,9 @@ class MdsCalendar {
     get host() { return getElement(this); }
     static get watchers() { return {
         "startDate": ["handleStartDate"],
-        "endDate": ["handleEndDate"]
+        "endDate": ["handleEndDate"],
+        "viewDate": ["handleViewDate"],
+        "hoverDate": ["handleHoverDate"]
     }; }
     static get style() { return MdsCalendarStyle0; }
     static get cmpMeta() { return {
@@ -14708,6 +14826,12 @@ class MdsCalendar {
         "$tagName$": "mds-calendar",
         "$members$": {
             "rangePicker": [4, "range-picker"],
+            "showPreviousButton": [4, "show-previous-button"],
+            "showNextButton": [4, "show-next-button"],
+            "disableMonthYearSelection": [4, "disable-month-year-selection"],
+            "showPreselection": [4, "show-preselection"],
+            "viewDate": [513, "view-date"],
+            "hoverDate": [513, "hover-date"],
             "startDate": [513, "start-date"],
             "endDate": [513, "end-date"],
             "min": [513],
@@ -14724,12 +14848,14 @@ class MdsCalendar {
             "language": [32],
             "internalStartDate": [32],
             "internalEndDate": [32],
+            "currentMonth": [32],
+            "currentYear": [32],
             "updateLang": [64],
             "updateCurrentDate": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["startDate", "start-date"], ["endDate", "end-date"], ["min", "min"], ["max", "max"]]
+        "$attrsToReflect$": [["viewDate", "view-date"], ["hoverDate", "hover-date"], ["startDate", "start-date"], ["endDate", "end-date"], ["min", "min"], ["max", "max"]]
     }; }
 }
 
@@ -14762,7 +14888,7 @@ class MdsCalendarCell {
         this.today = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'f7e1c5be903ff151cbad616718740fb2eb8f27f0' }, hAsync("div", { key: '3e4b838f78c0ce8df5813b468a6a1a00ae2730b0', class: "inner-dot" }), hAsync("div", { key: '873c7e63491cf3a3c630632509410227ada07694', class: "area-background" }), hAsync("mds-button", { key: '623915907fcb6d6c4aadba14c5db3f0e9b5d1aae', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, hAsync("slot", { key: '8d78ee0a9b723f68bbf1a521106f77fe03f3a606' }))));
+        return (hAsync(Host, { key: '09389f01297dc7e38499fc5783fbe7b5be73cee5' }, hAsync("div", { key: '6501ca7b41eed8696e60156abf53f0cbbecae8d5', class: "inner-dot" }), hAsync("div", { key: '34f8e50ba0032d7d9d3dd63aafc5ac536f1a0adf', class: "area-background" }), hAsync("mds-button", { key: 'bedafcb2817bfeac6ebee9fa3e0887a41a1bce9b', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, hAsync("slot", { key: '197f10e47b61a6c6140774cd3e2443df61d9e4a4' }))));
     }
     static get style() { return MdsCalendarCellStyle0; }
     static get cmpMeta() { return {
@@ -14824,7 +14950,7 @@ class MdsCard {
             .reduce((prev, curr) => prev + curr.charAt(0), '');
     }
     render() {
-        return (hAsync(Host, { key: '40b6bd3b0fcce50d1540f3d2356bcf8ebc37657b' }, hAsync("div", { key: 'a5163fe1dab6d69dcd4e2f4e9f569870bb8ff869', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "container" }, hAsync("slot", { key: '14ee70fd226453020ee665d4b766a2673823f1a4', name: "media" }), hAsync("slot", { key: 'f21ae3c26a15aec44754b06da5f19f0dc695e840', name: "header" }), hAsync("slot", { key: 'e0065f50b72e5f8b1cf29236666a855b4b02e41b', name: "content" }), hAsync("slot", { key: '76c9a427fb0522067df3ff671241ec25179c2a5f', name: "footer" }))));
+        return (hAsync(Host, { key: '1f56ae14eee21319d1285d8ed70b8318ccd623ea' }, hAsync("div", { key: '9c1b326adc15a6572d1e711090a31f6af81d301c', class: clsx('layout', this.layout && `layout--${this.layout}`, !this.autoGrid ? 'layout--disabled' : ''), part: "container" }, hAsync("slot", { key: 'c07c48068d7227f652ad577c58b388880f930729', name: "media" }), hAsync("slot", { key: '84121684f7f9298396da6c61c0281d4fad7e9d71', name: "header" }), hAsync("slot", { key: '807c82b31bcd779562ead67476e6b8aa6ec4c2f6', name: "content" }), hAsync("slot", { key: 'd05eb58fc0d39cac5ce38676fa2062e87b0f4ea5', name: "footer" }))));
     }
     get host() { return getElement(this); }
     static get style() { return MdsCardStyle0; }
@@ -14852,7 +14978,7 @@ class MdsCardContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '8de5ceb7de6678a21046301b7196928cb175b564', slot: "content" }, hAsync("slot", { key: '6972425a51436a791af1b998e1ca15c42621d714' })));
+        return (hAsync(Host, { key: '6d999f7edd0c6a6f9600ba642c7701c76cb2e652', slot: "content" }, hAsync("slot", { key: 'd8261aefdf99a1e04ce0759351c4b112c14db22e' })));
     }
     static get style() { return MdsCardContentStyle0; }
     static get cmpMeta() { return {
@@ -14876,7 +15002,7 @@ class MdsCardFooter {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '13aafa37390afd856908699e092b4aa16fcf5baa', slot: "footer" }, hAsync("slot", { key: 'ff5ecf333902f504868c8864d92678193309c6f7' })));
+        return (hAsync(Host, { key: '27d1cfe59341aec8873e3e58b67ff878447b4e7e', slot: "footer" }, hAsync("slot", { key: '1f77196c1c48afe232aaa1062d77100da3e34964' })));
     }
     static get style() { return MdsCardFooterStyle0; }
     static get cmpMeta() { return {
@@ -14904,7 +15030,7 @@ class MdsCardHeader {
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (hAsync(Host, { key: '53ef37e50436502fe28105d350de8b6df68f2b3c', slot: "header" }, hAsync("slot", { key: '8195415abd27fbeee184d43cdb9b41e37d3e30fc' }), this.actions && hAsync("div", { key: 'bf1441236c3e9faa0a6736c49ae7faad502ab279', class: "actions" }, hAsync("slot", { key: 'fd6f9ddc41d48ea581e35ae969907067f5602708', name: "action" }))));
+        return (hAsync(Host, { key: '37517cc5fa13e59e5cb3288b2df8e443959ac589', slot: "header" }, hAsync("slot", { key: '4cf693704f94b775346e6b132cbfb186e7092ae4' }), this.actions && hAsync("div", { key: '737f4ec0b6c3f003836d6cbe7fdb3b29f38518d9', class: "actions" }, hAsync("slot", { key: '57bef676061685715167d387ff65bc48ab1a48c9', name: "action" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return MdsCardHeaderStyle0; }
@@ -14930,7 +15056,7 @@ class MdsCardMedia {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0e6711a21bb20b2c78e84050847aeb60b8720eef', slot: "media" }, hAsync("div", { key: 'ea2e66573e2004697e6d060e698ff7e3445761ce', class: "content", part: "content" }, hAsync("slot", { key: '136f60814119eb31f927d0387dee74384faab5ef', name: "content" })), hAsync("slot", { key: 'b229336c1e680bab67be617dfab80161d5162bdf' })));
+        return (hAsync(Host, { key: 'ede4755f4ed976be4a2aaefa0ef107a42cd3ea42', slot: "media" }, hAsync("div", { key: '2dd85585b36b5568fd5b6b60639fbc16dae54f8f', class: "content", part: "content" }, hAsync("slot", { key: 'f1236d9047acd846d270ee17a402e87d4bda1178', name: "content" })), hAsync("slot", { key: '59ecffc8eb3e1b748fbe009a8664b799f05703e1' })));
     }
     static get style() { return MdsCardMediaStyle0; }
     static get cmpMeta() { return {
@@ -15066,10 +15192,10 @@ class MdsChip {
         this.km.detachClickBehavior('label');
     }
     render() {
-        return (hAsync(Host, { key: '7dd5ce8b32261d819fa0bcb9249e5130a5edc218', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            hAsync("div", { key: '464bdf77909e3e5845a638b0698f1ba4058cdf28', "aria-hidden": "true", class: "icon-area" }, hAsync("mds-icon", { key: '742645872d57c5c1666e9f2fecd349f055b020d3', class: "icon", name: this.icon })), this.clickable
+        return (hAsync(Host, { key: '74933ef09b9f5f46d900110ff415ae70347c9c83', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            hAsync("div", { key: '3fe3e80d2ff6544c1e4ae1534247876f5491d4fb', "aria-hidden": "true", class: "icon-area" }, hAsync("mds-icon", { key: '0fa559f7ed4c4909d4ea2c623eb29b4ccb847dfc', class: "icon", name: this.icon })), this.clickable
             ? hAsync("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : hAsync("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && hAsync("mds-button", { key: '6fd5be6ed26075cf6eb612e55126a019a0509c0c', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+            : hAsync("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && hAsync("mds-button", { key: '06c0fe6d50a4cde2f20ab9f30d4f0bbca6cef50b', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -15149,7 +15275,7 @@ class MdsDetails {
         this.km.detachClickBehavior();
     }
     render() {
-        return (hAsync(Host, { key: '9614e2cbbeecbf320831181da5165a2cd46866fe' }, hAsync("div", { key: '1afe17a23472c2a621e31d497a53b335306dae40', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, hAsync("slot", { key: '665ad16cf878150afc55749daa52bb083223bb6c', name: "icon", onSlotchange: this.onSlotChangeHandler })), hAsync("div", { key: 'b7431aa2dc87e4d953e08abecb80d72397558e4c', class: "content" }, hAsync("header", { key: '142622df46b291a20963c3d1c97d0d6fbf20f92f', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, hAsync("div", { key: 'd32359db6216bf25774b842444021c233487a443', class: "title" }, hAsync("slot", { key: '3d2df7c901a215dd9d272ffb6fdc25a9b72f7261', name: "title" })), hAsync("i", { key: '5f310f2ceb2fe7f97ca0951ba99c1b975e15af82', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowDown })), hAsync("div", { key: '4f78adbdd09b9dfb16fa5fb5375a28b14da9600b', class: clsx('details', this.isOpened && 'opened') }, hAsync("div", { key: 'f1772f0b58c1f7c285c69ba01f2a039eebdb936d', class: "content-expander", part: "content" }, hAsync("slot", { key: '6e6036c45a73e6d102c79ab50954444b49118449' }), hAsync("div", { key: '4b3c2145ff7e65f4716ed5745014aacd579f2347', class: "actions" }, hAsync("slot", { key: '55c50cd1c76823af992ea5a22704bf42a417b574', name: "action" })))))));
+        return (hAsync(Host, { key: 'd6184cacb2170c6c13d221199c13b52f282a2230' }, hAsync("div", { key: 'aa7a8d55a1baeee4dbbdccc7ccd6b0a0c1bf7599', class: clsx('icon', this.hasIcon ? '' : 'icon--hidden'), onClick: this.toggle }, hAsync("slot", { key: 'a355f1df6eb85fb599885c2762949823d86f16d8', name: "icon", onSlotchange: this.onSlotChangeHandler })), hAsync("div", { key: '3035feb250fb7c8a963d1578ef79e701edbfe306', class: "content" }, hAsync("header", { key: 'e9449d592fcc69356af4030b98150ca02a2a6059', class: "header", part: "header", tabindex: "0", onClick: this.toggle }, hAsync("div", { key: 'ca44725f199e7591f59d6415f6cabd5bbf233dc7', class: "title" }, hAsync("slot", { key: '40f0e20b99b36c15be9843402b7986c96e6de25d', name: "title" })), hAsync("i", { key: '294dde9c5bd6dc5d8d855ea77a733e4c40cf3dd2', class: clsx('helper-icon', this.isOpened && 'opened'), innerHTML: miBaselineKeyboardArrowDown })), hAsync("div", { key: 'efb1acceefa5dcad28c05243c244062bbd959614', class: clsx('details', this.isOpened && 'opened') }, hAsync("div", { key: '05fad0bbd7dd9070e2f544ab74f98e2732a5107e', class: "content-expander", part: "content" }, hAsync("slot", { key: 'f772008113a771c1be4eb9a188bc5b4d8c2a03f6' }), hAsync("div", { key: '5385226217cf9ecb12e3b4143574eab79087e8b5', class: "actions" }, hAsync("slot", { key: '27ce04a70a4c7a412a08401b57d5f73377f21f86', name: "action" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -17687,9 +17813,9 @@ class MdsDropdown {
         this.km.detachEscapeBehavior();
     }
     render() {
-        return (hAsync(Host, { key: 'd1da570558e373c58fd8806494d50903705f3975', style: {
+        return (hAsync(Host, { key: '611b52d0d95b82ff0a15418a2912436aa8036a25', style: {
                 zIndex: `${this.zIndex}`,
-            } }, hAsync("div", { key: '08ca7259305dbb9dfcf979b6f4e65701187ea65f', class: "arrow", innerHTML: arrowSvg$1 }), hAsync("slot", { key: 'cafea12f69617beda65ae7653804d03a39f3ffa7' })));
+            } }, hAsync("div", { key: '438608dea4c704636a0ebb60d77403a55820972c', class: "arrow", innerHTML: arrowSvg$1 }), hAsync("slot", { key: '72b92abf8d288c0ae4dbb606c23ff9bfc274cf78' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -24154,7 +24280,7 @@ class MdsEmoji {
         window.removeEventListener('mousemove', this.handleFollowMouse);
     }
     render() {
-        return hAsync(Host, { key: '27445bb72a3b9356d04c9f750659e340c55df645' }, this.name === 'hexabot' && (hAsync("svg", { key: 'dc5b2458b8d81a2442a17ab78977872d1e38980d', ref: el => (this.emojiEl = el), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '1fcbc98434f91dde73cd07d0949fa204054f77b1', class: "head", ref: el => (this.headEl = el), d: this.headGeometry.hexagonRounded, fill: "black" }), hAsync("path", { key: '83e37976089c0178c1fae60afbebc69c095c58ba', class: "eye", ref: el => (this.eyeLeftEl = el), d: this.eyeLeftGeometry.open, fill: "white" }), hAsync("path", { key: 'b269ce64bf75a48edcfda40ce43148e96aa01040', class: "eye", ref: el => (this.eyeRightEl = el), d: this.eyeRightGeometry.open, fill: "white" }), hAsync("path", { key: '181b23f8bfe386eb904b03a2c701dc8afc897214', class: "mouth", ref: el => (this.mouthEl = el), d: this.mouthGeometry.smile, fill: "white" }), hAsync("path", { key: '97f3ab4d10088161dee6c9e577815cb38ac5cbd0', class: "hand", ref: el => (this.handLeftEl = el), d: this.handLeftGeometry.think, fill: "white" }))));
+        return hAsync(Host, { key: '426c2dbb4cb80336f8897c8ae70049d3deef5a3b' }, this.name === 'hexabot' && (hAsync("svg", { key: 'f9ce19561efca4aebf8149aa74e08afe74cc3e9c', ref: el => (this.emojiEl = el), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'f240afd90d41d7581678cf524ef91d0738954821', class: "head", ref: el => (this.headEl = el), d: this.headGeometry.hexagonRounded, fill: "black" }), hAsync("path", { key: '6a8e51ad759a6db9fb97723d287a0fa4bde2db10', class: "eye", ref: el => (this.eyeLeftEl = el), d: this.eyeLeftGeometry.open, fill: "white" }), hAsync("path", { key: '737dceb5d0f2e03097b9745d823f7f71f5a467c6', class: "eye", ref: el => (this.eyeRightEl = el), d: this.eyeRightGeometry.open, fill: "white" }), hAsync("path", { key: 'cb7132bdb42a7cd33218de1eeb7be5f620c104ba', class: "mouth", ref: el => (this.mouthEl = el), d: this.mouthGeometry.smile, fill: "white" }), hAsync("path", { key: '3f04aa7216b868422217406347d85c6ef55e667d', class: "hand", ref: el => (this.handLeftEl = el), d: this.handLeftGeometry.think, fill: "white" }))));
     }
     get host() { return getElement(this); }
     static get style() { return MdsEmojiStyle0; }
@@ -24212,10 +24338,10 @@ class MdsEntity {
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (hAsync(Host, { key: 'cfd85b00824cadeb2bfec79d882245da68f701ea' }, hAsync("div", { key: '79b7d8cfc266afc9038097b599688c43e20d5147', class: "spinner", part: "spinner" }, hAsync("mds-spinner", { key: 'd0a82d4f9109a19e9298bdebfa37b16d6d1a4d8f', running: true })), this.checkAvatar() &&
-            hAsync("mds-avatar", { key: '656e4ed33bde9f84e8d2c7d35c45b08b1cd745d9', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" }), hAsync("div", { key: '26d617f56a8eba8008ef7f0a8fcde6d1e2d4a4ac', class: "infos" }, hAsync("slot", { key: 'f888a79c15751a0a5779b366c16dbfd042910512' }), this.details &&
-            hAsync("div", { key: 'a35c706ecef07339731134b1505f181c77bfc741', class: "details" }, hAsync("slot", { key: 'a344fbfebcd221378c8f578f320d9535666673e8', name: "detail" }))), this.actions &&
-            hAsync("div", { key: 'c951b6f3bd800e95f32e860a1debf479757c5a6f', class: "actions" }, hAsync("slot", { key: '9989dfecd6c28f61d32dc52be477b0e18a71b41f', name: "action" }))));
+        return (hAsync(Host, { key: '8a36994c8dba823ded1073269f7daba8761fb74c' }, hAsync("div", { key: 'ff0fe77bfc04bfbc80028ddedbdfdf16ba1e76a5', class: "spinner", part: "spinner" }, hAsync("mds-spinner", { key: '16708efad1581c6be3f522e30fadf67dced790b2', running: true })), this.checkAvatar() &&
+            hAsync("mds-avatar", { key: 'f175454b831126d2efaa021748e4f5da7d1fb827', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" }), hAsync("div", { key: '55431edca0683dbae25d19b538185e1c74552ca2', class: "infos" }, hAsync("slot", { key: 'c79cf3176f50bee9cae1653b8271d665b001355e' }), this.details &&
+            hAsync("div", { key: '0ab6bab732c454d92305f9c4d3cdaa5f3b670bd4', class: "details" }, hAsync("slot", { key: 'f7bc347f5f5ff968220d0d572c6758624db8283f', name: "detail" }))), this.actions &&
+            hAsync("div", { key: '062cc22d512b0298b3bbd71b435ed47e06e9fe18', class: "actions" }, hAsync("slot", { key: '9ac39cd0db729de640ef90b4c48b2bb59fe416e5', name: "action" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return MdsEntityStyle0; }
@@ -32049,10 +32175,10 @@ class MdsFile {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: '98164a90398e0d806e0670b4340d0561603f9136', tabindex: "0", onClick: this.handleOnClick }, hAsync("div", { key: 'aecf3480d6cbbf362579d657e19e83c94efa41c3', class: "preview" }, this.preview !== undefined
+        return (hAsync(Host, { key: '0bb5dc19b383951d7fbc1327628fc243a44df46f', tabindex: "0", onClick: this.handleOnClick }, hAsync("div", { key: '6db2f755dbe8a7bcb32408b2f432fa8c21bf8ffb', class: "preview" }, this.preview !== undefined
             ? hAsync("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })
-            : hAsync("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), hAsync("div", { key: 'fda6deb724c9de6a6026682741403118c21a5ea7', class: "info" }, hAsync("div", { key: 'c0a75cddb21deaad91ade553996c212676dfd78c', class: "filename", title: this.filename }, hAsync("mds-text", { key: '18379a4576df47772387ed6a7b166b5477c56747', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && hAsync("mds-text", { key: '49a7b61565e18930954d7cbb669747ad51d8b20d', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), hAsync("div", { key: '39a5744eda874b5b5f983b17791f6c366e5b9ff2', class: "detail" }, getSuffix(this.filename, this.suffix) && hAsync("mds-badge", { key: 'f5898dbc6fb1fa770acde22a473cd163dff5accd', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), hAsync("mds-text", { key: 'e715745896c8ffb973271fae88bbbed23036190a', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
-            hAsync("div", { key: '67fc181b52fa0cbedc2e0e35ee1def88222815e8', class: "indicator" }, hAsync("i", { key: 'ee1d101f49d8925c11d1dccc91d480a6d84daab4', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
+            : hAsync("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), hAsync("div", { key: '490831c841387780442520bca2411987013197c9', class: "info" }, hAsync("div", { key: 'bb3cb62007b8b92885c78ebc2ff1189996f6cca2', class: "filename", title: this.filename }, hAsync("mds-text", { key: 'c51ab1c69ebcc754d99acffe402f30df11368b70', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && hAsync("mds-text", { key: '0a8ad649ed9292ce4e9c38ac0debe6826d302d75', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), hAsync("div", { key: '7b87440b745f63583164e99802c01a770f545a82', class: "detail" }, getSuffix(this.filename, this.suffix) && hAsync("mds-badge", { key: 'a2d422ba97d0d89bedbd597871df41af2381ddf0', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), hAsync("mds-text", { key: '2e9534a1bae77749db33258609fafc27d1cf69a6', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
+            hAsync("div", { key: '893d59f13b76e6d45489c278e312624b166ceab9', class: "indicator" }, hAsync("i", { key: 'ff428c5087baa52839e4094d517a76fee8d16ceb', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -32343,11 +32469,11 @@ class MdsFilePreview {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: '0710d30368cdde1184606c5faa805cdd0bb9054a' }, this.deletable && hAsync("mds-button", { key: '366d3fe7de6e92b3bf8c0be6736666b593ec16cb', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), hAsync("div", { key: 'a9c09b7749ea1f63e8cb4ee2e5383bfc9ae0d1b3', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
+        return (hAsync(Host, { key: 'c19f52934f1fa591d71175d1a0a584c0e9d0bd92' }, this.deletable && hAsync("mds-button", { key: '89ea5ca40b769a2be0fd1a85a647c76cfec19d1a', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), hAsync("div", { key: '4549aaf3814a0b76176ba5ff7c661ccb8459f537', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
             ? hAsync("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })
             : hAsync("div", { class: clsx('preview', !this.message ? 'preview--icon' : 'preview--status') }, this.icon
                 ? hAsync("mds-icon", { class: "icon", name: this.icon })
-                : hAsync("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && hAsync("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), hAsync("mds-text", { key: 'e2f1c6aca7f7e98f66d89aea9c53610ab9300f95', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), hAsync("footer", { key: '3535084a42e1ad9f62c57ac54032a479f3a34463', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && hAsync("mds-text", { key: '79c2bccab6b0740730193a54551a264beac1d772', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && hAsync("mds-text", { key: '143a603b4d3d974e3f93a06d3e2771a723a257d3', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && hAsync("mds-badge", { key: '39c15b38bc2c5d92151b299f4f93095e9fd17f4e', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix)), !this.filesize && hAsync("mds-text", { key: '646a25849f8188fb5ac60cfeac9d0977ecd9f806', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription()))))));
+                : hAsync("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && hAsync("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), hAsync("mds-text", { key: 'b65a6b6b3dff0c40cda7493fede3e906ec2a39bb', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), hAsync("footer", { key: '9a3ab25be54faa5d535eaaf4449985090aa5a9ea', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && hAsync("mds-text", { key: '4c975b0c31a93568e2776ec71778a117d5eeeb66', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && hAsync("mds-text", { key: '98912a75f1d391ec5ef30ddb122c71750a21dff2', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && hAsync("mds-badge", { key: 'e4985c4617aa81233dbb48dfa774c809e62f8384', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix)), !this.filesize && hAsync("mds-text", { key: '180c16a686a3b627279388fd0f5f001bded84b65', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription()))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -32475,7 +32601,7 @@ class MdsFilter {
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (hAsync(Host, { key: '5e8605b02237f9249889191d54ae4246652c92d2', "aria-label": this.label, role: "menubar" }, this.label && hAsync("mds-text", { key: '4d4ee003acd78cbc9a87e2ac9dba5f0aa3481530', class: "label", typography: "label" }, this.label), hAsync("div", { key: '211a57862ff7facadb36b0fc74d82cc2b93c7764', class: "items-wrapper" }, hAsync("div", { key: '99fbbc2e399a0a217a79e453c27e4277bb247721', class: clsx('items', this.active && 'active') }, hAsync("slot", { key: '3803d540618c02719130c4fc44b208190962e3e1' }), hAsync("div", { key: 'd516841b2efe68e2e603099223c6eb0e7d1e5377', class: clsx('reset', this.active && 'reset--opened') }, hAsync("mds-filter-item", { key: 'e9b5c15cd2199d855007a617be24948d16e84fbf', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
+        return (hAsync(Host, { key: '2dcf168d8cd1db1f50e0162bf18c63f96e260ced', "aria-label": this.label, role: "menubar" }, this.label && hAsync("mds-text", { key: '88a354f4000f4c12b3da275969ee394d7943c6ff', class: "label", typography: "label" }, this.label), hAsync("div", { key: '9dd4279f939b7dea4213dbebcbf93d46c650f6e8', class: "items-wrapper" }, hAsync("div", { key: '51f5aa8ce8baf80de5890354e7a12ffb8dd68c23', class: clsx('items', this.active && 'active') }, hAsync("slot", { key: '7ed3b110e0c0e2025bdfe224cf4c50aaae8ef4c9' }), hAsync("div", { key: '4ee1483f268903dae707a604c857441bbaf15509', class: clsx('reset', this.active && 'reset--opened') }, hAsync("mds-filter-item", { key: '7be06d770241ae01527c798a1e7958e6a90971b9', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
     }
     get element() { return getElement(this); }
     static get style() { return MdsFilterStyle0; }
@@ -32518,7 +32644,7 @@ class MdsFilterItem {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '2c895fbc29ea9a0a3821a0dc60dee5dea65ab6cd', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && hAsync("mds-icon", { key: 'a4bc5acb9550092fa6fdea9004a602c6e3912b7a', "aria-hidden": "true", name: this.icon }), this.label && hAsync("mds-text", { key: '14d86de48ed76faeee001c5d4a7077b1997693a1', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label), this.count && hAsync("div", { key: '8fb24204fd2f30917f5041fda4e92c1271877294', class: "count" }, hAsync("mds-text", { key: '2a282fdf25234f0e07c3be767408967070d2d33a', "aria-hidden": "true", variant: "info", typography: "option" }, this.count))));
+        return (hAsync(Host, { key: 'cce4de5afd4da30374952cbbc4c6b694757d3d5f', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && hAsync("mds-icon", { key: 'b03f521485192a0149f70b83730988214dd304d6', "aria-hidden": "true", name: this.icon }), this.label && hAsync("mds-text", { key: '5fa46497d02b5e05b056cdea546d1b9d9eecc3af', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label), this.count && hAsync("div", { key: '9cdc8d67fcb81c58db3943dec77709fba4a03e3b', class: "count" }, hAsync("mds-text", { key: 'b402310eb0d4043987776008c6584ed95b8e8e7d', "aria-hidden": "true", variant: "info", typography: "option" }, this.count))));
     }
     get element() { return getElement(this); }
     static get style() { return MdsFilterItemStyle0; }
@@ -32720,8 +32846,8 @@ class MdsHeader {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ed4faa9268044cc9b6046ff39cda66f7553a0043' }, this.backdrop && hAsync("div", { key: 'bb88d582b85506376e70e623c5d536392737eac7', class: "backdrop" }), hAsync("slot", { key: '3e3b3b5b19de464572e1a2f1ac3be1b810c41af6' }), this.hasMenu &&
-            hAsync("div", { key: '9bd8c9c2e49b2b2b5df5c6aa69e065a628e1508e', class: "menu", part: "menu" }, hAsync("mds-modal", { key: '50de497869acb91e1a3df249c48063aa1a999ad0', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, hAsync("slot", { key: '0d8173ec63daaf17959d2aaec7ffbfbfab9daa24', name: "menu" })))));
+        return (hAsync(Host, { key: '5f7a197284f180ab816c563e388a7f8e521e1f05' }, this.backdrop && hAsync("div", { key: 'e02d7329e0556d2cee684004faeefcfedf764fcc', class: "backdrop" }), hAsync("slot", { key: '4ed32166f6ace18694cb3f060a6a23c22abc5771' }), this.hasMenu &&
+            hAsync("div", { key: 'ee646a278ebeff78208618be2a601a3c0f62d651', class: "menu", part: "menu" }, hAsync("mds-modal", { key: 'e29e93cd02bd159d4dee010648f8a919140fbb6a', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, hAsync("slot", { key: '2910bffcf16ace95aead03ac16a358599f3f5b06', name: "menu" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -32791,9 +32917,9 @@ class MdsHeaderBar {
         this.isOpened = isOpened;
     }
     render() {
-        return (hAsync(Host, { key: 'f8dff045e6be9b205bbee68f373ae90ad6f74709' }, hAsync("div", { key: 'c8d0ab25b9ef9c65c95ab7d637f398716a9ccd69', class: "content", part: "content" }, hAsync("div", { key: '8f638de0bc8f252412960300bcbd08eb4507eb97', class: "logo" }, hAsync("slot", { key: 'a663ac9cc2b1e560a3e124622a0e37ddc939f828' })), hAsync("div", { key: '769051e97bc1487231f9a604c998c555618b96c5', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav &&
-            hAsync("nav", { key: '56c2c94577457bec5f1799a3ac8b0b975cca6862', class: "nav", part: "nav" }, hAsync("slot", { key: '1eae94afa33201e1c3840d848664d36f3e93730c', name: "nav" })), this.menu !== 'none' &&
-            hAsync("mds-button", { key: '8ef11e0014ef070974fbef39824cc1ca380d0ce9', class: "menu", variant: "dark", tone: "quiet", icon: miRoundMenu, onClick: this.open, part: "hamburger" })))));
+        return (hAsync(Host, { key: '4f05a5967beb2dc2176612fd9a1c4c762d732d36' }, hAsync("div", { key: 'd0a9f9d2f21b4f1ec90d843662ddee100d4a8224', class: "content", part: "content" }, hAsync("div", { key: '95dba7bda54e9615745c1dbce97877d6c270dfd7', class: "logo" }, hAsync("slot", { key: '928754982fc5c8037dda2e96d1b13737681d9229' })), hAsync("div", { key: 'b323873b3ab16269815bbc3c8f01299981fcb684', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav &&
+            hAsync("nav", { key: '72788eba14482c7cb1020016094526370e333609', class: "nav", part: "nav" }, hAsync("slot", { key: '6b46a30da15b1960770192f161e8c2c8fcd4dd97', name: "nav" })), this.menu !== 'none' &&
+            hAsync("mds-button", { key: '88abd41f054df676ab99e597f172978ef3883bc8', class: "menu", variant: "dark", tone: "quiet", icon: miRoundMenu, onClick: this.open, part: "hamburger" })))));
     }
     get host() { return getElement(this); }
     static get style() { return MdsHeaderBarStyle0; }
@@ -32834,7 +32960,7 @@ class MdsHelp {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '8348457632144e166c3c38d2fd42a13925ba0ec4' }, hAsync("mds-icon", { key: '7b22740b418103eeb49af85a999eb0dfb3766029', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), hAsync("mds-tooltip", { key: 'c148617c3e44b8265be5c973683c365f2eefa460', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, hAsync("slot", { key: '04c9543ea769febd6b68c06a3a4831525063f7c9' }))));
+        return (hAsync(Host, { key: 'cedc4c6783cfb2c6f04753bdefeb1b9c57d86992' }, hAsync("mds-icon", { key: '6af5953d71ffe22953d3dda415a8ca09308200d2', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), hAsync("mds-tooltip", { key: 'c9909f51bae689166b9022e7de240cf53abd92cf', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, hAsync("slot", { key: '11d356840cabae0abd371f63108e2362fde4acd7' }))));
     }
     static get style() { return MdsHelpStyle0; }
     static get cmpMeta() { return {
@@ -33049,7 +33175,7 @@ class MdsHorizontalScroll {
         this.contents.removeEventListener('scroll', this.translateNavigationDot);
     }
     render() {
-        return (hAsync(Host, { key: 'b65cd5aef21f81cf9c660b9e16ee0742033b0522' }, hAsync("div", { key: '957de53a7aeee4ddb820288c54fe4b976b74bac9', class: "contents", part: "content" }, hAsync("div", { key: '385e764035e30f5e0d656c700198de314eb87a8d', class: "spacer" }), hAsync("slot", { key: '85fff563ccf060e4fc590faf05595a79dbd87d57', onSlotchange: this.updateElements }), hAsync("div", { key: '181ee99f3e0d61f4c1062dec205632f0b9d287fc', class: "spacer" })), hAsync("div", { key: 'd575c09eab0fa7e5d08e0fcb720d1740035cf38d', class: "dot-navigation" }, hAsync("div", { key: '403830bc1cca796930ae5da665f9f3d3a206c7b9', class: "dot" })), this.controls && this.controls !== 'none' && hAsync("mds-button", { key: '47befe2f2aa6522819c7ff80b3385ab574ce6c30', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack }), this.controls && this.controls !== 'none' && hAsync("mds-button", { key: '3bcdf715858fbed99e63957506f751e5188f4a53', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward })));
+        return (hAsync(Host, { key: 'eb238b7afa371c9588db89fc1a721dbefef6d52e' }, hAsync("div", { key: '70bc5033b4f8b36b2bbde1b1a2aac2f3d2db99de', class: "contents", part: "content" }, hAsync("div", { key: 'a13f42f412af0d5c5a0dbfc579cd09b44407d591', class: "spacer" }), hAsync("slot", { key: '8193210041eee84c0486bed982733e50d7c6216f', onSlotchange: this.updateElements }), hAsync("div", { key: '374bf2c6b6862b25c1ccad086eaa6d0ee88c2f8f', class: "spacer" })), hAsync("div", { key: '73c9253ac43b706ea7e5793755b431739a82c4f7', class: "dot-navigation" }, hAsync("div", { key: '604b8d2bddb159d35cd69c6cadd33fa879cf1132', class: "dot" })), this.controls && this.controls !== 'none' && hAsync("mds-button", { key: '75491ac6071cebaa6452e82ddbd7bdd6e9383bd1', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack }), this.controls && this.controls !== 'none' && hAsync("mds-button", { key: '99ce389ee2f28dbeafbc740639f9b9f67f3307e5', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -33081,7 +33207,7 @@ class MdsHr {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'cc9708f0bbede0b64897ded6362a273781ac97c4' }));
+        return (hAsync(Host, { key: '1feeafb202973ecfbc1964d97f6c4689c71fbc01' }));
     }
     static get style() { return MdsHrStyle0; }
     static get cmpMeta() { return {
@@ -33388,7 +33514,7 @@ class MdsIcon {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (hAsync(Host, { key: 'b64516e083273f19955d483ace9a7bf2b8c25903' }, this.svgHTML && hAsync("i", { key: 'e9e61853cb3895c0e291f39358d9ab545cb3cfa6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (hAsync(Host, { key: '43b9527b1f2650abead16b06c90286fea09adb34' }, this.svgHTML && hAsync("i", { key: '8527fafd0f60b6aa32a2d8e35cd33e9d2403d7b5', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -34198,21 +34324,21 @@ class MdsInput {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: '35c2ab35ec7761a4704f04eb660be93492de7672' }, this.type === 'number'
+        return (hAsync(Host, { key: 'ebbe46c4c882755da77b567e1f13fc97c07e2513' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && hAsync("mds-button", { key: 'cf2fe92bdb18e8eb62499aff789888bd29baf248', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && hAsync("mds-button", { key: '0158cfb2383b201582346182d4e091d7a4335aaa', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? hAsync("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : hAsync("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && hAsync("div", { key: 'b1143910c3612421b69ebe9a70db755d03c0c633', class: "counter counter--vertical" }, hAsync("mds-button", { key: '9b37d4cb10284697cffbc4158b6d9896e24c28c3', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), hAsync("mds-button", { key: '2da5ac1d379d52bb86baf345b632ac1d07adfbcc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && hAsync("div", { key: 'f45f2154fc54ca72cc21a2d961bd2bd20d4efd78', class: "counter counter--vertical" }, hAsync("mds-button", { key: '5d854eca0c1c4a76a635830cc818902ccf291852', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), hAsync("mds-button", { key: '2617f16ee356d1b2e1a8908c9aa462f066dc1f0a', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && hAsync("mds-button", { key: '5cc396eaee3ad5ffcd88f6b29f611a7964f610b8', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && hAsync("mds-button", { key: 'cc00dcade25b03f409259915e3b5f6e5a2455f86', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && hAsync("mds-button", { key: '54a50f335ccddfd1a9eaed43d022cfabdbfe9cec', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), hAsync("mds-input-tip", { key: '80f7c4c48c5af44ca38a53fa5ad979787effd64b', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && hAsync("mds-input-tip-item", { key: '96b7685242f4553ee779632714e76370bdfc2fb8', expanded: true, variant: "disabled" }), this.readonly && hAsync("mds-input-tip-item", { key: '622ba54b143433de4043b24bd66071b2c2ea9252', expanded: true, variant: "readonly" }), this.required &&
-            hAsync("mds-input-tip-item", { key: '2f8a18a7c813af38db53f5454985c82b05e4a488', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), hAsync("mds-input-tip", { key: '39c14635fa94b923e7915f406414d990a6d5915c', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && hAsync("mds-input-tip-item", { key: 'b267fd5c6de684068938b8e012ca03b5feab129a', expanded: true, variant: "text" }, this.tip), this.maxlength && hAsync("mds-input-tip-item", { key: 'f9e0203c4686831dd3a713c0bc5de3b27f8ed23a', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            hAsync("datalist", { key: '257a7e6dad1352eafd5149280b2ccf425bd6cf38', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && hAsync("mds-button", { key: 'df1cf80a287bbec3ca0ab54023931fe7304adb9d', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && hAsync("mds-button", { key: 'ac5c8680a80dd3dedb363e3aaf0a11bf0c8c51f0', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && hAsync("mds-button", { key: '703c6f48c6357d3de79f305564b6c31e1ba0678b', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), hAsync("mds-input-tip", { key: '6300abd186f702372b8cc38f727896086e8f994a', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && hAsync("mds-input-tip-item", { key: 'd47cf370835d9e8c750a0950b9e86a32306d26f3', expanded: true, variant: "disabled" }), this.readonly && hAsync("mds-input-tip-item", { key: '1ff24111dc1b14da62784f3354e6f124f8741cf0', expanded: true, variant: "readonly" }), this.required &&
+            hAsync("mds-input-tip-item", { key: '4e991439eab49a60c27d44df7257212a10047ad6', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), hAsync("mds-input-tip", { key: 'eba28daea6dff97b5072f792976fced121bfc0be', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && hAsync("mds-input-tip-item", { key: 'c4154c51c86efdd1fb973ab013df3fb19880a042', expanded: true, variant: "text" }, this.tip), this.maxlength && hAsync("mds-input-tip-item", { key: '01700711312f6146c6acbd8f7cbbb5d507460626', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            hAsync("datalist", { key: '63458f5f6097dff8a67aef131de941a18cae754e', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
                 return hAsync("option", { key: i, value: element });
-            })), this.icon && !this.await && hAsync("mds-icon", { key: '85e7ff12195f5ad48eacb59e95532572ea6e14bc', class: clsx('icon', this.variant), name: this.icon }), hAsync("mds-spinner", { key: '0f35bc59f5f4a5aae941adbd3d0b8d0ddd8a1e42', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && hAsync("mds-icon", { key: '5e46fdcc469c528e1516deb07f110b208990e08d', class: clsx('icon', this.variant), name: this.icon }), hAsync("mds-spinner", { key: '19d7c3c5ac40822f72a58c8d4a8ccd93adb7cc05', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -34292,6 +34418,7 @@ class MdsInputDate {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.isSlotted = false;
+        this.empty = undefined;
         this.t = new Locale$1({
             el: {},
             en: {},
@@ -34343,12 +34470,13 @@ class MdsInputDate {
             // manage case when i insert 0 on date and default input behavior change in 01 instead of resetting all date
             if (input.value)
                 this.value = input.value;
-            this.validateValue();
+            this.validateValue(input.validity.badInput);
         };
         this.onBlur = (ev) => {
             const input = ev.target;
             this.hasFocus = false;
             this.value = input.value;
+            this.validateValue(input.validity.badInput);
         };
         this.onFocus = (ev) => {
             const input = ev.target;
@@ -34369,20 +34497,25 @@ class MdsInputDate {
         this.valueChange.emit(this.value);
         this.validateValue();
     }
-    validateValue() {
+    validateValue(hasBadInput = false) {
         const date = DateTime_1.fromISO(this.value);
-        const isInvalidDate = date.invalid;
-        const outOfRange = (this.max && DateTime_1.fromISO(this.max) < date) ||
-            (this.min && DateTime_1.fromISO(this.min) > date);
-        if ((isInvalidDate && this.required) || outOfRange) {
+        const hasValue = Boolean(this.value);
+        const hasInvalidValue = hasValue && !date.isValid;
+        const isMissingRequiredValue = this.required && !hasValue;
+        const outOfRange = date.isValid &&
+            ((this.max && DateTime_1.fromISO(this.max) < date) ||
+                (this.min && DateTime_1.fromISO(this.min) > date));
+        if (hasBadInput || hasInvalidValue || isMissingRequiredValue || outOfRange) {
             this.isValid = false;
             this.variant = 'error';
             this.internals.setFormValue(null);
+            this.empty = hasBadInput || hasInvalidValue ? true : undefined;
         }
         else {
             this.isValid = true;
             this.variant = 'primary';
             this.internals.setFormValue(this.value);
+            this.empty = undefined;
         }
         this.validationEvent.emit(this.isValid);
     }
@@ -34417,10 +34550,9 @@ class MdsInputDate {
         this.validateValue();
     }
     render() {
-        return (hAsync(Host, { key: '6f98a43d84a87d7e0540331a3f7d37bbf4eca633' }, hAsync("input", { key: 'ec75ae2fd091ee48a4f965057e2b2ae1b3ecddd4', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && hAsync("mds-button", { key: '6c7ea4d660fa79b2ba681d255ab48a6d8a0015a9', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
+        return (hAsync(Host, { key: '52c3166d9b5401776ff61e0e535571896a9d6ba8', empty: this.empty }, hAsync("input", { key: 'a4f3f1c9c3602bb977677aa3063f2968c70adf33', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (hAsync("div", { key: 'e002daf5efa4367d1519acfb566ce4faf61d4fcd', class: "action-open-calendar-wrapper" }, hAsync("mds-button", { key: 'e9c6f3191dc6fcb226a3f08d8526d44900816ba5', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, onClick: () => {
                 this.calendarKey += 1;
-            } }), hAsync("mds-input-tip", { key: 'ebbc8300462052aa8bac94a9ac7f66fc96852a0b', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && hAsync("mds-input-tip-item", { key: '54a9dd6905b25759f13fd625a9e64b0e41152e04', expanded: true, variant: "disabled" }), this.readonly && hAsync("mds-input-tip-item", { key: 'ecd6bfc83bda3ee8faeb9a990fc6886ab45f0f8d', expanded: true, variant: "readonly" }), this.required &&
-            hAsync("mds-input-tip-item", { key: 'e5b890f827a7a17b58d075bd4f500d208a512512', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), !this.isSlotted && hAsync("mds-dropdown", { key: '34a37a18aea7c9e9476fc660229d3bec208ec8c9', placement: "bottom-end", "auto-placement": false, ref: el => this.dropdownRef = el, target: "#calendar-dropdown" }, hAsync("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
+            } }))), hAsync("mds-input-tip", { key: 'b4a4308288531dfb0d3b890393d5243b4687d459', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && hAsync("mds-input-tip-item", { key: '4bc411c37bb5da3465443b72db0c7915c5bb5afd', expanded: true, variant: "disabled" }), this.readonly && hAsync("mds-input-tip-item", { key: '6ba171f9f821354bcfbd7d9e8574dd5681a30a9b', expanded: true, variant: "readonly" }), this.required && (hAsync("mds-input-tip-item", { key: '4f69ccf812baee84c9831f9ce3ac57d74f8a7038', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (hAsync("mds-dropdown", { key: '79f6ffd4fe2f708c9786904406e700c921200356', placement: "bottom-end", "auto-placement": false, ref: el => (this.dropdownRef = el), target: "#calendar-dropdown" }, hAsync("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: ev => {
                 this.value = ev.detail.startDate;
                 if (this.delay === 0)
                     return;
@@ -34430,7 +34562,7 @@ class MdsInputDate {
                         dropdownRef.visible = false;
                     }, this.delay);
                 }
-            }, startDate: this.value }, this.min ? { min: this.min } : {}, this.max ? { max: this.max } : {})))));
+            }, startDate: this.value }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -34451,6 +34583,7 @@ class MdsInputDate {
             "disabled": [516],
             "readonly": [516],
             "required": [516],
+            "empty": [32],
             "isValid": [32],
             "language": [32],
             "touched": [32],
@@ -34496,13 +34629,12 @@ var localeIt$m = {
 	to: to
 };
 
-const mdsInputDateRangeCss = ":host{--mds-input-date-range-background:rgb(var(--tone-neutral));--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 0.5rem;--mds-input-date-range-icon-color:var(--mds-input-date-range-variant-color);--mds-input-date-range-ring:0 0 0 1px rgb(var(--mds-input-date-range-variant-color) / 0.1);--mds-input-date-range-shadow:0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color) / 0.06);--mds-input-date-range-variant-color:0 0 0;min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;color:rgb(var(--tone-neutral-02));container-type:inline-size;cursor:text;display:-ms-flexbox;display:flex;overflow:visible;position:relative}.date-preselection{display:grid;gap:0.5rem}.inputs{font-family:'Roboto Mono', 'Courier New', monospace;font-size:0.875rem;line-height:1.25rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0rem;border-radius:0.5rem;padding-left:1rem;padding-right:3rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-input-date-range-background);border:0;-webkit-box-shadow:var(--mds-input-date-range-ring), var(--mds-input-date-range-shadow);box-shadow:var(--mds-input-date-range-ring), var(--mds-input-date-range-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--mds-input-date-range-fields-gap);min-height:3rem;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:100%}.input-element{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex}:host(:focus-within) .inputs{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-range-ring:0 0 0 3px rgb(var(--mds-input-date-range-variant-color) / 1);--mds-input-date-range-shadow:0 4px 6px 3px rgb(var(--mds-input-date-range-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-range-variant-color) / 0.06)}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host() ::slotted(mds-input-date){color:inherit}.date-label{margin-left:0.125rem;margin-right:0.125rem;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content;white-space:nowrap}.date-label:first-child{margin-left:0}mds-calendar{min-width:-moz-max-content;min-width:-webkit-max-content;min-width:max-content}.action-open-calendar{--mds-button-color:rgb(var(--mds-input-date-range-icon-color));aspect-ratio:1;bottom:0;position:absolute;right:0;top:0}mds-dropdown{padding:0}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}@supports (-moz-appearance: none){.action-open-calendar{display:none}.inputs{padding-right:1rem;-ms-flex-pack:var(--mds-input-date-range-fields-firefox-justify-content);justify-content:var(--mds-input-date-range-fields-firefox-justify-content)}}:host{--mds-input-date-range-icon-color:var(--variant-primary-03);--mds-input-date-range-variant-color:0 0 0}:host(:focus-within){--mds-input-date-range-variant-color:var(--variant-primary-04)}:host([variant=\"info\"]){--mds-input-date-range-icon-color:var(--status-info-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"info\"]:focus-within){--mds-input-date-range-icon-color:var(--status-info-04);--mds-input-date-range-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-date-range-icon-color:var(--status-success-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"success\"]:focus-within){--mds-input-date-range-icon-color:var(--status-success-04);--mds-input-date-range-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-date-range-icon-color:var(--status-warning-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"warning\"]:focus-within){--mds-input-date-range-icon-color:var(--status-warning-04);--mds-input-date-range-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-date-range-icon-color:var(--status-error-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"error\"]:focus-within){--mds-input-date-range-icon-color:var(--status-error-04);--mds-input-date-range-variant-color:var(--status-error-05)}";
+const mdsInputDateRangeCss = ":host{--mds-input-date-range-background:rgb(var(--tone-neutral));--mds-input-date-range-calendar-width:22rem;--mds-input-date-range-fields-firefox-justify-content:start;--mds-input-date-range-fields-gap:0 0.5rem;--mds-input-date-range-icon-color:var(--mds-input-date-range-variant-color);--mds-input-date-range-ring:0 0 0 1px rgb(var(--mds-input-date-range-variant-color) / 0.1);--mds-input-date-range-shadow:0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color) / 0.06);--mds-input-date-range-variant-color:0 0 0;min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;color:rgb(var(--tone-neutral-02));container-type:inline-size;cursor:text;display:-ms-flexbox;display:flex;overflow:visible;position:relative}.date-preselection{display:grid;gap:0.5rem}.inputs{font-family:'Roboto Mono', 'Courier New', monospace;font-size:0.875rem;line-height:1.25rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0rem;border-radius:0.5rem;padding-left:1rem;padding-right:3rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-input-date-range-background);border:0;-webkit-box-shadow:var(--mds-input-date-range-ring), var(--mds-input-date-range-shadow);box-shadow:var(--mds-input-date-range-ring), var(--mds-input-date-range-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--mds-input-date-range-fields-gap);min-height:3rem;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:100%}.input-element{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex}:host(:focus-within) .inputs{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-date-range-ring:0 0 0 3px rgb(var(--mds-input-date-range-variant-color) / 1);--mds-input-date-range-shadow:0 4px 6px 3px rgb(var(--mds-input-date-range-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-date-range-variant-color) / 0.06)}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host() ::slotted(mds-input-date){color:inherit}.date-label{margin-left:0.125rem;margin-right:0.125rem;min-width:-moz-min-content;min-width:-webkit-min-content;min-width:min-content;white-space:nowrap}.date-label:first-child{margin-left:0}.calendars{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:--spacing(200);min-width:-moz-max-content;min-width:-webkit-max-content;min-width:max-content}.calendar-preselection-panel{background-color:rgb(var(--tone-neutral-09));border-radius:0.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;-ms-flex-line-pack:start;align-content:start;min-inline-size:-moz-max-content;min-inline-size:-webkit-max-content;min-inline-size:max-content;padding:1rem}.calendar-single{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:--spacing(200);min-width:-moz-max-content;min-width:-webkit-max-content;min-width:max-content}.calendar-single mds-calendar,.calendars mds-calendar{-ms-flex:0 0 var(--mds-input-date-range-calendar-width);flex:0 0 var(--mds-input-date-range-calendar-width);inline-size:var(--mds-input-date-range-calendar-width);max-inline-size:var(--mds-input-date-range-calendar-width);min-inline-size:var(--mds-input-date-range-calendar-width)}.action-open-calendar{--mds-button-color:rgb(var(--mds-input-date-range-icon-color));aspect-ratio:1;bottom:0;position:absolute;right:0;top:0}mds-dropdown{padding:0}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-date-range-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-date-range-background:rgb(var(--tone-neutral-09));--mds-input-date-range-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}@supports (-moz-appearance: none){.action-open-calendar{display:none}.inputs{padding-right:1rem;-ms-flex-pack:var(--mds-input-date-range-fields-firefox-justify-content);justify-content:var(--mds-input-date-range-fields-firefox-justify-content)}}:host{--mds-input-date-range-icon-color:var(--variant-primary-03);--mds-input-date-range-variant-color:0 0 0}:host(:focus-within){--mds-input-date-range-variant-color:var(--variant-primary-04)}:host([variant=\"info\"]){--mds-input-date-range-icon-color:var(--status-info-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"info\"]:focus-within){--mds-input-date-range-icon-color:var(--status-info-04);--mds-input-date-range-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-date-range-icon-color:var(--status-success-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"success\"]:focus-within){--mds-input-date-range-icon-color:var(--status-success-04);--mds-input-date-range-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-date-range-icon-color:var(--status-warning-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"warning\"]:focus-within){--mds-input-date-range-icon-color:var(--status-warning-04);--mds-input-date-range-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-date-range-icon-color:var(--status-error-05);--mds-input-date-range-variant-color:0 0 0}:host([variant=\"error\"]:focus-within){--mds-input-date-range-icon-color:var(--status-error-04);--mds-input-date-range-variant-color:var(--status-error-05)}";
 var MdsInputDateRangeStyle0 = mdsInputDateRangeCss;
 
 class MdsInputDateRange {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dateRangeSelected = createEvent(this, "mdsInputDateRangeSelect", 7);
         this.valueChanged = createEvent(this, "mdsInputDateRangeValueChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
@@ -34514,6 +34646,7 @@ class MdsInputDateRange {
         this.calendarKey = 0;
         this.internalStartDate = '';
         this.internalEndDate = '';
+        this.visibleCalendarDate = '';
         this.hasPreselection = false;
         this.t = new Locale$1({
             el: localeEl$l,
@@ -34546,10 +34679,16 @@ class MdsInputDateRange {
          * @description Default is 500
          */
         this.delay = 500;
+        /**
+         * Enables the linked dual-calendar range picker behavior.
+         */
+        this.dualCalendar = false;
         this.lastEmittedStartDate = null;
         this.lastEmittedEndDate = null;
         this.initialStartDate = '';
         this.initialEndDate = '';
+        this.hoveredCalendarDate = null;
+        this.syncingInputSlots = new Set();
         this.handleFocusOut = (event) => {
             if (!this.host.contains(event.relatedTarget)) {
                 const startValid = DateTime_1.fromISO(this.internalStartDate).isValid;
@@ -34557,20 +34696,8 @@ class MdsInputDateRange {
                 if (startValid && endValid) {
                     this.validateDateRange();
                     this.syncFormValue();
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
                     this.checkPreselections();
-                }
-                if (this.internalStartDate !== this.lastEmittedStartDate ||
-                    this.internalEndDate !== this.lastEmittedEndDate) {
-                    this.valueChanged.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    this.lastEmittedStartDate = this.internalStartDate;
-                    this.lastEmittedEndDate = this.internalEndDate;
+                    this.emitValueChanged();
                 }
             }
         };
@@ -34593,10 +34720,152 @@ class MdsInputDateRange {
             ev.stopPropagation();
             this.focusInput(this.host.querySelector('mds-input-date[slot="end"]'));
         };
+        this.handleCalendarHover = (ev) => {
+            if (!this.internalStartDate || this.internalEndDate) {
+                this.clearHoverPreview();
+                return;
+            }
+            const nextHoverDate = ev.detail.hoverDate;
+            if (this.hoveredCalendarDate === nextHoverDate)
+                return;
+            this.hoveredCalendarDate = nextHoverDate;
+            this.syncCalendarsHoverAttributes();
+        };
+        this.handleCalendarChange = (ev) => {
+            this.clearHoverPreview();
+            this.internalStartDate = ev.detail.startDate;
+            this.updateInputValue('start', this.internalStartDate);
+            if (ev.detail.endDate) {
+                this.internalEndDate = ev.detail.endDate;
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            else {
+                this.internalEndDate = '';
+                this.updateInputValue('end', this.internalEndDate);
+            }
+            this.syncFormValue();
+            this.syncCalendarsSelectionAttributes();
+            if (this.internalStartDate && this.internalEndDate) {
+                this.emitValueChanged();
+                this.closeDropdownAfterSelection();
+            }
+        };
+        this.handleCalendarNavigate = (ev) => {
+            if (!this.dualCalendar)
+                return;
+            const calendars = this.getCalendars();
+            const calendarIndex = calendars.indexOf(ev.target);
+            const currentDate = DateTime_1.fromISO(ev.detail.currentDate);
+            if (!currentDate.isValid)
+                return;
+            this.visibleCalendarDate = currentDate
+                .minus({ months: calendarIndex === 1 ? 1 : 0 })
+                .startOf('month')
+                .toISODate();
+        };
     }
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    getCalendars() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar')) !== null && _b !== void 0 ? _b : []);
+    }
+    resolveVisibleCalendarDate(startDate, endDate) {
+        var _a;
+        const initialDates = [startDate, endDate]
+            .map(value => DateTime_1.fromISO(value !== null && value !== void 0 ? value : ''))
+            .filter(date => date.isValid);
+        const initialVisibleDate = (_a = initialDates[0]) !== null && _a !== void 0 ? _a : DateTime_1.now();
+        return initialVisibleDate.startOf('month').toISODate();
+    }
+    getCalendarViewDate(monthOffset = 0) {
+        const visibleCalendarDate = DateTime_1.fromISO(this.visibleCalendarDate);
+        const startDate = DateTime_1.fromISO(this.internalStartDate);
+        let baseDate = DateTime_1.now();
+        if (visibleCalendarDate.isValid) {
+            baseDate = visibleCalendarDate;
+        }
+        else if (startDate.isValid) {
+            baseDate = startDate;
+        }
+        return baseDate.startOf('month').plus({ months: monthOffset }).toISODate();
+    }
+    setVisibleCalendarDate(date) {
+        const visibleCalendarDate = DateTime_1.fromISO(date);
+        if (visibleCalendarDate.isValid) {
+            this.visibleCalendarDate = visibleCalendarDate.startOf('month').toISODate();
+        }
+    }
+    closeDropdownAfterSelection() {
+        if (this.delay === 0)
+            return;
+        const { dropdownRef } = this;
+        if (dropdownRef) {
+            setTimeout(() => {
+                dropdownRef.visible = false;
+            }, this.delay);
+        }
+    }
+    syncCalendarsSelectionAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach(calendar => {
+            if (this.internalStartDate) {
+                calendar.setAttribute('start-date', this.internalStartDate);
+            }
+            else {
+                calendar.removeAttribute('start-date');
+            }
+            if (this.internalEndDate) {
+                calendar.setAttribute('end-date', this.internalEndDate);
+            }
+            else {
+                calendar.removeAttribute('end-date');
+            }
+        });
+        this.syncCalendarsHoverAttributes();
+    }
+    syncCalendarsHoverAttributes() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('mds-calendar').forEach(calendar => {
+            if (this.hoveredCalendarDate) {
+                calendar.setAttribute('hover-date', this.hoveredCalendarDate);
+            }
+            else {
+                calendar.removeAttribute('hover-date');
+            }
+        });
+    }
+    clearHoverPreview() {
+        if (this.hoveredCalendarDate === null)
+            return;
+        this.hoveredCalendarDate = null;
+        this.syncCalendarsHoverAttributes();
+    }
+    getEmittableDateRangeDetail() {
+        const startDate = DateTime_1.fromISO(this.internalStartDate);
+        const endDate = DateTime_1.fromISO(this.internalEndDate);
+        if (!startDate.isValid || !endDate.isValid) {
+            return null;
+        }
+        return {
+            startDate: this.internalStartDate,
+            endDate: this.internalEndDate,
+        };
+    }
+    emitValueChanged() {
+        const detail = this.getEmittableDateRangeDetail();
+        if (!detail)
+            return false;
+        if (detail.startDate === this.lastEmittedStartDate &&
+            detail.endDate === this.lastEmittedEndDate) {
+            return false;
+        }
+        this.valueChanged.emit(detail);
+        this.lastEmittedStartDate = detail.startDate;
+        this.lastEmittedEndDate = detail.endDate;
+        return true;
+    }
     handleStartDateChange(newValue) {
         this.syncExternalDate('start', newValue);
     }
@@ -34609,6 +34878,7 @@ class MdsInputDateRange {
         this.internalEndDate = this.endDate;
         this.initialStartDate = this.startDate;
         this.initialEndDate = this.endDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.internalStartDate, this.internalEndDate);
         // Se max è precedente a min, imposto max uguale a min
         if (this.min && this.max) {
             const minDate = DateTime_1.fromISO(this.min);
@@ -34620,10 +34890,11 @@ class MdsInputDateRange {
         this.syncFormValue();
     }
     disconnectedCallback() {
+        var _a;
         this.host.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     async preselect(event) {
-        var _a, _b;
         if (!this.togglePreselection) {
             this.togglePreselection = Array.from(this.host.querySelectorAll('mds-input-date-range-preselection'));
         }
@@ -34631,9 +34902,11 @@ class MdsInputDateRange {
             element.selected = false;
         });
         event.caller.selected = true;
+        this.clearHoverPreview();
         const startDate = DateTime_1.fromISO(event.start);
         if (startDate.isValid) {
             this.internalStartDate = event.start;
+            this.setVisibleCalendarDate(this.internalStartDate);
             this.updateInputValue('start', this.internalStartDate);
         }
         if (event.end !== undefined) {
@@ -34647,31 +34920,28 @@ class MdsInputDateRange {
         }
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
-        const calendar = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mds-calendar');
-        if (calendar) {
-            await calendar.updateCurrentDate(this.internalStartDate);
-            if (this.delay === 0)
-                return;
-            const { dropdownRef } = this;
-            if (dropdownRef) {
-                setTimeout(() => {
-                    dropdownRef.visible = false;
-                }, this.delay);
-            }
+        const calendars = this.getCalendars();
+        if (calendars.length) {
+            await Promise.all(calendars.map((calendar, index) => calendar.updateCurrentDate(this.getCalendarViewDate(index))));
+            this.closeDropdownAfterSelection();
         }
-        this.dateRangeSelected.emit({ startDate: this.internalStartDate, endDate: this.internalEndDate });
+        this.emitValueChanged();
         return Promise.resolve();
     }
     componentDidLoad() {
+        var _a;
         this.updateInputListeners();
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.syncFormValue();
         this.host.addEventListener('focusout', this.handleFocusOut);
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('mdsCalendarHover', this.handleCalendarHover);
     }
     formResetCallback() {
+        this.clearHoverPreview();
         this.internalStartDate = this.initialStartDate;
         this.internalEndDate = this.initialEndDate;
+        this.visibleCalendarDate = this.resolveVisibleCalendarDate(this.initialStartDate, this.initialEndDate);
         this.updateInputValue('start', this.internalStartDate);
         this.updateInputValue('end', this.internalEndDate);
         this.checkPreselections();
@@ -34679,10 +34949,12 @@ class MdsInputDateRange {
     }
     syncExternalDate(slotName, newValue) {
         const normalizedValue = newValue !== null && newValue !== void 0 ? newValue : '';
+        this.clearHoverPreview();
         if (slotName === 'start') {
             if (normalizedValue === this.internalStartDate)
                 return;
             this.internalStartDate = normalizedValue;
+            this.setVisibleCalendarDate(this.internalStartDate);
         }
         else {
             if (normalizedValue === this.internalEndDate)
@@ -34700,7 +34972,12 @@ class MdsInputDateRange {
         const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
         const input = slot === null || slot === void 0 ? void 0 : slot.assignedElements()[0];
         if (input) {
-            input.setValue(newValue);
+            this.syncingInputSlots.add(slotName);
+            input.setValue(newValue).finally(() => {
+                requestAnimationFrame(() => {
+                    this.syncingInputSlots.delete(slotName);
+                });
+            });
         }
     }
     updateInputListeners() {
@@ -34719,9 +34996,14 @@ class MdsInputDateRange {
     }
     createFocusoutListener(slotName) {
         return (ev) => {
+            if (this.syncingInputSlots.has(slotName)) {
+                return;
+            }
             const event = ev;
+            this.clearHoverPreview();
             if (slotName === 'start') {
                 this.internalStartDate = event.detail;
+                this.setVisibleCalendarDate(this.internalStartDate);
             }
             else {
                 this.internalEndDate = event.detail;
@@ -34758,34 +35040,27 @@ class MdsInputDateRange {
             });
         }
     }
+    renderCalendarPreselectionPanel() {
+        if (!this.hasPreselection)
+            return null;
+        return (hAsync("div", { class: "calendar-preselection-panel" }, hAsync("div", { class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, hAsync("slot", { name: "calendar-preselection" }))));
+    }
+    renderSingleCalendar() {
+        return (hAsync("div", { class: "calendar-single" }, this.renderCalendarPreselectionPanel(), hAsync("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))));
+    }
+    renderDualCalendars() {
+        return (hAsync("div", { class: "calendars" }, this.renderCalendarPreselectionPanel(), hAsync("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-start`, rangePicker: true, showNextButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {}))), hAsync("mds-calendar", Object.assign({ lang: this.language, key: `${this.calendarKey}-end`, rangePicker: true, showPreviousButton: false, disableMonthYearSelection: true, viewDate: this.getCalendarViewDate(1), onMdsCalendarNavigate: this.handleCalendarNavigate, onMdsCalendarChange: this.handleCalendarChange, onMdsCalendarPreselect: () => {
+                this.checkPreselections();
+            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))));
+    }
     render() {
-        return (hAsync(Host, { key: 'a0d2991f2840c21d10410d9a2759bea2140b5fb8', onClick: this.focusDateInput }, hAsync("div", { key: '42a70b643de49c02a1db422e9f7e69c4c16b5df2', class: "inputs" }, hAsync("div", { key: '9aaef7664e161099e93dcf09f70e8a12ac26cba5', class: "input-element" }, hAsync("mds-text", { key: 'd7a2f85dbd2ad2d4f2dbeefcad2d23c7062fa193', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), hAsync("div", { key: 'c430288d5850666258269faf269934c9771b62bf', class: "input-wrapper" }, hAsync("slot", { key: '3cfdeacc1c9b024ce7f5a2a306425eeaa51f1130', name: "start" }))), hAsync("div", { key: 'e8543d95071704939d879f87790f0fc711a34046', class: "input-element" }, hAsync("mds-text", { key: '125cb1e5b7fe872f353624555af070cad0da30b0', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), hAsync("div", { key: '35884f542a3ebd824dab00a514e3aec69c79ae11', class: "input-wrapper" }, hAsync("slot", { key: '74f1b59daecc34daf576297c93fff43071dccabd', name: "end" })))), hAsync("mds-button", { key: 'be0b0f4af844d95a82211330de00c3545b136da3', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
+        return (hAsync(Host, { key: '9f1d15ce17187fb4346d4a8248d9fef359235f54', onClick: this.focusDateInput }, hAsync("div", { key: '419236ee8bead4665a0164957282bcd5e7659661', class: "inputs" }, hAsync("div", { key: 'e25a78a35ab091ccf357ade3a27b646b94ec42a6', class: "input-element" }, hAsync("mds-text", { key: '7d93c5d1ee1a8c690aeb18b88607f081c3785c1e', class: "date-label", typography: "detail", onClick: this.focusStartDateInput }, this.t.get('from')), hAsync("div", { key: 'bb2b95cf1de464d9158df7aecb950af7927e7272', class: "input-wrapper" }, hAsync("slot", { key: '57cf6f4832fe383e22e5210e8d8f1584ac0a0f34', name: "start" }))), hAsync("div", { key: 'dd707a289ce5862549a1d98b3010861af2fe05ac', class: "input-element" }, hAsync("mds-text", { key: '212ba05e753f6b5f04032fc9eadbee33a66abccc', class: "date-label", typography: "detail", onClick: this.focusEndDateInput }, this.t.get('to')), hAsync("div", { key: '15cf868bb6808fd8f2bf4a8c13720e813c277d66', class: "input-wrapper" }, hAsync("slot", { key: '788d2c3ee00fd81724f1b058971a1366f3db6172', name: "end" })))), hAsync("div", { key: 'ca0c8be9804fdd2b7c4b7d17d234328182023f0b', class: "action-open-calendar-wrapper" }, hAsync("mds-button", { key: '9b4beb75e39698d2877c129b346024d785d8ba98', class: "action-open-calendar", variant: "dark", tone: "quiet", icon: miBaselineCalendarToday, id: "calendar-dropdown", onClick: () => {
                 this.calendarKey += 1;
-            } }), hAsync("mds-dropdown", { key: 'd7bd7782dbcb0f7647643d6054b5fec2947e81e9', ref: el => this.dropdownRef = el, target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, hAsync("mds-calendar", Object.assign({ lang: this.language, key: this.calendarKey, rangePicker: true, onMdsCalendarChange: ev => {
-                this.internalStartDate = ev.detail.startDate;
-                this.updateInputValue('start', this.internalStartDate);
-                if (ev.detail.endDate) {
-                    this.internalEndDate = ev.detail.endDate;
-                    this.updateInputValue('end', this.internalEndDate);
-                }
-                this.syncFormValue();
-                if (this.internalStartDate && this.internalEndDate) {
-                    this.dateRangeSelected.emit({
-                        startDate: this.internalStartDate,
-                        endDate: this.internalEndDate,
-                    });
-                    if (this.delay === 0)
-                        return;
-                    const { dropdownRef } = this;
-                    if (dropdownRef) {
-                        setTimeout(() => {
-                            dropdownRef.visible = false;
-                        }, this.delay);
-                    }
-                }
-            }, onMdsCalendarPreselect: () => {
-                this.checkPreselections();
-            }, startDate: this.internalStartDate, endDate: this.internalEndDate }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})), hAsync("div", { key: '5f94b5fef9bdca001020776e18c79875015452c7', slot: "preselection", class: clsx('date-preselection', this.hasPreselection && 'date-preselection--has-preselection') }, hAsync("slot", { key: '58524f199d07343671ffc752be0ed74d21c3f021', name: "calendar-preselection" }))))));
+            } })), hAsync("mds-dropdown", { key: '3274e94a6ae30fa2f060edeaa8f906972689af63', ref: el => (this.dropdownRef = el), target: "#calendar-dropdown", "auto-placement": false, placement: "bottom-end" }, this.dualCalendar ? this.renderDualCalendars() : this.renderSingleCalendar())));
     }
     syncFormValue() {
         var _a, _b, _c, _d;
@@ -34813,10 +35088,12 @@ class MdsInputDateRange {
             "min": [513],
             "max": [513],
             "delay": [514],
+            "dualCalendar": [516, "dual-calendar"],
             "name": [513],
             "calendarKey": [32],
             "internalStartDate": [32],
             "internalEndDate": [32],
+            "visibleCalendarDate": [32],
             "dropdownRef": [32],
             "hasPreselection": [32],
             "language": [32],
@@ -34825,7 +35102,7 @@ class MdsInputDateRange {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["startDate", "start-date"], ["endDate", "end-date"], ["min", "min"], ["max", "max"], ["delay", "delay"], ["name", "name"]]
+        "$attrsToReflect$": [["startDate", "start-date"], ["endDate", "end-date"], ["min", "min"], ["max", "max"], ["delay", "delay"], ["dualCalendar", "dual-calendar"], ["name", "name"]]
     }; }
 }