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

package/package.json

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

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

@@ -3,7 +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/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const datePickerStyles = css`

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

@@ -3,7 +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/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const overlayContentStyles = css`

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

@@ -3,7 +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/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const datePickerYearStyles = css`

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

@@ -3,7 +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/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const monthCalendarStyles = css`

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

@@ -1033,7 +1033,7 @@ export const DatePickerMixin = (subclass) =>
      */
     _onClick(event) {
       // Ignore click events bubbling from the overlay
-      if (event.composedPath().includes(this._overlayContent)) {
+      if (event.composedPath().includes(this._overlayElement)) {
         return;
       }
 

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

@@ -14,7 +14,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-core-styles.js';
+import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-base-styles.js';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
 
 /**

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

@@ -7,10 +7,10 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { datePickerOverlayStyles } from './styles/vaadin-date-picker-overlay-core-styles.js';
+import { datePickerOverlayStyles } from './styles/vaadin-date-picker-overlay-base-styles.js';
 import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
 
 /**

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

@@ -8,7 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styles.js';
+import { datePickerYearStyles } from './styles/vaadin-date-picker-year-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.

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

@@ -102,13 +102,11 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * In addition to `<vaadin-date-picker>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
  * - `<vaadin-date-picker-month-scroller>`
  * - `<vaadin-date-picker-year-scroller>`
  * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
- * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
  * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
  *
@@ -149,9 +147,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * `year-number`         | Year number
  * `year-separator`      | Year separator
  *
- * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
- * propagated to the internal components listed above.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Change events

package/src/vaadin-date-picker.js

@@ -18,7 +18,7 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { datePickerStyles } from './styles/vaadin-date-picker-core-styles.js';
+import { datePickerStyles } from './styles/vaadin-date-picker-base-styles.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 
 /**
@@ -66,13 +66,11 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * In addition to `<vaadin-date-picker>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
  * - `<vaadin-date-picker-month-scroller>`
  * - `<vaadin-date-picker-year-scroller>`
  * - `<vaadin-date-picker-year>`
  * - `<vaadin-month-calendar>`
- * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
  * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
  *
@@ -113,9 +111,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `year-number`         | Year number
  * `year-separator`      | Year separator
  *
- * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
- * propagated to the internal components listed above.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Change events
@@ -276,7 +271,8 @@ class DatePicker extends DatePickerMixin(
   /** @private */
   _onVaadinOverlayClose(e) {
     // Prevent closing the overlay on label element click
-    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
+    const event = e.detail.sourceEvent;
+    if (event && event.composedPath().includes(this) && !event.composedPath().includes(this._overlayElement)) {
       e.preventDefault();
     }
   }

package/src/vaadin-month-calendar.js

@@ -8,7 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { monthCalendarStyles } from './styles/vaadin-month-calendar-core-styles.js';
+import { monthCalendarStyles } from './styles/vaadin-month-calendar-base-styles.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 
 /**

package/vaadin-date-picker.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-date-picker.js';
+import './src/vaadin-date-picker.js';
 export * from './src/vaadin-date-picker.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|--------------------\n`toggle-button`  | Toggle button\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute      | Description\n---------------|----------------------------------------------\n`opened`       | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|--------------------\n`toggle-button`  | Toggle button\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute      | Description\n---------------|----------------------------------------------\n`opened`       | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|--------------------\n`toggle-button`  | Toggle button\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute      | Description\n---------------|----------------------------------------------\n`opened`       | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha11/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|--------------------\n`toggle-button`  | Toggle button\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute      | Description\n---------------|----------------------------------------------\n`opened`       | Set when the date selector overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "extension": true,
           "attributes": [
             {

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

@@ -1,8 +0,0 @@
-/**
- * @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-core-styles.js

@@ -1,21 +0,0 @@
-/**
- * @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 datePickerStyles = css`
-  :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;
-  }
-`;

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

@@ -1,54 +0,0 @@
-/**
- * @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-overlay-core-styles.js

@@ -1,23 +0,0 @@
-/**
- * @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;
-  }
-
-  [part~='content'] {
-    flex: auto;
-  }
-
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 3px solid;
-    }
-  }
-`;

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

@@ -1,13 +0,0 @@
-/**
- * @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-core-styles.js

@@ -1,64 +0,0 @@
-/**
- * @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 monthCalendarStyles = css`
-  :host {
-    display: block;
-  }
-
-  #monthGrid {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  #days-container tr,
-  #weekdays-container tr {
-    display: flex;
-  }
-
-  [part~='date'] {
-    outline: none;
-  }
-
-  [part~='disabled'] {
-    pointer-events: none;
-  }
-
-  [part='week-number'][hidden],
-  [part='weekday'][hidden] {
-    display: none;
-  }
-
-  [part='weekday'],
-  [part~='date'] {
-    width: calc(100% / 7);
-    padding: 0;
-    font-weight: normal;
-  }
-
-  [part='weekday']:empty,
-  [part='week-number'] {
-    width: 12.5%;
-    flex-shrink: 0;
-    padding: 0;
-  }
-
-  :host([week-numbers]) [part='weekday']:not(:empty),
-  :host([week-numbers]) [part~='date'] {
-    width: 12.5%;
-  }
-
-  @media (forced-colors: active) {
-    [part~='date'][part~='focused'] {
-      outline: 1px solid;
-    }
-
-    [part~='date'][part~='selected'] {
-      outline: 3px solid;
-    }
-  }
-`;

package/theme/lumo/vaadin-date-picker-overlay-content-styles.d.ts

@@ -1,7 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import './vaadin-date-picker-year-styles.js';

package/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -1,137 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import './vaadin-date-picker-year-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-date-picker-overlay-content',
-  css`
-    :host {
-      position: relative;
-      /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
-      background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-      background-size: 57px 100%;
-      background-position: top right;
-      background-repeat: no-repeat;
-      cursor: default;
-    }
-
-    :host([dir='rtl']) {
-      background-position: top left;
-    }
-
-    ::slotted([slot='months']) {
-      /* Month calendar height:
-              header height + margin-bottom
-            + weekdays height + margin-bottom
-            + date cell heights
-            + small margin between month calendars
-        */
-      /* prettier-ignore */
-      --vaadin-infinite-scroller-item-height:
-          calc(
-              var(--lumo-font-size-l) + var(--lumo-space-m)
-            + var(--lumo-font-size-xs) + var(--lumo-space-s)
-            + var(--lumo-size-m) * 6
-            + var(--lumo-space-s)
-          );
-      --vaadin-infinite-scroller-buffer-offset: 10%;
-      mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-      position: relative;
-    }
-
-    ::slotted([slot='years']) {
-      /* TODO get rid of fixed magic number */
-      --vaadin-infinite-scroller-buffer-width: 57px;
-      width: 57px;
-      font-size: var(--lumo-font-size-s);
-      box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
-      mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
-      cursor: var(--lumo-clickable-cursor);
-    }
-
-    :host([dir='rtl']) ::slotted([slot='years']) {
-      box-shadow: inset -2px 0 4px 0 var(--lumo-shade-5pct);
-    }
-
-    ::slotted([slot='years']:hover) {
-      --_lumo-date-picker-year-opacity: 1;
-    }
-
-    /* Year scroller position indicator */
-    ::slotted([slot='years'])::before {
-      border: none;
-      width: 1em;
-      height: 1em;
-      background-color: var(--lumo-base-color);
-      background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-      transform: translate(-75%, -50%) rotate(45deg);
-      border-top-right-radius: var(--lumo-border-radius-s);
-      box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
-      z-index: 1;
-    }
-
-    :host([dir='rtl']) ::slotted([slot='years'])::before {
-      right: 0;
-      transform: translate(75%, -50%) rotate(45deg);
-    }
-
-    [part='toolbar'] {
-      padding: var(--lumo-space-s);
-      border-bottom-left-radius: var(--lumo-border-radius-l);
-    }
-
-    [part='toolbar'] ::slotted(vaadin-button) {
-      margin: 0;
-    }
-
-    /* Narrow viewport mode (fullscreen) */
-
-    :host([fullscreen]) [part='toolbar'] {
-      background-color: var(--lumo-base-color);
-      margin-inline-end: 57px;
-    }
-
-    /* Very narrow screen (year scroller initially hidden) */
-
-    [part='years-toggle-button'] {
-      display: flex;
-      align-items: center;
-      height: var(--lumo-size-m);
-      padding: 0 0.5em;
-      border-radius: var(--lumo-border-radius-m);
-      color: var(--lumo-primary-text-color);
-      font-weight: 500;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    :host([years-visible]) [part='years-toggle-button'] {
-      background-color: var(--lumo-primary-color);
-      color: var(--lumo-primary-contrast-color);
-    }
-
-    /* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
-    @media screen and (max-width: 374px) {
-      :host {
-        background-image: none;
-      }
-
-      :host([fullscreen]) [part='toolbar'] {
-        margin-inline-end: 0;
-      }
-
-      /* TODO make date-picker adapt to the width of the years part */
-      ::slotted([slot='years']) {
-        --vaadin-infinite-scroller-buffer-width: 50px;
-        width: 50px;
-        background-color: var(--lumo-shade-5pct);
-      }
-    }
-  `,
-  { moduleId: 'lumo-date-picker-overlay-content' },
-);

package/theme/lumo/vaadin-date-picker-overlay-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-date-picker-overlay-styles.js

@@ -1,54 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePickerOverlay = css`
-  [part='overlay'] {
-    /*
-  Width:
-      date cell widths
-    + month calendar side padding
-    + year scroller width
-  */
-    /* prettier-ignore */
-    width:
-    calc(
-        var(--lumo-size-m) * 7
-      + var(--lumo-space-xs) * 2
-      + 57px
-    );
-    height: 100%;
-    max-height: calc(var(--lumo-size-m) * 14);
-    overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
-    flex-direction: column;
-  }
-
-  [part='content'] {
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
-    mask-image: none;
-  }
-
-  :host([top-aligned]) [part~='overlay'] {
-    margin-top: var(--lumo-space-xs);
-  }
-
-  :host([bottom-aligned]) [part~='overlay'] {
-    margin-bottom: var(--lumo-space-xs);
-  }
-
-  @media (max-width: 450px), (max-height: 450px) {
-    [part='overlay'] {
-      width: 100vw;
-      height: 70vh;
-      max-height: 70vh;
-    }
-  }
-`;
-
-registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
-  moduleId: 'lumo-date-picker-overlay',
-});

package/theme/lumo/vaadin-date-picker-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';

package/theme/lumo/vaadin-date-picker-styles.js

@@ -1,30 +0,0 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const datePicker = css`
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-calendar);
-  }
-
-  [part='clear-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-
-  @media (max-width: 450px), (max-height: 450px) {
-    [part='overlay-content'] {
-      height: 70vh;
-    }
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
-    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-  }
-
-  :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
-    --_lumo-text-field-overflow-mask-image: none;
-  }
-`;
-
-registerStyles('vaadin-date-picker', [inputFieldShared, datePicker], { moduleId: 'lumo-date-picker' });

package/theme/lumo/vaadin-date-picker-year-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';

package/theme/lumo/vaadin-date-picker-year-styles.js

@@ -1,32 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-date-picker-year',
-  css`
-    :host([current]) [part='year-number'] {
-      color: var(--lumo-primary-text-color);
-    }
-
-    :host(:not([current])) [part='year-number'],
-    [part='year-separator'] {
-      opacity: var(--_lumo-date-picker-year-opacity, 0.7);
-      transition: 0.2s opacity;
-    }
-
-    [part='year-number'],
-    [part='year-separator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50%;
-      transform: translateY(-50%);
-    }
-
-    [part='year-separator']::after {
-      color: var(--lumo-disabled-text-color);
-      content: '\\2022';
-    }
-  `,
-  { moduleId: 'lumo-date-picker-year' },
-);

package/theme/lumo/vaadin-date-picker.d.ts

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-date-picker.js';

package/theme/lumo/vaadin-date-picker.js

@@ -1,5 +0,0 @@
-import './vaadin-date-picker-overlay-styles.js';
-import './vaadin-date-picker-overlay-content-styles.js';
-import './vaadin-month-calendar-styles.js';
-import './vaadin-date-picker-styles.js';
-import '../../src/vaadin-date-picker.js';

package/theme/lumo/vaadin-month-calendar-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -1,158 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-month-calendar',
-  css`
-    :host {
-      -webkit-user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      user-select: none;
-      font-size: var(--lumo-font-size-m);
-      color: var(--lumo-body-text-color);
-      text-align: center;
-      padding: 0 var(--lumo-space-xs);
-      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
-      --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
-    }
-
-    /* Month header */
-
-    [part='month-header'] {
-      color: var(--lumo-header-text-color);
-      font-size: var(--lumo-font-size-l);
-      line-height: 1;
-      font-weight: 500;
-      margin-bottom: var(--lumo-space-m);
-    }
-
-    /* Week days and numbers */
-
-    [part='weekdays'],
-    [part='weekday'],
-    [part='week-number'] {
-      font-size: var(--lumo-font-size-xxs);
-      line-height: 1;
-      color: var(--lumo-secondary-text-color);
-    }
-
-    [part='weekdays'] {
-      margin-bottom: var(--lumo-space-s);
-    }
-
-    [part='weekday']:empty,
-    [part='week-number'] {
-      width: var(--lumo-size-xs);
-    }
-
-    /* Date and week number cells */
-
-    [part~='date'],
-    [part='week-number'] {
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      height: var(--lumo-size-m);
-      position: relative;
-    }
-
-    [part~='date'] {
-      transition: color 0.1s;
-    }
-
-    [part~='date']:not(:empty) {
-      cursor: var(--lumo-clickable-cursor);
-    }
-
-    :host([week-numbers]) [part='weekday']:not(:empty),
-    :host([week-numbers]) [part~='date'] {
-      width: calc((100% - var(--lumo-size-xs)) / 7);
-    }
-
-    /* Today date */
-
-    [part~='date'][part~='today'] {
-      color: var(--_selection-color-text);
-    }
-
-    /* Focused date */
-
-    [part~='date']::before {
-      content: '';
-      position: absolute;
-      z-index: -1;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      min-width: 2em;
-      min-height: 2em;
-      width: 80%;
-      height: 80%;
-      max-height: 100%;
-      max-width: 100%;
-      border-radius: var(--lumo-border-radius-m);
-    }
-
-    [part~='date'][part~='focused']::before {
-      box-shadow:
-        0 0 0 1px var(--lumo-base-color),
-        0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
-    }
-
-    :host(:not([focused])) [part~='date'][part~='focused']::before {
-      animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
-    }
-
-    @keyframes vaadin-date-picker-month-calendar-focus-date {
-      50% {
-        box-shadow:
-          0 0 0 1px var(--lumo-base-color),
-          0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
-      }
-    }
-
-    [part~='date']:not(:empty):not([part~='disabled']):not([part~='selected']):hover::before {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
-    [part~='date'][part~='selected'] {
-      color: var(--lumo-primary-contrast-color);
-    }
-
-    [part~='date'][part~='selected']::before {
-      background-color: var(--_selection-color);
-    }
-
-    [part~='date'][part~='disabled'] {
-      color: var(--lumo-disabled-text-color);
-    }
-
-    @media (pointer: coarse) {
-      [part~='date']:hover:not([part~='selected'])::before,
-      :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before {
-        display: none;
-      }
-
-      [part~='date']:not(:empty):not([part~='disabled']):active::before {
-        display: block;
-      }
-
-      :host(:not([focus-ring])) [part~='date'][part~='selected']::before {
-        box-shadow: none;
-      }
-    }
-    /* Disabled */
-
-    :host([disabled]) * {
-      color: var(--lumo-disabled-text-color) !important;
-    }
-  `,
-  { moduleId: 'lumo-month-calendar' },
-);