@vaadin/date-picker 24.7.0-alpha1 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,25 +36,26 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.7.0-alpha1",
-    "@vaadin/button": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/field-base": "24.7.0-alpha1",
-    "@vaadin/input-container": "24.7.0-alpha1",
-    "@vaadin/overlay": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
+    "@vaadin/a11y-base": "24.7.0-alpha10",
+    "@vaadin/button": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/field-base": "24.7.0-alpha10",
+    "@vaadin/input-container": "24.7.0-alpha10",
+    "@vaadin/overlay": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/vaadin-date-picker-helper.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-date-picker-light.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';

package/src/vaadin-date-picker-light.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-date-picker-overlay-content.js';

package/src/vaadin-date-picker-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-date-picker-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
@@ -326,7 +326,6 @@ export const DatePickerMixin = (subclass) =>
         _minDate: {
           type: Date,
           computed: '__computeMinOrMaxDate(min)',
-          sync: true,
         },
 
         /**
@@ -337,7 +336,6 @@ export const DatePickerMixin = (subclass) =>
         _maxDate: {
           type: Date,
           computed: '__computeMinOrMaxDate(max)',
-          sync: true,
         },
 
         /** @private */
@@ -1160,7 +1158,7 @@ export const DatePickerMixin = (subclass) =>
         return;
       }
 
-      if (this.clearButtonVisible && !!this.value) {
+      if (this.clearButtonVisible && !!this.value && !this.readonly) {
         // Stop event from propagating to the host element
         // to avoid closing dialog when clearing on Esc
         event.stopPropagation();
@@ -1211,10 +1209,7 @@ export const DatePickerMixin = (subclass) =>
         if (!dateEquals(this.__enteredDate, date)) {
           this.__enteredDate = date;
         }
-      } else if (this.__enteredDate != null) {
-        // Do not override initial undefined value with null
-        // to avoid triggering a Lit update that can cause
-        // other scheduled properties to flush too early.
+      } else {
         this.__enteredDate = null;
       }
     }

package/src/vaadin-date-picker-month-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';

package/src/vaadin-date-picker-overlay-content-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { flush } from '@polymer/polymer/lib/utils/flush.js';

package/src/vaadin-date-picker-overlay-content-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-date-picker-overlay-content.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-button.js';

package/src/vaadin-date-picker-overlay-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';

package/src/vaadin-date-picker-overlay-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-date-picker-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-date-picker-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-date-picker-year-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-date-picker-year-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';

package/src/vaadin-date-picker-year.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-date-picker.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-date-picker.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';

package/src/vaadin-infinite-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
@@ -380,10 +380,6 @@ export class InfiniteScroller extends HTMLElement {
     itemWrapper.instance = this._createElement();
     itemWrapper.appendChild(itemWrapper.instance);
 
-    if (itemWrapper.instance.performUpdate) {
-      itemWrapper.instance.performUpdate();
-    }
-
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance[prop] = tmpInstance[prop];
     });

package/src/vaadin-lit-date-picker-overlay-content.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-lit-button.js';

package/src/vaadin-lit-date-picker-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';

package/src/vaadin-lit-date-picker-year.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css, html, LitElement } from 'lit';

package/src/vaadin-lit-date-picker.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-lit-input-container.js';

package/src/vaadin-lit-month-calendar.js

@@ -1,13 +1,12 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -26,9 +25,9 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
 
   /** @protected */
   render() {
-    const weekDayNames = this._getWeekDayNames(this.i18n, this.showWeekNumbers);
+    const weekDayNames = this.__computeWeekDayNames(this.i18n, this.showWeekNumbers);
     const weeks = this._weeks;
-    const hideWeekSeparator = !this._showWeekNumbers;
+    const hideWeekSeparator = !this.__computeShowWeekSeparator(this.showWeekNumbers, this.i18n);
 
     return html`
       <div part="month-header" id="month-header" aria-hidden="true">${this._getTitle(this.month, this.i18n)}</div>
@@ -56,37 +55,33 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
             (week) => html`
               <tr role="row">
                 <td part="week-number" aria-hidden="true" ?hidden="${hideWeekSeparator}">
-                  ${this.__getWeekNumber(week)}
+                  ${this.__computeWeekNumber(week)}
                 </td>
                 ${week.map((date) => {
-                  const isFocused =
-                    dateEquals(date, this.focusedDate) && (this.__hasFocus || dateEquals(date, this.enteredDate));
-                  const tabIndex = dateEquals(date, this.focusedDate) ? '0' : '-1';
-                  const isSelected = dateEquals(date, this.selectedDate);
-                  const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
-                  const greaterThanToday = date > normalizeDate(new Date());
-                  const lessThanToday = date < normalizeDate(new Date());
-
-                  const parts = [
-                    'date',
-                    isDisabled && 'disabled',
-                    isFocused && 'focused',
-                    isSelected && 'selected',
-                    this._isToday(date) && 'today',
-                    greaterThanToday && 'future',
-                    lessThanToday && 'past',
-                  ].filter(Boolean);
-
                   return html`
                     <td
                       role="gridcell"
-                      part="${parts.join(' ')}"
+                      part="${this.__computeDatePart(
+                        date,
+                        this.focusedDate,
+                        this.selectedDate,
+                        this.minDate,
+                        this.maxDate,
+                        this.isDateDisabled,
+                        this.enteredDate,
+                        this.__hasFocus,
+                      )}"
                       .date="${date}"
-                      ?disabled="${isDisabled}"
-                      tabindex="${tabIndex}"
-                      aria-selected="${isSelected ? 'true' : 'false'}"
-                      aria-disabled="${isDisabled ? 'true' : 'false'}"
-                      aria-label="${this.__getDayAriaLabel(date)}"
+                      ?disabled="${this.__isDayDisabled(date, this.minDate, this.maxDate, this.isDateDisabled)}"
+                      tabindex="${this.__computeDayTabIndex(date, this.focusedDate)}"
+                      aria-selected="${this.__computeDayAriaSelected(date, this.selectedDate)}"
+                      aria-disabled="${this.__computeDayAriaDisabled(
+                        date,
+                        this.minDate,
+                        this.maxDate,
+                        this.isDateDisabled,
+                      )}"
+                      aria-label="${this.__computeDayAriaLabel(date)}"
                       >${this._getDate(date)}</td
                     >
                   `;
@@ -98,26 +93,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
       </table>
     `;
   }
-
-  /** @protected */
-  willUpdate(props) {
-    // Calculate these properties in `willUpdate()` instead of marking
-    // them as `computed` to avoid extra update because of `sync: true`
-    if (props.has('month') || props.has('i18n')) {
-      this._days = this._getDays(this.month, this.i18n);
-      this._weeks = this._getWeeks(this._days);
-    }
-
-    if (props.has('month') || props.has('minDate') || props.has('maxDate')) {
-      this.disabled = this._isDisabled(this.month, this.minDate, this.maxDate);
-    }
-
-    if (props.has('showWeekNumbers') || props.has('i18n')) {
-      // Currently only supported for locales that start the week on Monday.
-      this._showWeekNumbers = this.showWeekNumbers && this.i18n && this.i18n.firstDayOfWeek === 1;
-      this.toggleAttribute('week-numbers', this._showWeekNumbers);
-    }
-  }
 }
 
 defineCustomElement(MonthCalendar);

package/src/vaadin-month-calendar-mixin.js

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
+import { dateAllowed, dateEquals, getISOWeekNumber, normalizeDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
@@ -98,16 +98,19 @@ export const MonthCalendarMixin = (superClass) =>
         disabled: {
           type: Boolean,
           reflectToAttribute: true,
+          computed: '__computeDisabled(month, minDate, maxDate)',
         },
 
         /** @protected */
         _days: {
           type: Array,
+          computed: '__computeDays(month, i18n, minDate, maxDate, isDateDisabled)',
         },
 
         /** @protected */
         _weeks: {
           type: Array,
+          computed: '__computeWeeks(_days)',
         },
 
         /** @private */
@@ -123,7 +126,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__focusedDateChanged(focusedDate, _days)'];
+      return ['__focusedDateChanged(focusedDate, _days)', '_showWeekNumbersChanged(showWeekNumbers, i18n)'];
     }
 
     get focusableDateElement() {
@@ -148,7 +151,7 @@ export const MonthCalendarMixin = (superClass) =>
      * Returns true if all the dates in the month are out of the allowed range
      * @protected
      */
-    _isDisabled(month, minDate, maxDate) {
+    __computeDisabled(month, minDate, maxDate) {
       // First day of the month
       const firstDate = new Date(0, 0);
       firstDate.setFullYear(month.getFullYear());
@@ -205,7 +208,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    _getWeekDayNames(i18n, showWeekNumbers) {
+    __computeWeekDayNames(i18n, showWeekNumbers) {
       if (i18n === undefined || showWeekNumbers === undefined) {
         return [];
       }
@@ -239,7 +242,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    _showWeekSeparator(showWeekNumbers, i18n) {
+    __computeShowWeekSeparator(showWeekNumbers, i18n) {
       // Currently only supported for locales that start the week on Monday.
       return showWeekNumbers && i18n && i18n.firstDayOfWeek === 1;
     }
@@ -250,7 +253,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    _getDays(month, i18n) {
+    __computeDays(month, i18n) {
       if (month === undefined || i18n === undefined) {
         return [];
       }
@@ -278,7 +281,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    _getWeeks(days) {
+    __computeWeeks(days) {
       return days.reduce((acc, day, i) => {
         if (i % 7 === 0) {
           acc.push([]);
@@ -304,7 +307,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    __getWeekNumber(days) {
+    __computeWeekNumber(days) {
       const date = days.reduce((acc, d) => {
         return !acc && d ? d : acc;
       });
@@ -313,7 +316,7 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /** @protected */
-    __getDayAriaLabel(date) {
+    __computeDayAriaLabel(date) {
       if (!date) {
         return '';
       }
@@ -328,4 +331,73 @@ export const MonthCalendarMixin = (superClass) =>
 
       return ariaLabel;
     }
+
+    /** @private */
+    _showWeekNumbersChanged(showWeekNumbers, i18n) {
+      if (this.__computeShowWeekSeparator(showWeekNumbers, i18n)) {
+        this.setAttribute('week-numbers', '');
+      } else {
+        this.removeAttribute('week-numbers');
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/max-params
+    __computeDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
+      const result = ['date'];
+
+      if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
+        result.push('disabled');
+      }
+
+      if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
+        result.push('focused');
+      }
+
+      if (this.__isDaySelected(date, selectedDate)) {
+        result.push('selected');
+      }
+
+      if (this._isToday(date)) {
+        result.push('today');
+      }
+
+      if (date < normalizeDate(new Date())) {
+        result.push('past');
+      }
+
+      if (date > normalizeDate(new Date())) {
+        result.push('future');
+      }
+
+      return result.join(' ');
+    }
+
+    /** @private */
+    __isDaySelected(date, selectedDate) {
+      return dateEquals(date, selectedDate);
+    }
+
+    /** @private */
+    __computeDayAriaSelected(date, selectedDate) {
+      return String(this.__isDaySelected(date, selectedDate));
+    }
+
+    /** @private */
+    __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
+      return !dateAllowed(date, minDate, maxDate, isDateDisabled);
+    }
+
+    /** @private */
+    __computeDayAriaDisabled(date, min, max, isDateDisabled) {
+      if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
+        return 'false';
+      }
+
+      return String(this.__isDayDisabled(date, min, max, isDateDisabled));
+    }
+
+    /** @private */
+    __computeDayTabIndex(date, focusedDate) {
+      return dateEquals(date, focusedDate) ? '0' : '-1';
+    }
   };

package/src/vaadin-month-calendar-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-month-calendar.js

@@ -1,13 +1,12 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -33,8 +32,8 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       >
         <thead id="weekdays-container">
           <tr role="row" part="weekdays">
-            <th part="weekday" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]"></th>
-            <template is="dom-repeat" items="[[_getWeekDayNames(i18n, showWeekNumbers)]]">
+            <th part="weekday" aria-hidden="true" hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"></th>
+            <template is="dom-repeat" items="[[__computeWeekDayNames(i18n, showWeekNumbers)]]">
               <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
                 [[item.weekDayShort]]
               </th>
@@ -44,19 +43,23 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
         <tbody id="days-container">
           <template is="dom-repeat" items="[[_weeks]]" as="week">
             <tr role="row">
-              <td part="week-number" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]">
-                [[__getWeekNumber(week)]]
+              <td
+                part="week-number"
+                aria-hidden="true"
+                hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"
+              >
+                [[__computeWeekNumber(week)]]
               </td>
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
+                  part$="[[__computeDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
                   date="[[item]]"
-                  tabindex$="[[__getDayTabindex(item, focusedDate)]]"
+                  tabindex$="[[__computeDayTabIndex(item, focusedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
-                  aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
-                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
-                  aria-label$="[[__getDayAriaLabel(item)]]"
+                  aria-selected$="[[__computeDayAriaSelected(item, selectedDate)]]"
+                  aria-disabled$="[[__computeDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
+                  aria-label$="[[__computeDayAriaLabel(item)]]"
                   >[[_getDate(item)]]</td
                 >
               </template>
@@ -70,108 +73,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-month-calendar';
   }
-
-  static get properties() {
-    return {
-      /** @protected */
-      _days: {
-        type: Array,
-        computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)',
-      },
-
-      /** @protected */
-      _weeks: {
-        type: Array,
-        computed: '_getWeeks(_days)',
-      },
-
-      disabled: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: '_isDisabled(month, minDate, maxDate)',
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_showWeekNumbersChanged(showWeekNumbers, i18n)'];
-  }
-
-  /** @private */
-  _showWeekNumbersChanged(showWeekNumbers, i18n) {
-    if (showWeekNumbers && i18n && i18n.firstDayOfWeek === 1) {
-      this.setAttribute('week-numbers', '');
-    } else {
-      this.removeAttribute('week-numbers');
-    }
-  }
-
-  /** @private */
-  // eslint-disable-next-line @typescript-eslint/max-params
-  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
-    const result = ['date'];
-    const greaterThanToday = date > normalizeDate(new Date());
-    const lessThanToday = date < normalizeDate(new Date());
-
-    if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
-      result.push('disabled');
-    }
-
-    if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
-      result.push('focused');
-    }
-
-    if (this.__isDaySelected(date, selectedDate)) {
-      result.push('selected');
-    }
-
-    if (this._isToday(date)) {
-      result.push('today');
-    }
-
-    if (lessThanToday) {
-      result.push('past');
-    }
-
-    if (greaterThanToday) {
-      result.push('future');
-    }
-
-    return result.join(' ');
-  }
-
-  /** @private */
-  __isDaySelected(date, selectedDate) {
-    return dateEquals(date, selectedDate);
-  }
-
-  /** @private */
-  __getDayAriaSelected(date, selectedDate) {
-    if (this.__isDaySelected(date, selectedDate)) {
-      return 'true';
-    }
-  }
-
-  /** @private */
-  __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
-    return !dateAllowed(date, minDate, maxDate, isDateDisabled);
-  }
-
-  /** @private */
-  __getDayAriaDisabled(date, min, max, isDateDisabled) {
-    if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
-      return;
-    }
-
-    if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
-      return 'true';
-    }
-  }
-
-  /** @private */
-  __getDayTabindex(date, focusedDate) {
-    return dateEquals(date, focusedDate) ? '0' : '-1';
-  }
 }
 
 defineCustomElement(MonthCalendar);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -366,7 +366,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -170,7 +170,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "extension": true,
           "attributes": [
             {