@vaadin/date-picker 25.2.7 → 25.3.0-alpha10

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

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

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

@@ -12,12 +12,14 @@ 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';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
 
 /**
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-date-picker-overlay-content
  * @extends HTMLElement
  * @private
@@ -30,7 +32,7 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   }
 
   static get styles() {
-    return overlayContentStyles;
+    return [loaderStyles, overlayContentStyles];
   }
 
   static get lumoInjector() {
@@ -43,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-overlay.js

@@ -16,6 +16,7 @@ import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-date-picker-overlay
  * @extends HTMLElement
  * @private

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

@@ -13,11 +13,12 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-base-styl
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-date-picker-year
  * @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';
   }
@@ -63,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
@@ -150,6 +153,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-date-picker
  * @extends HTMLElement
  */

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/src/vaadin-month-calendar.js

@@ -12,6 +12,7 @@ import { monthCalendarStyles } from './styles/vaadin-month-calendar-base-styles.
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 
 /**
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-month-calendar
  * @extends HTMLElement
  * @private