@vaadin/date-picker 23.2.0-alpha6 → 23.2.0-beta3

package/package.json

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

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

@@ -74,7 +74,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
         fullscreen$="[[_fullscreen]]"
         opened="{{opened}}"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"

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

@@ -8,6 +8,7 @@ import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mix
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
 export interface DatePickerDate {
@@ -37,6 +38,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   T;

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

@@ -8,7 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
 
@@ -17,7 +17,9 @@ import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaa
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
+  class VaadinDatePickerMixin extends ControllerMixin(
+    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -278,7 +280,6 @@ export const DatePickerMixin = (subclass) =>
          */
         _minDate: {
           type: Date,
-          observer: '__minDateChanged',
           computed: '__computeMinOrMaxDate(min)',
         },
 
@@ -289,7 +290,6 @@ export const DatePickerMixin = (subclass) =>
          */
         _maxDate: {
           type: Date,
-          observer: '__maxDateChanged',
           computed: '__computeMinOrMaxDate(max)',
         },
 
@@ -320,6 +320,10 @@ export const DatePickerMixin = (subclass) =>
       ];
     }
 
+    static get constraints() {
+      return [...super.constraints, 'min', 'max'];
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -386,12 +390,10 @@ export const DatePickerMixin = (subclass) =>
           }
         }
 
-        if (this.inputElement.value === '' && this.__dispatchChange) {
-          this.validate();
+        this.validate();
+
+        if (this._inputValue === '' && this.value !== '') {
           this.value = '';
-          this.__dispatchChange = false;
-        } else {
-          this.validate();
         }
       }
     }
@@ -469,7 +471,10 @@ export const DatePickerMixin = (subclass) =>
         this._close();
       });
 
-      this._overlayContent.addEventListener('close', this._close.bind(this));
+      this._overlayContent.addEventListener('close', () => {
+        this._close();
+      });
+
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
@@ -478,7 +483,7 @@ export const DatePickerMixin = (subclass) =>
 
         this._selectDate(e.detail.date);
 
-        this._close(e);
+        this._close();
       });
 
       // User confirmed selected date by pressing Enter or Today.
@@ -488,9 +493,12 @@ export const DatePickerMixin = (subclass) =>
         this._selectDate(e.detail.date);
       });
 
-      // Keep focus attribute in focusElement for styling
+      // Set focus-ring attribute when moving focus to the overlay
+      // by pressing Tab or arrow key, after opening it on click.
       this._overlayContent.addEventListener('focusin', () => {
-        this._setFocused(true);
+        if (this._keyboardActive) {
+          this._setFocused(true);
+        }
       });
 
       this.addEventListener('mousedown', () => this.__bringToFront());
@@ -523,6 +531,51 @@ export const DatePickerMixin = (subclass) =>
       return inputValid && minMaxValid && inputValidity;
     }
 
+    /**
+     * Override method inherited from `FocusMixin`
+     * to not call `_setFocused(true)` when focus
+     * is restored after closing overlay on click,
+     * and to avoid removing `focus-ring` attribute.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldSetFocus(_event) {
+      return !this._shouldKeepFocusRing;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to prevent removing the `focused` attribute:
+     * - when moving focus to the overlay content,
+     * - when closing on date click / outside click.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(_event) {
+      return !this.opened;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to store the `focus-ring` state to restore
+     * it later when closing on outside click.
+     *
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      this._shouldKeepFocusRing = focused && this._keyboardActive;
+    }
+
     /**
      * Select date on user interaction and set the flag
      * to fire change event if necessary.
@@ -542,10 +595,7 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _close(e) {
-      if (e) {
-        e.stopPropagation();
-      }
+    _close() {
       this._focus();
       this.close();
     }
@@ -709,27 +759,11 @@ export const DatePickerMixin = (subclass) =>
         this._selectedDate = null;
       }
 
-      this._toggleHasValue(!!value);
-    }
-
-    /** @private */
-    __minDateChanged() {
-      if (this.value) {
-        this.validate();
-      }
-    }
-
-    /** @private */
-    __maxDateChanged() {
-      if (this.value) {
-        this.validate();
-      }
+      this._toggleHasValue(this._hasValue);
     }
 
     /** @protected */
     _onOverlayOpened() {
-      this._openedWithFocusRing = this.hasAttribute('focus-ring');
-
       const parsedInitialPosition = this._parseDate(this.initialPosition);
 
       const initialPosition =
@@ -803,11 +837,6 @@ export const DatePickerMixin = (subclass) =>
       if (!this.value) {
         this.validate();
       }
-
-      // If the input isn't focused when overlay closes (fullscreen mode), clear focused state
-      if (this.getRootNode().activeElement !== this.inputElement) {
-        this._setFocused(false);
-      }
     }
 
     /** @private */
@@ -860,10 +889,7 @@ export const DatePickerMixin = (subclass) =>
     _onChange(event) {
       // For change event on the native <input> blur, after the input is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (
-        this.inputElement.value === '' &&
-        !(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
-      ) {
+      if (this._inputValue === '') {
         this.__dispatchChange = true;
       }
 

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

@@ -48,18 +48,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           flex-grow: 1;
         }
 
-        [part='clear-button']:not([showclear]) {
-          display: none;
+        [hidden] {
+          display: none !important;
         }
 
         [part='years-toggle-button'] {
           display: flex;
         }
 
-        [part='years-toggle-button'][desktop] {
-          display: none;
-        }
-
         :host(:not([years-visible])) [part='years-toggle-button']::before {
           transform: rotate(180deg);
         }
@@ -154,10 +150,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
       <div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
         <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
-        <div part="clear-button" showclear$="[[_showClear(selectedDate)]]"></div>
+        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
+        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
@@ -243,6 +239,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        */
       selectedDate: {
         type: Date,
+        value: null,
       },
 
       /**
@@ -331,7 +328,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this.setAttribute('role', 'dialog');
 
-    addListener(this, 'tap', this._stopPropagation);
     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="today-button"]'), 'tap', this._onTodayTap.bind(this));
@@ -499,10 +495,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.scrollToDate(new Date(), true);
   }
 
-  _showClear(selectedDate) {
-    return !!selectedDate;
-  }
-
   _onYearTap(e) {
     if (!this._ignoreTaps && !this._notTapping) {
       const scrollDelta =
@@ -977,10 +969,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     todayMidnight.setDate(today.getDate());
     return this._dateAllowed(todayMidnight, min, max);
   }
-
-  _stopPropagation(e) {
-    e.stopPropagation();
-  }
 }
 
 customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);

package/src/vaadin-date-picker.js

@@ -162,7 +162,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         disable-upgrade
@@ -222,11 +222,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
-    if (this._openedWithFocusRing && this.hasAttribute('focused')) {
-      this.setAttribute('focus-ring', '');
-    } else if (!this.hasAttribute('focused')) {
-      this.blur();
-    }
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "23.2.0-alpha6",
+  "version": "23.2.0-beta3",
   "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.0-alpha6/#/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.0-alpha6/#/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.0-alpha6/#/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.0-alpha6/#/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/ds/customization/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.0-beta3/#/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.0-beta3/#/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.0-beta3/#/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.0-beta3/#/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/ds/customization/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.0-alpha6",
+  "version": "23.2.0-beta3",
   "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.0-alpha6/#/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.0-alpha6/#/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.0-alpha6/#/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.0-alpha6/#/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/ds/customization/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.0-beta3/#/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.0-beta3/#/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.0-beta3/#/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.0-beta3/#/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/ds/customization/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {