@vaadin/date-picker 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,58 +1,54 @@
-# <vaadin-date-picker>
+# @vaadin/date-picker
 
-[Live Demo ↗](https://vaadin.com/components/vaadin-date-picker/html-examples)
-|
-[API documentation ↗](https://vaadin.com/components/vaadin-date-picker/html-api)
+A web component that allows to enter a date by typing or by selecting from a calendar overlay.
 
-[<vaadin-date-picker>](https://vaadin.com/components/vaadin-date-picker) is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/date-picker)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/date-picker)](https://www.npmjs.com/package/@vaadin/date-picker)
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-picker)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
-<vaadin-date-picker label="Label" placeholder="Placeholder"></vaadin-date-picker>
+<vaadin-date-picker label="Label" value="2018-12-03" clear-button-visible></vaadin-date-picker>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/date-picker/screenshot.png" width="439" alt="Screenshot of vaadin-date-picker">](https://vaadin.com/components/vaadin-date-picker)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/date-picker/screenshot.png" width="343" alt="Screenshot of vaadin-date-picker">](https://vaadin.com/docs/latest/ds/components/date-picker)
 
 ## Installation
 
-Install `vaadin-date-picker`:
+Install the component:
 
 ```sh
-npm i @vaadin/date-picker --save
+npm i @vaadin/date-picker
 ```
 
-Once installed, import it in your application:
+Once installed, import the component in your application:
 
 ```js
-import '@vaadin/date-picker/vaadin-date-picker.js';
+import '@vaadin/date-picker';
 ```
 
-## Getting started
+## Themes
 
-Vaadin components use the Lumo theme by default.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/date-picker/vaadin-date-picker.js) of the package uses the Lumo theme.
 
-To use the Material theme, import the correspondent file from the `theme/material` folder.
+To use the Material theme, import the component from the `theme/material` folder:
 
-## Entry points
-
-- The components with the Lumo theme:
-
-  `theme/lumo/vaadin-date-picker.js`
-  `theme/lumo/vaadin-date-picker-light.js`
+```js
+import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
+```
 
-- The components with the Material theme:
+You can also import the Lumo version of the component explicitly:
 
-  `theme/material/vaadin-date-picker.js`
-  `theme/material/vaadin-date-picker-light.js`
+```js
+import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
+```
 
-- Alias for `theme/lumo/vaadin-date-picker.js`
-  `theme/lumo/vaadin-date-picker-light.js`:
+Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
 
-  `vaadin-date-picker.js`
-  `vaadin-date-picker-light.js`
+```js
+import '@vaadin/date-picker/src/vaadin-date-picker.js';
+```
 
 ## Contributing
 
@@ -62,4 +58,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -31,25 +31,25 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-a11y-announcer": "^3.0.0",
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "22.0.0-alpha9",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/field-base": "22.0.0-alpha9",
-    "@vaadin/input-container": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-overlay": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/button": "^22.0.0",
+    "@vaadin/component-base": "^22.0.0",
+    "@vaadin/field-base": "^22.0.0",
+    "@vaadin/input-container": "^22.0.0",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0",
+    "@vaadin/vaadin-material-styles": "^22.0.0",
+    "@vaadin/vaadin-overlay": "^22.0.0",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-alpha9",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/dialog": "^22.0.0",
+    "@vaadin/polymer-legacy-adapter": "^22.0.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

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

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import '@polymer/iron-media-query/iron-media-query.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
+import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 
 /**
@@ -72,10 +72,9 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         id="overlay"
         fullscreen$="[[_fullscreen]]"
         opened="{{opened}}"
-        position-target="[[inputElement]]"
-        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
       >
         <template>
@@ -149,6 +148,15 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
   get _inputValue() {
     return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
   }
+
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.inputElement;
+    this.$.overlay.noVerticalOverlap = true;
+  }
 }
 
 customElements.define(DatePickerLight.is, DatePickerLight);

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

@@ -3,9 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
-import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
 export interface DatePickerDate {
   day: number;
@@ -28,15 +31,19 @@ export interface DatePickerI18n {
   formatTitle: (monthName: string, fullYear: number) => string;
 }
 
-declare function DatePickerMixin<T extends new (...args: any[]) => {}>(base: T): T & DatePickerMixinConstructor;
-
-interface DatePickerMixinConstructor {
-  new (...args: any[]): DatePickerMixin;
-}
-
-interface DatePickerMixin extends DelegateFocusMixin, InputMixin, KeyboardMixin {
+export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T &
+  Constructor<DatePickerMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass>;
+
+export declare class DatePickerMixinClass {
   /**
-   * The value for this element.
+   * Selected date.
    *
    * Supported date formats:
    * - ISO 8601 `"YYYY-MM-DD"` (default)
@@ -194,5 +201,3 @@ interface DatePickerMixin extends DelegateFocusMixin, InputMixin, KeyboardMixin
    */
   checkValidity(): boolean;
 }
