@vaadin/date-picker 25.0.0-alpha9 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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-alpha9",
-    "@vaadin/button": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/field-base": "25.0.0-alpha9",
-    "@vaadin/input-container": "25.0.0-alpha9",
-    "@vaadin/overlay": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/button": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/field-base": "25.0.0-beta1",
+    "@vaadin/input-container": "25.0.0-beta1",
+    "@vaadin/overlay": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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`
@@ -24,7 +24,7 @@ export const datePickerStyles = css`
     text-align: left;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-calendar);
   }
 `;

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`
@@ -29,9 +29,9 @@ export const overlayContentStyles = css`
 
   [part='years-toggle-button'] {
     display: inline-flex;
-    border: var(--vaadin-button-border, var(--vaadin-button-border-width, 1px) solid transparent);
+    align-items: center;
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
-    color: var(--vaadin-button-text-color, var(--_vaadin-button-text-color));
+    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);
@@ -41,7 +41,7 @@ export const overlayContentStyles = css`
   }
 
   :host([years-visible]) [part='years-toggle-button'] {
-    background: var(--vaadin-color);
+    background: var(--vaadin-text-color);
     color: var(--vaadin-background-color);
   }
 
@@ -57,7 +57,7 @@ export const overlayContentStyles = css`
   }
 
   :host([desktop]) ::slotted([slot='months']) {
-    border-bottom: 1px solid var(--vaadin-border-color);
+    border-bottom: 1px solid var(--vaadin-border-color-secondary);
   }
 
   ::slotted([slot='years']) {
@@ -65,7 +65,8 @@ export const overlayContentStyles = css`
     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));
+    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);
@@ -73,7 +74,7 @@ export const overlayContentStyles = css`
 
   ::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));
+    border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-secondary));
     width: 16px;
     height: 16px;
     position: absolute;
@@ -97,11 +98,11 @@ export const overlayContentStyles = css`
     display: flex;
     grid-area: toolbar;
     justify-content: space-between;
-    padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding));
+    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);
+    border-bottom: 1px solid var(--vaadin-border-color-secondary);
   }
 `;

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`
@@ -18,9 +18,10 @@ export const datePickerYearStyles = css`
     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-color));
+    color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--vaadin-text-color));
   }
 `;

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

@@ -3,17 +3,17 @@
  * 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`
   :host {
     display: block;
-    padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));
+    padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s));
   }
 
   [part='month-header'] {
-    color: var(--vaadin-date-picker-month-header-color, var(--vaadin-color));
+    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;
@@ -33,7 +33,7 @@ export const monthCalendarStyles = css`
   }
 
   [part~='weekday'] {
-    color: var(--vaadin-date-picker-weekday-color, inherit);
+    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;
@@ -46,7 +46,7 @@ export const monthCalendarStyles = css`
   }
 
   [part~='week-number'] {
-    color: var(--vaadin-date-picker-week-number-color, inherit);
+    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%;
@@ -59,7 +59,10 @@ export const monthCalendarStyles = css`
     content: '';
     height: 1px;
     flex: 1;
-    background: var(--vaadin-date-picker-week-divider-color, var(--vaadin-divider-color, var(--vaadin-border-color)));
+    background: var(
+      --vaadin-date-picker-week-divider-color,
+      var(--vaadin-divider-color, var(--vaadin-border-color-secondary))
+    );
   }
 
   [part~='weekday'],
@@ -95,7 +98,7 @@ export const monthCalendarStyles = css`
   }
 
   [part~='today'] {
-    color: var(--vaadin-date-picker-date-today-color, var(--vaadin-color));
+    color: var(--vaadin-date-picker-date-today-color, var(--vaadin-text-color));
   }
 
   [part~='selected'] {
@@ -103,13 +106,13 @@ export const monthCalendarStyles = css`
   }
 
   [part~='selected']::after {
-    background: var(--vaadin-date-picker-date-selected-background, var(--vaadin-color));
+    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-color-disabled));
+    color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-text-color-disabled));
     opacity: 0.7;
   }
 

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 {
@@ -304,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.
@@ -473,6 +471,7 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /**
+     * @param {FocusOptions=} options
      * @protected
      * @override
      */
@@ -913,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);
     }
 
@@ -1033,7 +1032,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;
       }
 
@@ -1121,7 +1120,7 @@ export const DatePickerMixin = (subclass) =>
     /**
      * Override an event listener from `KeyboardMixin`.
      *
-     * @param {!KeyboardEvent} _event
+     * @param {!KeyboardEvent} event
      * @protected
      * @override
      */

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';
 
 /**
@@ -33,6 +33,12 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
     return overlayContentStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

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.
@@ -16,7 +16,6 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styl
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
- * @mixes DatePickerYearMixin
  * @private
  */
 export class DatePickerYear extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {

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

@@ -78,37 +78,49 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * -------------------------------|----------------------------|---------
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  *
- * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
- *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
- *
- * Part name        | Description
- * -----------------|--------------------
- * `toggle-button`  | Toggle button
- * `backdrop`       | Backdrop of the overlay
- * `overlay`        | The overlay container
- * `content`        | The overlay content
- *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute      | Description
- * ---------------|----------------------------------------------
- * `opened`       | Set when the date selector overlay is opened
- * `week-numbers` | Set when week numbers are shown in the calendar
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `backdrop`           | Backdrop of the overlay
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `opened`             | Set when the overlay is opened
+ * `week-numbers`       | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *
  * 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 +161,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';
 
 /**
@@ -42,37 +42,49 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * -------------------------------|----------------------------|---------
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  *
- * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `backdrop`           | Backdrop of the overlay
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
  *
- * Part name        | Description
- * -----------------|--------------------
- * `toggle-button`  | Toggle button
- * `backdrop`       | Backdrop of the overlay
- * `overlay`        | The overlay container
- * `content`        | The overlay content
+ * The following state attributes are available for styling:
  *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute      | Description
- * ---------------|----------------------------------------------
- * `opened`       | Set when the date selector overlay is opened
- * `week-numbers` | Set when week numbers are shown in the calendar
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `opened`             | Set when the overlay is opened
+ * `week-numbers`       | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *
  * 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 +125,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
@@ -196,8 +205,8 @@ class DatePicker extends DatePickerMixin(
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div part="toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div part="field-button toggle-button" slot="suffix" aria-hidden="true" @click="${this._toggle}"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -264,7 +273,7 @@ class DatePicker extends DatePickerMixin(
 
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
 
-    const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
+    const toggleButton = this.shadowRoot.querySelector('[part="field-button toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
 
@@ -276,7 +285,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';