@vaadin/date-picker 25.3.0-alpha8 → 25.3.0-beta1

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

@@ -5,10 +5,22 @@
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { dateAfterXMonths, dateAllowed, dateEquals, getClosestDate } from './vaadin-date-picker-helper.js';
+import {
+  createDate,
+  dateAfterXMonths,
+  dateAllowed,
+  dateEquals,
+  dateSelectable,
+  firstOfMonth,
+  getClosestDate,
+  lastOfMonth,
+  monthDate,
+  monthIndex,
+} from './vaadin-date-picker-helper.js';
 
 export const DatePickerOverlayContentMixin = (superClass) =>
   class DatePickerOverlayContentMixin extends superClass {
@@ -106,6 +118,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           type: Function,
         },
 
+        /**
+         * Reflected while data is being loaded, so the overlay can show a loading spinner.
+         * Currently set while the date metadata provider is resolving.
+         * @protected
+         */
+        loading: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         enteredDate: {
           type: Date,
           sync: true,
@@ -124,6 +147,18 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           type: Object,
         },
 
+        /**
+         * The date-picker's date metadata controller, assigned by the host. Declared as a property,
+         * and a dependency of `__updateCalendarsConfig` below, so that the calendars are handed it
+         * and subscribed whenever it arrives, rather than relying on the host assigning it before
+         * the properties that happen to trigger that observer.
+         * @protected
+         */
+        _dateMetadataController: {
+          type: Object,
+          sync: true,
+        },
+
         calendars: {
           type: Array,
           value: () => [],
@@ -138,14 +173,47 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateCalendarsConfig(calendars, i18n, minDate, maxDate, showWeekNumbers, isDateDisabled, _theme)',
+        '__updateCalendarsConfig(calendars, i18n, minDate, maxDate, showWeekNumbers, isDateDisabled, _theme, _dateMetadataController)',
         '__updateCalendarsState(calendars, selectedDate, focusedDate, enteredDate, _ignoreTaps)',
         '__updateCancelButton(_cancelButton, i18n)',
-        '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
         '__updateYears(years, selectedDate, _theme)',
       ];
     }
 
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      this.cancelLoadVisibleDateMetadata();
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('loading')) {
+        setOrRemoveAttribute(this, 'aria-busy', this.loading);
+      }
+
+      if (props.has('i18n')) {
+        setOrRemoveAttribute(this, 'aria-label', this.i18n?.dialogAccessibleName);
+      }
+
+      if (props.has('calendars') || props.has('_dateMetadataController')) {
+        this.loadVisibleDateMetadata();
+      }
+
+      if (
+        props.has('_todayButton') ||
+        props.has('i18n') ||
+        props.has('minDate') ||
+        props.has('maxDate') ||
+        props.has('isDateDisabled')
+      ) {
+        this.updateTodayButton();
+      }
+    }
+
     /**
      * Whether to scroll to a sub-month position when scrolling to a date.
      * This is active if the month scroller is not large enough to fit a
@@ -200,6 +268,8 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     reset() {
       this._closeYearScroller();
+      this._monthScroller?.reset();
+      this._yearScroller?.reset();
     }
 
     /**
@@ -292,14 +362,44 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateTodayButton(todayButton, i18n, minDate, maxDate, isDateDisabled) {
+    /**
+     * Applies the today button's label and whether today can be selected.
+     */
+    updateTodayButton() {
+      const todayButton = this._todayButton;
       if (todayButton) {
-        todayButton.textContent = i18n?.today;
-        todayButton.disabled = !this._isTodayAllowed(minDate, maxDate, isDateDisabled);
+        todayButton.textContent = this.i18n?.today;
+        todayButton.disabled = !this._isTodayAllowed();
       }
     }
 
