@vaadin/date-picker 22.0.0-beta1 → 22.0.1

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-beta1",
+  "version": "22.0.1",
   "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-beta1",
-    "@vaadin/component-base": "22.0.0-beta1",
-    "@vaadin/field-base": "22.0.0-beta1",
-    "@vaadin/input-container": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-overlay": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/button": "^22.0.1",
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/field-base": "^22.0.1",
+    "@vaadin/input-container": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-overlay": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-beta1",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/dialog": "^22.0.1",
+    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

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';
 
 /**
@@ -74,6 +74,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         opened="{{opened}}"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
       >
         <template>

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 */
@@ -824,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());
@@ -893,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();
 
@@ -908,7 +893,7 @@ export const DatePickerMixin = (subclass) =>
           }
 
           break;
-        case 'enter': {
+        case 'Enter': {
           const parsedDate = this._getParsedDate();
           const isValidDate = this._isValidDate(parsedDate);
           if (this.opened) {
@@ -929,7 +914,7 @@ export const DatePickerMixin = (subclass) =>
           }
           break;
         }
-        case 'esc':
+        case 'Escape':
           if (this.opened) {
             this._focusedDate = this._selectedDate;
             this._close();
@@ -946,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

@@ -125,7 +125,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * @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,
@@ -139,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,21 +3,20 @@
  * 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' });
 
@@ -166,6 +165,7 @@ class DatePicker extends DatePickerMixin(
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         disable-upgrade
       >
         <template>
@@ -213,7 +213,7 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /** @private */

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',