@vaadin/date-picker 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

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,7 +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 data is being loaded, for example while the disabled dates provider resolves
+ * `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:
  *
@@ -101,7 +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 data is being loaded, for example while the disabled dates provider resolves
+ * `loading`       | Set while the date metadata provider is resolving
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -114,17 +171,13 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `week-number`         | Week number element
  * `date`                | Date element
  * `disabled`            | Disabled date element
- * `pending`             | Date element in a month whose date metadata provider result is still loading
+ * `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
  * `past`                | Date element corresponding to the date in the past
  * `future`              | Date element corresponding to the date in the future
  *
- * Custom part names returned per date by `dateMetadataProvider` (the `part` metadata field) are
- * also added to the matching date elements, so specific dates can be styled with
- * `vaadin-month-calendar::part(<name>)`.
- *
  * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:
  *
  * Part name             | Description

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()}`;

package/src/vaadin-month-calendar-mixin.js

@@ -4,8 +4,17 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { dateAllowed, dateEquals, getISOWeekNumber, normalizeDate } from './vaadin-date-picker-helper.js';
+import {
+  dateAllowed,
+  dateEquals,
+  dateSelectable,
+  firstOfMonth,
+  getISOWeekNumber,
+  lastOfMonth,
+  normalizeDate,
+} from './vaadin-date-picker-helper.js';
 
 export const MonthCalendarMixin = (superClass) =>
   class MonthCalendarMixinClass extends FocusMixin(superClass) {
@@ -88,25 +97,15 @@ export const MonthCalendarMixin = (superClass) =>
         },
 
         /**
-         * The shared controller that resolves and caches the dates disabled by the date-picker's
-         * `dateMetadataProvider`. Set by the overlay content; used to look up the disabled state
-         * of this month's dates.
-         * @type {object | undefined}
-         * @private
+         * The date-picker's controller resolving the metadata returned by its
+         * `dateMetadataProvider`. Assigned by the overlay content, which also subscribes this
+         * calendar to it.
+         * @protected
          */
-        dateMetadataController: {
+        _dateMetadataController: {
           type: Object,
           attribute: false,
-        },
-
-        /**
-         * Bumped by the overlay content whenever the controller's cache or loading state changes,
-         * to trigger a re-render of this month.
-         * @private
-         */
-        __dateMetadataVersion: {
-          type: Number,
-          attribute: false,
+          sync: true,
         },
 
         enteredDate: {
@@ -122,8 +121,7 @@ export const MonthCalendarMixin = (superClass) =>
         /** @protected */
         _days: {
           type: Array,
-          computed:
-            '__computeDays(month, i18n, minDate, maxDate, isDateDisabled, dateMetadataController, __dateMetadataVersion)',
+          computed: '__computeDays(month, i18n, minDate, maxDate, isDateDisabled)',
         },
 
         /** @protected */
@@ -171,17 +169,8 @@ export const MonthCalendarMixin = (superClass) =>
      * @protected
      */
     __computeDisabled(month, minDate, maxDate) {
-      // First day of the month
-      const firstDate = new Date(0, 0);
-      firstDate.setFullYear(month.getFullYear());
-      firstDate.setMonth(month.getMonth());
-      firstDate.setDate(1);
-
-      // Last day of the month
-      const lastDate = new Date(0, 0);
-      lastDate.setFullYear(month.getFullYear());
-      lastDate.setMonth(month.getMonth() + 1);
-      lastDate.setDate(0);
+      const firstDate = firstOfMonth(month);
+      const lastDate = lastOfMonth(month);
 
       if (
         minDate &&
@@ -248,11 +237,8 @@ export const MonthCalendarMixin = (superClass) =>
 
     /** @private */
     __focusedDateChanged(focusedDate, days) {
-      if (Array.isArray(days) && days.some((date) => dateEquals(date, focusedDate))) {
-        this.removeAttribute('aria-hidden');
-      } else {
-        this.setAttribute('aria-hidden', 'true');
-      }
+      const hasFocusedDate = Array.isArray(days) && days.some((date) => dateEquals(date, focusedDate));
+      setOrRemoveAttribute(this, 'aria-hidden', !hasFocusedDate);
     }
 
     /** @protected */
@@ -276,11 +262,7 @@ export const MonthCalendarMixin = (superClass) =>
       if (month === undefined || i18n === undefined) {
         return [];
       }
-      // First day of the month (at midnight).
-      const date = new Date(0, 0);
-      date.setFullYear(month.getFullYear());
-      date.setMonth(month.getMonth());
-      date.setDate(1);
+      const date = firstOfMonth(month);
 
       // Rewind to first day of the week.
       while (date.getDay() !== i18n.firstDayOfWeek) {
@@ -353,11 +335,7 @@ export const MonthCalendarMixin = (superClass) =>
 
     /** @private */
     _showWeekNumbersChanged(showWeekNumbers, i18n) {
-      if (this.__computeShowWeekSeparator(showWeekNumbers, i18n)) {
-        this.setAttribute('week-numbers', '');
-      } else {
-        this.removeAttribute('week-numbers');
-      }
+      this.toggleAttribute('week-numbers', this.__computeShowWeekSeparator(showWeekNumbers, i18n));
     }
 
     // eslint-disable-next-line @typescript-eslint/max-params
@@ -368,8 +346,8 @@ export const MonthCalendarMixin = (superClass) =>
         result.push('disabled');
       }
 
-      if (date && this.__isMonthLoading()) {
-        result.push('pending');
+      if (date && this.__isMonthPending()) {
+        result.push('loading');
       }
 
       if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
@@ -392,11 +370,10 @@ export const MonthCalendarMixin = (superClass) =>
         result.push('future');
       }
 
-      // Custom part names supplied per date by `dateMetadataProvider`, so a theme can style
-      // specific dates (e.g. mark a date as busy or almost fully booked) via `::part()`.
-      const part = date && this.dateMetadataController?.getMetadata(date)?.part;
-      if (part) {
-        result.push(...(Array.isArray(part) ? part : String(part).split(' ')).filter(Boolean));
+      // Only a string can name parts, so anything else the provider set is ignored.
+      const customParts = date && this._dateMetadataController?.getMetadata(date)?.part;
+      if (customParts && typeof customParts === 'string') {
+        result.push(customParts);
       }
 
       return result.join(' ');
@@ -413,28 +390,28 @@ export const MonthCalendarMixin = (superClass) =>
     }
 
     /**
-     * Whether the provider result for the currently displayed month is still pending. The overlay
-     * drives loading for the whole visible range; here we only reflect the controller's state.
+     * Whether the displayed month is currently being fetched, which is the same state the overlay
+     * reports with its spinner. A month that has not been asked about yet is not pending: nothing is
+     * loading, so there is nothing to report.
      * @private
      */
-    __isMonthLoading() {
-      const controller = this.dateMetadataController;
-      return !!controller?.provider && this.month !== undefined && !controller.isMonthLoaded(this.month);
+    __isMonthPending() {
+      return !!this._dateMetadataController?.isMonthPending(this.month);
     }
 
     /** @private */
     __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
-      if (!dateAllowed(date, minDate, maxDate, isDateDisabled)) {
-        return true;
-      }
-      // A date is blocked while its month is pending (whole month non-selectable) or once the
-      // resolved provider result marks it disabled.
-      return !!this.dateMetadataController?.isDateBlocked(date);
+      return !dateSelectable(date, minDate, maxDate, isDateDisabled, this._dateMetadataController);
     }
 
     /** @private */
     __computeDayAriaDisabled(date, min, max, isDateDisabled) {
-      if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
+      if (date === undefined) {
+        return 'false';
+      }
+
+      const hasProvider = !!this._dateMetadataController?.provider;
+      if (!hasProvider && min === undefined && max === undefined && isDateDisabled === undefined) {
         return 'false';
       }
 

package/src/vaadin-month-calendar.js

@@ -26,6 +26,10 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LumoIn
     return monthCalendarStyles;
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     const weekDayNames = this.__computeWeekDayNames(this.i18n, this.showWeekNumbers);

package/web-types.json

@@ -1,18 +1,27 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`backdrop`           | Backdrop of the overlay\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n`week-numbers`       | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n`loader`              | Loading spinner shown while data is being loaded, for example while the disabled dates provider resolves\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n`loading`       | Set while data is being loaded, for example while the disabled dates provider resolves\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`pending`             | Date element in a month whose date metadata provider result is still loading\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nCustom part names returned per date by `dateMetadataProvider` (the `part` metadata field) are\nalso added to the matching date elements, so specific dates can be styled with\n`vaadin-month-calendar::part(<name>)`.\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`backdrop`           | Backdrop of the overlay\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n`week-numbers`       | Set when week numbers are shown in the calendar\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                        |\n:----------------------------------------------------------|\n| `--vaadin-date-picker-date-border-radius`                |\n| `--vaadin-date-picker-date-disabled-color`               |\n| `--vaadin-date-picker-date-height`                       |\n| `--vaadin-date-picker-date-selected-background`          |\n| `--vaadin-date-picker-date-selected-color`               |\n| `--vaadin-date-picker-date-today-color`                  |\n| `--vaadin-date-picker-date-width`                        |\n| `--vaadin-date-picker-month-header-color`                |\n| `--vaadin-date-picker-month-header-font-size`            |\n| `--vaadin-date-picker-month-header-font-weight`          |\n| `--vaadin-date-picker-month-padding`                     |\n| `--vaadin-date-picker-overlay-max-height`                |\n| `--vaadin-date-picker-overlay-width`                     |\n| `--vaadin-date-picker-toolbar-padding`                   |\n| `--vaadin-date-picker-week-divider-color`                |\n| `--vaadin-date-picker-week-number-color`                 |\n| `--vaadin-date-picker-week-number-font-size`             |\n| `--vaadin-date-picker-weekday-color`                     |\n| `--vaadin-date-picker-weekday-font-size`                 |\n| `--vaadin-date-picker-weekday-font-weight`               |\n| `--vaadin-date-picker-year-scroller-background`          |\n| `--vaadin-date-picker-year-scroller-border-color`        |\n| `--vaadin-date-picker-year-scroller-current-year-color`  |\n| `--vaadin-date-picker-year-scroller-width`               |\n| `--vaadin-field-default-width`                           |\n| `--vaadin-input-field-background`                        |\n| `--vaadin-input-field-border-color`                      |\n| `--vaadin-input-field-border-radius`                     |\n| `--vaadin-input-field-border-width`                      |\n| `--vaadin-input-field-bottom-end-radius`                 |\n| `--vaadin-input-field-bottom-start-radius`               |\n| `--vaadin-input-field-button-text-color`                 |\n| `--vaadin-input-field-container-gap`                     |\n| `--vaadin-input-field-disabled-background`               |\n| `--vaadin-input-field-disabled-text-color`               |\n| `--vaadin-input-field-error-color`                       |\n| `--vaadin-input-field-error-font-size`                   |\n| `--vaadin-input-field-error-font-weight`                 |\n| `--vaadin-input-field-error-line-height`                 |\n| `--vaadin-input-field-gap`                               |\n| `--vaadin-input-field-helper-color`                      |\n| `--vaadin-input-field-helper-font-size`                  |\n| `--vaadin-input-field-helper-font-weight`                |\n| `--vaadin-input-field-helper-line-height`                |\n| `--vaadin-input-field-label-color`                       |\n| `--vaadin-input-field-label-font-size`                   |\n| `--vaadin-input-field-label-font-weight`                 |\n| `--vaadin-input-field-label-line-height`                 |\n| `--vaadin-input-field-padding`                           |\n| `--vaadin-input-field-placeholder-color`                 |\n| `--vaadin-input-field-required-indicator`                |\n| `--vaadin-input-field-required-indicator-color`          |\n| `--vaadin-input-field-top-end-radius`                    |\n| `--vaadin-input-field-top-start-radius`                  |\n| `--vaadin-input-field-value-color`                       |\n| `--vaadin-input-field-value-font-size`                   |\n| `--vaadin-input-field-value-font-weight`                 |\n| `--vaadin-input-field-value-line-height`                 |\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n`loader`              | Loading spinner shown while the date metadata provider is resolving\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n`loading`       | Set while the date metadata provider is resolving\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`loading`             | Date element in a month whose metadata is currently being fetched\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "accessible-name",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -21,7 +30,7 @@
             },
             {
               "name": "accessible-name-ref",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -238,9 +247,18 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibleDescriptionRef",
+                "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "accessibleName",
-                "description": "String used to label the component to screen reader users.",
+                "description": "String used to label the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -249,7 +267,7 @@
               },
               {
                 "name": "accessibleNameRef",
-                "description": "Id of the element used as label of the component to screen reader users.",
+                "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -303,11 +321,11 @@
               },
               {
                 "name": "dateMetadataProvider",
-                "description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` object (`{ start, end }` of `DatePickerDate`)\nand returns, or resolves with, an array of metadata objects — a `DatePickerDate` extended\nwith metadata fields such as `disabled` and custom `part` names, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }` — for the dates that have metadata\nwithin that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date\nis disabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. `part` names are added to the date cell's `part` attribute so\na theme can style specific dates via `::part()`.\n\nBoth `disabled` and `part` are returned by this one function, rather than by separate\ngenerators, so a single backend query (for example in Flow) can answer both at once\ninstead of being split into two passes over the same data.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range. To reload after the underlying data changes\nwhile keeping the same function, call `clearCache()`.",
+                "description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n  // The date is an ISO 8601 string.\n  { date: '2026-01-01', disabled: true },\n\n  // Adds a custom part name to the date.\n  { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
                 "value": {
                   "type": [
-                    "function DatePickerDateRange: Array<DatePickerDateMetadata>",
-                    "Promise<Array<DatePickerDateMetadata>>",
+                    "DatePickerDateMetadataProvider",
+                    "null",
                     "undefined"
                   ]
                 }
@@ -341,7 +359,7 @@
               },
               {
                 "name": "i18n",
-                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n  // An array with the full names of months starting\n  // with January.\n  monthNames: [\n    'January', 'February', 'March', 'April', 'May',\n    'June', 'July', 'August', 'September',\n    'October', 'November', 'December'\n  ],\n\n  // An array of weekday names starting with Sunday. Used\n  // in screen reader announcements.\n  weekdays: [\n    'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n    'Thursday', 'Friday', 'Saturday'\n  ],\n\n  // An array of short weekday names starting with Sunday.\n  // Displayed in the calendar.\n  weekdaysShort: [\n    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n  ],\n\n  // An integer indicating the first day of the week\n  // (0 = Sunday, 1 = Monday, etc.).\n  firstDayOfWeek: 0,\n\n  // Translation of the Today shortcut button text.\n  today: 'Today',\n\n  // Translation of the Cancel button text.\n  cancel: 'Cancel',\n\n  // Used for adjusting the year value when parsing dates with short years.\n  // The year values between 0 and 99 are evaluated and adjusted.\n  // Example: for a referenceDate of 1970-10-30;\n  //   dateToBeParsed: 40-10-30, result: 1940-10-30\n  //   dateToBeParsed: 80-10-30, result: 1980-10-30\n  //   dateToBeParsed: 10-10-30, result: 2010-10-30\n  // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n  // The default value is the current date.\n  referenceDate: '',\n\n  // A function to format given `Object` as\n  // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  formatDate: d => {\n    // returns a string representation of the given\n    // object in 'MM/DD/YYYY' -format\n  },\n\n  // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  // Must properly parse (at least) text formatted by `formatDate`.\n  // Setting the property to null will disable keyboard input feature.\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  parseDate: text => {\n    // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n    // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  }\n\n  // A function to format given `monthName` and\n  // `fullYear` integer as calendar title string.\n  formatTitle: (monthName, fullYear) => {\n    return monthName + ' ' + fullYear;\n  }\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n  // An array with the full names of months starting\n  // with January.\n  monthNames: [\n    'January', 'February', 'March', 'April', 'May',\n    'June', 'July', 'August', 'September',\n    'October', 'November', 'December'\n  ],\n\n  // An array of weekday names starting with Sunday. Used\n  // in screen reader announcements.\n  weekdays: [\n    'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n    'Thursday', 'Friday', 'Saturday'\n  ],\n\n  // An array of short weekday names starting with Sunday.\n  // Displayed in the calendar.\n  weekdaysShort: [\n    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n  ],\n\n  // An integer indicating the first day of the week\n  // (0 = Sunday, 1 = Monday, etc.).\n  firstDayOfWeek: 0,\n\n  // Translation of the Today shortcut button text.\n  today: 'Today',\n\n  // Translation of the Cancel button text.\n  cancel: 'Cancel',\n\n  // Accessible name of the overlay content, announced by screen readers\n  // when the overlay opens.\n  dialogAccessibleName: 'Calendar',\n\n  // Used for adjusting the year value when parsing dates with short years.\n  // The year values between 0 and 99 are evaluated and adjusted.\n  // Example: for a referenceDate of 1970-10-30;\n  //   dateToBeParsed: 40-10-30, result: 1940-10-30\n  //   dateToBeParsed: 80-10-30, result: 1980-10-30\n  //   dateToBeParsed: 10-10-30, result: 2010-10-30\n  // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n  // The default value is the current date.\n  referenceDate: '',\n\n  // A function to format given `Object` as\n  // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  formatDate: d => {\n    // returns a string representation of the given\n    // object in 'MM/DD/YYYY' -format\n  },\n\n  // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  // Must properly parse (at least) text formatted by `formatDate`.\n  // Setting the property to null will disable keyboard input feature.\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  parseDate: text => {\n    // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n    // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  }\n\n  // A function to format given `monthName` and\n  // `fullYear` integer as calendar title string.\n  formatTitle: (monthName, fullYear) => {\n    return monthName + ' ' + fullYear;\n  }\n}\n```",
                 "value": {
                   "type": [
                     "Object"
@@ -368,7 +386,7 @@
               },
               {
                 "name": "isDateDisabled",
-                "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
+                "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
                 "value": {
                   "type": [
                     "function DatePickerDate: boolean",