@maggioli-design-system/magma 1.11.8 → 1.12.0

package/dist/cjs/mds-button-dropdown.cjs.entry.js

@@ -37,7 +37,7 @@ const MdsButtonDropdown = class {
         this.truncate = 'word';
     }
     render() {
-        return (index.h(index.Host, { key: '05beeb73f53a32dc21b535b55ee65e60448d6f3e' }, index.h("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), index.h("mds-button", { key: '774a712ab4125f929af6a11e15c1ebdd8228d6ed', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: keyboardArrowDown.miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), index.h("mds-dropdown", { key: '12afae125c98f4e70f697f7c88aec18ced59736f', target: '.dropdown-action', part: "dropdown" }, index.h("slot", { key: '512c0b9009c4652267f1fcaf12782b3cbcac5927' }))));
+        return (index.h(index.Host, { key: '0bb4a9850fc0a03291258f0d411b50769ec01a77' }, index.h("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), index.h("mds-button", { key: '427b779bebdcf5a399b647485b26a3f271a7e813', active: this.active, autoFocus: this.autoFocus, await: this.await, class: "dropdown-action", disabled: this.disabled, href: this.href, icon: keyboardArrowDown.miBaselineKeyboardArrowDown, size: this.size, target: this.target, tone: this.tone, type: this.type, variant: this.variant }), index.h("mds-dropdown", { key: '9d20cd3ac389c3fcf6d72f39dff7a088b8d8a83b', target: '.dropdown-action', part: "dropdown" }, index.h("slot", { key: 'c366fad5c5d8d5eae317660fb26a5ee704d78b30' }))));
     }
 };
 MdsButtonDropdown.style = MdsButtonDropdownStyle0;

package/dist/cjs/mds-button-group.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsButtonGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a21b4ec16be1c58b4675a56dcddf4e3ae79dea6d' }, index.h("slot", { key: '22bf93b5f407811c994d42b77483b00a223992fb' })));
+        return (index.h(index.Host, { key: 'feac7d0149984045e05c2f9f555dcde0ee4f3882' }, index.h("slot", { key: '81f58342763cc799aab7fcc3b8bd2739b64b34ce' })));
     }
 };
 MdsButtonGroup.style = MdsButtonGroupStyle0;

package/dist/cjs/mds-button_3.cjs.entry.js

@@ -219,7 +219,7 @@ const MdsButton = class {
     }
     render() {
         this.typography = buttonSizeTypographyVariant[this.size];
-        return (index.h(index.Host, { key: '3c54ecab2250be89d7f925cd4fea6eaeea05fa1f', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, index.h("div", { key: '41edeab2fca583980ac046866f9b0b4c14268f60', class: "await" }, index.h("mds-spinner", { key: '9b7d06b88d13aa5f343f476fc7aec4aef824670b', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && index.h("mds-icon", { key: '46f069315b6006c19183b10fc5e3fdc73d2b7e09', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), index.h("mds-text", { key: '6f15cf82126c3c1e04e00eae75fc43ea657782ea', class: "text", part: "label", typography: this.typography, truncate: this.truncate }, index.h("slot", { key: '3e068fcac844e33b49afdc5dbff20bd65238136d', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && index.h("slot", { key: '0482835f6c3160521b9fe2e04ef6721d28815167', name: "notification" }), this.icon && this.iconPosition === 'right' && index.h("mds-icon", { key: '8d11f6f28287b34517b276431f7cb1d31fad9617', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
+        return (index.h(index.Host, { key: '4686bd8d7cb9225f100a4127b6a126377b518d19', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, index.h("div", { key: 'df39bb0ebb2a804af20924648169709397af2c7e', class: "await" }, index.h("mds-spinner", { key: '2815525a17ea474db3f4064a3bbdf6e953211b13', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && index.h("mds-icon", { key: 'f464e79898cfa4f68d05fefcb454c26e6088cfaf', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }), index.h("mds-text", { key: '0f30b6ca2508f8928f4fc28c6deb28e93e963db5', class: "text", part: "label", typography: this.typography, truncate: this.truncate }, index.h("slot", { key: '1d5d0ae7bcdf9abbc87ddbb4bea702971b618e9d', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && index.h("slot", { key: '0d9dca292a5cb40f51e4c517a399e85286047fc4', name: "notification" }), this.icon && this.iconPosition === 'right' && index.h("mds-icon", { key: 'f97aff53f85a69e3bd51517fb66f781123c37373', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -523,7 +523,7 @@ const MdsIcon = class {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (index.h(index.Host, { key: 'b64516e083273f19955d483ace9a7bf2b8c25903' }, this.svgHTML && index.h("i", { key: 'e9e61853cb3895c0e291f39358d9ab545cb3cfa6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (index.h(index.Host, { key: '43b9527b1f2650abead16b06c90286fea09adb34' }, this.svgHTML && index.h("i", { key: '8527fafd0f60b6aa32a2d8e35cd33e9d2403d7b5', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-calendar_2.cjs.entry.js

@@ -13,13 +13,15 @@ const miBaselineForwardIos = `<svg xmlns="http://www.w3.org/2000/svg" width="24"
 
 const miBaselineBackIosNew = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.77 3.77L16 2L6 12l10 10l1.77-1.77L9.54 12z"/></svg>`;
 
-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}";
 const MdsCalendarStyle0 = mdsCalendarCss;
 
 const MdsCalendar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.datesEmitter = index.createEvent(this, "mdsCalendarChange", 7);
+        this.navigationEmitter = index.createEvent(this, "mdsCalendarNavigate", 7);
+        this.hoverEmitter = index.createEvent(this, "mdsCalendarHover", 7);
         this.checkPreselectionsEmitter = index.createEvent(this, "mdsCalendarPreselect", 7);
         this.hasPreselection = false;
         this.currentDate = luxon.DateTime_1.now();
@@ -37,6 +39,34 @@ const MdsCalendar = class {
             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).
@@ -65,6 +95,47 @@ const MdsCalendar = class {
         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);
@@ -72,14 +143,25 @@ const MdsCalendar = class {
     handleStartDate(newValue) {
         if (newValue !== null && newValue !== '') {
             this.internalStartDate = date.sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
+            this.startDateTime = luxon.DateTime_1.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
             if (this.internalEndDate) {
-                const startDateTime = luxon.DateTime_1.fromISO(this.internalStartDate);
                 const endDateTime = luxon.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();
         }
     }
@@ -90,21 +172,48 @@ const MdsCalendar = class {
         }
         else if (newValue !== null && newValue !== '') {
             this.internalEndDate = date.sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
+            this.endDateTime = luxon.DateTime_1.fromISO(this.internalEndDate);
+            this.endDateIdentifier = this.endDateTime.toISODate();
             if (this.internalStartDate) {
                 const startDateTime = luxon.DateTime_1.fromISO(this.internalStartDate);
-                const endDateTime = luxon.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 = luxon.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 = luxon.DateTime_1.fromISO(this.viewDate.toString());
+            if (viewDate.isValid) {
+                this.currentDate = viewDate;
+            }
+        }
+        else if (this.internalStartDate) {
             this.internalStartDate = date.sanitizeISO8601Date((_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.toString());
             this.startDateTime = luxon.DateTime_1.fromISO(this.internalStartDate);
             if (this.startDateTime.isValid) {
@@ -118,40 +227,33 @@ const MdsCalendar = class {
         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 = luxon.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 {
@@ -173,25 +275,45 @@ const MdsCalendar = class {
         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 = luxon.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 = luxon.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;
@@ -218,10 +340,48 @@ const MdsCalendar = class {
             }
         }
     }
-    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 = luxon.DateTime_1.fromISO(this.internalStartDate);
+        const hoverDate = luxon.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 = luxon.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 = luxon.DateTime_1.fromISO(this.internalStartDate.toString());
@@ -243,6 +403,10 @@ const MdsCalendar = class {
         this.updateCalendar().then(() => {
             requestAnimationFrame(() => this.setDates());
         });
+        this.navigationEmitter.emit({
+            currentDate: this.currentDate.toISODate(),
+            delta,
+        });
     }
     calculateWeekDaysInMonth() {
         const startOfMonth = this.currentDate.startOf('month');
@@ -267,6 +431,17 @@ const MdsCalendar = class {
     }
     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 = date.sanitizeISO8601Date(pendingStartDate.toString());
+            this.startDateTime = luxon.DateTime_1.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
+            this.isFirstClick = false;
+        }
         const resetSelection = () => {
             this.internalStartDate = null;
             this.internalEndDate = null;
@@ -303,14 +478,16 @@ const MdsCalendar = class {
                 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 && luxon.DateTime_1.fromISO(this.startDateIdentifier) < luxon.DateTime_1.fromISO(element.getAttribute('date'))) {
+        if (this.startDateIdentifier &&
+            luxon.DateTime_1.fromISO(this.startDateIdentifier) <
+                luxon.DateTime_1.fromISO(element.getAttribute('date'))) {
             this.endDateIdentifier = element.getAttribute('date');
             this.endDateTime = dayInfo;
             this.internalEndDate = this.endDateTime.toISO().split('T')[0];
@@ -336,66 +513,6 @@ const MdsCalendar = class {
             this.checkPreselectionsEmitter.emit();
         }
     }
-    handleHover(element) {
-        var _a, _b;
-        const typedElement = element;
-        const startDate = luxon.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 = luxon.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 = luxon.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 = luxon.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;
@@ -412,7 +529,8 @@ const MdsCalendar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f8c99b009fa780f683430e40a3f9e5a0b46b30d7' }, index.h("div", { key: 'ef190bc2d84e08c6214cf8ed3143e93fb39dd8e8', class: clsx.clsx('calendar-preselection', this.hasPreselection && 'calendar-preselection--has-preselection') }, index.h("slot", { key: '80bc77b47e0aee093314222aa3c147ac57e0f494', name: "preselection" })), index.h("div", { key: '0f9a115dc3cbd9632a9b87e94ffdab78a61e9ef8', class: "calendar-view" }, index.h("nav", { key: 'cdec70c0d9263e0a7404976b1b9c9b1460f4760a' }, index.h("mds-button", { key: '19cb046b6c4a3b0935b9dc50e38a99fd98c2fe56', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "quiet", onClick: event => {
+        return (index.h(index.Host, { key: '271209054e3f86d3c167ab6f2d84c801619f7fdb' }, index.h("div", { key: '084902141f92f15f4b62ec34fc826b939f0ff05b', class: clsx.clsx('calendar-preselection', (this.showPreselection || this.hasPreselection) &&
+                'calendar-preselection--has-preselection') }, index.h("slot", { key: '986c1168978cc658b3a7409adafac5651cae7c77', name: "preselection" })), index.h("div", { key: 'bbb9882d52d1fd89758704604c3a52016535561e', class: "calendar-view" }, index.h("nav", { key: '9f993a0c44e484303716cef6530d9d95e84226a1' }, this.showPreviousButton && (index.h("mds-button", { key: 'f78027217275a9f0896fdfaa2ed99fd10064f581', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "quiet", onClick: event => {
                 if (this.currentView === 'calendar') {
                     event.stopPropagation();
                     this.changeMonth(-1);
@@ -424,19 +542,7 @@ const MdsCalendar = class {
                 else {
                     event.stopPropagation();
                 }
-            } }), index.h("div", { key: '04e4e1ca98ea00d4513f88131cae65f8f3d368ae', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && index.h("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') && index.h("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)), index.h("mds-button", { key: '596683e3960b61627fbe8d774db076e2297cd99a', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "quiet", onClick: event => {
+            } })), index.h("div", { key: 'e2916642b7072db24f8e800fb033260a9c2a3dcd', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (index.h("mds-button", { key: '112c7d69205f2c57587a4ba12ecd7b445ef66170', class: "action-month", truncate: "none", variant: "dark", tone: "quiet", onClick: this.handleMonthActionClick }, this.currentMonth)), (this.currentView === 'calendar' || this.currentView === 'years') && (index.h("mds-button", { key: '91f990cfdafb34e3983f7e375e695dce5fde11fd', class: "action-year", truncate: "none", variant: "dark", tone: "quiet", onClick: this.handleYearActionClick }, this.currentYear))), this.showNextButton && (index.h("mds-button", { key: 'd297451100785c186b8ae054fa0203007f218cb7', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "quiet", onClick: event => {
                 if (this.currentView === 'calendar') {
                     event.stopPropagation();
                     this.changeMonth(1);
@@ -448,11 +554,15 @@ const MdsCalendar = class {
                 else {
                     event.stopPropagation();
                 }
-            } })), this.currentView === 'calendar' && (index.h("section", { key: '2bac904c98af5bd276fbc3f1587655bea71dd138', class: "month-view" }, index.h("header", { key: 'eaf5ace7f5a3f822bf860f3ec3cceb01582fbe93', class: "month-view__days-names" }, this.weekdays.map(day => (index.h("mds-button", { class: "week-day-name", variant: "dark", tone: "quiet" }, day)))), index.h("div", { key: 'ae14ce81225094dea1b082398901496ed77868eb', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index$1) => (index.h("mds-calendar-cell", { key: index$1, today: luxon.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 < luxon.DateTime_1.fromISO(this.min)) {
+            } }))), this.currentView === 'calendar' && (index.h("section", { key: 'bf8eba9f66065c91d0f4feac4ddbc93c1fc63ad4', class: "month-view" }, index.h("header", { key: 'c90bf7ed93129ab8bfc3ecaab99fb2d012adab39', class: "month-view__days-names" }, this.weekdays.map(day => (index.h("mds-button", { class: "week-day-name", variant: "dark", tone: "quiet" }, day)))), index.h("div", { key: '6b5fb95ad179b38fefe0986b48a3a12a287ccf61', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index$1) => (index.h("mds-calendar-cell", { key: index$1, today: luxon.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 < luxon.DateTime_1.fromISO(this.min)) {
                     return true;
                 }
-                if (this.max && this.max !== '' && dayInfo.date > luxon.DateTime_1.fromISO(this.max)) {
+                if (this.max &&
+                    this.max !== '' &&
+                    dayInfo.date > luxon.DateTime_1.fromISO(this.max)) {
                     return true;
                 }
                 return undefined;
@@ -463,9 +573,15 @@ const MdsCalendar = class {
                     this.handleRange(target, dayInfo.date);
                 else
                     this.handleSingleSelection(target, dayInfo.date);
-            } }, dayInfo.date.toFormat('dd'))))))), this.currentView === 'months' && (index.h("section", { key: 'd85ff88559bac8c6999e939cfd317e78e67bdcdb', class: "month-selection" }, index.h("header", { key: 'ed18653752d8d403c86dd8e78ff4cd182d8ec435', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index$1) => {
-            const monthName = luxon.DateTime_1.local().set({ month: index$1 + 1 }).setLocale(this.language).toFormat('MMMM');
-            return (index.h("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' && (index.h("section", { key: '5353ed4497b33fb5260cf6c2d1f087b228a0cda3', class: "month-selection" }, index.h("header", { key: '70247928e4a74589900b0acd3b8d02686e41a4d1', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index$1) => {
+            const monthName = luxon.DateTime_1.local()
+                .set({ month: index$1 + 1 })
+                .setLocale(this.language)
+                .toFormat('MMMM');
+            return (index.h("mds-button", { class: "action", variant: "dark", tone: "quiet", onClick: event => {
                     event.stopPropagation();
                     this.currentDate = this.currentDate.set({ month: index$1 + 1 });
                     this.currentMonth = this.currentDate.toFormat('MMMM');
@@ -474,9 +590,9 @@ const MdsCalendar = class {
                         requestAnimationFrame(() => this.setDates());
                     });
                 } }, monthName));
-        })))), this.currentView === 'years' && (index.h("section", { key: 'a9473ac1c4027e4e25635217a665aadd924d055a', class: "year-selection" }, index.h("header", { key: 'adc5de34d23fbb299aa8ab5debb1b210c7cb4bb0', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index$1) => {
+        })))), this.currentView === 'years' && (index.h("section", { key: '99dca1c5f3ce083cb3bb117ce8bb705faa83e19c', class: "year-selection" }, index.h("header", { key: '7d479a8c05815560306486bf0825a521c971a6e4', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index$1) => {
             const year = this.selectedYear + index$1;
-            return (index.h("mds-button", { class: 'action', variant: 'dark', tone: 'quiet', onClick: event => {
+            return (index.h("mds-button", { class: "action", variant: "dark", tone: "quiet", onClick: event => {
                     event.stopPropagation();
                     this.currentDate = this.currentDate.set({ year });
                     this.currentYear = year.toString();
@@ -490,7 +606,9 @@ const MdsCalendar = class {
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "startDate": ["handleStartDate"],
-        "endDate": ["handleEndDate"]
+        "endDate": ["handleEndDate"],
+        "viewDate": ["handleViewDate"],
+        "hoverDate": ["handleHoverDate"]
     }; }
 };
 MdsCalendar.style = MdsCalendarStyle0;
@@ -524,7 +642,7 @@ const MdsCalendarCell = class {
         this.today = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f7e1c5be903ff151cbad616718740fb2eb8f27f0' }, index.h("div", { key: '3e4b838f78c0ce8df5813b468a6a1a00ae2730b0', class: "inner-dot" }), index.h("div", { key: '873c7e63491cf3a3c630632509410227ada07694', class: "area-background" }), index.h("mds-button", { key: '623915907fcb6d6c4aadba14c5db3f0e9b5d1aae', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, index.h("slot", { key: '8d78ee0a9b723f68bbf1a521106f77fe03f3a606' }))));
+        return (index.h(index.Host, { key: '09389f01297dc7e38499fc5783fbe7b5be73cee5' }, index.h("div", { key: '6501ca7b41eed8696e60156abf53f0cbbecae8d5', class: "inner-dot" }), index.h("div", { key: '34f8e50ba0032d7d9d3dd63aafc5ac536f1a0adf', class: "area-background" }), index.h("mds-button", { key: 'bedafcb2817bfeac6ebee9fa3e0887a41a1bce9b', class: "action", variant: "dark", tone: "quiet", disabled: this.disabled }, index.h("slot", { key: '197f10e47b61a6c6140774cd3e2443df61d9e4a4' }))));
     }
 };
 MdsCalendarCell.style = MdsCalendarCellStyle0;

package/dist/cjs/mds-card-content.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsCardContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '8de5ceb7de6678a21046301b7196928cb175b564', slot: "content" }, index.h("slot", { key: '6972425a51436a791af1b998e1ca15c42621d714' })));
+        return (index.h(index.Host, { key: '6d999f7edd0c6a6f9600ba642c7701c76cb2e652', slot: "content" }, index.h("slot", { key: 'd8261aefdf99a1e04ce0759351c4b112c14db22e' })));
     }
 };
 MdsCardContent.style = MdsCardContentStyle0;

package/dist/cjs/mds-card-footer.cjs.entry.js

@@ -12,7 +12,7 @@ const MdsCardFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '13aafa37390afd856908699e092b4aa16fcf5baa', slot: "footer" }, index.h("slot", { key: 'ff5ecf333902f504868c8864d92678193309c6f7' })));
+        return (index.h(index.Host, { key: '27d1cfe59341aec8873e3e58b67ff878447b4e7e', slot: "footer" }, index.h("slot", { key: '1f77196c1c48afe232aaa1062d77100da3e34964' })));
     }
 };
 MdsCardFooter.style = MdsCardFooterStyle0;