@vaadin/date-time-picker 25.3.0-alpha10 → 25.3.0-alpha11

package/custom-elements.json

@@ -102,6 +102,21 @@
                 "package": "@vaadin/field-base/src/validate-mixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "clearCache",
+              "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata."
+            },
+            {
+              "kind": "field",
+              "name": "dateMetadataProvider",
+              "privacy": "public",
+              "type": {
+                "text": "DatePickerDateMetadataProvider | null | undefined"
+              },
+              "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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.",
+              "attribute": "date-metadata-provider"
+            },
             {
               "kind": "field",
               "name": "datePlaceholder",
@@ -406,6 +421,14 @@
               "description": "Specify that this control should have input focus when the page loads.",
               "fieldName": "autofocus"
             },
+            {
+              "name": "date-metadata-provider",
+              "type": {
+                "text": "DatePickerDateMetadataProvider | null | undefined"
+              },
+              "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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.",
+              "fieldName": "dateMetadataProvider"
+            },
             {
               "name": "date-placeholder",
               "type": {
@@ -712,6 +735,29 @@
                 "module": "src/vaadin-date-time-picker-mixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "clearCache",
+              "description": "Clears the `dateMetadataProvider` cache and reloads the date metadata.",
+              "inheritedFrom": {
+                "name": "DateTimePickerMixin",
+                "module": "src/vaadin-date-time-picker-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dateMetadataProvider",
+              "privacy": "public",
+              "type": {
+                "text": "DatePickerDateMetadataProvider | null | undefined"
+              },
+              "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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.",
+              "attribute": "date-metadata-provider",
+              "inheritedFrom": {
+                "name": "DateTimePickerMixin",
+                "module": "src/vaadin-date-time-picker-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "datePlaceholder",
@@ -1085,6 +1131,18 @@
                 "module": "src/vaadin-date-time-picker-mixin.js"
               }
             },
+            {
+              "name": "date-metadata-provider",
+              "type": {
+                "text": "DatePickerDateMetadataProvider | null | undefined"
+              },
+              "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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.",
+              "fieldName": "dateMetadataProvider",
+              "inheritedFrom": {
+                "name": "DateTimePickerMixin",
+                "module": "src/vaadin-date-time-picker-mixin.js"
+              }
+            },
             {
               "name": "date-placeholder",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,20 +35,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha10",
-    "@vaadin/component-base": "25.3.0-alpha10",
-    "@vaadin/date-picker": "25.3.0-alpha10",
-    "@vaadin/field-base": "25.3.0-alpha10",
-    "@vaadin/time-picker": "25.3.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
+    "@vaadin/a11y-base": "25.3.0-alpha11",
+    "@vaadin/component-base": "25.3.0-alpha11",
+    "@vaadin/date-picker": "25.3.0-alpha11",
+    "@vaadin/field-base": "25.3.0-alpha11",
+    "@vaadin/time-picker": "25.3.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha10",
-    "@vaadin/chai-plugins": "25.3.0-alpha10",
-    "@vaadin/test-runner-commands": "25.3.0-alpha10",
+    "@vaadin/aura": "25.3.0-alpha11",
+    "@vaadin/chai-plugins": "25.3.0-alpha11",
+    "@vaadin/test-runner-commands": "25.3.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha11",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
+  "gitHead": "7e0c61a37e68d8971def9cdf28ad0548a0f530a9"
 }

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

@@ -7,7 +7,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
-import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
+import type { DatePickerDateMetadataProvider, DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
@@ -127,6 +127,46 @@ export declare class DateTimePickerMixinClass {
    */
   showWeekNumbers: boolean | null | undefined;
 
+  /**
+   * A function that provides metadata for the dates the calendar is about to render: whether they
+   * are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
+   * The provider is called for a range of dates at a time, and again as the calendar renders
+   * further dates.
+   *
+   * It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
+   * for the dates in that range that have metadata. It can return a `Promise` to load the metadata
+   * asynchronously, and `null` or `undefined` when no date in the range has metadata.
+   *
+   * The returned array has the following structure:
+   *
+   * ```js
+   * [
+   *   // The date is an ISO 8601 string.
+   *   { date: '2026-01-01', disabled: true },
+   *
+   *   // Adds a custom part name to the date.
+   *   { date: '2026-01-02', part: 'busy' },
+   * ]
+   * ```
+   *
+   * A date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.
+   * Disabled dates are not selectable, and a value on a disabled date makes the field invalid.
+   * The provider does not affect which date is focused when opening the overlay. Use
+   * `initialPosition` property to provide a selectable date.
+   *
+   * While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
+   * the `loading` part. If the function throws or rejects, corresponding dates are requested again
+   * the next time the user navigates.
+   *
+   * The provider is used for validation also when the overlay is closed. Date is considered valid
+   * while the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated
+   * when the metadata is loaded, but checked against it at the next validation instead.
+   *
+   * Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
+   * visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
+   */
+  dateMetadataProvider: DatePickerDateMetadataProvider | null | undefined;
+
   /**
    * Set to true to prevent the overlays from opening automatically.
    * @attr {boolean} auto-open-disabled
@@ -171,4 +211,9 @@ export declare class DateTimePickerMixinClass {
    * [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
    */
   i18n: DateTimePickerI18n;
+
+  /**
+   * Clears the `dateMetadataProvider` cache and reloads the date metadata.
+   */
+  clearCache(): void;
 }

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

@@ -181,6 +181,51 @@ export const DateTimePickerMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * A function that provides metadata for the dates the calendar is about to render: whether they
+         * are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
+         * The provider is called for a range of dates at a time, and again as the calendar renders
+         * further dates.
+         *
+         * It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
+         * for the dates in that range that have metadata. It can return a `Promise` to load the metadata
+         * asynchronously, and `null` or `undefined` when no date in the range has metadata.
+         *
+         * The returned array has the following structure:
+         *
+         * ```js
+         * [
+         *   // The date is an ISO 8601 string.
+         *   { date: '2026-01-01', disabled: true },
+         *
+         *   // Adds a custom part name to the date.
+         *   { date: '2026-01-02', part: 'busy' },
+         * ]
+         * ```
+         *
+         * A date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.
+         * Disabled dates are not selectable, and a value on a disabled date makes the field invalid.
+         * The provider does not affect which date is focused when opening the overlay. Use
+         * `initialPosition` property to provide a selectable date.
+         *
+         * While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
+         * the `loading` part. If the function throws or rejects, corresponding dates are requested again
+         * the next time the user navigates.
+         *
+         * The provider is used for validation also when the overlay is closed. Date is considered valid
+         * while the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated
+         * when the metadata is loaded, but checked against it at the next validation instead.
+         *
+         * Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
+         * visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
+         *
+         * @type {DatePickerDateMetadataProvider | null | undefined}
+         */
+        dateMetadataProvider: {
+          type: Function,
+          sync: true,
+        },
+
         /**
          * Set to true to prevent the overlays from opening automatically.
          * @attr {boolean} auto-open-disabled
@@ -246,6 +291,7 @@ export const DateTimePickerMixin = (superClass) =>
         '__stepChanged(step, __timePicker)',
         '__initialPositionChanged(initialPosition, __datePicker)',
         '__showWeekNumbersChanged(showWeekNumbers, __datePicker)',
+        '__dateMetadataProviderChanged(dateMetadataProvider, __datePicker)',
         '__requiredChanged(required, __datePicker, __timePicker)',
         '__invalidChanged(invalid, __datePicker, __timePicker)',
         '__disabledChanged(disabled, __datePicker, __timePicker)',
@@ -545,6 +591,7 @@ export const DateTimePickerMixin = (superClass) =>
         this.datePlaceholder = newDatePicker.placeholder;
         this.initialPosition = newDatePicker.initialPosition;
         this.showWeekNumbers = newDatePicker.showWeekNumbers;
+        this.dateMetadataProvider = newDatePicker.dateMetadataProvider;
       }
 
       // Min and max are always synchronized from date time picker (host) to inner fields because time picker
@@ -663,6 +710,13 @@ export const DateTimePickerMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __dateMetadataProviderChanged(dateMetadataProvider, datePicker) {
+      if (datePicker) {
+        datePicker.dateMetadataProvider = dateMetadataProvider;
+      }
+    }
+
     /** @private */
     __invalidChanged(invalid, datePicker, timePicker) {
       if (datePicker) {
@@ -801,6 +855,13 @@ export const DateTimePickerMixin = (superClass) =>
       );
     }
 
+    /**
+     * Clears the `dateMetadataProvider` cache and reloads the date metadata.
+     */
+    clearCache() {
+      this.__datePicker?.clearCache();
+    }
+
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      *

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-date-time-picker",
-          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields`       | The date and time pickers wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|---------------------------------\n`disabled`          | Set when the element is disabled\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`invalid`           | Set when the element is invalid\n`has-label`         | Set when the element has a label\n`has-value`         | Set when the element has a value\n`has-helper`        | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip`       | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap`                  |\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-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-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-required-indicator-color`  |\n| `--vaadin-input-field-required-indicator`        |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker).\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\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields`       | The date and time pickers wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|---------------------------------\n`disabled`          | Set when the element is disabled\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`invalid`           | Set when the element is invalid\n`has-label`         | Set when the element has a label\n`has-value`         | Set when the element has a value\n`has-helper`        | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip`       | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap`                  |\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-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-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-required-indicator-color`  |\n| `--vaadin-input-field-required-indicator`        |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-time-picker).\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\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "attributes": [
             {
               "name": "accessible-description-ref",
@@ -265,6 +265,17 @@
                   ]
                 }
               },
