@vaadin/date-picker 25.0.0-alpha5 → 25.0.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha5",
+  "version": "25.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha5",
-    "@vaadin/button": "25.0.0-alpha5",
-    "@vaadin/component-base": "25.0.0-alpha5",
-    "@vaadin/field-base": "25.0.0-alpha5",
-    "@vaadin/input-container": "25.0.0-alpha5",
-    "@vaadin/overlay": "25.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
+    "@vaadin/a11y-base": "25.0.0-alpha7",
+    "@vaadin/button": "25.0.0-alpha7",
+    "@vaadin/component-base": "25.0.0-alpha7",
+    "@vaadin/field-base": "25.0.0-alpha7",
+    "@vaadin/input-container": "25.0.0-alpha7",
+    "@vaadin/overlay": "25.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha5",
-    "@vaadin/test-runner-commands": "25.0.0-alpha5",
+    "@vaadin/chai-plugins": "25.0.0-alpha7",
+    "@vaadin/test-runner-commands": "25.0.0-alpha7",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
+  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
 }

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

@@ -31,19 +31,19 @@ export const overlayContentStyles = css`
     [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));
+      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));
+      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);
+      background: var(--vaadin-color);
+      color: var(--vaadin-background-color);
     }
 
     [hidden] {
@@ -58,23 +58,23 @@ 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);
     }
 
     ::slotted([slot='years']) {
       visibility: hidden;
-      background: var(--vaadin-date-picker-year-scroller-background, var(--_vaadin-background-container));
+      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));
       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));
+      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: 1em;
       height: 1em;
       position: absolute;
@@ -98,12 +98,12 @@ 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));
     }
 
     :host([fullscreen]) [part='toolbar'] {
       grid-area: header;
-      border-bottom: 1px solid var(--_vaadin-border-color);
+      border-bottom: 1px solid var(--vaadin-border-color);
     }
   }
 `;

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

@@ -22,7 +22,7 @@ export const datePickerYearStyles = css`
     }
 
     :host([current]) [part='year-number'] {
-      color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--_vaadin-color-strong));
+      color: var(--vaadin-date-picker-year-scroller-current-year-color, var(--vaadin-color));
     }
   }
 `;

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

@@ -14,7 +14,7 @@ export const monthCalendarStyles = css`
     }
 
     [part='month-header'] {
-      color: var(--vaadin-date-picker-month-header-color, var(--_vaadin-color-strong));
+      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;
@@ -60,10 +60,7 @@ 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)));
     }
 
     [part~='weekday'],
@@ -76,7 +73,7 @@ export const monthCalendarStyles = css`
     }
 
     [part~='date'] {
-      border-radius: var(--vaadin-date-picker-date-border-radius, var(--_vaadin-radius-m));
+      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);
@@ -99,21 +96,21 @@ export const monthCalendarStyles = css`
     }
 
     [part~='today'] {
-      color: var(--vaadin-date-picker-date-today-color, var(--_vaadin-color-strong));
+      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: 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-strong));
+      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-subtle));
+      color: var(--vaadin-date-picker-date-disabled-color, var(--vaadin-color-disabled));
       opacity: 0.7;
     }
 

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

@@ -12,7 +12,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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 { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
@@ -23,7 +23,7 @@ import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-cont
  * @private
  */
 class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
+  LumoInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-date-picker-overlay-content';

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

@@ -8,7 +8,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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 { datePickerOverlayStyles } from './styles/vaadin-date-picker-overlay-core-styles.js';
 import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
@@ -24,7 +24,7 @@ import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
  * @private
  */
 class DatePickerOverlay extends DatePickerOverlayMixin(
-  DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  DirMixin(LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-date-picker-overlay';

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

@@ -6,7 +6,7 @@
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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';
 
@@ -19,7 +19,7 @@ import { datePickerYearStyles } from './styles/vaadin-date-picker-year-core-styl
  * @mixes DatePickerYearMixin
  * @private
  */
-export class DatePickerYear extends CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))) {
+export class DatePickerYear extends LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-date-picker-year';
   }

package/src/vaadin-date-picker.js

@@ -16,7 +16,7 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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 { datePickerStyles } from './styles/vaadin-date-picker-core-styles.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
@@ -145,7 +145,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * @mixes DatePickerMixin
  */
 class DatePicker extends DatePickerMixin(
-  InputControlMixin(CSSInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))),
+  InputControlMixin(LumoInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-date-picker';
@@ -207,6 +207,7 @@ class DatePicker extends DatePickerMixin(
 
       <vaadin-date-picker-overlay
         id="overlay"
+        .owner="${this}"
         ?fullscreen="${this._fullscreen}"
         ?week-numbers="${this.showWeekNumbers}"
         theme="${ifDefined(this._theme)}"

package/src/vaadin-infinite-scroller.js

@@ -21,15 +21,10 @@ template.innerHTML = `
       height: 100%;
       overflow: auto;
       outline: none;
-      -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
       scrollbar-width: none;
     }
 
-    #scroller.notouchscroll {
-      -webkit-overflow-scrolling: auto;
-    }
-
     #scroller::-webkit-scrollbar {
       display: none;
     }
@@ -157,17 +152,6 @@ export class InfiniteScroller extends HTMLElement {
       this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
       this._scrollDisabled = false;
     }
-
-    if (this._mayHaveMomentum) {
-      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
-      this.$.scroller.classList.add('notouchscroll');
-      this._mayHaveMomentum = false;
-
-      setTimeout(() => {
-        // Restore -webkit-overflow-scrolling: touch; after a small delay.
-        this.$.scroller.classList.remove('notouchscroll');
-      }, 10);
-    }
   }
 
   /** @protected */
@@ -291,7 +275,6 @@ export class InfiniteScroller extends HTMLElement {
 
     if (!this._preventScrollEvent) {
       this.dispatchEvent(new CustomEvent('custom-scroll', { bubbles: false, composed: true }));
-      this._mayHaveMomentum = true;
     }
     this._preventScrollEvent = false;
 

package/src/vaadin-month-calendar.js

@@ -6,7 +6,7 @@
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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 { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
@@ -16,7 +16,7 @@ import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends MonthCalendarMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class MonthCalendar extends MonthCalendarMixin(LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-month-calendar';
   }

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

@@ -40,7 +40,6 @@ registerStyles(
             + var(--lumo-space-s)
           );
       --vaadin-infinite-scroller-buffer-offset: 10%;
-      -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
     }
@@ -51,7 +50,6 @@ registerStyles(
       width: 57px;
       font-size: var(--lumo-font-size-s);
       box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
-      -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       cursor: var(--lumo-clickable-cursor);
     }

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

@@ -29,7 +29,6 @@ const datePickerOverlay = css`
     padding: 0;
     height: 100%;
     overflow: hidden;
-    -webkit-mask-image: none;
     mask-image: none;
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "25.0.0-alpha5",
+  "version": "25.0.0-alpha7",
   "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-alpha5/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\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-alpha5/#/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-alpha5/#/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-alpha7/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\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-alpha7/#/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-alpha7/#/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",
           "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-alpha5",
+  "version": "25.0.0-alpha7",
   "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-alpha5/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\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-alpha5/#/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-alpha5/#/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-alpha7/#/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\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\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-alpha7/#/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-alpha7/#/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",
           "extension": true,
           "attributes": [
             {