@vaadin/date-picker 25.0.0-alpha1 → 25.0.0-alpha10

package/package.json

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

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/styles/vaadin-date-picker-base-styles.js

@@ -0,0 +1,30 @@
+/**
+ * @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/style-props.js';
+import { css } from 'lit';
+
+export const datePickerStyles = css`
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  :host([week-numbers]) {
+    --_vaadin-date-picker-week-numbers-visible: 1;
+  }
+
+  :host([dir='rtl']) [part='input-field'] {
+    direction: ltr;
+  }
+
+  :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
+    direction: rtl;
+    text-align: left;
+  }
+
+  [part='toggle-button']::before {
+    mask-image: var(--_vaadin-icon-calendar);
+  }
+`;

package/src/styles/vaadin-date-picker-core-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/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,107 @@
+/**
+ * @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/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;
+    border: var(--vaadin-button-border, var(--vaadin-button-border-width, 1px) solid transparent);
+    border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
+    color: var(--vaadin-button-text-color, var(--_vaadin-button-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-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);
+  }
+
+  ::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));
+    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));
+    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));
+  }
+
+  :host([fullscreen]) [part='toolbar'] {
+    grid-area: header;
+    border-bottom: 1px solid var(--vaadin-border-color);
+  }
+`;

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

@@ -0,0 +1,54 @@
+/**
+ * @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 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;
+  }
+
+  :host([desktop]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :host([fullscreen][years-visible]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [part='years-toggle-button'] {
+    display: flex;
+  }
+
+  ::slotted([slot='years']) {
+    visibility: hidden;
+  }
+
+  :host([desktop]) ::slotted([slot='years']),
+  :host([years-visible]) ::slotted([slot='years']) {
+    visibility: visible;
+  }
+
+  [part='toolbar'] {
+    display: flex;
+    grid-area: toolbar;
+    justify-content: space-between;
+  }
+
+  :host([fullscreen]) [part='toolbar'] {
+    grid-area: header;
+  }
+`;

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

@@ -0,0 +1,26 @@
+/**
+ * @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/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%);
+  }
+
+  :host([current]) [part='year-number'] {
+    color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--vaadin-color));
+  }
+`;

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

@@ -0,0 +1,13 @@
+/**
+ * @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 datePickerYearStyles = css`
+  :host {
+    display: block;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,140 @@
+/**
+ * @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/style-props.js';
+import { css } from 'lit';
+
+export const monthCalendarStyles = css`
+  :host {
+    display: block;
+    padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));
+  }
+
+  [part='month-header'] {
+    color: var(--vaadin-date-picker-month-header-color, var(--vaadin-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, inherit);
+    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, inherit);
+    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)));
+  }
+
+  [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-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-color));
+    outline-offset: 1px;
+  }
+
+  [disabled] {
+    cursor: var(--vaadin-disabled-cursor);
+    color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-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-mixin.js

@@ -295,7 +295,6 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -395,15 +394,6 @@ export const DatePickerMixin = (subclass) =>
       this.__setEnteredDate(parsedDate);
     }
 
-    /** @private */
-    get _nativeInput() {
-      if (this.inputElement) {
-        // TODO: support focusElement for backwards compatibility
-        return this.inputElement.focusElement || this.inputElement;
-      }
-      return null;
-    }
-
     /**
      * The input element's value when it cannot be parsed as a date, and an empty string otherwise.
      *
@@ -462,13 +452,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 */
@@ -478,6 +472,18 @@ export const DatePickerMixin = (subclass) =>
       this.opened = false;
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    focus(options) {
+      if (this._noInput && !isKeyboardActive()) {
+        this.open();
+      } else {
+        super.focus(options);
+      }
+    }
+
     /**
      * Opens the dropdown.
      */
@@ -495,14 +501,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;
 
@@ -709,13 +716,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) {
@@ -749,6 +749,10 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
+      if (opened) {
+        this.__ensureContent();
+      }
+
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -903,7 +907,7 @@ export const DatePickerMixin = (subclass) =>
         this._focus();
       }
 
-      const input = this._nativeInput;
+      const input = this.inputElement;
       if (this._noInput && input) {
         input.blur();
         this._overlayContent.focusDateElement();
@@ -969,8 +973,8 @@ export const DatePickerMixin = (subclass) =>
       }
       this.__commitParsedOrFocusedDate();
 
-      if (this._nativeInput && this._nativeInput.selectionStart) {
-        this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
+      if (this.inputElement && this.inputElement.selectionStart) {
+        this.inputElement.selectionStart = this.inputElement.selectionEnd;
       }
       // No need to revalidate the value after `_selectedDateChanged`
       // Needed in case the value was not changed: open and close dropdown,
@@ -1007,8 +1011,8 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _setSelectionRange(a, b) {
-      if (this._nativeInput && this._nativeInput.setSelectionRange) {
-        this._nativeInput.setSelectionRange(a, b);
+      if (this.inputElement) {
+        this.inputElement.setSelectionRange(a, b);
       }
     }
 
@@ -1028,6 +1032,11 @@ export const DatePickerMixin = (subclass) =>
      * @private
      */
     _onClick(event) {
+      // Ignore click events bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       // Clear button click is handled in separate listener
       // but bubbles to the host, so we need to ignore it.
       if (!this._isClearButton(event)) {
@@ -1116,7 +1125,12 @@ export const DatePickerMixin = (subclass) =>
      * @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>
 `;