@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.3

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

@@ -8,12 +8,14 @@ var miBaselineForwardIos = `<svg xmlns="http://www.w3.org/2000/svg" width="24" h
 
 var 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 = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-gap:var(--gap-50);--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:var(--radius-lg,16px);--mds-calendar-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-padding:calc(var(--spacing,.0025rem)*400)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar-cell):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-calendar-cell-other-month-visibility{syntax:"visible|hidden";inherits:false;initial-value:visible}:host{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-gap:calc(var(--spacing,.0025rem)*50);--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:var(--radius-lg,16px);--mds-calendar-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-padding:calc(var(--spacing,.0025rem)*400);--mds-calendar-max-width:480px;--mds-calendar-min-width:280px;background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:var(--mds-calendar-border-radius,var(--radius-lg,16px));cursor:auto;display:inline-flex;max-width:var(--mds-calendar-max-width);min-width:max-content;overflow:hidden}.calendar-view{background-color:var(--mds-calendar-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;display:grid;width:100%}.calendar-preselection,.calendar-view{padding:var(--mds-calendar-padding,calc(var(--spacing,.0025rem)*400))}.calendar-preselection{display:none;gap:calc(var(--spacing,.0025rem)*50);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.calendar-preselection--has-preselection{display:grid}nav{display:flex;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between}.action{-ms-flex-pack:left;justify-content:left;min-width:min-content;padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}.action-back,.action-forward{flex-shrink:0}.select-month-or-year{background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:var(--radius-lg,16px);-ms-flex-pack:space-evenly;display:flex;flex-grow:1;justify-content:space-evenly}.action-month,.action-year{flex-basis:0;flex-grow:1}.week-day-name{align-items:center;aspect-ratio:1;min-height:auto;padding:0}.month-view__cells,.month-view__days-names{display:grid;gap:var(--mds-calendar-cell-gap,var(--gap-50));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,var(--gap-50));grid-template-columns:repeat(3,minmax(1px,100%));min-width:0}`;