+    /**
+     * Requests the date metadata for the months currently rendered. Months already loaded or in flight
+     * are skipped.
+     */
+    loadVisibleDateMetadata() {
+      const controller = this._dateMetadataController;
+      if (!controller) {
+        return;
+      }
+      // Reduced to month indexes so the outermost months can be picked with plain arithmetic.
+      const indexes = (this.calendars ?? [])
+        .map((calendar) => calendar.month)
+        .filter(Boolean)
+        .map((month) => monthIndex(month));
+      if (indexes.length === 0) {
+        return;
+      }
+      controller.ensureRangeLoaded(monthDate(Math.min(...indexes)), monthDate(Math.max(...indexes)));
+    }
+
+    /**
+     * Drops a date metadata load that navigating has scheduled but that has not run yet.
+     */
+    cancelLoadVisibleDateMetadata() {
+      this._loadDateMetadataDebouncer?.cancel();
+    }
+
     /**
      * Config that changes rarely (locale, allowed range, week numbers, theme).
      * Split from the interaction state below so a keyboard/selection update
@@ -307,24 +407,43 @@ export const DatePickerOverlayContentMixin = (superClass) =>
      * @private
      */
     // eslint-disable-next-line @typescript-eslint/max-params
-    __updateCalendarsConfig(calendars, i18n, minDate, maxDate, showWeekNumbers, isDateDisabled, theme) {
+    __updateCalendarsConfig(
+      calendars,
+      i18n,
+      minDate,
+      maxDate,
+      showWeekNumbers,
+      isDateDisabled,
+      theme,
+      dateMetadataController,
+    ) {
       if (calendars?.length) {
         calendars.forEach((calendar) => {
           calendar.i18n = i18n;
           calendar.minDate = minDate;
           calendar.maxDate = maxDate;
           calendar.isDateDisabled = isDateDisabled;
+          calendar._dateMetadataController = dateMetadataController;
+          // Subscribe to controller updates (subscribing again is a no-op).
+          dateMetadataController?.subscribe(calendar);
           calendar.showWeekNumbers = showWeekNumbers;
 
-          if (theme) {
-            calendar.setAttribute('theme', theme);
-          } else {
-            calendar.removeAttribute('theme');
-          }
+          setOrRemoveAttribute(calendar, 'theme', theme);
         });
       }
     }
 
+    /**
+     * Debounced variant used while navigating, so a continuous scroll triggers one load once it
+     * settles instead of a request per intermediate position.
+     * @private
+     */
+    __scheduleLoadVisibleDateMetadata() {
+      this._loadDateMetadataDebouncer = Debouncer.debounce(this._loadDateMetadataDebouncer, timeOut.after(200), () =>
+        this.loadVisibleDateMetadata(),
+      );
+    }
+
     /**
      * Interaction state that changes often (focus, selection, entered date, taps).
      * @private
@@ -346,11 +465,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
         years.forEach((year) => {
           year.selectedDate = selectedDate;
 
-          if (theme) {
-            year.setAttribute('theme', theme);
-          } else {
-            year.removeAttribute('theme');
-          }
+          setOrRemoveAttribute(year, 'theme', theme);
         });
       }
     }
@@ -360,7 +475,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
      * @protected
      */
     _selectDate(dateToSelect) {
-      if (!this._dateAllowed(dateToSelect)) {
+      if (!this._dateSelectable(dateToSelect)) {
         return false;
       }
       this.selectedDate = dateToSelect;
@@ -426,11 +541,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
      * @private
      */
     _calculateWeekScrollOffset(date) {
-      // Get first day of month
-      const temp = new Date(0, 0);
-      temp.setFullYear(date.getFullYear());
-      temp.setMonth(date.getMonth());
-      temp.setDate(1);
+      const temp = firstOfMonth(date);
       // Determine week (=row index) of date within the month
       let week = 0;
       while (temp.getDate() < date.getDate()) {
@@ -458,12 +569,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       const monthPosition = this._monthScroller.position;
       this._visibleMonthIndex = Math.floor(monthPosition);
       this._yearScroller.position = (monthPosition + this._originDate.getMonth()) / 12;
+      this.__scheduleLoadVisibleDateMetadata();
     }
 
     /** @private */
     _repositionMonthScroller() {
       this._monthScroller.position = this._yearScroller.position * 12 - this._originDate.getMonth();
       this._visibleMonthIndex = Math.floor(this._monthScroller.position);
+      this.__scheduleLoadVisibleDateMetadata();
     }
 
     /** @private */
@@ -630,8 +743,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _differenceInMonths(date1, date2) {
-      const months = (date1.getFullYear() - date2.getFullYear()) * 12;
-      return months - date2.getMonth() + date1.getMonth();
+      return monthIndex(date1) - monthIndex(date2);
     }
 
     /** @private */
@@ -859,13 +971,11 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _getDateDiff(months, days) {
-      const date = new Date(0, 0);
-      date.setFullYear(this.focusedDate.getFullYear());
-      date.setMonth(this.focusedDate.getMonth() + months);
-      if (days) {
-        date.setDate(this.focusedDate.getDate() + days);
-      }
-      return date;
+      return createDate(
+        this.focusedDate.getFullYear(),
+        this.focusedDate.getMonth() + months,
+        days ? this.focusedDate.getDate() + days : 1,
+      );
     }
 
     /** @private */
@@ -895,16 +1005,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _moveFocusInsideMonth(focusedDate, property) {
-      const dateToFocus = new Date(0, 0);
-      dateToFocus.setFullYear(focusedDate.getFullYear());
-
-      if (property === 'minDate') {
-        dateToFocus.setMonth(focusedDate.getMonth());
-        dateToFocus.setDate(1);
-      } else {
-        dateToFocus.setMonth(focusedDate.getMonth() + 1);
-        dateToFocus.setDate(0);
-      }
+      const dateToFocus = property === 'minDate' ? firstOfMonth(focusedDate) : lastOfMonth(focusedDate);
 
       if (this._dateAllowed(dateToFocus)) {
         this.focusDate(dateToFocus);
@@ -923,17 +1024,18 @@ export const DatePickerOverlayContentMixin = (superClass) =>
     }
 
     /** @private */
-    _isTodayAllowed(min, max, isDateDisabled) {
-      return this._dateAllowed(this._getTodayMidnight(), min, max, isDateDisabled);
+    _dateSelectable(date) {
+      return dateSelectable(date, this.minDate, this.maxDate, this.isDateDisabled, this._dateMetadataController);
+    }
+
+    /** @private */
+    _isTodayAllowed() {
+      return this._dateSelectable(this._getTodayMidnight());
     }
 
     /** @private */
     _getTodayMidnight() {
       const today = new Date();
-      const todayMidnight = new Date(0, 0);
-      todayMidnight.setFullYear(today.getFullYear());
-      todayMidnight.setMonth(today.getMonth());
-      todayMidnight.setDate(today.getDate());
-      return todayMidnight;
+      return createDate(today.getFullYear(), today.getMonth(), today.getDate());
     }
   };

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

@@ -12,6 +12,7 @@ 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 { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-base-styles.js';
@@ -31,7 +32,7 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   }
 
   static get styles() {
-    return overlayContentStyles;
+    return [loaderStyles, overlayContentStyles];
   }
 
   static get lumoInjector() {
@@ -44,6 +45,8 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
       <slot name="months"></slot>
       <slot name="years"></slot>
 
+      <div part="loader" aria-hidden="true"></div>
+
       <div role="toolbar" part="toolbar">
         <slot name="today-button"></slot>
         <div

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

@@ -18,7 +18,7 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-base-styl
  * @extends HTMLElement
  * @private
  */
-export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
+class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-date-picker-year';
   }
@@ -64,3 +64,5 @@ export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixi
 }
 
 defineCustomElement(DatePickerYear);
+
+export { DatePickerYear };

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

@@ -7,7 +7,13 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
+export {
+  DatePickerDate,
+  DatePickerDateMetadata,
+  DatePickerDateMetadataProvider,
+  DatePickerDateRange,
+  DatePickerI18n,
+} from './vaadin-date-picker-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -72,12 +78,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * ### Styling
  *
- * The following custom properties are available for styling:
- *
- * Custom property                | Description                | Default
- * -------------------------------|----------------------------|---------
- * `--vaadin-field-default-width` | Default width of the field | `12em`
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name            | Description
@@ -111,6 +111,69 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `opened`             | Set when the overlay is opened
  * `week-numbers`       | Set when week numbers are shown in the calendar
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                                        |
+ * :----------------------------------------------------------|
+ * | `--vaadin-date-picker-date-border-radius`                |
+ * | `--vaadin-date-picker-date-disabled-color`               |
+ * | `--vaadin-date-picker-date-height`                       |
+ * | `--vaadin-date-picker-date-selected-background`          |
+ * | `--vaadin-date-picker-date-selected-color`               |
+ * | `--vaadin-date-picker-date-today-color`                  |
+ * | `--vaadin-date-picker-date-width`                        |
+ * | `--vaadin-date-picker-month-header-color`                |
+ * | `--vaadin-date-picker-month-header-font-size`            |
+ * | `--vaadin-date-picker-month-header-font-weight`          |
+ * | `--vaadin-date-picker-month-padding`                     |
+ * | `--vaadin-date-picker-overlay-max-height`                |
+ * | `--vaadin-date-picker-overlay-width`                     |
+ * | `--vaadin-date-picker-toolbar-padding`                   |
+ * | `--vaadin-date-picker-week-divider-color`                |
+ * | `--vaadin-date-picker-week-number-color`                 |
+ * | `--vaadin-date-picker-week-number-font-size`             |
+ * | `--vaadin-date-picker-weekday-color`                     |
+ * | `--vaadin-date-picker-weekday-font-size`                 |
+ * | `--vaadin-date-picker-weekday-font-weight`               |
+ * | `--vaadin-date-picker-year-scroller-background`          |
+ * | `--vaadin-date-picker-year-scroller-border-color`        |
+ * | `--vaadin-date-picker-year-scroller-current-year-color`  |
+ * | `--vaadin-date-picker-year-scroller-width`               |
+ * | `--vaadin-field-default-width`                           |
+ * | `--vaadin-input-field-background`                        |
+ * | `--vaadin-input-field-border-color`                      |
+ * | `--vaadin-input-field-border-radius`                     |
+ * | `--vaadin-input-field-border-width`                      |
+ * | `--vaadin-input-field-bottom-end-radius`                 |
+ * | `--vaadin-input-field-bottom-start-radius`               |
+ * | `--vaadin-input-field-button-text-color`                 |
+ * | `--vaadin-input-field-container-gap`                     |
+ * | `--vaadin-input-field-disabled-background`               |
+ * | `--vaadin-input-field-disabled-text-color`               |
+ * | `--vaadin-input-field-error-color`                       |
+ * | `--vaadin-input-field-error-font-size`                   |
+ * | `--vaadin-input-field-error-font-weight`                 |
+ * | `--vaadin-input-field-error-line-height`                 |
+ * | `--vaadin-input-field-gap`                               |
+ * | `--vaadin-input-field-helper-color`                      |
+ * | `--vaadin-input-field-helper-font-size`                  |
+ * | `--vaadin-input-field-helper-font-weight`                |
+ * | `--vaadin-input-field-helper-line-height`                |
+ * | `--vaadin-input-field-label-color`                       |
+ * | `--vaadin-input-field-label-font-size`                   |
+ * | `--vaadin-input-field-label-font-weight`                 |
+ * | `--vaadin-input-field-label-line-height`                 |
+ * | `--vaadin-input-field-padding`                           |
+ * | `--vaadin-input-field-placeholder-color`                 |
+ * | `--vaadin-input-field-required-indicator`                |
+ * | `--vaadin-input-field-required-indicator-color`          |
+ * | `--vaadin-input-field-top-end-radius`                    |
+ * | `--vaadin-input-field-top-start-radius`                  |
+ * | `--vaadin-input-field-value-color`                       |
+ * | `--vaadin-input-field-value-font-size`                   |
+ * | `--vaadin-input-field-value-font-weight`                 |
+ * | `--vaadin-input-field-value-line-height`                 |
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-date-picker>` itself, the following internal
@@ -128,6 +191,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * ----------------------|--------------------
  * `years-toggle-button` | Fullscreen mode years scroller toggle
  * `toolbar`             | Toolbar with slotted buttons
+ * `loader`              | Loading spinner shown while the date metadata provider is resolving
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *
@@ -136,6 +200,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `desktop`       | Set when the overlay content is in desktop mode
  * `fullscreen`    | Set when the overlay content is in fullscreen mode
  * `years-visible` | Set when the year scroller is visible in fullscreen mode
+ * `loading`       | Set while the date metadata provider is resolving
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -148,6 +213,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `week-number`         | Week number element
  * `date`                | Date element
  * `disabled`            | Disabled date element
+ * `loading`             | Date element in a month whose metadata is currently being fetched
  * `focused`             | Focused date element
  * `selected`            | Selected date element
  * `today`               | Date element corresponding to the current day

package/src/vaadin-date-picker.js

@@ -36,12 +36,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  *
  * ### Styling
  *
- * The following custom properties are available for styling:
- *
- * Custom property                | Description                | Default
- * -------------------------------|----------------------------|---------
- * `--vaadin-field-default-width` | Default width of the field | `12em`
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name            | Description
@@ -75,6 +69,69 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `opened`             | Set when the overlay is opened
  * `week-numbers`       | Set when week numbers are shown in the calendar
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                                        |
+ * :----------------------------------------------------------|
+ * | `--vaadin-date-picker-date-border-radius`                |
+ * | `--vaadin-date-picker-date-disabled-color`               |
+ * | `--vaadin-date-picker-date-height`                       |
+ * | `--vaadin-date-picker-date-selected-background`          |
+ * | `--vaadin-date-picker-date-selected-color`               |
+ * | `--vaadin-date-picker-date-today-color`                  |
+ * | `--vaadin-date-picker-date-width`                        |
+ * | `--vaadin-date-picker-month-header-color`                |
+ * | `--vaadin-date-picker-month-header-font-size`            |
+ * | `--vaadin-date-picker-month-header-font-weight`          |
+ * | `--vaadin-date-picker-month-padding`                     |
+ * | `--vaadin-date-picker-overlay-max-height`                |
+ * | `--vaadin-date-picker-overlay-width`                     |
+ * | `--vaadin-date-picker-toolbar-padding`                   |
+ * | `--vaadin-date-picker-week-divider-color`                |
+ * | `--vaadin-date-picker-week-number-color`                 |
+ * | `--vaadin-date-picker-week-number-font-size`             |
+ * | `--vaadin-date-picker-weekday-color`                     |
+ * | `--vaadin-date-picker-weekday-font-size`                 |
+ * | `--vaadin-date-picker-weekday-font-weight`               |
+ * | `--vaadin-date-picker-year-scroller-background`          |
+ * | `--vaadin-date-picker-year-scroller-border-color`        |
+ * | `--vaadin-date-picker-year-scroller-current-year-color`  |
+ * | `--vaadin-date-picker-year-scroller-width`               |
+ * | `--vaadin-field-default-width`                           |
+ * | `--vaadin-input-field-background`                        |
+ * | `--vaadin-input-field-border-color`                      |
+ * | `--vaadin-input-field-border-radius`                     |
+ * | `--vaadin-input-field-border-width`                      |
+ * | `--vaadin-input-field-bottom-end-radius`                 |
+ * | `--vaadin-input-field-bottom-start-radius`               |
+ * | `--vaadin-input-field-button-text-color`                 |
+ * | `--vaadin-input-field-container-gap`                     |
+ * | `--vaadin-input-field-disabled-background`               |
+ * | `--vaadin-input-field-disabled-text-color`               |
+ * | `--vaadin-input-field-error-color`                       |
+ * | `--vaadin-input-field-error-font-size`                   |
+ * | `--vaadin-input-field-error-font-weight`                 |
+ * | `--vaadin-input-field-error-line-height`                 |
+ * | `--vaadin-input-field-gap`                               |
+ * | `--vaadin-input-field-helper-color`                      |
+ * | `--vaadin-input-field-helper-font-size`                  |
+ * | `--vaadin-input-field-helper-font-weight`                |
+ * | `--vaadin-input-field-helper-line-height`                |
+ * | `--vaadin-input-field-label-color`                       |
+ * | `--vaadin-input-field-label-font-size`                   |
+ * | `--vaadin-input-field-label-font-weight`                 |
+ * | `--vaadin-input-field-label-line-height`                 |
+ * | `--vaadin-input-field-padding`                           |
+ * | `--vaadin-input-field-placeholder-color`                 |
+ * | `--vaadin-input-field-required-indicator`                |
+ * | `--vaadin-input-field-required-indicator-color`          |
+ * | `--vaadin-input-field-top-end-radius`                    |
+ * | `--vaadin-input-field-top-start-radius`                  |
+ * | `--vaadin-input-field-value-color`                       |
+ * | `--vaadin-input-field-value-font-size`                   |
+ * | `--vaadin-input-field-value-font-weight`                 |
+ * | `--vaadin-input-field-value-line-height`                 |
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-date-picker>` itself, the following internal
@@ -92,6 +149,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * ----------------------|--------------------
  * `years-toggle-button` | Fullscreen mode years scroller toggle
  * `toolbar`             | Toolbar with slotted buttons
+ * `loader`              | Loading spinner shown while the date metadata provider is resolving
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *
@@ -100,6 +158,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `desktop`       | Set when the overlay content is in desktop mode
  * `fullscreen`    | Set when the overlay content is in fullscreen mode
  * `years-visible` | Set when the year scroller is visible in fullscreen mode
+ * `loading`       | Set while the date metadata provider is resolving
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -112,6 +171,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `week-number`         | Week number element
  * `date`                | Date element
  * `disabled`            | Disabled date element
+ * `loading`             | Date element in a month whose metadata is currently being fetched
  * `focused`             | Focused date element
  * `selected`            | Selected date element
  * `today`               | Date element corresponding to the current day

package/src/vaadin-infinite-scroller.js

@@ -37,6 +37,10 @@ template.innerHTML = `
       box-sizing: border-box;
       top: var(--vaadin-infinite-scroller-buffer-offset, 0);
     }
+
+    ::slotted(div) {
+      height: var(--vaadin-infinite-scroller-item-height);
+    }
   </style>
 
   <div id="scroller" tabindex="-1">
@@ -149,7 +153,7 @@ export class InfiniteScroller extends HTMLElement {
       this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
     } else {
       this._initialIndex = ~~index;
-      this._reset();
+      this.reset();
       this._scrollDisabled = true;
       this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
       this._scrollDisabled = false;
@@ -235,7 +239,7 @@ export class InfiniteScroller extends HTMLElement {
       });
 
       if (!this._buffers[0].translateY) {
-        this._reset();
+        this.reset();
       }
 
       this._initDone = true;
@@ -262,7 +266,7 @@ export class InfiniteScroller extends HTMLElement {
     if (scrollTop < this._bufferHeight || scrollTop > this._initialScroll * 2 - this._bufferHeight) {
       // Scrolled near the end/beginning of the scrollable area -> reset.
       this._initialIndex = ~~this.position;
-      this._reset();
+      this.reset();
     }
 
     // Check if we scrolled enough to translate the buffer positions.
@@ -288,8 +292,18 @@ export class InfiniteScroller extends HTMLElement {
     });
   }
 
-  /** @private */
-  _reset() {
+  /**
+   * Resets the scroller to the last starting index, and re-measures the
+   * item height in case the computed value of the CSS custom property
+   * has changed.
+   */
+  reset() {
+    if (!this._activated || !this.isConnected) {
+      return;
+    }
+
+    this._itemHeightVal = null;
+
     this._scrollDisabled = true;
     this.$.scroller.scrollTop = this._initialScroll;
     this._buffers[0].translateY = this._initialScroll - this._bufferHeight;
@@ -314,7 +328,6 @@ export class InfiniteScroller extends HTMLElement {
     this._buffers.forEach((buffer) => {
       for (let i = 0; i < this.bufferSize; i++) {
         const itemWrapper = document.createElement('div');
-        itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
         const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;