@vaadin/date-picker 23.2.4 → 23.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.2.4",
+  "version": "23.2.6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "~23.2.4",
-    "@vaadin/component-base": "~23.2.4",
-    "@vaadin/field-base": "~23.2.4",
-    "@vaadin/input-container": "~23.2.4",
-    "@vaadin/vaadin-lumo-styles": "~23.2.4",
-    "@vaadin/vaadin-material-styles": "~23.2.4",
-    "@vaadin/vaadin-overlay": "~23.2.4",
-    "@vaadin/vaadin-themable-mixin": "~23.2.4"
+    "@vaadin/button": "~23.2.6",
+    "@vaadin/component-base": "~23.2.6",
+    "@vaadin/field-base": "~23.2.6",
+    "@vaadin/input-container": "~23.2.6",
+    "@vaadin/vaadin-lumo-styles": "~23.2.6",
+    "@vaadin/vaadin-material-styles": "~23.2.6",
+    "@vaadin/vaadin-overlay": "~23.2.6",
+    "@vaadin/vaadin-themable-mixin": "~23.2.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d6cb1fbaaf436635de6854653b8b205065e15688"
+  "gitHead": "3925f404e88c6574ca49058d1cd6b27558a5482b"
 }

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

@@ -297,6 +297,18 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
+  /**
+   * Whether to scroll to a sub-month position when scrolling to a date.
+   * This is active if the month scroller is not large enough to fit a
+   * full month. In that case we want to scroll to a position between
+   * two months in order to have the focused date in the visible area.
+   * @returns {boolean} whether to use sub-month scrolling
+   * @private
+   */
+  get __useSubMonthScrolling() {
+    return this.$.monthScroller.clientHeight < this.$.monthScroller.itemHeight + this.$.monthScroller.bufferOffset;
+  }
+
   get calendars() {
     return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
   }
@@ -354,7 +366,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * Scrolls the list to the given Date.
    */
   scrollToDate(date, animate) {
-    this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
+    const offset = this.__useSubMonthScrolling ? this._calculateWeekScrollOffset(date) : 0;
+    this._scrollToPosition(this._differenceInMonths(date, this._originDate) + offset, animate);
+    this.$.monthScroller.forceUpdate();
   }
 
   /**
@@ -386,23 +400,63 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
   revealDate(date, animate = true) {
-    if (date) {
-      const diff = this._differenceInMonths(date, this._originDate);
-      const scrolledAboveViewport = this.$.monthScroller.position > diff;
-
-      const visibleArea = Math.max(
-        this.$.monthScroller.itemHeight,
-        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2,
-      );
-      const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
-      const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
-
-      if (scrolledAboveViewport) {
-        this._scrollToPosition(diff, animate);
-      } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, animate);
+    if (!date) {
+      return;
+    }
+    const diff = this._differenceInMonths(date, this._originDate);
+    // If scroll area does not fit the full month, then always scroll with an offset to
+    // approximately display the week of the date
+    if (this.__useSubMonthScrolling) {
+      const offset = this._calculateWeekScrollOffset(date);
+      this._scrollToPosition(diff + offset, animate);
+      return;
+    }
+
+    // Otherwise determine if we need to scroll to make the month of the date visible
+    const scrolledAboveViewport = this.$.monthScroller.position > diff;
+
+    const visibleArea = Math.max(
+      this.$.monthScroller.itemHeight,
+      this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2,
+    );
+    const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+    const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+
+    if (scrolledAboveViewport) {
+      this._scrollToPosition(diff, animate);
+    } else if (scrolledBelowViewport) {
+      this._scrollToPosition(diff - visibleItems + 1, animate);
+    }
+  }
+
+  /**
+   * Calculates an offset to be added to the month scroll position
+   * when using sub-month scrolling, in order ensure that the week
+   * that the date is in is visible even for small scroll areas.
+   * As the month scroller uses a month as minimal scroll unit
+   * (a value of `1` equals one month), we can not exactly identify
+   * the position of a specific week. This is a best effort
+   * implementation based on manual testing.
+   * @param date the date for which to calculate the offset
+   * @returns {number} the offset
+   * @private
+   */
+  _calculateWeekScrollOffset(date) {
+    // Get first day of month
+    const temp = new Date(0, 0);
+    temp.setFullYear(date.getFullYear());
+    temp.setMonth(date.getMonth());
+    temp.setDate(1);
+    // Determine week (=row index) of date within the month
+    let week = 0;
+    while (temp.getDate() < date.getDate()) {
+      temp.setDate(temp.getDate() + 1);
+      if (temp.getDay() === this.i18n.firstDayOfWeek) {
+        week += 1;
       }
     }
+    // Calculate magic number that approximately keeps the week visible
+    return week / 6;
   }
 
   _initialPositionChanged(initialPosition) {
@@ -667,10 +721,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return months - date2.getMonth() + date1.getMonth();
   }
 
