@vaadin/date-picker 25.2.0-alpha10 → 25.2.0-alpha12

package/custom-elements.json

@@ -853,10 +853,7 @@
           ],
           "parameters": [
             {
-              "name": "subclass",
-              "type": {
-                "text": "function(new:HTMLElement)"
-              }
+              "name": "subclass"
             }
           ]
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha10",
-    "@vaadin/button": "25.2.0-alpha10",
-    "@vaadin/component-base": "25.2.0-alpha10",
-    "@vaadin/field-base": "25.2.0-alpha10",
-    "@vaadin/input-container": "25.2.0-alpha10",
-    "@vaadin/overlay": "25.2.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
+    "@vaadin/a11y-base": "25.2.0-alpha12",
+    "@vaadin/button": "25.2.0-alpha12",
+    "@vaadin/component-base": "25.2.0-alpha12",
+    "@vaadin/field-base": "25.2.0-alpha12",
+    "@vaadin/input-container": "25.2.0-alpha12",
+    "@vaadin/overlay": "25.2.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha10",
-    "@vaadin/chai-plugins": "25.2.0-alpha10",
-    "@vaadin/test-runner-commands": "25.2.0-alpha10",
+    "@vaadin/aura": "25.2.0-alpha12",
+    "@vaadin/chai-plugins": "25.2.0-alpha12",
+    "@vaadin/test-runner-commands": "25.2.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
+  "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
 }

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

@@ -13,19 +13,16 @@ export const datePickerOverlayStyles = css`
     box-sizing: content-box;
     width: var(
       --vaadin-date-picker-overlay-width,
-      calc(
+      round(
         var(--vaadin-date-picker-date-width, 2rem) * 7 +
           var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 2 +
-          var(--vaadin-date-picker-year-scroller-width, 3rem)
+          var(--vaadin-date-picker-year-scroller-width, 3rem),
+        1px
       )
     );
     cursor: default;
   }
 
-  :host([fullscreen]) {
-    --vaadin-date-picker-date-width: calc(100% / 7);
-  }
-
   :host([fullscreen]) [part='backdrop'] {
     display: block;
   }

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

@@ -50,13 +50,18 @@ export const overlayContentStyles = css`
   }
 
   ::slotted([slot='months']) {
-    --vaadin-infinite-scroller-item-height: calc(
-      16.5rem + var(--_vaadin-date-picker-week-numbers-visible, 0) *
-        (var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 1.25 * 6)
+    --vaadin-infinite-scroller-item-height: round(
+      var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem +
+        var(--vaadin-date-picker-date-height, 2rem) * 7 + var(--_vaadin-date-picker-week-numbers-visible, 0) *
+        (
+          var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 6.25 +
+            var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 3
+        ),
+      1px
     );
   }
 
-  :host([desktop]) ::slotted([slot='months']) {
+  :host(:not([fullscreen])) ::slotted([slot='months']) {
     border-bottom: 1px solid var(--vaadin-border-color-secondary);
   }
 

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'];
     }

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() {

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))))),

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() {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {