@vaadin/date-picker 25.0.0-alpha2 → 25.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,25 +34,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/button": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/field-base": "25.0.0-alpha2",
-    "@vaadin/input-container": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha20",
+    "@vaadin/button": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "@vaadin/field-base": "25.0.0-alpha20",
+    "@vaadin/input-container": "25.0.0-alpha20",
+    "@vaadin/overlay": "25.0.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

package/src/styles/vaadin-date-picker-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const datePickerStyles: CSSResult;

package/src/{vaadin-date-picker-styles.js → styles/vaadin-date-picker-base-styles.js}

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const datePickerStyles = css`
@@ -10,6 +11,10 @@ export const datePickerStyles = css`
     pointer-events: auto;
   }
 
+  :host([week-numbers]) {
+    --_vaadin-date-picker-week-numbers-visible: 1;
+  }
+
   :host([dir='rtl']) [part='input-field'] {
     direction: ltr;
   }
@@ -18,4 +23,8 @@ export const datePickerStyles = css`
     direction: rtl;
     text-align: left;
   }
+
+  [part~='toggle-button']::before {
+    mask-image: var(--_vaadin-icon-calendar);
+  }
 `;

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const datePickerOverlayStyles = css`
+  [part='overlay'] {
+    display: flex;
+    flex: auto;
+    max-height: var(--vaadin-date-picker-overlay-max-height, 30rem);
+    box-sizing: content-box;
+    width: var(
+      --vaadin-date-picker-overlay-width,
+      calc(
+        var(--vaadin-date-picker-date-width, 2rem) * 7 + var(--vaadin-date-picker-month-padding, 0.5rem) * 2 +
+          var(--vaadin-date-picker-year-scroller-width, 3rem)
+      )
+    );
+    cursor: default;
+  }
+
+  :host([fullscreen]) {
+    --vaadin-date-picker-date-width: calc(100% / 7);
+  }
+
+  :host([fullscreen]) [part='backdrop'] {
+    display: block;
+  }
+
+  :host([fullscreen]) [part='overlay'] {
+    border: none;
+    border-radius: 0;
+    max-height: 75vh;
+    width: 100%;
+  }
+
+  [part~='content'] {
+    flex: auto;
+  }
+
+  @media (max-width: 450px), (max-height: 450px) {
+    :host {
+      inset: auto 0 0 !important;
+    }
+  }
+`;

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

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const overlayContentStyles = css`
+  :host {
+    display: grid;
+    grid-template-areas:
+      'header header'
+      'months years'
+      'toolbar years';
+    grid-template-columns: minmax(0, 1fr) 0;
+    height: 100%;
+    outline: none;
+    overflow: hidden;
+  }
+
+  :host([desktop]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :host([fullscreen][years-visible]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [part='years-toggle-button'] {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
+    color: var(--vaadin-text-color);
+    font-size: var(--vaadin-button-font-size, inherit);
+    font-weight: var(--vaadin-button-font-weight, 500);
+    height: var(--vaadin-button-height, auto);
+    line-height: var(--vaadin-button-line-height, inherit);
+    padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  :host([years-visible]) [part='years-toggle-button'] {
+    background: var(--vaadin-text-color);
+    color: var(--vaadin-background-color);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  ::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)
+    );
+  }
+
+  :host([desktop]) ::slotted([slot='months']) {
+    border-bottom: 1px solid var(--vaadin-border-color-secondary);
+  }
+
+  ::slotted([slot='years']) {
+    visibility: hidden;
+    background: var(--vaadin-date-picker-year-scroller-background, var(--vaadin-background-container));
+    width: var(--vaadin-date-picker-year-scroller-width, 3rem);
+    box-sizing: border-box;
+    border-inline-start: 1px solid
+      var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary));
+    overflow: visible;
+    min-height: 0;
+    clip-path: inset(0);
+  }
+
+  ::slotted([slot='years'])::before {
+    background: var(--vaadin-overlay-background, var(--vaadin-background-color));
+    border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary));
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: auto;
+    z-index: 1;
+    rotate: 45deg;
+    translate: calc(-50% - 1px) -50%;
+    transform: none;
+  }
+
+  :host([dir='rtl']) ::slotted([slot='years'])::before {
+    translate: calc(50% + 1px) -50%;
+  }
+
+  :host([desktop]) ::slotted([slot='years']),
+  :host([years-visible]) ::slotted([slot='years']) {
+    visibility: visible;
+  }
+
+  [part='toolbar'] {
+    display: flex;
+    grid-area: toolbar;
+    justify-content: space-between;
+    padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding-s));
+  }
+
+  :host([fullscreen]) [part='toolbar'] {
+    grid-area: header;
+    border-bottom: 1px solid var(--vaadin-border-color-secondary);
+  }
+`;

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const datePickerYearStyles = css`
+  :host {
+    display: block;
+    height: 100%;
+  }
+
+  [part='year-number'] {
+    align-items: center;
+    display: flex;
+    height: 50%;
+    justify-content: center;
+    transform: translateY(-50%);
+    color: var(--vaadin-text-color-secondary);
+  }
+
+  :host([current]) [part='year-number'] {
+    color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--vaadin-text-color));
+  }
+`;

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

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const monthCalendarStyles = css`
+  :host {
+    display: block;
+    padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s));
+  }
+
+  [part='month-header'] {
+    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;
+    margin-bottom: 0.75rem;
+    text-align: center;
+  }
+
+  table {
+    border-collapse: collapse;
+    display: flex;
+    flex-direction: column;
+  }
+
+  tr {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  [part~='weekday'] {
+    color: var(--vaadin-date-picker-weekday-color, var(--vaadin-text-color-secondary));
+    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. */
+  [part~='weekday']:empty {
+    display: none;
+  }
+
+  [part~='week-number'] {
+    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;
+  }
+
+  [part~='week-number']::after {
+    content: '';
+    height: 1px;
+    flex: 1;
+    background: var(
+      --vaadin-date-picker-week-divider-color,
+      var(--vaadin-divider-color, var(--vaadin-border-color-secondary))
+    );
+  }
+
+  [part~='weekday'],
+  [part~='week-number'],
+  [part~='date'] {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+  }
+
+  [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;
+  }
+
+  [part~='date']::after {
+    border-radius: inherit;
+    content: '';
+    position: absolute;
+    z-index: -1;
+    height: inherit;
+    aspect-ratio: 1;
+  }
+
+  :where([part~='date']:focus)::after {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  }
+
+  [part~='today'] {
+    color: var(--vaadin-date-picker-date-today-color, var(--vaadin-text-color));
+  }
+
+  [part~='selected'] {
+    color: var(--vaadin-date-picker-date-selected-color, var(--vaadin-background-color));
+  }
+
+  [part~='selected']::after {
+    background: var(--vaadin-date-picker-date-selected-background, var(--vaadin-text-color));
+    outline-offset: 1px;
+  }
+
+  [disabled] {
+    cursor: var(--vaadin-disabled-cursor);
+    color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-text-color-disabled));
+    opacity: 0.7;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    [part~='week-number']::after {
+      background: CanvasText;
+    }
+
+    [part~='today'] {
+      font-weight: 600;
+    }
+
+    [part~='selected'] {
+      forced-color-adjust: none;
+      --vaadin-date-picker-date-selected-color: SelectedItemText;
+      color: SelectedItemText !important;
+      --vaadin-date-picker-date-selected-background: SelectedItem;
+    }
+
+    [disabled] {
+      color: GrayText !important;
+    }
+  }
+`;

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

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 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-helper.js