-  _differenceInYears(date1, date2) {
-    return this._differenceInMonths(date1, date2) / 12;
-  }
-
   _clear() {
     this._selectDate('');
   }

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

@@ -10,11 +10,6 @@ export const datePickerStyles = css`
     direction: ltr;
   }
 
-  :host([dir='rtl']) [part='value']::placeholder {
-    direction: rtl;
-    text-align: left;
-  }
-
   :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
     direction: rtl;
     text-align: left;

package/src/vaadin-infinite-scroller.js

@@ -89,6 +89,7 @@ class InfiniteScroller extends PolymerElement {
       /**
        * The amount of initial scroll top. Needed in order for the
        * user to be able to scroll backwards.
+       * @private
        */
       _initialScroll: {
         value: 500000,
@@ -96,17 +97,22 @@ class InfiniteScroller extends PolymerElement {
 
       /**
        * The index/position mapped at _initialScroll point.
+       * @private
        */
       _initialIndex: {
         value: 0,
       },
 
+      /** @private */
       _buffers: Array,
 
+      /** @private */
       _preventScrollEvent: Boolean,
 
+      /** @private */
       _mayHaveMomentum: Boolean,
 
+      /** @private */
       _initialized: Boolean,
 
       active: {
@@ -116,10 +122,11 @@ class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /** @protected */
   ready() {
     super.ready();
 
-    this._buffers = Array.prototype.slice.call(this.root.querySelectorAll('.buffer'));
+    this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
 
     this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
@@ -128,8 +135,8 @@ class InfiniteScroller extends PolymerElement {
       forwardHostProp(prop, value) {
         if (prop !== 'index') {
           this._buffers.forEach((buffer) => {
-            [].forEach.call(buffer.children, (insertionPoint) => {
-              insertionPoint._itemWrapper.instance[prop] = value;
+            [...buffer.children].forEach((slot) => {
+              slot._itemWrapper.instance[prop] = value;
             });
           });
         }
@@ -143,6 +150,19 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * Force the scroller to update clones after a reset, without
+   * waiting for the debouncer to resolve.
+   */
+  forceUpdate() {
+    if (this._debouncerUpdateClones) {
+      this._buffers[0].updated = this._buffers[1].updated = false;
+      this._updateClones();
+      this._debouncerUpdateClones.cancel();
+    }
+  }
+
+  /** @private */
   _activated(active) {
     if (active && !this._initialized) {
       this._createPool();
@@ -150,11 +170,14 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /** @private */
   _finishInit() {
     if (!this._initDone) {
       // Once the first set of items start fading in, stamp the rest
       this._buffers.forEach((buffer) => {
-        [].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
+        [...buffer.children].forEach((slot) => {
+          this._ensureStampedInstance(slot._itemWrapper);
+        });
       });
 
       if (!this._buffers[0].translateY) {
@@ -165,6 +188,7 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /** @private */
   _translateBuffer(up) {
     const index = up ? 1 : 0;
     this._buffers[index].translateY = this._buffers[index ? 0 : 1].translateY + this._bufferHeight * (index ? -1 : 1);
@@ -173,6 +197,7 @@ class InfiniteScroller extends PolymerElement {
     this._buffers.reverse();
   }
 
+  /** @private */
   _scroll() {
     if (this._scrollDisabled) {
       return;
@@ -269,10 +294,12 @@ class InfiniteScroller extends PolymerElement {
     return this._itemHeightVal;
   }
 
+  /** @private */
   get _bufferHeight() {
     return this.itemHeight * this.bufferSize;
   }
 
+  /** @private */
   _reset() {
     this._scrollDisabled = true;
     this.$.scroller.scrollTop = this._initialScroll;
@@ -292,6 +319,7 @@ class InfiniteScroller extends PolymerElement {
     this._scrollDisabled = false;
   }
 
+  /** @private */
   _createPool() {
     const container = this.getBoundingClientRect();
     this._buffers.forEach((buffer) => {
@@ -303,10 +331,10 @@ class InfiniteScroller extends PolymerElement {
         const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
         const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
 
-        const insertionPoint = document.createElement('slot');
-        insertionPoint.setAttribute('name', slotName);
-        insertionPoint._itemWrapper = itemWrapper;
-        buffer.appendChild(insertionPoint);
+        const slot = document.createElement('slot');
+        slot.setAttribute('name', slotName);
+        slot._itemWrapper = itemWrapper;
+        buffer.appendChild(slot);
 
         itemWrapper.setAttribute('slot', slotName);
         this.appendChild(itemWrapper);
@@ -325,6 +353,7 @@ class InfiniteScroller extends PolymerElement {
     }, 1);
   }
 
+  /** @private */
   _ensureStampedInstance(itemWrapper) {
     if (itemWrapper.firstElementChild) {
       return;
@@ -340,6 +369,7 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
+  /** @private */
   _updateClones(viewPortOnly) {
     this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
 
@@ -348,8 +378,8 @@ class InfiniteScroller extends PolymerElement {
       if (!buffer.updated) {
         const firstIndex = this._firstIndex + this.bufferSize * bufferIndex;
 
-        [].forEach.call(buffer.children, (insertionPoint, index) => {
-          const itemWrapper = insertionPoint._itemWrapper;
+        [...buffer.children].forEach((slot, index) => {
+          const itemWrapper = slot._itemWrapper;
           if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {
             itemWrapper.instance.index = firstIndex + index;
           }
@@ -359,6 +389,7 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
+  /** @private */
   _isVisible(element, container) {
     const rect = element.getBoundingClientRect();
     return rect.bottom > container.top && rect.top < container.bottom;

package/src/vaadin-month-calendar.js

@@ -428,12 +428,6 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
     return '-1';
   }
-
-  __getWeekNumbers(dates) {
-    return dates
-      .map((date) => this.__getWeekNumber(date, dates))
-      .filter((week, index, arr) => arr.indexOf(week) === index);
-  }
 }
 
 customElements.define(MonthCalendar.is, MonthCalendar);

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

@@ -36,7 +36,7 @@ registerStyles(
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-      --vaadin-infinite-scroller-buffer-offset: 20%;
+      --vaadin-infinite-scroller-buffer-offset: 10%;
       -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
@@ -171,7 +171,7 @@ registerStyles(
       color: var(--lumo-primary-contrast-color);
     }
 
-    /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
+    /* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
     @media screen and (max-width: 374px) {
       :host {
         background-image: none;

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

@@ -113,11 +113,6 @@ registerStyles(
       background: var(--material-background-color);
     }
 
-    :host([years-visible]) [part='years']::after {
-      top: calc(20px + 16px);
-      height: calc(100% - 20px - 16px);
-    }
-
     [part='year-number'] {
       font-size: var(--material-small-font-size);
       line-height: 10px; /* NOTE(platosha): chosen to align years to months */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "23.2.4",
+  "version": "23.2.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -216,7 +216,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/23.2.4/#/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`overlay-content`     | The overlay element\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`today`    | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date                         | date\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/23.2.4/#/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/23.2.4/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.4/#/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`months`              | Months scroller\n`years`               | Years scroller\n`toolbar`             | Footer bar with buttons\n`today-button`        | Today button\n`cancel-button`       | Cancel button\n`month`               | Month calendar\n`year-number`         | Year number\n`year-separator`      | Year separator\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\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/custom-theme/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/23.2.6/#/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`overlay-content`     | The overlay element\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`today`    | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date                         | date\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/23.2.6/#/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/23.2.6/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.6/#/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`months`              | Months scroller\n`years`               | Years scroller\n`toolbar`             | Footer bar with buttons\n`today-button`        | Today button\n`cancel-button`       | Cancel button\n`month`               | Month calendar\n`year-number`         | Year number\n`year-separator`      | Year separator\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\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/custom-theme/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": "23.2.4",
+  "version": "23.2.6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -107,7 +107,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/23.2.4/#/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`overlay-content`     | The overlay element\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`today`    | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date                         | date\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/23.2.4/#/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/23.2.4/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.4/#/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`months`              | Months scroller\n`years`               | Years scroller\n`toolbar`             | Footer bar with buttons\n`today-button`        | Today button\n`cancel-button`       | Cancel button\n`month`               | Month calendar\n`year-number`         | Year number\n`year-separator`      | Year separator\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\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/custom-theme/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/23.2.6/#/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`overlay-content`     | The overlay element\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`today`    | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date                         | date\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/23.2.6/#/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/23.2.6/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.6/#/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`months`              | Months scroller\n`years`               | Years scroller\n`toolbar`             | Footer bar with buttons\n`today-button`        | Today button\n`cancel-button`       | Cancel button\n`month`               | Month calendar\n`year-number`         | Year number\n`year-separator`      | Year separator\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\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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {