@vaadin/date-picker 24.2.0-alpha5 → 24.2.0-alpha7

package/src/vaadin-month-calendar.js

@@ -5,76 +5,23 @@
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
+import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
+import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
+
+registerStyles('vaadin-month-calendar', monthCalendarStyles, {
+  moduleId: 'vaadin-month-calendar-styles',
+});
 
 /**
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
+class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        #monthGrid {
-          width: 100%;
-          border-collapse: collapse;
-        }
-
-        #days-container tr,
-        #weekdays-container tr {
-          display: flex;
-        }
-
-        [part~='date'] {
-          outline: none;
-        }
-
-        [part~='disabled'] {
-          pointer-events: none;
-        }
-
-        [part='week-number'][hidden],
-        [part='weekday'][hidden] {
-          display: none;
-        }
-
-        [part='weekday'],
-        [part~='date'] {
-          width: calc(100% / 7);
-          padding: 0;
-          font-weight: normal;
-        }
-
-        [part='weekday']:empty,
-        [part='week-number'] {
-          width: 12.5%;
-          flex-shrink: 0;
-          padding: 0;
-        }
-
-        :host([week-numbers]) [part='weekday']:not(:empty),
-        :host([week-numbers]) [part~='date'] {
-          width: 12.5%;
-        }
-
-        @media (forced-colors: active) {
-          [part~='date'][part~='focused'] {
-            outline: 1px solid;
-          }
-          [part~='date'][part~='selected'] {
-            outline: 3px solid;
-          }
-        }
-      </style>
-
-      <div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n.monthNames)]]</div>
+      <div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n)]]</div>
       <table
         id="monthGrid"
         role="grid"
@@ -84,15 +31,8 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
       >
         <thead id="weekdays-container">
           <tr role="row" part="weekdays">
-            <th
-              part="weekday"
-              aria-hidden="true"
-              hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]"
-            ></th>
-            <template
-              is="dom-repeat"
-              items="[[_getWeekDayNames(i18n.weekdays, i18n.weekdaysShort, showWeekNumbers, i18n.firstDayOfWeek)]]"
-            >
+            <th part="weekday" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]"></th>
+            <template is="dom-repeat" items="[[_getWeekDayNames(i18n, showWeekNumbers)]]">
               <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
                 [[item.weekDayShort]]
               </th>
@@ -102,11 +42,7 @@ class MonthCalendar extends FocusMixin(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.firstDayOfWeek)]]"
-              >
+              <td part="week-number" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]">
                 [[__getWeekNumber(week)]]
               </td>
               <template is="dom-repeat" items="[[week]]">
@@ -135,65 +71,13 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   static get properties() {
     return {
-      /**
-       * A `Date` object defining the month to be displayed. Only year and
-       * month properties are actually used.
-       */
-      month: {
-        type: Date,
-        value: new Date(),
-      },
-
-      /**
-       * A `Date` object for the currently selected date.
-       */
-      selectedDate: {
-        type: Date,
-        notify: true,
-      },
-
-      /**
-       * A `Date` object for the currently focused date.
-       */
-      focusedDate: Date,
-
-      showWeekNumbers: {
-        type: Boolean,
-        value: false,
-      },
-
-      i18n: {
-        type: Object,
-      },
-
-      /**
-       * Flag stating whether taps on the component should be ignored.
-       */
-      ignoreTaps: Boolean,
-
-      _notTapping: Boolean,
-
-      /**
-       * The earliest date that can be selected. All earlier dates will be disabled.
-       */
-      minDate: {
-        type: Date,
-        value: null,
-      },
-
-      /**
-       * The latest date that can be selected. All later dates will be disabled.
-       */
-      maxDate: {
-        type: Date,
-        value: null,
-      },
-
+      /** @protected */
       _days: {
         type: Array,
-        computed: '_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)',
+        computed: '_getDays(month, i18n, minDate, maxDate)',
       },
 