-
-export { DatePickerMixinConstructor, DatePickerMixin };

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
 import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
@@ -33,7 +33,7 @@ export const DatePickerMixin = (subclass) =>
         _focusedDate: Date,
 
         /**
-         * The value for this element.
+         * Selected date.
          *
          * Supported date formats:
          * - ISO 8601 `"YYYY-MM-DD"` (default)
@@ -308,7 +308,7 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _ios: {
           type: Boolean,
-          value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/)
+          value: isIOS
         },
 
         /** @private */
@@ -465,7 +465,7 @@ export const DatePickerMixin = (subclass) =>
 
       // Keep focus attribute in focusElement for styling
       this._overlayContent.addEventListener('focus', () => {
-        this.toggleAttribute('focused', true);
+        this._setFocused(true);
       });
 
       this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
@@ -581,7 +581,7 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
+    /** @protected */
     _openedChanged(opened) {
       if (opened && !this._overlayInitialized) {
         this._initOverlay();
@@ -778,6 +778,11 @@ 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 */
@@ -819,21 +824,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /**
-     * Keyboard Navigation
-     * @private
-     */
-    _eventKey(e) {
-      const keys = ['down', 'up', 'enter', 'esc', 'tab'];
-
-      for (let i = 0; i < keys.length; i++) {
-        const k = keys[i];
-        if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, k)) {
-          return k;
-        }
-      }
-    }
-
     /** @private */
     _isValidDate(d) {
       return d && !isNaN(d.getTime());
@@ -888,9 +878,9 @@ export const DatePickerMixin = (subclass) =>
         }
       }
 
-      switch (this._eventKey(e)) {
-        case 'down':
-        case 'up':
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
           // prevent scrolling the page with arrows
           e.preventDefault();
 
@@ -903,7 +893,7 @@ export const DatePickerMixin = (subclass) =>
           }
 
           break;
