@vaadin/date-picker 25.0.0-alpha3 → 25.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "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,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha3",
-    "@vaadin/button": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/field-base": "25.0.0-alpha3",
-    "@vaadin/input-container": "25.0.0-alpha3",
-    "@vaadin/overlay": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/a11y-base": "25.0.0-alpha4",
+    "@vaadin/button": "25.0.0-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/field-base": "25.0.0-alpha4",
+    "@vaadin/input-container": "25.0.0-alpha4",
+    "@vaadin/overlay": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

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,28 @@
+/**
+ * @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`
+  @layer base {
+    :host([opened]) {
+      pointer-events: auto;
+    }
+
+    :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,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 datePickerOverlayStyles = css`
+  @layer base {
+    [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%;
+    }
+
+    :host([week-numbers]) {
+      --_vaadin-date-picker-week-numbers-visible: 1;
+    }
+
+    [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,109 @@
+/**
+ * @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`
+  @layer base {
+    :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-strong);
+      color: var(--_vaadin-background);
+    }
+
+    [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));
+      border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--_vaadin-border-color));
+      width: 1em;
+      height: 1em;
+      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,28 @@
+/**
+ * @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`
+  @layer base {
+    :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-strong));
+    }
+  }
+`;

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,145 @@
+/**
+ * @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`
+  @layer base {
+    :host {
+      display: block;
+      padding: var(--vaadin-date-picker-month-padding, 0.5rem);
+    }
+
+    [part='month-header'] {
+      color: var(--vaadin-date-picker-month-header-color, var(--_vaadin-color-strong));
+      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-strong));
+    }
+
+    [part~='selected'] {
+      color: var(--vaadin-date-picker-date-selected-color, var(--_vaadin-background));
+    }
+
+    [part~='selected']::after {
+      background: var(--vaadin-date-picker-date-selected-background, var(--_vaadin-color-strong));
+      outline-offset: 1px;
+    }
+
+    [disabled] {
+      cursor: var(--vaadin-disabled-cursor);
+      color: var(--vaadin-date-picker-date-disabled-color, var(--_vaadin-color-subtle));
+      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-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>
 `;