+const mdsCalendarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-gap:var(--gap-50);--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:var(--radius-lg,16px);--mds-calendar-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-padding:calc(var(--spacing,.0025rem)*400);--mds-calendar-select-month-or-year-height:calc(var(--spacing,.0025rem)*900);--mds-calendar-select-month-or-year-width:14rem}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar-cell):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-calendar-cell-other-month-visibility{syntax:"visible|hidden";inherits:false;initial-value:visible}@property --mds-calendar-select-month-or-year-width{syntax:"<length>";inherits:false;initial-value:14rem}:host{--mds-calendar-day-number-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-day-number-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-gap:calc(var(--spacing,.0025rem)*50);--mds-calendar-cell-other-month-visibility:visible;--mds-calendar-border-radius:var(--radius-lg,16px);--mds-calendar-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-padding:calc(var(--spacing,.0025rem)*400);--mds-calendar-select-month-or-year-height:calc(var(--spacing,.0025rem)*900);--mds-calendar-select-month-or-year-width:14rem;--mds-calendar-max-width:480px;--mds-calendar-min-width:280px;background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:var(--mds-calendar-border-radius,var(--radius-lg,16px));cursor:auto;display:inline-flex;max-width:var(--mds-calendar-max-width);min-width:max-content;overflow:hidden}.calendar-view{background-color:var(--mds-calendar-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;box-sizing:border-box;display:grid;flex:auto;width:100%}.calendar-preselection,.calendar-view{padding:var(--mds-calendar-padding,calc(var(--spacing,.0025rem)*400))}.calendar-preselection{display:none;gap:calc(var(--spacing,.0025rem)*50);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.calendar-preselection--has-preselection{display:grid}nav{display:flex;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between;min-width:0}.action{-ms-flex-pack:left;justify-content:left;min-width:min-content;padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}.action-back,.action-forward{flex-shrink:0}.select-month-or-year{align-items:stretch;background-color:rgb(var(--tone-neutral-09,76 76 76));block-size:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));border-radius:var(--mds-calendar-border-radius,var(--radius-lg,16px));box-sizing:border-box;display:flex;-ms-flex:0 0 var(--mds-calendar-select-month-or-year-width,14rem);flex:0 0 var(--mds-calendar-select-month-or-year-width,14rem);height:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));inline-size:var(--mds-calendar-select-month-or-year-width,14rem);justify-content:flex-start;max-block-size:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));max-height:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));max-inline-size:var(--mds-calendar-select-month-or-year-width,14rem);min-block-size:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));min-height:var(--mds-calendar-select-month-or-year-height,calc(var(--spacing,.0025rem)*900));min-inline-size:var(--mds-calendar-select-month-or-year-width,14rem);overflow:hidden}.action-month,.action-year{--mds-button-radius:0;align-self:stretch;block-size:100%;box-sizing:border-box;cursor:default;height:100%;max-block-size:100%;max-height:100%;min-block-size:0;min-height:0;padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}.action-month{flex:auto;min-width:0}.action-year{flex:0 0 4.5rem}.action-month::part(label),.action-year::part(label){overflow:visible;text-overflow:clip;white-space:nowrap}.week-day-name{align-items:center;aspect-ratio:1;min-height:auto;padding:0}.month-view__cells,.month-view__days-names{display:grid;gap:var(--mds-calendar-cell-gap,var(--gap-50));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,var(--gap-50));grid-template-columns:repeat(3,minmax(1px,100%));min-width:0}`;
 
 const MdsCalendar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.datesEmitter = createEvent(this, "mdsCalendarChange");
+        this.navigationEmitter = createEvent(this, "mdsCalendarNavigate");
+        this.hoverEmitter = createEvent(this, "mdsCalendarHover");
         this.checkPreselectionsEmitter = createEvent(this, "mdsCalendarPreselect");
         this.hasPreselection = false;
         this.currentDate = DateTime.now();
@@ -30,7 +32,38 @@ const MdsCalendar = class {
             es: {},
             el: {},
         });
+        /**
+         * Enables selecting a date range (start and end date) instead of a single date.
+         */
         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).
@@ -59,21 +92,134 @@ 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 === null ||
+                this.internalStartDate === '' ||
+                (this.internalEndDate !== null && this.internalEndDate !== '')) {
+                return;
+            }
+            const hoverDate = target.getAttribute('date');
+            if (hoverDate !== null && hoverDate !== '') {
+                this.hoverEmitter.emit({ hoverDate });
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (!this.rangePicker ||
+                this.internalStartDate === null ||
+                this.internalStartDate === '' ||
+                (this.internalEndDate !== null && this.internalEndDate !== '') ||
+                this.hoverDate === null ||
+                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());
+            });
+        };
+        this.handlePrev = (event) => {
+            if (this.currentView === 'calendar') {
+                event.stopPropagation();
+                this.changeMonth(-1);
+            }
+            else if (this.currentView === 'years') {
+                event.stopPropagation();
+                this.selectedYear -= 10;
+            }
+            else {
+                event.stopPropagation();
+            }
+        };
+        this.handleNext = (event) => {
+            if (this.currentView === 'calendar') {
+                event.stopPropagation();
+                this.changeMonth(1);
+            }
+            else if (this.currentView === 'years') {
+                event.stopPropagation();
+                this.selectedYear += 10;
+            }
+            else {
+                event.stopPropagation();
+            }
+        };
+        this.handleCellClick = (dayInfo) => (event) => {
+            event.stopPropagation();
+            const target = event.currentTarget;
+            if (this.rangePicker)
+                this.handleRange(target, dayInfo);
+            else
+                this.handleSingleSelection(target, dayInfo);
+        };
+        this.handleMonthSelect = (month) => (event) => {
+            event.stopPropagation();
+            this.currentDate = this.currentDate.set({ month });
+            this.currentMonth = this.currentDate.toFormat('MMMM');
+            this.currentView = 'calendar';
+            this.updateCalendar().then(() => {
+                requestAnimationFrame(() => this.setDates());
+            });
+        };
+        this.handleYearSelect = (year) => (event) => {
+            event.stopPropagation();
+            this.currentDate = this.currentDate.set({ year });
+            this.currentYear = year.toString();
+            this.currentView = 'calendar';
+            this.updateCalendar().then(() => {
+                requestAnimationFrame(() => this.setDates());
+            });
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
     handleStartDate(newValue) {
         if (newValue !== null && newValue !== '') {
             this.internalStartDate = sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
-            if (this.internalEndDate) {
-                const startDateTime = DateTime.fromISO(this.internalStartDate);
+            this.startDateTime = DateTime.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
+            if (this.internalEndDate !== null && this.internalEndDate !== '') {
                 const endDateTime = DateTime.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();
         }
     }
@@ -84,69 +230,92 @@ const MdsCalendar = class {
         }
         else if (newValue !== null && newValue !== '') {
             this.internalEndDate = sanitizeISO8601Date(newValue === null || newValue === void 0 ? void 0 : newValue.toString());
-            if (this.internalStartDate) {
+            this.endDateTime = DateTime.fromISO(this.internalEndDate);
+            this.endDateIdentifier = this.endDateTime.toISODate();
+            if (this.internalStartDate !== null && this.internalStartDate !== '') {
                 const startDateTime = DateTime.fromISO(this.internalStartDate);
-                const endDateTime = DateTime.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.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 !== null && this.viewDate !== '') {
+            const viewDate = DateTime.fromISO(this.viewDate.toString());
+            if (viewDate.isValid) {
+                this.currentDate = viewDate;
+            }
+        }
+        else if (this.internalStartDate !== null && this.internalStartDate !== '') {
             this.internalStartDate = sanitizeISO8601Date((_a = this.internalStartDate) === null || _a === void 0 ? void 0 : _a.toString());
             this.startDateTime = DateTime.fromISO(this.internalStartDate);
             if (this.startDateTime.isValid) {
                 this.currentDate = this.startDateTime;
             }
         }
-        if (this.internalEndDate) {
+        if (this.internalEndDate !== null && this.internalEndDate !== '') {
             this.internalEndDate = sanitizeISO8601Date((_b = this.internalEndDate) === null || _b === void 0 ? void 0 : _b.toString());
             this.endDateTime = DateTime.fromISO(this.internalEndDate);
         }
         this.updateCalendar();
     }
     componentDidLoad() {
-        var _a, _b, _c;
+        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', (event) => {
-            const target = event.target;
-            if (target.matches('mds-calendar-cell') && this.startDateIdentifier && this.rangePicker) {
-                this.handleHover(target);
-            }
-        });
+        (_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);
     }
+    /**
+     * Sets the calendar's current date and re-renders the calendar accordingly.
+     * @param date the date to display, in ISO format (YYYY-MM-DD)
+     */
     async updateCurrentDate(date) {
         this.currentDate = DateTime.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 {
@@ -163,36 +332,58 @@ const MdsCalendar = class {
     }
     setDates() {
         const calendar = this.host;
-        if (!calendar)
+        if (calendar == null)
             return;
         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 !== null &&
+                this.hoverDate !== '' &&
+                (this.internalEndDate === null || 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 === null || this.internalStartDate === '')
             return;
         this.startDateTime = DateTime.fromISO(this.internalStartDate.toString());
+        if (this.internalEndDate === null || 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.fromISO(this.internalEndDate.toString());
+        this.startDateIdentifier = this.startDateTime.toISODate();
+        this.endDateIdentifier = this.endDateTime.toISODate();
         const cells = shadowRoot.querySelectorAll('mds-calendar-cell');
-        if (cells) {
+        if (cells != null) {
             let isBetweenDates;
             for (let i = 0; i < cells.length; i++) {
                 const cellDate = cells[i].getAttribute('date');
-                if (cellDate) {
+                if (cellDate !== null && cellDate !== '') {
                     const currentDate = DateTime.fromISO(cellDate);
                     if (currentDate.toFormat('yyyy-MM-dd') === this.startDateTime.toFormat('yyyy-MM-dd')) {
                         cells[i].setAttribute('selection', 'start');
@@ -213,18 +404,59 @@ const MdsCalendar = class {
             }
         }
     }
-    setSingleSelection(calendarCells, shadowRoot) {
-        calendarCells.forEach((cell) => {
-            cell.removeAttribute('selection');
+    setHoverSelection(calendarCells, shadowRoot) {
+        this.clearSelectionState(calendarCells);
+        if (this.internalStartDate === null ||
+            this.internalStartDate === '' ||
+            this.hoverDate === null ||
+            this.hoverDate === '') {
+            this.setRangeSelection(calendarCells, shadowRoot);
+            return;
+        }
+        const startDate = DateTime.fromISO(this.internalStartDate);
+        const hoverDate = DateTime.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 === null || cellDateString === '')
+                return;
+            const cellDate = DateTime.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);
         });
-        if (!this.internalStartDate)
+    }
+    setSingleSelection(calendarCells, shadowRoot) {
+        this.clearSelectionState(calendarCells);
+        if (this.internalStartDate === null || this.internalStartDate === '')
             return;
         this.startDateTime = DateTime.fromISO(this.internalStartDate.toString());
         const cells = shadowRoot.querySelectorAll('mds-calendar-cell');
-        if (cells) {
+        if (cells != null) {
             for (let i = 0; i < cells.length; i++) {
                 const cellDate = cells[i].getAttribute('date');
-                if (cellDate) {
+                if (cellDate !== null && cellDate !== '') {
                     const currentDate = DateTime.fromISO(cellDate);
                     if (currentDate.toFormat('yyyy-MM-dd') === this.startDateTime.toFormat('yyyy-MM-dd')) {
                         cells[i].setAttribute('selection', 'single');
@@ -238,6 +470,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');
@@ -262,6 +498,18 @@ const MdsCalendar = class {
     }
     handleRange(element, dayInfo) {
         var _a, _b;
+        const pendingStartDate = this.startDate || this.host.getAttribute('start-date');
+        if (this.rangePicker &&
+            pendingStartDate !== null &&
+            pendingStartDate !== '' &&
+            (this.endDate === null || this.endDate === '') &&
+            (this.internalEndDate === null || this.internalEndDate === '') &&
+            this.isFirstClick) {
+            this.internalStartDate = sanitizeISO8601Date(pendingStartDate.toString());
+            this.startDateTime = DateTime.fromISO(this.internalStartDate);
+            this.startDateIdentifier = this.startDateTime.toISODate();
+            this.isFirstClick = false;
+        }
         const resetSelection = () => {
             this.internalStartDate = null;
             this.internalEndDate = null;
@@ -279,7 +527,10 @@ const MdsCalendar = class {
                 });
             });
         };
-        if (this.startDateIdentifier && this.endDateIdentifier) {
+        if (this.startDateIdentifier !== null &&
+            this.startDateIdentifier !== '' &&
+            this.endDateIdentifier !== null &&
+            this.endDateIdentifier !== '') {
             resetSelection();
         }
         if (this.isFirstClick) {
@@ -298,13 +549,15 @@ 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 elementIndex = Array.from(mdsCalendarCellElements !== null && mdsCalendarCellElements !== void 0 ? mdsCalendarCellElements : []).indexOf(element);
-        if (this.startDateIdentifier &&
+        if (this.startDateIdentifier !== null &&
+            this.startDateIdentifier !== '' &&
             DateTime.fromISO(this.startDateIdentifier) <
                 DateTime.fromISO(element.getAttribute('date'))) {
             this.endDateIdentifier = element.getAttribute('date');
@@ -327,71 +580,14 @@ const MdsCalendar = class {
                 mdsCalendarCellElements[i].setAttribute('selection', 'middle');
             }
         }
-        if (this.internalStartDate && this.internalEndDate) {
+        if (this.internalStartDate !== null &&
+            this.internalStartDate !== '' &&
+            this.internalEndDate !== null &&
+            this.internalEndDate !== '') {
             this.datesEmitter.emit({ startDate: this.internalStartDate, endDate: this.internalEndDate });
             this.checkPreselectionsEmitter.emit();
         }
     }
-    handleHover(element) {
-        var _a, _b;
-        const typedElement = element;
-        const startDate = DateTime.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.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.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.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;
@@ -403,94 +599,33 @@ const MdsCalendar = class {
         this.internalStartDate = this.startDateTime.toISO().split('T')[0];
         this.isFirstClick = false;
         element.setAttribute('selection', 'single');
-        if (this.internalStartDate) {
+        if (this.internalStartDate !== null && this.internalStartDate !== '') {
             this.datesEmitter.emit({ startDate: this.internalStartDate });
         }
     }
+    isDateDisabled(date) {
+        if (this.min !== null && this.min !== '' && date < DateTime.fromISO(this.min)) {
+            return true;
+        }
+        if (this.max !== null && this.max !== '' && date > DateTime.fromISO(this.max)) {
+            return true;
+        }
+        return undefined;
+    }
     render() {
-        return (h(Host, { key: '9cf4758a496018f7555c8211259d875b67beb034' }, h("div", { key: '3fdd1bdcc0f8f75bcd591d6a2cbdfd0758c711e3', class: clsx('calendar-preselection', this.hasPreselection && 'calendar-preselection--has-preselection') }, h("slot", { key: '25aca5bda0a4180f936d984ad0a0f4c48506fb22', name: "preselection" })), h("div", { key: '79b17b93bfc52747a53cdcb270b42e8a8ff305ce', class: "calendar-view" }, h("nav", { key: '233c62791f8dc73343afd206aac928ef4b7eb5d1' }, h("mds-button", { key: 'd99f2792d37706f1556a96dad440a867c1c12b14', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "text", onClick: (event) => {
-                if (this.currentView === 'calendar') {
-                    event.stopPropagation();
-                    this.changeMonth(-1);
-                }
-                else if (this.currentView === 'years') {
-                    event.stopPropagation();
-                    this.selectedYear -= 10;
-                }
-                else {
-                    event.stopPropagation();
-                }
-            } }), h("div", { key: '9ddbaa32f8e022e45433aa99bee03b611a74e921', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (h("mds-button", { key: 'ae8b3d52c9715469054cc0d0d10c4f9ed0ef7b80', class: "action-month", variant: "dark", tone: "text", 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') && (h("mds-button", { key: '1d827a7d18ad12dae8caa9ac55b187b4a042cfa3', class: "action-year", variant: "dark", tone: "text", onClick: (event) => {
-                event.stopPropagation();
-                this.currentView = this.currentView === 'years' ? 'calendar' : 'years';
-                requestAnimationFrame(() => {
-                    this.updateCalendar().then(() => this.setDates());
-                });
-            } }, this.currentYear))), h("mds-button", { key: '0f489501bed0661b8b7af6978a0a524524034a32', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "text", onClick: (event) => {
-                if (this.currentView === 'calendar') {
-                    event.stopPropagation();
-                    this.changeMonth(1);
-                }
-                else if (this.currentView === 'years') {
-                    event.stopPropagation();
-                    this.selectedYear += 10;
-                }
-                else {
-                    event.stopPropagation();
-                }
-            } })), this.currentView === 'calendar' && (h("section", { key: 'ec747fc2e244ccd71aa8c7cfd3287b4423c851aa', class: "month-view" }, h("header", { key: '79385d765efa7e6bfe3bf3396bd2473309c11782', class: "month-view__days-names" }, this.weekdays.map((day) => (h("mds-button", { class: "week-day-name", variant: "dark", tone: "text" }, day)))), h("div", { key: '496d96bfe9897e963141134de34b553b45eb6a4b', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (h("mds-calendar-cell", { key: index, today: DateTime.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.fromISO(this.min)) {
-                    return true;
-                }
-                if (this.max &&
-                    this.max !== '' &&
-                    dayInfo.date > DateTime.fromISO(this.max)) {
-                    return true;
-                }
-                return undefined;
-            })(), onClick: (event) => {
-                event.stopPropagation();
-                const target = event.currentTarget;
-                if (this.rangePicker)
-                    this.handleRange(target, dayInfo.date);
-                else
-                    this.handleSingleSelection(target, dayInfo.date);
-            }, title: dayInfo.date
+        return (h(Host, { key: 'eae79a23fef07ad0c39289138c1d9d201d01fdb8' }, h("div", { key: '981c8f338f2bb75ae160ed026964df32519cf7da', class: clsx('calendar-preselection', (this.showPreselection || this.hasPreselection) &&
+                'calendar-preselection--has-preselection') }, h("slot", { key: '5603f44dbaeea662b8717633333fad6ec82e7fd3', name: "preselection" })), h("div", { key: '666c4a41d8ea01c0dd4ec23f58c6cefbd077a6d8', class: "calendar-view" }, h("nav", { key: 'f5a49d71045f85a8d816fdd933a12a16f7da81d2' }, this.showPreviousButton && (h("mds-button", { key: 'f2d618d0030437a32224eccc60a44c975dc118d6', class: "action-back", icon: miBaselineBackIosNew, variant: "dark", tone: "text", onClick: this.handlePrev })), h("div", { key: '67e29dee62c2c500b30cb3b9efa480c28ba2f212', class: "select-month-or-year" }, (this.currentView === 'calendar' || this.currentView === 'months') && (h("mds-button", { key: '0e9df902f7d565f412fa9d3d443b5f93e142ce20', class: "action-month", truncate: "none", variant: "dark", tone: "text", label: this.currentMonth, onClick: this.handleMonthActionClick })), (this.currentView === 'calendar' || this.currentView === 'years') && (h("mds-button", { key: '1ae69a19bbdd472220d3c638f00549626875684c', class: "action-year", truncate: "none", variant: "dark", tone: "text", label: this.currentYear, onClick: this.handleYearActionClick }))), this.showNextButton && (h("mds-button", { key: 'c47a07e2eee26da908658c8038a3855c13a4dcdc', class: "action-forward", icon: miBaselineForwardIos, variant: "dark", tone: "text", onClick: this.handleNext }))), this.currentView === 'calendar' && (h("section", { key: 'e346703e4efa4251a3277bf1fbabf5686337797a', class: "month-view" }, h("header", { key: 'c14e9f373b6296e22fc80b361f2235a20aaa5ddc', class: "month-view__days-names" }, this.weekdays.map((day) => (h("mds-button", { class: "week-day-name", variant: "dark", tone: "text", label: day })))), h("div", { key: '4a80ca577d0c84b538e18ddff65eac0feccdef1d', class: "month-view__cells" }, this.weekDaysinMonth.map((dayInfo, index) => (h("mds-calendar-cell", { key: index, today: DateTime.now().toFormat('yyyy-MM-dd') === dayInfo.date.toFormat('yyyy-MM-dd'), date: dayInfo.date.toFormat('yyyy-MM-dd'), month: dayInfo.isCurrentMonth ? 'current' : 'other', disabled: this.isDateDisabled(dayInfo.date), onClick: this.handleCellClick(dayInfo.date), title: dayInfo.date
                 .setLocale(this.language)
                 .toFormat('cccc d LLLL')
-                .replace(/^./, (char) => char.toUpperCase()), label: dayInfo.date.toFormat('dd') })))))), this.currentView === 'months' && (h("section", { key: 'b7917b0b12133f6731c844f4fbceafa4f932b4d7', class: "month-selection" }, h("header", { key: '38509395e4476b9b3174819dad4250e9a5962b7a', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
+                .replace(/^./, (char) => char.toUpperCase()), label: dayInfo.date.toFormat('dd') })))))), this.currentView === 'months' && (h("section", { key: '605c67fd9b2f4dab967a2d0d2f59a3a1f8c3d970', class: "month-selection" }, h("header", { key: '1e6a1edf56452ad68ab75740a99dfcb858905199', class: "month-view__month-names" }, Array.from({ length: 12 }).map((_, index) => {
             const monthName = DateTime.local()
                 .set({ month: index + 1 })
                 .setLocale(this.language)
                 .toFormat('MMMM');
-            return (h("mds-button", { class: "action", variant: "dark", tone: "text", onClick: (event) => {
-                    event.stopPropagation();
-                    this.currentDate = this.currentDate.set({ month: index + 1 });
-                    this.currentMonth = this.currentDate.toFormat('MMMM');
-                    this.currentView = 'calendar';
-                    this.updateCalendar().then(() => {
-                        requestAnimationFrame(() => this.setDates());
-                    });
-                } }, monthName));
-        })))), this.currentView === 'years' && (h("section", { key: '02987c943f5089b76e14ccbcc2ab11cc611e93d1', class: "year-selection" }, h("header", { key: '9e3c0d96dfbab49bbad856cc11791e2adbeb886d', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
+            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: monthName, onClick: this.handleMonthSelect(index + 1) }));
+        })))), this.currentView === 'years' && (h("section", { key: 'd58540f61197bee490b93d9097913d54cb7d7468', class: "year-selection" }, h("header", { key: '24a0f2cb86888f412e19053d64815173e82570a8', class: "month-view__years" }, Array.from({ length: 12 }).map((_, index) => {
             const year = this.selectedYear + index;
-            return (h("mds-button", { class: "action", variant: "dark", tone: "text", onClick: (event) => {
-                    event.stopPropagation();
-                    this.currentDate = this.currentDate.set({ year });
-                    this.currentYear = year.toString();
-                    this.currentView = 'calendar';
-                    this.updateCalendar().then(() => {
-                        requestAnimationFrame(() => this.setDates());
-                    });
-                } }, year));
+            return (h("mds-button", { class: "action", variant: "dark", tone: "text", label: `${year}`, onClick: this.handleYearSelect(year) }));
         })))))));
     }
     get host() { return getElement(this); }
@@ -500,12 +635,18 @@ const MdsCalendar = class {
             }],
         "endDate": [{
                 "handleEndDate": 0
+            }],
+        "viewDate": [{
+                "handleViewDate": 0
+            }],
+        "hoverDate": [{
+                "handleHoverDate": 0
             }]
     }; }
 };
 MdsCalendar.style = mdsCalendarCss();
 
-const mdsCalendarCellCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-calendar-cell-background:transparent;--mds-calendar-cell-boundaries-background:transparent;--mds-calendar-cell-boundaries-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-boundaries-padding:.25rem;--mds-calendar-cell-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-other-month-background:transparent;--mds-calendar-cell-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-disabled-background:transparent;--mds-calendar-cell-disabled-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-weekend-background:transparent;--mds-calendar-cell-weekend-color:rgb(var(--tone-neutral-06,158 158 158));--mds-calendar-cell-size:3rem;--mds-calendar-cell-selection-boundaries-border-radius:1.5rem;--mds-calendar-cell-selection-week-boundaries-border-radius:1.5rem;--mds-calendar-cell-preselection-today-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-today-color:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-preselection-current-month-background:rgb(var(--variant-primary-08,0 83 239));--mds-calendar-cell-preselection-current-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-preselection-other-month-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-other-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-background:rgb(var(--variant-primary-04,184 208 255));--mds-calendar-cell-selection-current-month-color:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-current-month-weekend-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-color:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-other-month-background:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-other-month-color:rgb(var(--tone-neutral-04,218 218 218));--mds-calendar-cell-selection-other-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-selection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-calendar-cell-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-boundaries-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-boundaries-padding{syntax:"<length>";inherits:false;initial-value:.25rem}@property --mds-calendar-cell-other-month-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-disabled-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-weekend-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-size{syntax:"<length>";inherits:false;initial-value:3rem}@property --mds-calendar-cell-selection-boundaries-border-radius{syntax:"<length>";inherits:false;initial-value:1.5rem}@property --mds-calendar-cell-selection-week-boundaries-border-radius{syntax:"<length>";inherits:false;initial-value:1.5rem}:host{--mds-calendar-cell-background:transparent;--mds-calendar-cell-boundaries-background:transparent;--mds-calendar-cell-boundaries-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-boundaries-padding:calc(var(--spacing,.0025rem)*100);--mds-calendar-cell-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-other-month-background:transparent;--mds-calendar-cell-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-disabled-background:transparent;--mds-calendar-cell-disabled-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-weekend-background:transparent;--mds-calendar-cell-weekend-color:rgb(var(--tone-neutral-06,158 158 158));--mds-calendar-cell-size:calc(var(--spacing,.0025rem)*1200);--mds-calendar-cell-selection-boundaries-border-radius:200px;--mds-calendar-cell-selection-week-boundaries-border-radius:200px;--mds-calendar-cell-preselection-today-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-today-color:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-preselection-current-month-background:rgb(var(--variant-primary-08,0 83 239));--mds-calendar-cell-preselection-current-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-preselection-other-month-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-other-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-background:rgb(var(--variant-primary-04,184 208 255));--mds-calendar-cell-selection-current-month-color:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-current-month-weekend-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-color:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-other-month-background:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-other-month-color:rgb(var(--tone-neutral-04,218 218 218));--mds-calendar-cell-selection-other-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-selection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));align-items:center;aspect-ratio:1;display:flex;justify-content:center;padding:var(--mds-calendar-cell-boundaries-padding,.25rem);position:relative}:host([month=other]){visibility:var(--mds-calendar-cell-other-month-visibility,hidden)}.inner-dot{aspect-ratio:1;background-color:var(--mds-calendar-cell-inner-background);border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);display:flex;min-height:0;min-width:0;width:100%;z-index:1}.area-background{background-color:var(--mds-calendar-cell-background,transparent);inset:0;z-index:0}.action,.area-background{color:var(--mds-calendar-cell-color,rgb(var(--tone-neutral-01,255 255 255)));position:absolute}.action{align-items:center;aspect-ratio:1;background-color:#0000;border-radius:0;display:flex;inset:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);justify-content:center;min-height:0;min-width:0;padding:0;width:auto;z-index:2}:host([selection][orientation=horizontal]) .area-background{margin-left:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);margin-right:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1)}:host([selection=start][orientation=horizontal]) .area-background{border-bottom-left-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-left-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-left:0}:host([selection=end][orientation=horizontal]) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-right:0}:host([selection][orientation=vertical]) .area-background{margin-bottom:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);margin-top:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1)}:host([selection=start][orientation=vertical]) .area-background{border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) 0 0;margin-top:0}:host([selection=end][orientation=vertical]) .area-background{border-radius:0 0 var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-bottom:0}:host([orientation=vertical]:not([selection=start],[selection=end])) .area-background{border-radius:0}:host(:nth-child(7n-6)) .area-background,:host([selection=end][orientation=horizontal]:nth-child(7n-6)) .area-background{border-bottom-left-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem);border-top-left-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem)}:host(:nth-child(7n)) .area-background,:host([selection=end][orientation=horizontal]:nth-child(7n)) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem)}:host([selection=end][orientation=horizontal]:nth-child(7n)) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem)}:host([selection][orientation=horizontal]:nth-child(7n-6)) .area-background{margin-left:0}:host([selection][orientation=horizontal]:nth-child(7n)) .area-background{margin-right:0}:host([selection=single][orientation=horizontal]) .area-background{border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-left:0;margin-right:0}:host(:nth-child(7n)),:host(:nth-child(7n-1)){--mds-calendar-cell-color:var(--mds-calendar-cell-weekend-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-calendar-cell-background:var(--mds-calendar-cell-weekend-background,transparent)}:host([month=other]:not([selection])){--mds-calendar-cell-color:var(--mds-calendar-cell-other-month-color,rgb(var(--tone-neutral-07,134 134 134)));--mds-calendar-cell-background:var(--mds-calendar-cell-other-month-background,transparent)}:host([disabled]){--mds-calendar-cell-color:var(--mds-calendar-cell-disabled-color,rgb(var(--tone-neutral-07,134 134 134)));--mds-calendar-cell-background:var(--mds-calendar-cell-disabled-background,transparent);cursor:auto;pointer-events:none}:host(:not([selection])[today]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-today-background,rgb(var(--variant-primary-09,0 58 168)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-today-color,rgb(var(--variant-primary-03,211 226 255)))}:host([selection][month=current]){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-background,rgb(var(--variant-primary-04,184 208 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-color,rgb(var(--tone-neutral,0 0 0)))}:host([selection][month=current]:nth-child(7n)),:host([selection][month=current]:nth-child(7n-1)){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-weekend-background,rgb(var(--variant-primary-03,211 226 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-weekend-color,rgb(var(--variant-primary-07,44 117 255)))}:host([selection=end][month=current]:nth-child(7n)),:host([selection=end][month=current]:nth-child(7n-1)),:host([selection=start][month=current]:nth-child(7n)),:host([selection=start][month=current]:nth-child(7n-1)){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-weekend-boundaries-background,rgb(var(--variant-primary-03,211 226 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-weekend-boundaries-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selection][month=other]){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-other-month-background,rgb(var(--variant-primary-07,44 117 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-other-month-color,rgb(var(--tone-neutral-04,218 218 218)))}:host([selection=end][month=current]),:host([selection=start][month=current]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-selection-current-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-boundaries-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selection=end][month=other]),:host([selection=start][month=other]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-selection-other-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection][month=current][preview]:not([preview=false])){--mds-calendar-cell-background:var(--mds-calendar-cell-preselection-current-month-background,rgb(var(--variant-primary-08,0 83 239)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection][month=other][preview]:not([preview=false])){--mds-calendar-cell-background:var(--mds-calendar-cell-preselection-other-month-background,rgb(var(--variant-primary-09,0 58 168)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=end][month=current][preview]:not([preview=false])),:host([selection=start][month=current][preview]:not([preview=false])){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-current-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=end][month=other][preview]:not([preview=false])),:host([selection=start][month=other][preview]:not([preview=false])){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-other-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=single][month=current]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-current-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=single][month=other]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-other-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}`;
+const mdsCalendarCellCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-calendar-cell-background:#0000;--mds-calendar-cell-boundaries-background:#0000;--mds-calendar-cell-boundaries-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-boundaries-padding:.25rem;--mds-calendar-cell-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-other-month-background:#0000;--mds-calendar-cell-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-disabled-background:#0000;--mds-calendar-cell-disabled-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-weekend-background:#0000;--mds-calendar-cell-weekend-color:rgb(var(--tone-neutral-06,158 158 158));--mds-calendar-cell-size:3rem;--mds-calendar-cell-selection-boundaries-border-radius:1.5rem;--mds-calendar-cell-selection-week-boundaries-border-radius:1.5rem;--mds-calendar-cell-preselection-today-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-today-color:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-preselection-current-month-background:rgb(var(--variant-primary-08,0 83 239));--mds-calendar-cell-preselection-current-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-preselection-other-month-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-other-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-background:rgb(var(--variant-primary-04,184 208 255));--mds-calendar-cell-selection-current-month-color:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-current-month-weekend-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-color:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-other-month-background:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-other-month-color:rgb(var(--tone-neutral-04,218 218 218));--mds-calendar-cell-selection-other-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-selection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197))}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-calendar-cell-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-boundaries-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-boundaries-padding{syntax:"<length>";inherits:false;initial-value:.25rem}@property --mds-calendar-cell-other-month-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-disabled-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-weekend-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-calendar-cell-size{syntax:"<length>";inherits:false;initial-value:3rem}@property --mds-calendar-cell-selection-boundaries-border-radius{syntax:"<length>";inherits:false;initial-value:1.5rem}@property --mds-calendar-cell-selection-week-boundaries-border-radius{syntax:"<length>";inherits:false;initial-value:1.5rem}:host{--mds-calendar-cell-background:#0000;--mds-calendar-cell-boundaries-background:#0000;--mds-calendar-cell-boundaries-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-boundaries-padding:calc(var(--spacing,.0025rem)*100);--mds-calendar-cell-color:rgb(var(--tone-neutral-01,255 255 255));--mds-calendar-cell-other-month-background:#0000;--mds-calendar-cell-other-month-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-disabled-background:#0000;--mds-calendar-cell-disabled-color:rgb(var(--tone-neutral-07,134 134 134));--mds-calendar-cell-weekend-background:#0000;--mds-calendar-cell-weekend-color:rgb(var(--tone-neutral-06,158 158 158));--mds-calendar-cell-size:calc(var(--spacing,.0025rem)*1200);--mds-calendar-cell-selection-boundaries-border-radius:200px;--mds-calendar-cell-selection-week-boundaries-border-radius:200px;--mds-calendar-cell-preselection-today-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-today-color:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-preselection-current-month-background:rgb(var(--variant-primary-08,0 83 239));--mds-calendar-cell-preselection-current-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-current-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-preselection-other-month-background:rgb(var(--variant-primary-09,0 58 168));--mds-calendar-cell-preselection-other-month-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));--mds-calendar-cell-preselection-other-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-background:rgb(var(--variant-primary-04,184 208 255));--mds-calendar-cell-selection-current-month-color:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-background:rgb(var(--tone-neutral,0 0 0));--mds-calendar-cell-selection-current-month-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-current-month-weekend-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-color:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-background:rgb(var(--variant-primary-03,211 226 255));--mds-calendar-cell-selection-current-month-weekend-boundaries-color:rgb(var(--tone-neutral-03,233 233 233));--mds-calendar-cell-selection-other-month-background:rgb(var(--variant-primary-07,44 117 255));--mds-calendar-cell-selection-other-month-color:rgb(var(--tone-neutral-04,218 218 218));--mds-calendar-cell-selection-other-month-boundaries-background:rgb(var(--variant-primary-10,0 49 142));--mds-calendar-cell-selection-other-month-boundaries-color:rgb(var(--tone-neutral-05,197 197 197));align-items:center;aspect-ratio:1;display:flex;justify-content:center;padding:var(--mds-calendar-cell-boundaries-padding,.25rem);position:relative}:host([month=other]){visibility:var(--mds-calendar-cell-other-month-visibility,hidden)}.inner-dot{aspect-ratio:1;background-color:var(--mds-calendar-cell-inner-background);border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);display:flex;min-height:0;min-width:0;width:100%;z-index:1}.area-background{background-color:var(--mds-calendar-cell-background,#0000);inset:0;z-index:0}.action,.area-background{color:var(--mds-calendar-cell-color,rgb(var(--tone-neutral-01,255 255 255)));position:absolute}.action{align-items:center;aspect-ratio:1;background-color:#0000;border-radius:0;display:flex;inset:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);justify-content:center;min-height:0;min-width:0;padding:0;width:auto;z-index:2}:host([selection][orientation=horizontal]) .area-background{margin-left:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);margin-right:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1)}:host([selection=start][orientation=horizontal]) .area-background{border-bottom-left-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-left-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-left:0}:host([selection=end][orientation=horizontal]) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-right:0}:host([selection][orientation=vertical]) .area-background{margin-bottom:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1);margin-top:calc(var(--mds-calendar-cell-gap,var(--gap-50))*-1)}:host([selection=start][orientation=vertical]) .area-background{border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) 0 0;margin-top:0}:host([selection=end][orientation=vertical]) .area-background{border-radius:0 0 var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem) var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-bottom:0}:host([orientation=vertical]:not([selection=start],[selection=end])) .area-background{border-radius:0}:host(:nth-child(7n-6)) .area-background,:host([selection=end][orientation=horizontal]:nth-child(7n-6)) .area-background{border-bottom-left-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem);border-top-left-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem)}:host(:nth-child(7n)) .area-background,:host([selection=end][orientation=horizontal]:nth-child(7n)) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-week-boundaries-border-radius,1.5rem)}:host([selection=end][orientation=horizontal]:nth-child(7n)) .area-background{border-bottom-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);border-top-right-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem)}:host([selection][orientation=horizontal]:nth-child(7n-6)) .area-background{margin-left:0}:host([selection][orientation=horizontal]:nth-child(7n)) .area-background{margin-right:0}:host([selection=single][orientation=horizontal]) .area-background{border-radius:var(--mds-calendar-cell-selection-boundaries-border-radius,1.5rem);margin-left:0;margin-right:0}:host(:nth-child(7n)),:host(:nth-child(7n-1)){--mds-calendar-cell-color:var(--mds-calendar-cell-weekend-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-calendar-cell-background:var(--mds-calendar-cell-weekend-background,#0000)}:host([month=other]:not([selection])){--mds-calendar-cell-color:var(--mds-calendar-cell-other-month-color,rgb(var(--tone-neutral-07,134 134 134)));--mds-calendar-cell-background:var(--mds-calendar-cell-other-month-background,#0000)}:host([disabled]){--mds-calendar-cell-color:var(--mds-calendar-cell-disabled-color,rgb(var(--tone-neutral-07,134 134 134)));--mds-calendar-cell-background:var(--mds-calendar-cell-disabled-background,#0000);cursor:auto;pointer-events:none}:host(:not([selection])[today]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-today-background,rgb(var(--variant-primary-09,0 58 168)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-today-color,rgb(var(--variant-primary-03,211 226 255)))}:host([selection][month=current]){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-background,rgb(var(--variant-primary-04,184 208 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-color,rgb(var(--tone-neutral,0 0 0)))}:host([selection][month=current]:nth-child(7n)),:host([selection][month=current]:nth-child(7n-1)){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-weekend-background,rgb(var(--variant-primary-03,211 226 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-weekend-color,rgb(var(--variant-primary-07,44 117 255)))}:host([selection=end][month=current]:nth-child(7n)),:host([selection=end][month=current]:nth-child(7n-1)),:host([selection=start][month=current]:nth-child(7n)),:host([selection=start][month=current]:nth-child(7n-1)){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-current-month-weekend-boundaries-background,rgb(var(--variant-primary-03,211 226 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-weekend-boundaries-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selection][month=other]){--mds-calendar-cell-background:var(--mds-calendar-cell-selection-other-month-background,rgb(var(--variant-primary-07,44 117 255)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-other-month-color,rgb(var(--tone-neutral-04,218 218 218)))}:host([selection=end][month=current]),:host([selection=start][month=current]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-selection-current-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-current-month-boundaries-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selection=end][month=other]),:host([selection=start][month=other]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-selection-other-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-selection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection][month=current][preview]:not([preview=false])){--mds-calendar-cell-background:var(--mds-calendar-cell-preselection-current-month-background,rgb(var(--variant-primary-08,0 83 239)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection][month=other][preview]:not([preview=false])){--mds-calendar-cell-background:var(--mds-calendar-cell-preselection-other-month-background,rgb(var(--variant-primary-09,0 58 168)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=end][month=current][preview]:not([preview=false])),:host([selection=start][month=current][preview]:not([preview=false])){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-current-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=end][month=other][preview]:not([preview=false])),:host([selection=start][month=other][preview]:not([preview=false])){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-other-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=single][month=current]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-current-month-boundaries-background,rgb(var(--variant-primary-10,0 49 142)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-current-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}:host([selection=single][month=other]){--mds-calendar-cell-inner-background:var(--mds-calendar-cell-preselection-other-month-boundaries-background,rgb(var(--tone-neutral,0 0 0)));--mds-calendar-cell-color:var(--mds-calendar-cell-preselection-other-month-boundaries-color,rgb(var(--tone-neutral-05,197 197 197)))}`;
 
 const MdsCalendarCell = class {
     constructor(hostRef) {
@@ -533,7 +674,7 @@ const MdsCalendarCell = class {
         this.today = undefined;
     }
     render() {
-        return (h(Host, { key: 'ca8595ffc3ffce266f0f77898d14ec636ff2f08a' }, h("div", { key: 'c4d083c999c81cdb4cec42f77404314c077616f7', class: "inner-dot" }), h("div", { key: '75e8d406f2b54aa0af396f1b0c1ff42febb37774', class: "area-background" }), h("mds-button", { key: 'f472dc9e3155f695be6042242c42b65dab288f6d', class: "action", variant: "dark", tone: "text", disabled: this.disabled, label: this.label })));
+        return (h(Host, { key: 'eea49336dfecb6f76ef93509fb42228417bac55a' }, h("div", { key: 'ea9d3de623b5e1edf19bba5cab930022e790f8f8', class: "inner-dot" }), h("div", { key: 'f973bf80d0456cbb7151db3dfebc6f80f9afc5ff', class: "area-background" }), h("mds-button", { key: '755324a7827cc9be52f8500f079df1f6f8285bde', class: "action", variant: "dark", tone: "text", disabled: this.disabled, label: this.label })));
     }
 };
 MdsCalendarCell.style = mdsCalendarCellCss();