@vaadin/date-picker 25.0.0-alpha3 → 25.0.0-alpha4

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

@@ -5,16 +5,10 @@
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import {
-  dateAfterXMonths,
-  dateAllowed,
-  dateEquals,
-  extractDateParts,
-  getClosestDate,
-} from './vaadin-date-picker-helper.js';
+import { dateAfterXMonths, dateAllowed, dateEquals, getClosestDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
@@ -75,14 +69,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           value: '(min-width: 375px)',
         },
 
-        _translateX: {
-          observer: '_translateXChanged',
-        },
-
-        _yearScrollerWidth: {
-          value: 50,
-        },
-
         i18n: {
           type: Object,
         },
@@ -178,20 +164,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
     }
 
-    /** @protected */
-    _addListeners() {
-      setTouchAction(this.$.scrollers, 'pan-y');
-
-      addListener(this.$.scrollers, 'track', this._track.bind(this));
-      addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
-      addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._cancel.bind(this));
-      addListener(
-        this.shadowRoot.querySelector('[part="years-toggle-button"]'),
-        'tap',
-        this._toggleYearScroller.bind(this),
-      );
-    }
-
     /** @protected */
     _initControllers() {
       this.addController(
@@ -206,7 +178,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onTodayButtonKeyDown(e));
-            addListener(btn, 'tap', this._onTodayTap.bind(this));
+            btn.addEventListener('click', this._onTodayTap.bind(this));
             this._todayButton = btn;
           },
         }),
@@ -218,7 +190,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onCancelButtonKeyDown(e));
-            addListener(btn, 'tap', this._cancel.bind(this));
+            btn.addEventListener('click', this._cancel.bind(this));
             this._cancelButton = btn;
           },
         }),
@@ -230,7 +202,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     reset() {
       this._closeYearScroller();
-      this._toggleAnimateClass(true);
     }
 
     /**
@@ -527,14 +498,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _formatDisplayed(date, i18n, label) {
-      if (date && i18n && typeof i18n.formatDate === 'function') {
-        return i18n.formatDate(extractDateParts(date));
-      }
-      return label;
-    }
-
     /** @private */
     _onTodayTap() {
       const today = this._getTodayMidnight();
@@ -647,99 +610,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       window.requestAnimationFrame(smoothScroll);
     }
 
-    /** @private */
-    _limit(value, range) {
-      return Math.min(range.max, Math.max(range.min, value));
-    }
-
-    /** @private */
-    _handleTrack(e) {
-      // Check if horizontal movement threshold (dx) not exceeded or
-      // scrolling fast vertically (ddy).
-      if (Math.abs(e.detail.dx) < 10 || Math.abs(e.detail.ddy) > 10) {
-        return;
-      }
-
-      // If we're flinging quickly -> start animating already.
-      if (Math.abs(e.detail.ddx) > this._yearScrollerWidth / 3) {
-        this._toggleAnimateClass(true);
-      }
-
-      const newTranslateX = this._translateX + e.detail.ddx;
-      this._translateX = this._limit(newTranslateX, {
-        min: 0,
-        max: this._yearScrollerWidth,
-      });
-    }
-
-    /** @private */
-    _track(e) {
-      if (this._desktopMode) {
-        // No need to track for swipe gestures on desktop.
-        return;
-      }
-
-      switch (e.detail.state) {
-        case 'start':
-          this._toggleAnimateClass(false);
-          break;
-        case 'track':
-          this._handleTrack(e);
-          break;
-        case 'end':
-          this._toggleAnimateClass(true);
-          if (this._translateX >= this._yearScrollerWidth / 2) {
-            this._closeYearScroller();
-          } else {
-            this._openYearScroller();
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    /** @private */
-    _toggleAnimateClass(enable) {
-      if (enable) {
-        this.classList.add('animate');
-      } else {
-        this.classList.remove('animate');
-      }
-    }
-
     /** @private */
     _toggleYearScroller() {
-      if (this._isYearScrollerVisible()) {
-        this._closeYearScroller();
-      } else {
-        this._openYearScroller();
-      }
-    }
-
-    /** @private */
-    _openYearScroller() {
-      this._translateX = 0;
-      this.setAttribute('years-visible', '');
+      this.toggleAttribute('years-visible');
     }
 
     /** @private */
     _closeYearScroller() {
       this.removeAttribute('years-visible');
-      this._translateX = this._yearScrollerWidth;
-    }
-
-    /** @private */
-    _isYearScrollerVisible() {
-      return this._translateX < this._yearScrollerWidth / 2;
-    }
-
-    /** @private */
-    _translateXChanged(x) {
-      if (!this._desktopMode) {
-        this._monthScroller.style.transform = `translateX(${x - this._yearScrollerWidth}px)`;
-        this._yearScroller.style.transform = `translateX(${x}px)`;
-      }
     }
 
     /** @private */
@@ -769,11 +647,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       this._close();
     }
 
-    /** @protected */
-    _preventDefault(e) {
-      e.preventDefault();
-    }
-
     /** @private */
     __toggleDate(date) {
       if (dateEquals(date, this.selectedDate)) {

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

@@ -12,9 +12,10 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-core-styles.js';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
-import { overlayContentStyles } from './vaadin-date-picker-overlay-content-styles.js';
 
 /**
  * @customElement
@@ -22,7 +23,7 @@ import { overlayContentStyles } from './vaadin-date-picker-overlay-content-style
  * @private
  */
 class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  ThemableMixin(DirMixin(PolylitMixin(LitElement))),
+  CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-date-picker-overlay-content';
@@ -35,23 +36,19 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   /** @protected */
   render() {
     return html`
-      <div part="overlay-header" @touchend="${this._preventDefault}" aria-hidden="true">
-        <div part="label">${this._formatDisplayed(this.selectedDate, this.i18n, this.label)}</div>
-        <div part="clear-button" ?hidden="${!this.selectedDate}"></div>
-        <div part="toggle-button"></div>
+      <slot name="months"></slot>
+      <slot name="years"></slot>
 
-        <div part="years-toggle-button" ?hidden="${this._desktopMode}" aria-hidden="true">
+      <div role="toolbar" part="toolbar">
+        <slot name="today-button"></slot>
+        <div
+          part="years-toggle-button"
+          ?hidden="${this._desktopMode}"
+          aria-hidden="true"
+          @click="${this._toggleYearScroller}"
+        >
           ${this._yearAfterXMonths(this._visibleMonthIndex)}
         </div>
-      </div>
-
-      <div id="scrollers">
-        <slot name="months"></slot>
-        <slot name="years"></slot>
-      </div>
-
-      <div @touchend="${this._preventDefault}" role="toolbar" part="toolbar">
-        <slot name="today-button"></slot>
         <slot name="cancel-button"></slot>
       </div>
     `;
@@ -63,7 +60,6 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
 
     this.setAttribute('role', 'dialog');
 
-    this._addListeners();
     this._initControllers();
   }
 }

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

@@ -7,10 +7,11 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { datePickerOverlayStyles } from './styles/vaadin-date-picker-overlay-core-styles.js';
 import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -22,7 +23,9 @@ import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js'
  * @mixes ThemableMixin
  * @private
  */
-class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DatePickerOverlay extends DatePickerOverlayMixin(
+  DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

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

@@ -13,10 +13,9 @@ stylesTemplate.innerHTML = `
       --vaadin-infinite-scroller-item-height: 80px;
       width: 50px;
       display: block;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      transform: translateX(100%);
+      position: relative;
+      grid-area: years;
+      height: auto;
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       user-select: none;

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

@@ -3,11 +3,12 @@
  * 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';
+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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
+import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -18,18 +19,27 @@ import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
  * @mixes DatePickerYearMixin
  * @private
  */
-export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMixin(LitElement))) {
+export class DatePickerYear extends CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-date-picker-year';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-    `;
+    return datePickerYearStyles;
+  }
+
+  static get properties() {
+    return {
+      year: {
+        type: String,
+        sync: true,
+      },
+
+      selectedDate: {
+        type: Object,
+        sync: true,
+      },
+    };
   }
 
   /** @protected */
@@ -39,6 +49,19 @@ export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMix
       <div part="year-separator" aria-hidden="true"></div>
     `;
   }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('year')) {
+      this.toggleAttribute('current', this.year === new Date().getFullYear());
+    }
+
+    if (props.has('year') || props.has('selectedDate')) {
+      this.toggleAttribute('selected', this.selectedDate && this.selectedDate.getFullYear() === this.year);
+    }
+  }
 }
 
 defineCustomElement(DatePickerYear);

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

@@ -110,12 +110,8 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *

package/src/vaadin-date-picker.js

@@ -16,9 +16,10 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { datePickerStyles } from './styles/vaadin-date-picker-core-styles.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-import { datePickerStyles } from './vaadin-date-picker-styles.js';
 
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
@@ -73,12 +74,8 @@ import { datePickerStyles } from './vaadin-date-picker-styles.js';
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *
@@ -147,7 +144,9 @@ import { datePickerStyles } from './vaadin-date-picker-styles.js';
  * @mixes InputControlMixin
  * @mixes DatePickerMixin
  */
-class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))) {
+class DatePicker extends DatePickerMixin(
+  InputControlMixin(CSSInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-date-picker';
   }
@@ -209,6 +208,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       <vaadin-date-picker-overlay
         id="overlay"
         ?fullscreen="${this._fullscreen}"
+        ?week-numbers="${this.showWeekNumbers}"
         theme="${ifDefined(this._theme)}"
         .opened="${this.opened}"
         @opened-changed="${this._onOpenedChanged}"

package/src/vaadin-infinite-scroller.js

@@ -21,9 +21,9 @@ template.innerHTML = `
       height: 100%;
       overflow: auto;
       outline: none;
-      margin-right: -40px;
       -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
+      scrollbar-width: none;
     }
 
     #scroller.notouchscroll {
@@ -38,7 +38,6 @@ template.innerHTML = `
       position: absolute;
       width: var(--vaadin-infinite-scroller-buffer-width, 100%);
       box-sizing: border-box;
-      padding-right: 40px;
       top: var(--vaadin-infinite-scroller-buffer-offset, 0);
     }
   </style>

package/src/vaadin-month-calendar.js

@@ -6,16 +6,17 @@
 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { monthCalendarStyles } from './styles/vaadin-month-calendar-core-styles.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
-import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
 /**
  * @customElement
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class MonthCalendar extends MonthCalendarMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-month-calendar';
   }

package/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -20,6 +20,10 @@ registerStyles(
       cursor: default;
     }
 
+    :host([dir='rtl']) {
+      background-position: top left;
+    }
+
     ::slotted([slot='months']) {
       /* Month calendar height:
               header height + margin-bottom
@@ -39,16 +43,12 @@ registerStyles(
       -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
-      margin-right: 57px;
     }
 
     ::slotted([slot='years']) {
       /* TODO get rid of fixed magic number */
-      --vaadin-infinite-scroller-buffer-width: 97px;
+      --vaadin-infinite-scroller-buffer-width: 57px;
       width: 57px;
-      height: auto;
-      top: 0;
-      bottom: 0;
       font-size: var(--lumo-font-size-s);
       box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
       -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
@@ -56,19 +56,12 @@ registerStyles(
       cursor: var(--lumo-clickable-cursor);
     }
 
-    ::slotted([slot='years']:hover) {
-      --_lumo-date-picker-year-opacity: 1;
-    }
-
-    /* TODO unsupported selector */
-    #scrollers {
-      position: static;
-      display: block;
+    :host([dir='rtl']) ::slotted([slot='years']) {
+      box-shadow: inset -2px 0 4px 0 var(--lumo-shade-5pct);
     }
 
-    /* TODO fix this in vaadin-date-picker that it adapts to the width of the year scroller */
-    :host([desktop]) ::slotted([slot='months']) {
-      right: auto;
+    ::slotted([slot='years']:hover) {
+      --_lumo-date-picker-year-opacity: 1;
     }
 
     /* Year scroller position indicator */
@@ -84,10 +77,14 @@ registerStyles(
       z-index: 1;
     }
 
+    :host([dir='rtl']) ::slotted([slot='years'])::before {
+      right: 0;
+      transform: translate(75%, -50%) rotate(45deg);
+    }
+
     [part='toolbar'] {
       padding: var(--lumo-space-s);
       border-bottom-left-radius: var(--lumo-border-radius-l);
-      margin-right: 57px;
     }
 
     [part='toolbar'] ::slotted(vaadin-button) {
@@ -97,24 +94,8 @@ registerStyles(
     /* Narrow viewport mode (fullscreen) */
 
     :host([fullscreen]) [part='toolbar'] {
-      order: -1;
       background-color: var(--lumo-base-color);
-    }
-
-    :host([fullscreen]) [part='overlay-header'] {
-      order: -2;
-      height: var(--lumo-size-m);
-      padding: var(--lumo-space-s);
-      position: absolute;
-      left: 0;
-      right: 0;
-      justify-content: center;
-    }
-
-    :host([fullscreen]) [part='toggle-button'],
-    :host([fullscreen]) [part='clear-button'],
-    [part='overlay-header'] [part='label'] {
-      display: none;
+      margin-inline-end: 57px;
     }
 
     /* Very narrow screen (year scroller initially hidden) */
@@ -122,10 +103,9 @@ registerStyles(
     [part='years-toggle-button'] {
       display: flex;
       align-items: center;
-      height: var(--lumo-size-s);
+      height: var(--lumo-size-m);
       padding: 0 0.5em;
       border-radius: var(--lumo-border-radius-m);
-      z-index: 3;
       color: var(--lumo-primary-text-color);
       font-weight: 500;
       -webkit-font-smoothing: antialiased;
@@ -143,21 +123,16 @@ registerStyles(
         background-image: none;
       }
 
-      [part='toolbar'],
-      ::slotted([slot='months']) {
-        margin-right: 0;
+      :host([fullscreen]) [part='toolbar'] {
+        margin-inline-end: 0;
       }
 
       /* TODO make date-picker adapt to the width of the years part */
       ::slotted([slot='years']) {
-        --vaadin-infinite-scroller-buffer-width: 90px;
+        --vaadin-infinite-scroller-buffer-width: 50px;
         width: 50px;
         background-color: var(--lumo-shade-5pct);
       }
-
-      :host([years-visible]) ::slotted([slot='months']) {
-        padding-left: 50px;
-      }
     }
   `,
   { moduleId: 'lumo-date-picker-overlay-content' },

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "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/25.0.0-alpha3/#/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\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/25.0.0-alpha3/#/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/25.0.0-alpha3/#/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/25.0.0-alpha4/#/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\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/25.0.0-alpha4/#/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/25.0.0-alpha4/#/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`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar 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",