+              {
+                "name": "dateMetadataProvider",
+                "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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": [
+                    "DatePickerDateMetadataProvider",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "datePlaceholder",
                 "description": "A placeholder string for the date field.",
@@ -303,7 +314,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 structure and default values:\n\n```js\n{\n  // Accessible label to the date picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  dateLabel: undefined;\n\n  // Accessible label to the time picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker) are supported.",
+                "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 structure and default values:\n\n```js\n{\n  // Accessible label to the date picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  dateLabel: undefined;\n\n  // Accessible label to the time picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-time-picker) are supported.",
                 "value": {
                   "type": [
                     "Object"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "25.3.0-alpha10",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-date-time-picker",
-          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields`       | The date and time pickers wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|---------------------------------\n`disabled`          | Set when the element is disabled\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`invalid`           | Set when the element is invalid\n`has-label`         | Set when the element has a label\n`has-value`         | Set when the element has a value\n`has-helper`        | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip`       | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap`                  |\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-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-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-required-indicator-color`  |\n| `--vaadin-input-field-required-indicator`        |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker).\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\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields`       | The date and time pickers wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|---------------------------------\n`disabled`          | Set when the element is disabled\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`invalid`           | Set when the element is invalid\n`has-label`         | Set when the element has a label\n`has-value`         | Set when the element has a value\n`has-helper`        | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip`       | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap`                  |\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-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-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-required-indicator-color`  |\n| `--vaadin-input-field-required-indicator`        |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-time-picker).\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\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "extension": true,
           "attributes": [
             {
@@ -54,6 +54,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".dateMetadataProvider",
+              "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.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther 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 it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`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. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\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": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".datePlaceholder",
               "description": "A placeholder string for the date field.",
@@ -84,7 +91,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 structure and default values:\n\n```js\n{\n  // Accessible label to the date picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  dateLabel: undefined;\n\n  // Accessible label to the time picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker) are supported.",
+              "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 structure and default values:\n\n```js\n{\n  // Accessible label to the date picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  dateLabel: undefined;\n\n  // Accessible label to the time picker.\n  // The property works in conjunction with label and accessibleName defined on the field.\n  // If both properties are defined, then accessibleName takes precedence.\n  // Then, the dateLabel value is concatenated with it.\n  timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-time-picker) are supported.",
               "value": {
                 "kind": "expression"
               }