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

package/src/styles/vaadin-month-calendar-base-styles.js

@@ -16,20 +16,20 @@ export const monthCalendarStyles = css`
     color: var(--vaadin-date-picker-month-header-color, var(--vaadin-text-color));
     font-size: var(--vaadin-date-picker-month-header-font-size, 0.9375rem);
     font-weight: var(--vaadin-date-picker-month-header-font-weight, 500);
-    line-height: inherit;
+    line-height: 1;
     margin-bottom: 0.75rem;
     text-align: center;
   }
 
   table {
-    border-collapse: collapse;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
   }
 
+  thead,
+  tbody,
   tr {
-    display: flex;
-    flex-wrap: wrap;
+    display: contents;
   }
 
   [part~='weekday'] {
@@ -37,7 +37,6 @@ export const monthCalendarStyles = css`
     font-size: var(--vaadin-date-picker-weekday-font-size, 0.75rem);
     font-weight: var(--vaadin-date-picker-weekday-font-weight, 500);
     margin-bottom: 0.375rem;
-    width: var(--vaadin-date-picker-date-width, 2rem);
   }
 
   /* Week numbers are on a separate row, don't reserve space on weekday row. */
@@ -46,10 +45,10 @@ export const monthCalendarStyles = css`
   }
 
   [part~='week-number'] {
+    grid-column: -1 / 1;
     color: var(--vaadin-date-picker-week-number-color, var(--vaadin-text-color-secondary));
     font-size: var(--vaadin-date-picker-week-number-font-size, 0.7rem);
     line-height: 1;
-    width: 100%;
     margin-top: 0.125em;
     margin-bottom: 0.125em;
     gap: 0.25em;
@@ -77,7 +76,6 @@ export const monthCalendarStyles = css`
   [part~='date'] {
     border-radius: var(--vaadin-date-picker-date-border-radius, var(--vaadin-radius-m));
     position: relative;
-    width: var(--vaadin-date-picker-date-width, 2rem);
     height: var(--vaadin-date-picker-date-height, 2rem);
     cursor: var(--vaadin-clickable-cursor);
     outline: none;
@@ -88,11 +86,11 @@ export const monthCalendarStyles = css`
     content: '';
     position: absolute;
     z-index: -1;
-    height: inherit;
+    height: min(2em, 100%);
     aspect-ratio: 1;
   }
 
-  :where([part~='date']:focus)::after {
+  :where([part~='date']:focus-visible)::after {
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
     outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
   }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DatePickerDate } from './vaadin-date-picker-mixin.js';

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

@@ -78,19 +78,8 @@ export const datePickerI18nDefaults = Object.freeze({
   },
 });
 
-/**
- * @polymerMixin
- * @mixes DelegateFocusMixin
- * @mixes I18nMixin
- * @mixes InputConstraintsMixin
- * @mixes KeyboardMixin
- * @param {function(new:HTMLElement)} subclass
- */
 export const DatePickerMixin = (subclass) =>
-  class DatePickerMixinClass extends I18nMixin(
-    datePickerI18nDefaults,
-    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
-  ) {
+  class DatePickerMixinClass extends I18nMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))) {
     static get properties() {
       return {
         /**
@@ -278,6 +267,10 @@ export const DatePickerMixin = (subclass) =>
       ];
     }
 
+    static get defaultI18n() {
+      return datePickerI18nDefaults;
+    }
+
     static get constraints() {
       return [...super.constraints, 'min', 'max'];
     }
@@ -1219,22 +1212,4 @@ export const DatePickerMixin = (subclass) =>
     __computeMinOrMaxDate(dateString) {
       return parseDate(dateString);
     }
-
-    /**
-     * Fired when the user commits a value change.
-     *
-     * @event change
-     */
-
-    /**
-     * Fired when `value` property value changes.
-     *
-     * @event value-changed
-     */
-
-    /**
-     * Fired when `opened` property value changes.
-     *
-     * @event opened-changed
-     */
   };

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

@@ -10,9 +10,6 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { dateAfterXMonths, dateAllowed, dateEquals, getClosestDate } from './vaadin-date-picker-helper.js';
 
-/**
- * @polymerMixin
- */
 export const DatePickerOverlayContentMixin = (superClass) =>
   class DatePickerOverlayContentMixin extends superClass {
     static get properties() {
@@ -290,14 +287,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
     /** @private */
     __updateCancelButton(cancelButton, i18n) {
       if (cancelButton) {
-        cancelButton.textContent = i18n && i18n.cancel;
+        cancelButton.textContent = i18n?.cancel;
       }
     }
 
     /** @private */
     __updateTodayButton(todayButton, i18n, minDate, maxDate, isDateDisabled) {
       if (todayButton) {
-        todayButton.textContent = i18n && i18n.today;
+        todayButton.textContent = i18n?.today;
         todayButton.disabled = !this._isTodayAllowed(minDate, maxDate, isDateDisabled);
       }
     }
@@ -316,7 +313,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       isDateDisabled,
       enteredDate,
     ) {
-      if (calendars && calendars.length) {
+      if (calendars?.length) {
         calendars.forEach((calendar) => {
           calendar.i18n = i18n;
           calendar.minDate = minDate;
@@ -339,7 +336,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     __updateYears(years, selectedDate, theme) {
-      if (years && years.length) {
+      if (years?.length) {
         years.forEach((year) => {
           year.selectedDate = selectedDate;
 
@@ -933,11 +930,4 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       todayMidnight.setDate(today.getDate());
       return todayMidnight;
     }
-
-    /**
-     * Fired when the scroller reaches the target scrolling position.
-     * @event scroll-animation-finished
-     * @param {Number} detail.position new position
-     * @param {Number} detail.oldPosition old position
-     */
   };

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

@@ -7,11 +7,6 @@ import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 
-/**
- * @polymerMixin
- * @mixes OverlayMixin
- * @mixes PositionMixin
- */
 export const DatePickerOverlayMixin = (superClass) =>
   class DatePickerOverlayMixin extends PositionMixin(OverlayMixin(superClass)) {
     /**

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

@@ -18,9 +18,6 @@ import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
  *
  * @customElement vaadin-date-picker-overlay
  * @extends HTMLElement
- * @mixes DatePickerOverlayMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
  * @private
  */
 class DatePickerOverlay extends DatePickerOverlayMixin(

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

@@ -15,7 +15,6 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-base-styl
  *
  * @customElement vaadin-date-picker-year
  * @extends HTMLElement
- * @mixes ThemableMixin
  * @private
  */
 export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {

package/src/vaadin-date-picker.js

@@ -152,10 +152,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  *
  * @customElement vaadin-date-picker
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes InputControlMixin
- * @mixes DatePickerMixin
  */
 class DatePicker extends DatePickerMixin(
   InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
@@ -285,7 +281,7 @@ class DatePicker extends DatePickerMixin(
   _onVaadinOverlayClose(e) {
     // Prevent closing the overlay on label element click
     const event = e.detail.sourceEvent;
-    if (event && event.composedPath().includes(this) && !event.composedPath().includes(this._overlayElement)) {
+    if (event?.composedPath().includes(this) && !event.composedPath().includes(this._overlayElement)) {
       e.preventDefault();
     }
   }

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

@@ -7,10 +7,6 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { dateAllowed, dateEquals, getISOWeekNumber, normalizeDate } from './vaadin-date-picker-helper.js';
 
-/**
- * @polymerMixin
- * @mixes FocusMixin
- */
 export const MonthCalendarMixin = (superClass) =>
   class MonthCalendarMixinClass extends FocusMixin(superClass) {
     static get properties() {
@@ -244,7 +240,7 @@ export const MonthCalendarMixin = (superClass) =>
     /** @protected */
     __computeShowWeekSeparator(showWeekNumbers, i18n) {
       // Currently only supported for locales that start the week on Monday.
-      return showWeekNumbers && i18n && i18n.firstDayOfWeek === 1;
+      return showWeekNumbers && i18n?.firstDayOfWeek === 1;
     }
 
     /** @protected */