-        case 'enter': {
+        case 'Enter': {
           const parsedDate = this._getParsedDate();
           const isValidDate = this._isValidDate(parsedDate);
           if (this.opened) {
@@ -924,7 +914,7 @@ export const DatePickerMixin = (subclass) =>
           }
           break;
         }
-        case 'esc':
+        case 'Escape':
           if (this.opened) {
             this._focusedDate = this._selectedDate;
             this._close();
@@ -941,7 +931,7 @@ export const DatePickerMixin = (subclass) =>
             this._selectParsedOrFocusedDate();
           }
           break;
-        case 'tab':
+        case 'Tab':
           if (this.opened) {
             e.preventDefault();
             //Clear the selection range (remains visible on IE)

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

@@ -3,20 +3,19 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener, setTouchAction } from '@polymer/polymer/lib/utils/gestures.js';
-import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
-import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
 import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
+import './vaadin-month-calendar.js';
+import './vaadin-infinite-scroller.js';
+import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { addListener, setTouchAction } from '@polymer/polymer/lib/utils/gestures.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-month-calendar.js';
-import './vaadin-infinite-scroller.js';
-import { dateEquals, getClosestDate, getISOWeekNumber, extractDateParts } from './vaadin-date-picker-helper.js';
+import { dateEquals, extractDateParts, getClosestDate, getISOWeekNumber } from './vaadin-date-picker-helper.js';
 
 /**
  * @extends HTMLElement
@@ -704,20 +703,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
     e.preventDefault();
   }
 
-  /**
-   * Keyboard Navigation
-   */
-  _eventKey(e) {
-    var keys = ['down', 'up', 'right', 'left', 'enter', 'space', 'home', 'end', 'pageup', 'pagedown', 'tab', 'esc'];
-
-    for (var i = 0; i < keys.length; i++) {
-      var k = keys[i];
-      if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, k)) {
-        return k;
-      }
-    }
-  }
-
   _onKeydown(e) {
     var focus = this._currentlyFocusedDate();
 
@@ -727,8 +712,24 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
     const isCancel = e.composedPath().indexOf(this.$.cancelButton) >= 0;
     const isScroller = !isToday && !isCancel;
 
-    var eventKey = this._eventKey(e);
-    if (eventKey === 'tab') {
+    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+    const navigationKeys = [
+      ' ',
+      'ArrowDown',
+      'ArrowUp',
+      'ArrowRight',
+      'ArrowLeft',
+      'Enter',
+      'End',
+      'Escape',
+      'Home',
+      'PageUp',
+      'PageDown',
+      'Tab'
+    ];
+
+    const eventKey = e.key;
+    if (eventKey === 'Tab') {
       // We handle tabs here and don't want to bubble up.
       e.stopPropagation();
 
@@ -751,36 +752,36 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
         // set to false.
         this._focused = false;
       }
-    } else if (eventKey) {
+    } else if (navigationKeys.includes(eventKey)) {
       e.preventDefault();
       e.stopPropagation();
       switch (eventKey) {
-        case 'down':
+        case 'ArrowDown':
           this._moveFocusByDays(7);
           this.focus();
           break;
-        case 'up':
+        case 'ArrowUp':
           this._moveFocusByDays(-7);
           this.focus();
           break;
-        case 'right':
+        case 'ArrowRight':
           if (isScroller) {
             this._moveFocusByDays(this.__isRTL ? -1 : 1);
           }
           break;
-        case 'left':
+        case 'ArrowLeft':
           if (isScroller) {
             this._moveFocusByDays(this.__isRTL ? 1 : -1);
           }
           break;
-        case 'enter':
+        case 'Enter':
           if (isScroller || isCancel) {
             this._close();
           } else if (isToday) {
             this._onTodayTap();
           }
           break;
-        case 'space':
+        case ' ':
           if (isCancel) {
             this._close();
           } else if (isToday) {
@@ -795,19 +796,19 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
             }
           }
           break;
-        case 'home':
+        case 'Home':
           this._moveFocusInsideMonth(focus, 'minDate');
           break;
-        case 'end':
+        case 'End':
           this._moveFocusInsideMonth(focus, 'maxDate');
           break;
-        case 'pagedown':
+        case 'PageDown':
           this._moveFocusByMonths(e.shiftKey ? 12 : 1);
           break;
-        case 'pageup':
+        case 'PageUp':
           this._moveFocusByMonths(e.shiftKey ? -12 : -1);
           break;
-        case 'esc':
+        case 'Escape':
           this._cancel();
           break;
       }

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

@@ -6,7 +6,7 @@
 import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
 import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { datePickerOverlayStyles } from './vaadin-date-picker-styles.js';
 
 registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export const datePickerStyles = css`
   :host([dir='rtl']) [part='input-field'] {

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

@@ -35,16 +35,17 @@ export interface DatePickerCustomEventMap {
 export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap {}
 
 /**
- * `<vaadin-date-picker>` is a date selection field which includes a scrollable
- * month calendar view.
+ * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+ *
  * ```html
  * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
  * ```
+ *
  * ```js
  * datePicker.value = '2016-03-02';
  * ```
- * When the selected `value` is changed, a `value-changed` event is triggered.
  *
+ * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Styling
  *
@@ -54,71 +55,77 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * -------------------------------|----------------------------|---------
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `input-field` | Input element | vaadin-date-picker
- * `clear-button` | Clear button | vaadin-date-picker
- * `toggle-button` | Toggle button | vaadin-date-picker
- * `overlay-content` | The overlay element | vaadin-date-picker
- * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content
- * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content
- * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content
- * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content
- * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content
- * `months` | Months scroller | vaadin-date-picker-overlay-content
- * `years` | Years scroller | vaadin-date-picker-overlay-content
- * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content
- * `today-button` | Today button | vaadin-date-picker-overlay-content
- * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content
- * `month` | Month calendar | vaadin-date-picker-overlay-content
- * `year-number` | Year number | vaadin-date-picker-overlay-content
- * `year-separator` | Year separator | vaadin-date-picker-overlay-content
- * `month-header` | Month title | vaadin-month-calendar
- * `weekdays` | Weekday container | vaadin-month-calendar
- * `weekday` | Weekday element | vaadin-month-calendar
- * `week-numbers` | Week numbers container | vaadin-month-calendar
- * `week-number` | Week number element | vaadin-month-calendar
- * `date` | Date element | vaadin-month-calendar
+ * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `toggle-button`       | Toggle button
+ * `overlay-content`     | The overlay element
  *
- * The following state attributes are available for styling:
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `invalid` | Set when the element is invalid | :host
- * `opened` | Set when the date selector overlay is opened | :host
- * `readonly` | Set when the element is readonly | :host
- * `disabled` | Set when the element is disabled | :host
- * `today` | Set on the date corresponding to the current day | date
- * `focused` | Set on the focused date | date
- * `disabled` | Set on the date out of the allowed range | date
- * `selected` | Set on the selected date | date
+ * Attribute  | Description                                      | Part name
+ * -----------|--------------------------------------------------|-----------
+ * `opened`   | Set when the date selector overlay is opened     | :host
+ * `today`    | Set on the date corresponding to the current day | date
+ * `selected` | Set on the selected date                         | date
  *
- * If you want to replace the default input field with a custom implementation, you should use the
- * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
  *
  * ### Internal components
  *
  * In addition to `<vaadin-date-picker>` itself, the following internal
  * components are themable:
  *
-
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
  * - `<vaadin-month-calendar>`
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
+ *
+ * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+ *
+ * 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
+ * `months`              | Months scroller
+ * `years`               | Years scroller
+ * `toolbar`             | Footer bar with buttons
+ * `today-button`        | Today button
+ * `cancel-button`       | Cancel button
+ * `month`               | Month calendar
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
+ * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `month-header`        | Month title
+ * `weekdays`            | Weekday container
+ * `weekday`             | Weekday element
+ * `week-numbers`        | Week numbers container
+ * `week-number`         | Week number element
+ * `date`                | Date element
  *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class DatePicker extends HTMLElement {
+declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   addEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
@@ -132,8 +139,6 @@ declare class DatePicker extends HTMLElement {
   ): void;
 }
 
-interface DatePicker extends DatePickerMixin, ElementMixin, InputControlMixin, ThemableMixin {}
-
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-date-picker': DatePicker;

package/src/vaadin-date-picker.js

@@ -3,35 +3,35 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import '@polymer/iron-media-query/iron-media-query.js';
+import '@vaadin/input-container/src/vaadin-input-container.js';
+import './vaadin-date-picker-overlay.js';
+import './vaadin-date-picker-overlay-content.js';
+import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
-import { InputController } from '@vaadin/field-base/src/input-controller.js';
 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/input-container/src/vaadin-input-container.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 import { datePickerStyles } from './vaadin-date-picker-styles.js';
-import './vaadin-date-picker-overlay.js';
-import './vaadin-date-picker-overlay-content.js';
 
 registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
 
 /**
- * `<vaadin-date-picker>` is a date selection field which includes a scrollable
- * month calendar view.
+ * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+ *
  * ```html
  * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
  * ```
+ *
  * ```js
  * datePicker.value = '2016-03-02';
  * ```
- * When the selected `value` is changed, a `value-changed` event is triggered.
  *
+ * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Styling
  *
@@ -41,51 +41,26 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * -------------------------------|----------------------------|---------
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `input-field` | Input element | vaadin-date-picker
- * `clear-button` | Clear button | vaadin-date-picker
- * `toggle-button` | Toggle button | vaadin-date-picker
- * `overlay-content` | The overlay element | vaadin-date-picker
- * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content
- * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content
- * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content
- * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content
- * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content
- * `months` | Months scroller | vaadin-date-picker-overlay-content
- * `years` | Years scroller | vaadin-date-picker-overlay-content
- * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content
- * `today-button` | Today button | vaadin-date-picker-overlay-content
- * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content
- * `month` | Month calendar | vaadin-date-picker-overlay-content
- * `year-number` | Year number | vaadin-date-picker-overlay-content
- * `year-separator` | Year separator | vaadin-date-picker-overlay-content
- * `month-header` | Month title | vaadin-month-calendar
- * `weekdays` | Weekday container | vaadin-month-calendar
- * `weekday` | Weekday element | vaadin-month-calendar
- * `week-numbers` | Week numbers container | vaadin-month-calendar
- * `week-number` | Week number element | vaadin-month-calendar
- * `date` | Date element | vaadin-month-calendar
+ * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * The following state attributes are available for styling:
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `toggle-button`       | Toggle button
+ * `overlay-content`     | The overlay element
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `invalid` | Set when the element is invalid | :host
- * `opened` | Set when the date selector overlay is opened | :host
- * `readonly` | Set when the element is readonly | :host
- * `disabled` | Set when the element is disabled | :host
- * `today` | Set on the date corresponding to the current day | date
- * `focused` | Set on the focused date | date
- * `disabled` | Set on the date out of the allowed range | date
- * `selected` | Set on the selected date | date
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * If you want to replace the default input field with a custom implementation, you should use the
- * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
+ * Attribute  | Description                                      | Part name
+ * -----------|--------------------------------------------------|-----------
+ * `opened`   | Set when the date selector overlay is opened     | :host
+ * `today`    | Set on the date corresponding to the current day | date
+ * `selected` | Set on the selected date                         | date
+ *
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
  *
  * ### Internal components
  *
@@ -95,10 +70,42 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
  * - `<vaadin-month-calendar>`
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
+ *
+ * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+ *
+ * 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
+ * `months`              | Months scroller
+ * `years`               | Years scroller
+ * `toolbar`             | Footer bar with buttons
+ * `today-button`        | Today button
+ * `cancel-button`       | Cancel button
+ * `month`               | Month calendar
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
+ * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `month-header`        | Month title
+ * `weekdays`            | Weekday container
+ * `weekday`             | Weekday element
+ * `week-numbers`        | Week numbers container
+ * `week-number`         | Week number element
+ * `date`                | Date element
  *
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
@@ -156,9 +163,9 @@ class DatePicker extends DatePickerMixin(
         id="overlay"
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
-        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         disable-upgrade
       >
         <template>
@@ -206,8 +213,7 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this.inputElement, this._labelNode));
-    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /** @private */
@@ -227,6 +233,15 @@ class DatePicker extends DatePickerMixin(
     e.stopPropagation();
     this[this._overlayInitialized && this.$.overlay.opened ? 'close' : 'open']();
   }
+
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.$.overlay.noVerticalOverlap = true;
+  }
 }
 
 customElements.define(DatePicker.is, DatePicker);

package/src/vaadin-infinite-scroller.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
@@ -137,7 +138,6 @@ class InfiniteScroller extends PolymerElement {
 
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
-    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     if (isFirefox) {
       this.$.scroller.tabIndex = -1;
     }

package/src/vaadin-month-calendar.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
 

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

@@ -1,10 +1,10 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-date-picker-overlay-content',

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

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const datePickerOverlay = css`
   [part='overlay'] {

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

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const datePicker = css`
   :host {

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -1,9 +1,9 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-month-calendar',

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

@@ -1,9 +1,9 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/button/theme/material/vaadin-button.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-date-picker-overlay-content',

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

@@ -1,5 +1,5 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const datePickerOverlay = css`
   :host([fullscreen]) {

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

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const datePicker = css`
   :host {

package/theme/material/vaadin-month-calendar-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-month-calendar',