+      /** @protected */
       _weeks: {
         type: Array,
         computed: '_getWeeks(_days)',
@@ -208,177 +92,19 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
   }
 
   static get observers() {
-    return [
-      '_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)',
-      '__focusedDateChanged(focusedDate, _days)',
-    ];
-  }
-
-  get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('[part~=date]')].find((datePart) => {
-      return dateEquals(datePart.date, this.focusedDate);
-    });
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
-  }
-
-  /* Returns true if all the dates in the month are out of the allowed range */
-  _isDisabled(month, minDate, maxDate) {
-    // First day of the month
-    const firstDate = new Date(0, 0);
-    firstDate.setFullYear(month.getFullYear());
-    firstDate.setMonth(month.getMonth());
-    firstDate.setDate(1);
-
-    // Last day of the month
-    const lastDate = new Date(0, 0);
-    lastDate.setFullYear(month.getFullYear());
-    lastDate.setMonth(month.getMonth() + 1);
-    lastDate.setDate(0);
-
-    if (
-      minDate &&
-      maxDate &&
-      minDate.getMonth() === maxDate.getMonth() &&
-      minDate.getMonth() === month.getMonth() &&
-      maxDate.getDate() - minDate.getDate() >= 0
-    ) {
-      return false;
-    }
-
-    return !dateAllowed(firstDate, minDate, maxDate) && !dateAllowed(lastDate, minDate, maxDate);
-  }
-
-  _getTitle(month, monthNames) {
-    if (month === undefined || monthNames === undefined) {
-      return;
-    }
-    return this.i18n.formatTitle(monthNames[month.getMonth()], month.getFullYear());
-  }
-
-  _onMonthGridTouchStart() {
-    this._notTapping = false;
-    setTimeout(() => {
-      this._notTapping = true;
-    }, 300);
-  }
-
-  _dateAdd(date, delta) {
-    date.setDate(date.getDate() + delta);
-  }
-
-  _applyFirstDayOfWeek(weekDayNames, firstDayOfWeek) {
-    if (weekDayNames === undefined || firstDayOfWeek === undefined) {
-      return;
-    }
-
-    return weekDayNames.slice(firstDayOfWeek).concat(weekDayNames.slice(0, firstDayOfWeek));
-  }
-
-  _getWeekDayNames(weekDayNames, weekDayNamesShort, showWeekNumbers, firstDayOfWeek) {
-    if (
-      weekDayNames === undefined ||
-      weekDayNamesShort === undefined ||
-      showWeekNumbers === undefined ||
-      firstDayOfWeek === undefined
-    ) {
-      return;
-    }
-    weekDayNames = this._applyFirstDayOfWeek(weekDayNames, firstDayOfWeek);
-    weekDayNamesShort = this._applyFirstDayOfWeek(weekDayNamesShort, firstDayOfWeek);
-    weekDayNames = weekDayNames.map((day, index) => {
-      return {
-        weekDay: day,
-        weekDayShort: weekDayNamesShort[index],
-      };
-    });
-
-    return weekDayNames;
+    return ['_showWeekNumbersChanged(showWeekNumbers, i18n)'];
   }
 
-  __focusedDateChanged(focusedDate, days) {
-    if (days.some((date) => dateEquals(date, focusedDate))) {
-      this.removeAttribute('aria-hidden');
-    } else {
-      this.setAttribute('aria-hidden', 'true');
-    }
-  }
-
-  _getDate(date) {
-    return date ? date.getDate() : '';
-  }
-
-  _showWeekNumbersChanged(showWeekNumbers, firstDayOfWeek) {
-    if (showWeekNumbers && firstDayOfWeek === 1) {
+  /** @private */
+  _showWeekNumbersChanged(showWeekNumbers, i18n) {
+    if (showWeekNumbers && i18n && i18n.firstDayOfWeek === 1) {
       this.setAttribute('week-numbers', '');
     } else {
       this.removeAttribute('week-numbers');
     }
   }
 
-  _showWeekSeparator(showWeekNumbers, firstDayOfWeek) {
-    // Currently only supported for locales that start the week on Monday.
-    return showWeekNumbers && firstDayOfWeek === 1;
-  }
-
-  _isToday(date) {
-    return dateEquals(new Date(), date);
-  }
-
-  _getDays(month, firstDayOfWeek) {
-    if (month === undefined || firstDayOfWeek === undefined) {
-      return;
-    }
-    // First day of the month (at midnight).
-    const date = new Date(0, 0);
-    date.setFullYear(month.getFullYear());
-    date.setMonth(month.getMonth());
-    date.setDate(1);
-
-    // Rewind to first day of the week.
-    while (date.getDay() !== firstDayOfWeek) {
-      this._dateAdd(date, -1);
-    }
-
-    const days = [];
-    const startMonth = date.getMonth();
-    const targetMonth = month.getMonth();
-    while (date.getMonth() === targetMonth || date.getMonth() === startMonth) {
-      days.push(date.getMonth() === targetMonth ? new Date(date.getTime()) : null);
-
-      // Advance to next day.
-      this._dateAdd(date, 1);
-    }
-    return days;
-  }
-
-  _getWeeks(days) {
-    return days.reduce((acc, day, i) => {
-      if (i % 7 === 0) {
-        acc.push([]);
-      }
-      acc[acc.length - 1].push(day);
-      return acc;
-    }, []);
-  }
-
-  _handleTap(e) {
-    if (!this.ignoreTaps && !this._notTapping && e.target.date && !e.target.hasAttribute('disabled')) {
-      this.selectedDate = e.target.date;
-      this.dispatchEvent(
-        new CustomEvent('date-tap', { detail: { date: e.target.date }, bubbles: true, composed: true }),
-      );
-    }
-  }
-
-  _preventDefault(e) {
-    e.preventDefault();
-  }
-
+  /** @private */
   __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
     const result = ['date'];
 
@@ -401,32 +127,29 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     return result.join(' ');
   }
 
-  __getWeekNumber(days) {
-    const date = days.reduce((acc, d) => {
-      return !acc && d ? d : acc;
-    });
-
-    return getISOWeekNumber(date);
-  }
-
+  /** @private */
   __isDayFocused(date, focusedDate) {
     return dateEquals(date, focusedDate);
   }
 
+  /** @private */
   __isDaySelected(date, selectedDate) {
     return dateEquals(date, selectedDate);
   }
 
+  /** @private */
   __getDayAriaSelected(date, selectedDate) {
     if (this.__isDaySelected(date, selectedDate)) {
       return 'true';
     }
   }
 
+  /** @private */
   __isDayDisabled(date, minDate, maxDate) {
     return !dateAllowed(date, minDate, maxDate);
   }
 
+  /** @private */
   __getDayAriaDisabled(date, min, max) {
     if (date === undefined || min === undefined || max === undefined) {
       return;
@@ -437,22 +160,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
-  __getDayAriaLabel(date) {
-    if (!date) {
-      return '';
-    }
-
-    let ariaLabel = `${this._getDate(date)} ${this.i18n.monthNames[date.getMonth()]} ${date.getFullYear()}, ${
-      this.i18n.weekdays[date.getDay()]
-    }`;
-
-    if (this._isToday(date)) {
-      ariaLabel += `, ${this.i18n.today}`;
-    }
-
-    return ariaLabel;
-  }
-
+  /** @private */
   __getDayTabindex(date, focusedDate) {
     if (this.__isDayFocused(date, focusedDate)) {
       return '0';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha5",
+  "version": "24.2.0-alpha7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -334,7 +334,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.2.0-alpha5/#/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.2.0-alpha5/#/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.2.0-alpha5/#/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.2.0-alpha5/#/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\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.",
+          "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.2.0-alpha7/#/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.2.0-alpha7/#/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.2.0-alpha7/#/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.2.0-alpha7/#/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\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.",
           "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.2.0-alpha5",
+  "version": "24.2.0-alpha7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -156,7 +156,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.2.0-alpha5/#/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.2.0-alpha5/#/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.2.0-alpha5/#/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.2.0-alpha5/#/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\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.",
+          "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.2.0-alpha7/#/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.2.0-alpha7/#/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.2.0-alpha7/#/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.2.0-alpha7/#/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\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.",
           "extension": true,
           "attributes": [
             {