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

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.
@@ -128,6 +134,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 +143,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 +156,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

@@ -92,6 +92,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 +101,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 +114,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-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) {
@@ -87,6 +96,18 @@ export const MonthCalendarMixin = (superClass) =>
           value: () => false,
         },
 
+        /**
+         * 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: {
+          type: Object,
+          attribute: false,
+          sync: true,
+        },
+
         enteredDate: {
           type: Date,
         },
@@ -148,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 &&
@@ -225,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 */
@@ -253,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) {
@@ -330,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
@@ -345,6 +346,10 @@ export const MonthCalendarMixin = (superClass) =>
         result.push('disabled');
       }
 
+      if (date && this.__isMonthPending()) {
+        result.push('loading');
+      }
+
       if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
         result.push('focused');
       }
@@ -365,6 +370,12 @@ export const MonthCalendarMixin = (superClass) =>
         result.push('future');
       }
 
+      // 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(' ');
     }
 
@@ -378,14 +389,29 @@ export const MonthCalendarMixin = (superClass) =>
       return String(this.__isDaySelected(date, selectedDate));
     }
 
+    /**
+     * 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
+     */
+    __isMonthPending() {
+      return !!this._dateMetadataController?.isMonthPending(this.month);
+    }
+
     /** @private */
     __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
-      return !dateAllowed(date, minDate, maxDate, isDateDisabled);
+      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/web-types.json

@@ -1,18 +1,27 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.3.0-alpha8",
+  "version": "25.3.0-alpha9",
   "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\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\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`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",
+          "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 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"
@@ -301,6 +319,17 @@
                   ]
                 }
               },
+              {
+                "name": "dateMetadataProvider",
+                "description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` and returns, or resolves with, an array of\n`DatePickerDateMetadata` objects — a `DatePickerDate` extended with metadata such as\n`disabled`, e.g. `{ year, month, day, disabled: true }` — for the dates that have metadata\nwithin that range. Dates it does not mention have no metadata. `month` is 0-based: 0 is\nJanuary and 11 is December.\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 the\nrange is decided by the calendar and may span several months, and may include months it\nalready has metadata for, whose entries are then ignored.\n\nIt may return a `Promise`, so the answer can come from a server. Until it resolves, the\naffected dates render with the `loading` part but stay selectable, and a loading spinner\nis shown. Nothing is disabled before the provider has actually reported it, so a slow\nprovider does not make the calendar unusable. If it throws or rejects, the error is logged\nand the affected months are requested again the next time the user navigates.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date is\ndisabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. That decides what the calendar renders as disabled, what can be\nselected, and whether the field is valid.\n\nA value is checked against the provider even if the overlay is never opened, which loads the\nmonth holding it. Until that month answers the value is valid, and it is re-validated once\nthe answer arrives, so `checkValidity()` can report a value as valid and then invalid.\n\n`part` from the metadata adds part names to the date, so a theme can style specific dates\nwith `::part()` — e.g. `{ year, month, day, part: 'busy' }`. Give a single name or several\nseparated by spaces. Do not use built-in names like `disabled` and `selected`.\n\nKeep a stable reference to the function. Assigning a new function clears the cache and\nre-fetches every visible range. To re-fetch while keeping the same function, because the\ndata behind it changed, call `clearCache()`.",
+                "value": {
+                  "type": [
+                    "DatePickerDateMetadataProvider",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "disabled",
                 "description": "If true, the user cannot interact with this element.",
@@ -330,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"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.3.0-alpha8",
+  "version": "25.3.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,19 +16,26 @@
       "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\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\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`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",
+          "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 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",
           "extension": true,
           "attributes": [
+            {
+              "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": {
+                "kind": "expression"
+              }
+            },
             {
               "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": {
                 "kind": "expression"
               }
             },
             {
               "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": {
                 "kind": "expression"
               }
@@ -68,6 +75,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".dateMetadataProvider",
+              "description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` and returns, or resolves with, an array of\n`DatePickerDateMetadata` objects — a `DatePickerDate` extended with metadata such as\n`disabled`, e.g. `{ year, month, day, disabled: true }` — for the dates that have metadata\nwithin that range. Dates it does not mention have no metadata. `month` is 0-based: 0 is\nJanuary and 11 is December.\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 the\nrange is decided by the calendar and may span several months, and may include months it\nalready has metadata for, whose entries are then ignored.\n\nIt may return a `Promise`, so the answer can come from a server. Until it resolves, the\naffected dates render with the `loading` part but stay selectable, and a loading spinner\nis shown. Nothing is disabled before the provider has actually reported it, so a slow\nprovider does not make the calendar unusable. If it throws or rejects, the error is logged\nand the affected months are requested again the next time the user navigates.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date is\ndisabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. That decides what the calendar renders as disabled, what can be\nselected, and whether the field is valid.\n\nA value is checked against the provider even if the overlay is never opened, which loads the\nmonth holding it. Until that month answers the value is valid, and it is re-validated once\nthe answer arrives, so `checkValidity()` can report a value as valid and then invalid.\n\n`part` from the metadata adds part names to the date, so a theme can style specific dates\nwith `::part()` — e.g. `{ year, month, day, part: 'busy' }`. Give a single name or several\nseparated by spaces. Do not use built-in names like `disabled` and `selected`.\n\nKeep a stable reference to the function. Assigning a new function clears the cache and\nre-fetches every visible range. To re-fetch while keeping the same function, because the\ndata behind it changed, call `clearCache()`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?disabled",
               "description": "If true, the user cannot interact with this element.",
@@ -91,7 +105,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": {
                 "kind": "expression"
               }