@vaadin/date-picker 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -26,29 +26,6 @@ Once installed, import the component in your application:
 import '@vaadin/date-picker';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/date-picker/vaadin-date-picker.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/date-picker/src/vaadin-date-picker.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,27 +35,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/field-base": "24.8.0-alpha9",
-    "@vaadin/input-container": "24.8.0-alpha9",
-    "@vaadin/overlay": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-alpha2",
+    "@vaadin/button": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/field-base": "25.0.0-alpha2",
+    "@vaadin/input-container": "25.0.0-alpha2",
+    "@vaadin/overlay": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

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

@@ -8,7 +8,6 @@ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.j
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -82,7 +81,6 @@ export const datePickerI18nDefaults = Object.freeze({
 
 /**
  * @polymerMixin
- * @mixes ControllerMixin
  * @mixes DelegateFocusMixin
  * @mixes I18nMixin
  * @mixes InputConstraintsMixin
@@ -93,7 +91,7 @@ export const datePickerI18nDefaults = Object.freeze({
 export const DatePickerMixin = (subclass) =>
   class DatePickerMixinClass extends I18nMixin(
     datePickerI18nDefaults,
-    OverlayClassMixin(ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))))),
+    OverlayClassMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
   ) {
     static get properties() {
       return {
@@ -397,26 +395,6 @@ export const DatePickerMixin = (subclass) =>
       this.__setEnteredDate(parsedDate);
     }
 
-    /**
-     * Override a getter from `InputControlMixin` to make it optional
-     * and to prevent warning when a clear button is missing,
-     * for example when using <vaadin-date-picker-light>.
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      return null;
-    }
-
-    /** @private */
-    get _nativeInput() {
-      if (this.inputElement) {
-        // TODO: support focusElement for backwards compatibility
-        return this.inputElement.focusElement || this.inputElement;
-      }
-      return null;
-    }
-
     /**
      * The input element's value when it cannot be parsed as a date, and an empty string otherwise.
      *
@@ -916,7 +894,7 @@ export const DatePickerMixin = (subclass) =>
         this._focus();
       }
 
-      const input = this._nativeInput;
+      const input = this.inputElement;
       if (this._noInput && input) {
         input.blur();
         this._overlayContent.focusDateElement();
@@ -982,8 +960,8 @@ export const DatePickerMixin = (subclass) =>
       }
       this.__commitParsedOrFocusedDate();
 
-      if (this._nativeInput && this._nativeInput.selectionStart) {
-        this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
+      if (this.inputElement && this.inputElement.selectionStart) {
+        this.inputElement.selectionStart = this.inputElement.selectionEnd;
       }
       // No need to revalidate the value after `_selectedDateChanged`
       // Needed in case the value was not changed: open and close dropdown,
@@ -1020,8 +998,8 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _setSelectionRange(a, b) {
-      if (this._nativeInput && this._nativeInput.setSelectionRange) {
-        this._nativeInput.setSelectionRange(a, b);
+      if (this.inputElement) {
+        this.inputElement.setSelectionRange(a, b);
       }
     }
 

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { flush } from '@polymer/polymer/lib/utils/flush.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
@@ -936,10 +934,10 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       // Wait for `vaadin-month-calendar` elements to be rendered
       if (!this.calendars.length) {
         await new Promise((resolve) => {
-          afterNextRender(this, () => {
-            // Force dom-repeat elements to render
-            flush();
-            resolve();
+          requestAnimationFrame(() => {
+            setTimeout(() => {
+              resolve();
+            });
           });
         });
       }

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

@@ -8,35 +8,40 @@ import './vaadin-date-picker-month-scroller.js';
 import './vaadin-date-picker-year-scroller.js';
 import './vaadin-date-picker-year.js';
 import './vaadin-month-calendar.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
 import { overlayContentStyles } from './vaadin-date-picker-overlay-content-styles.js';
 
-registerStyles('vaadin-date-picker-overlay-content', overlayContentStyles, {
-  moduleId: 'vaadin-date-picker-overlay-content-styles',
-});
-
 /**
  * @customElement
  * @extends HTMLElement
  * @private
  */
 class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  ControllerMixin(ThemableMixin(DirMixin(PolymerElement))),
+  ThemableMixin(DirMixin(PolylitMixin(LitElement))),
 ) {
-  static get template() {
+  static get is() {
+    return 'vaadin-date-picker-overlay-content';
+  }
+
+  static get styles() {
+    return overlayContentStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div part="overlay-header" on-touchend="_preventDefault" aria-hidden="true">
-        <div part="label">[[_formatDisplayed(selectedDate, i18n, label)]]</div>
-        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
+      <div part="overlay-header" @touchend="${this._preventDefault}" aria-hidden="true">
+        <div part="label">${this._formatDisplayed(this.selectedDate, this.i18n, this.label)}</div>
+        <div part="clear-button" ?hidden="${!this.selectedDate}"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
-          [[_yearAfterXMonths(_visibleMonthIndex)]]
+        <div part="years-toggle-button" ?hidden="${this._desktopMode}" aria-hidden="true">
+          ${this._yearAfterXMonths(this._visibleMonthIndex)}
         </div>
       </div>
 
@@ -45,20 +50,16 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
         <slot name="years"></slot>
       </div>
 
-      <div on-touchend="_preventDefault" role="toolbar" part="toolbar">
+      <div @touchend="${this._preventDefault}" role="toolbar" part="toolbar">
         <slot name="today-button"></slot>
         <slot name="cancel-button"></slot>
       </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-date-picker-overlay-content';
-  }
-
   /** @protected */
-  ready() {
-    super.ready();
+  firstUpdated() {
+    super.firstUpdated();
 
     this.setAttribute('role', 'dialog');
 

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

@@ -3,18 +3,15 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
 import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
 
-registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlayStyles], {
-  moduleId: 'vaadin-date-picker-overlay-styles',
-});
-
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
@@ -25,14 +22,19 @@ registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlaySt
  * @mixes ThemableMixin
  * @private
  */
-class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return [overlayStyles, datePickerOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content">
           <slot></slot>

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

@@ -3,8 +3,9 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
 
@@ -17,20 +18,24 @@ import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
  * @mixes DatePickerYearMixin
  * @private
  */
-export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolymerElement)) {
+export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-date-picker-year';
   }
 
-  static get template() {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: block;
-          height: 100%;
-        }
-      </style>
-      <div part="year-number">[[year]]</div>
+      <div part="year-number">${this.year}</div>
       <div part="year-separator" aria-hidden="true"></div>
     `;
   }

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

@@ -93,9 +93,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
  *
- * 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

package/src/vaadin-date-picker.js

@@ -6,20 +6,20 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-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 { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { 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';
 
-registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { moduleId: 'vaadin-date-picker-styles' });
-
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
  *
@@ -56,9 +56,6 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * -----------|--------------------------------------------------|-----------
  * `opened`   | Set when the date selector overlay is opened     | :host
  *
- * 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
@@ -150,30 +147,54 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @mixes InputControlMixin
  * @mixes DatePickerMixin
  */
-class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-date-picker';
   }
 
-  static get template() {
+  static get styles() {
+    return [inputFieldShared, datePickerStyles];
+  }
+
+  static get properties() {
+    return {
+      /** @private */
+      _positionTarget: {
+        type: Object,
+        sync: true,
+      },
+    };
+  }
+
+  /**
+   * Used by `InputControlMixin` as a reference to the clear button element.
+   * @protected
+   * @return {!HTMLElement}
+   */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div class="vaadin-date-picker-container">
         <div part="label">
           <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
         </div>
 
         <vaadin-input-container
           part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
+          .readonly="${this.readonly}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
+          theme="${ifDefined(this._theme)}"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
           <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div part="toggle-button" slot="suffix" aria-hidden="true" on-click="_toggle"></div>
+          <div part="toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -187,29 +208,24 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
       <vaadin-date-picker-overlay
         id="overlay"
-        fullscreen$="[[_fullscreen]]"
-        theme$="[[_theme]]"
-        opened="{{opened}}"
-        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
-        on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-closing="_onOverlayClosed"
+        ?fullscreen="${this._fullscreen}"
+        theme="${ifDefined(this._theme)}"
+        .opened="${this.opened}"
+        @opened-changed="${this._onOpenedChanged}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
+        @vaadin-overlay-open="${this._onOverlayOpened}"
+        @vaadin-overlay-close="${this._onVaadinOverlayClose}"
+        @vaadin-overlay-closing="${this._onOverlayClosed}"
         restore-focus-on-close
-        restore-focus-node="[[inputElement]]"
+        no-vertical-overlap
+        .restoreFocusNode="${this.inputElement}"
+        .positionTarget="${this._positionTarget}"
       ></vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;
   }
 
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   * @return {!HTMLElement}
-   */
-  get clearElement() {
-    return this.$.clearButton;
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -239,10 +255,15 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
+    this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
+  }
 
-    this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
   }
 
   /** @private */
@@ -262,15 +283,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       this.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;
-  }
 }
 
 defineCustomElement(DatePicker);

package/src/vaadin-infinite-scroller.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -41,16 +40,6 @@ template.innerHTML = `
       box-sizing: border-box;
       padding-right: 40px;
       top: var(--vaadin-infinite-scroller-buffer-offset, 0);
-      animation: fadein 0.2s;
-    }
-
-    @keyframes fadein {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
     }
   </style>
 
@@ -230,8 +219,6 @@ export class InfiniteScroller extends HTMLElement {
       this._updateClones();
       this._debouncerUpdateClones.cancel();
     }
-
-    flush();
   }
 
   /**