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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -40,15 +40,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.2.0-alpha9",
-    "@vaadin/button": "24.2.0-alpha9",
-    "@vaadin/component-base": "24.2.0-alpha9",
-    "@vaadin/field-base": "24.2.0-alpha9",
-    "@vaadin/input-container": "24.2.0-alpha9",
-    "@vaadin/overlay": "24.2.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
+    "@vaadin/a11y-base": "24.2.0-beta1",
+    "@vaadin/button": "24.2.0-beta1",
+    "@vaadin/component-base": "24.2.0-beta1",
+    "@vaadin/field-base": "24.2.0-beta1",
+    "@vaadin/input-container": "24.2.0-beta1",
+    "@vaadin/overlay": "24.2.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

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

@@ -3,10 +3,11 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
+import './vaadin-date-picker-overlay.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
@@ -45,6 +46,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DatePickerMixin
@@ -126,6 +128,6 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
   }
 }
 
-customElements.define(DatePickerLight.is, DatePickerLight);
+defineCustomElement(DatePickerLight);
 
 export { DatePickerLight };

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

@@ -487,41 +487,6 @@ export const DatePickerMixin = (subclass) =>
       this.opened = false;
     }
 
-    /**
-     * Override Polymer lifecycle callback to dispatch `change` event if needed.
-     * This is necessary to ensure `change` is fired after `value-changed`.
-     *
-     * @param {!Object} currentProps Current accessor values
-     * @param {?Object} changedProps Properties changed since the last call
-     * @param {?Object} oldProps Previous values for each changed property
-     * @protected
-     * @override
-     */
-    _propertiesChanged(currentProps, changedProps, oldProps) {
-      super._propertiesChanged(currentProps, changedProps, oldProps);
-
-      if ('value' in changedProps && this.__dispatchChange) {
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-        this.__dispatchChange = false;
-      }
-    }
-
-    /**
-     * Override LitElement lifecycle callback to dispatch `change` event if needed.
-     * This is necessary to ensure `change` is fired after `value-changed`.
-     *
-     * @protected
-     * @override
-     */
-    updated(props) {
-      super.updated(props);
-
-      if (props.has('value') && this.__dispatchChange) {
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-        this.__dispatchChange = false;
-      }
-    }
-
     /**
      * Opens the dropdown.
      */
@@ -587,6 +552,34 @@ export const DatePickerMixin = (subclass) =>
       });
     }
 