@@ -7,7 +7,7 @@
 /**
  * Get ISO 8601 week number for the given date.
  *
- * @param {!Date} Date object
+ * @param {!Date} date
  * @return {number} Week number
  */
 export function getISOWeekNumber(date) {

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

@@ -9,7 +9,6 @@ import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
@@ -96,7 +95,6 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class DatePickerMixinClass {
@@ -143,7 +141,7 @@ export declare class DatePickerMixinClass {
    *
    * The object has the following JSON structure and default values:
    *
-   * ```
+   * ```js
    * {
    *   // An array with the full names of months starting
    *   // with January.

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

@@ -10,7 +10,6 @@ import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import {
@@ -85,13 +84,12 @@ export const datePickerI18nDefaults = Object.freeze({
  * @mixes I18nMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
- * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
   class DatePickerMixinClass extends I18nMixin(
     datePickerI18nDefaults,
-    OverlayClassMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
+    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
   ) {
     static get properties() {
       return {
@@ -295,7 +293,6 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -305,7 +302,7 @@ export const DatePickerMixin = (subclass) =>
      *
      * The object has the following JSON structure and default values:
      *
-     * ```
+     * ```js
      * {
      *   // An array with the full names of months starting
      *   // with January.
@@ -453,13 +450,17 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      const overlay = this.$.overlay;
-      this._overlayElement = overlay;
+      this._overlayElement = this.$.overlay;
+    }
 
-      overlay.renderer = this._boundOverlayRenderer;
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-      this.addEventListener('mousedown', () => this.__bringToFront());
-      this.addEventListener('touchstart', () => this.__bringToFront());
+      if (props.has('showWeekNumbers') || props.has('__effectiveI18n')) {
+        // Currently only supported for locales that start the week on Monday.
+        this.toggleAttribute('week-numbers', this.showWeekNumbers && this.__effectiveI18n.firstDayOfWeek === 1);
+      }
     }
 
     /** @protected */
@@ -469,6 +470,19 @@ export const DatePickerMixin = (subclass) =>
       this.opened = false;
     }
 
+    /**
+     * @param {FocusOptions=} options
+     * @protected
+     * @override
+     */
+    focus(options) {
+      if (this._noInput && !isKeyboardActive()) {
+        this.open();
+      } else {
+        super.focus(options);
+      }
+    }
+
     /**
      * Opens the dropdown.
      */
@@ -486,14 +500,15 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _overlayRenderer(root) {
-      if (root.firstChild) {
+    __ensureContent() {
+      if (this._overlayContent) {
         return;
       }
 
       // Create and store document content element
       const content = document.createElement('vaadin-date-picker-overlay-content');
-      root.appendChild(content);
+      content.setAttribute('slot', 'overlay');
+      this.appendChild(content);
 
       this._overlayContent = content;
 
@@ -700,13 +715,6 @@ export const DatePickerMixin = (subclass) =>
       this.close();
     }
 
-    /** @private */
-    __bringToFront() {
-      requestAnimationFrame(() => {
-        this.$.overlay.bringToFront();
-      });
-    }
-
     /** @private */
     // eslint-disable-next-line @typescript-eslint/max-params
     _isNoInput(inputElement, fullscreen, ios, effectiveI18n, opened, autoOpenDisabled) {
@@ -740,6 +748,10 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
+      if (opened) {
+        this.__ensureContent();
+      }
+
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -900,7 +912,7 @@ export const DatePickerMixin = (subclass) =>
         this._overlayContent.focusDateElement();
       }
 
-      const focusables = this._noInput ? content : [input, content];
+      const focusables = this._noInput ? content : this;
       this.__showOthers = hideOthers(focusables);
     }
 
@@ -1019,6 +1031,11 @@ export const DatePickerMixin = (subclass) =>
      * @private
      */
     _onClick(event) {
+      // Ignore click events bubbling from the overlay
+      if (event.composedPath().includes(this._overlayElement)) {
+        return;
+      }
+
       // Clear button click is handled in separate listener
       // but bubbles to the host, so we need to ignore it.
       if (!this._isClearButton(event)) {
@@ -1103,11 +1120,16 @@ export const DatePickerMixin = (subclass) =>
     /**
      * Override an event listener from `KeyboardMixin`.
      *
-     * @param {!KeyboardEvent} _event
+     * @param {!KeyboardEvent} event
      * @protected
      * @override
      */
-    _onEnter(_event) {
+    _onEnter(event) {
+      // Ignore Enter keydown event bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       if (this.opened) {
         // Closing will implicitly select parsed or focused date
         this.close();

package/src/vaadin-date-picker-month-scroller.js

@@ -12,12 +12,8 @@ stylesTemplate.innerHTML = `
   <style>
     :host {
       --vaadin-infinite-scroller-item-height: 270px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
+      grid-area: months;
+      height: auto;
     }
   </style>
 `;