+    /**
+     * @param {string} dateString
+     * @private
+     */
+    __parseDate(dateString) {
+      if (!this.i18n.parseDate) {
+        return;
+      }
+
+      let dateObject = this.i18n.parseDate(dateString);
+      if (dateObject) {
+        dateObject = parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
+      }
+      if (dateObject && !isNaN(dateObject.getTime())) {
+        return dateObject;
+      }
+    }
+
+    /**
+     * @param {Date} dateObject
+     * @private
+     */
+    __formatDate(dateObject) {
+      if (this.i18n.formatDate) {
+        return this.i18n.formatDate(extractDateParts(dateObject));
+      }
+    }
+
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      *
@@ -596,9 +589,7 @@ export const DatePickerMixin = (subclass) =>
      */
     checkValidity() {
       const inputValue = this._inputElementValue;
-      const inputValid =
-        !inputValue ||
-        (!!this._selectedDate && inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+      const inputValid = !inputValue || (!!this._selectedDate && inputValue === this.__formatDate(this._selectedDate));
       const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
       let inputValidity = true;
@@ -659,6 +650,12 @@ export const DatePickerMixin = (subclass) =>
       this._shouldKeepFocusRing = focused && this._keyboardActive;
     }
 
+    /** @private */
+    __dispatchChange() {
+      this.validate();
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    }
+
     /**
      * Select date on user interaction and set the flag
      * to fire change event if necessary.
@@ -667,15 +664,14 @@ export const DatePickerMixin = (subclass) =>
      * @protected
      */
     _selectDate(dateToSelect) {
-      const value = this._formatISO(dateToSelect);
+      const prevValue = this.value;
 
-      // Only set flag if the value will change.
-      if (this.value !== value) {
+      this._selectedDate = dateToSelect;
+
+      if (prevValue !== this.value) {
         this.dirty = true;
-        this.__dispatchChange = true;
+        this.__dispatchChange();
       }
-
-      this._selectedDate = dateToSelect;
     }
 
     /** @private */
@@ -755,16 +751,12 @@ export const DatePickerMixin = (subclass) =>
       if (selectedDate === undefined || i18n === undefined) {
         return;
       }
-      const value = this._formatISO(selectedDate);
 
       if (!this.__keepInputValue) {
         this._applyInputValue(selectedDate);
       }
 
-      if (value !== this.value) {
-        this.validate();
-        this.value = value;
-      }
+      this.value = this._formatISO(selectedDate);
       this._ignoreFocusedDateChange = true;
       this._focusedDate = selectedDate;
       this._ignoreFocusedDateChange = false;
@@ -911,9 +903,9 @@ export const DatePickerMixin = (subclass) =>
       this._ignoreFocusedDateChange = true;
       if (this.i18n.parseDate) {
         const inputValue = this._inputElementValue || '';
-        const parsedDate = this._getParsedDate(inputValue);
+        const parsedDate = this.__parseDate(inputValue);
 
-        if (this._isValidDate(parsedDate)) {
+        if (parsedDate) {
           this._selectDate(parsedDate);
         } else {
           this.__keepInputValue = true;
@@ -948,8 +940,9 @@ export const DatePickerMixin = (subclass) =>
         this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
       }
       // No need to revalidate the value after `_selectedDateChanged`
-      // Needed in case the value was not changed: open and close dropdown.
-      if (!this.value) {
+      // Needed in case the value was not changed: open and close dropdown,
+      // especially on outside click. On Esc key press, do not validate.
+      if (!this.value && !this._keyboardActive) {
         this.validate();
       }
     }
@@ -976,12 +969,7 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _applyInputValue(date) {
-      this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
-    }
-
-    /** @private */
-    _getFormattedDate(formatDate, date) {
-      return formatDate(extractDateParts(date));
+      this._inputElementValue = date ? this.__formatDate(date) : '';
     }
 
     /** @private */
@@ -991,23 +979,14 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _isValidDate(d) {
-      return d && !isNaN(d.getTime());
-    }
-
     /**
      * Override an event listener from `InputConstraintsMixin`
-     * to have date-picker fully control when to fire a change event.
+     * to have date-picker fully control when to fire a change event
+     * and trigger validation.
+     *
      * @protected
      */
     _onChange(event) {
-      // For change event on the native <input> blur, after the input is cleared,
-      // we schedule change event to be dispatched on date-picker blur.
-      if (this._inputElementValue === '') {
-        this.__dispatchChange = true;
-      }
-
       event.stopPropagation();
     }
 
@@ -1044,8 +1023,7 @@ export const DatePickerMixin = (subclass) =>
       this.dirty = true;
       this._inputElementValue = '';
       this.value = '';
-      this.validate();
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      this.__dispatchChange();
     }
 
     /**
@@ -1156,13 +1134,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _getParsedDate(inputValue = this._inputElementValue) {
-      const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
-      const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
-      return parsedDate;
-    }
-
     /** @protected */
     _isClearButton(event) {
       return event.composedPath()[0] === this.clearElement;
@@ -1173,18 +1144,13 @@ export const DatePickerMixin = (subclass) =>
      * @protected
      */
     _onInput() {
-      if (!this.opened && this.inputElement.value && !this.autoOpenDisabled) {
+      if (!this.opened && this._inputElementValue && !this.autoOpenDisabled) {
         this.open();
       }
-      this._userInputValueChanged();
-    }
 
-    /** @private */
-    _userInputValueChanged() {
       if (this._inputElementValue) {
-        const parsedDate = this._getParsedDate();
-
-        if (this._isValidDate(parsedDate)) {
+        const parsedDate = this.__parseDate(this._inputElementValue);
+        if (parsedDate) {
           this._ignoreFocusedDateChange = true;
           if (!dateEquals(parsedDate, this._focusedDate)) {
             this._focusedDate = parsedDate;

package/src/vaadin-date-picker-month-scroller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { dateAfterXMonths } from './vaadin-date-picker-helper.js';
 import { InfiniteScroller } from './vaadin-infinite-scroller.js';
 
@@ -24,6 +25,7 @@ stylesTemplate.innerHTML = `
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends InfiniteScroller
  * @private
  */
@@ -58,4 +60,4 @@ class DatePickerMonthScroller extends InfiniteScroller {
   }
 }
 
-customElements.define(DatePickerMonthScroller.is, DatePickerMonthScroller);
+defineCustomElement(DatePickerMonthScroller);

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

@@ -4,12 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-button.js';
-import './vaadin-month-calendar.js';
 import './vaadin-date-picker-month-scroller.js';
 import './vaadin-date-picker-year-scroller.js';
 import './vaadin-date-picker-year.js';
+import './vaadin-month-calendar.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
@@ -20,6 +21,7 @@ registerStyles('vaadin-date-picker-overlay-content', overlayContentStyles, {
 });
 
 /**
+ * @customElement
  * @extends HTMLElement
  * @private
  */
@@ -65,4 +67,4 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   }
 }
 
-customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);
+defineCustomElement(DatePickerOverlayContent);

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
@@ -18,6 +19,7 @@ registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlaySt
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes PositionMixin
  * @mixes OverlayMixin
@@ -42,4 +44,4 @@ class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixi
   }
 }
 
-customElements.define(DatePickerOverlay.is, DatePickerOverlay);
+defineCustomElement(DatePickerOverlay);

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { InfiniteScroller } from './vaadin-infinite-scroller.js';
 
 const stylesTemplate = document.createElement('template');
@@ -45,6 +46,7 @@ stylesTemplate.innerHTML = `
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends InfiniteScroller
  * @private
  */
@@ -87,4 +89,4 @@ class DatePickerYearScroller extends InfiniteScroller {
   }
 }
 
-customElements.define(DatePickerYearScroller.is, DatePickerYearScroller);
+defineCustomElement(DatePickerYearScroller);

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

@@ -4,11 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @private
@@ -54,4 +56,4 @@ export class DatePickerYear extends ThemableMixin(PolymerElement) {
   }
 }
 
-customElements.define(DatePickerYear.is, DatePickerYear);
+defineCustomElement(DatePickerYear);

package/src/vaadin-date-picker.js

@@ -7,6 +7,7 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -123,6 +124,7 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -206,6 +208,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
     this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
@@ -241,6 +244,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   }
 }
 
-customElements.define(DatePicker.is, DatePicker);
+defineCustomElement(DatePicker);
 
 export { DatePicker };

package/src/vaadin-month-calendar.js

@@ -5,6 +5,7 @@
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
@@ -15,6 +16,7 @@ registerStyles('vaadin-month-calendar', monthCalendarStyles, {
 });
 
 /**
+ * @customElement
  * @extends HTMLElement
  * @private
  */
@@ -170,4 +172,4 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   }
 }
 
-customElements.define(MonthCalendar.is, MonthCalendar);
+defineCustomElement(MonthCalendar);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -360,7 +360,7 @@
         },
         {
           "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/24.2.0-alpha9/#/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\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-date-picker-light) element.\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/24.2.0-alpha9/#/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/24.2.0-alpha9/#/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`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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.",
+          "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/24.2.0-beta1/#/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\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta1/#/elements/vaadin-date-picker-light) element.\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/24.2.0-beta1/#/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/24.2.0-beta1/#/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`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -170,7 +170,7 @@
         },
         {
           "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/24.2.0-alpha9/#/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\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-date-picker-light) element.\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/24.2.0-alpha9/#/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/24.2.0-alpha9/#/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`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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.",
+          "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/24.2.0-beta1/#/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\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta1/#/elements/vaadin-date-picker-light) element.\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/24.2.0-beta1/#/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/24.2.0-beta1/#/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`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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.",
           "extension": true,
           "attributes": [
             {